Bläddra i källkod

Merge branch 'feature_20241120_图像识别' into uat(dev)

# Conflicts:
#	src/views/week/index.vue
zhujindu 9 månader sedan
förälder
incheckning
09dba5f416

+ 5 - 4
src/components/imageAIVerifyErr.vue

@@ -18,7 +18,7 @@
           <div class="AIVerify">
             <span style="color: red">{{ contentMessage }}</span>
           </div>
-          <template v-if="shotsNum >= 3">
+          <template v-if="shotsNum >= maxNum">
             <div class="feedbackMessage">
               <div class="label">若图像识别不正确,可在下表反馈:</div>
               <div class="value">
@@ -33,11 +33,11 @@
           </template>
           <div class="uploadBtnAIVerify">
             <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
-            <div v-if="shotsNum >= 3" class="stillUploadAIVerify" @click="confirmUpload">
+            <div v-if="shotsNum >= maxNum" class="stillUploadAIVerify" @click="confirmUpload">
               仍要上传
             </div>
           </div>
-          <template v-if="shotsNum >= 3">
+          <template v-if="shotsNum >= maxNum">
             <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
               <van-icon name="question-o" />上传后作为本店标准店招,未来每次拜访时校验。
             </div>
@@ -156,6 +156,7 @@ export default {
       createStoreUrl: '', //	建店时店招
       lastVisitUrl: '', //	上次拜访时店招
       storeIDCardUrl: '', //	门店身份证
+      maxNum: 3,
     };
   },
   methods: {
@@ -231,7 +232,7 @@ export default {
     // isUpdate:是否更新店招照片,只有门店店招需要更新
     confirmUpload() {
       // 拜访店招 不合格或作弊三次先提示是否仍要上传,确认后在判断是否与历史照片一致
-      if (this.npkpiData.recognizeType == 1 && this.shotsNum >= 3) {
+      if (this.npkpiData.recognizeType == 1 && this.shotsNum >= this.maxNum) {
         this.comparisonImage();
       } else {
         this.$emit('close');

+ 17 - 0
src/router/index.js

@@ -681,6 +681,23 @@ const router = new VueRouter({
         },
       ],
     },
+    {
+      path: '/AIImage',
+      component: layout,
+      redirect: '/AIImage/list',
+      children: [
+        {
+          path: '/AIImage/list',
+          name: 'AIImage',
+          component: () => import('@/views/AIImage/list.vue'),
+        },
+        {
+          path: '/AIImageDetail',
+          name: 'AIImageDetail',
+          component: () => import('@/views/AIImage/AIImageDetail.vue'),
+        },
+      ],
+    },
   ],
 });
 export default router;

+ 342 - 0
src/views/AIImage/AIImageDetail.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="AIImageDetail">
+    <div class="message">
+      <div class="storeTitle">
+        <div class="storeName">{{ data.storeName }}</div>
+        <div class="storeCode">
+          (<span style="color: #0057ba">{{ data.storeCode }}</span
+          >)
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">门店类型:</div>
+        <div class="value">{{ data.storeType }}</div>
+      </div>
+      <div class="item">
+        <div class="label">地址:</div>
+        <div class="value">{{ data.storeAddress }}</div>
+      </div>
+      <div class="item">
+        <div class="label">拜访人:</div>
+        <div class="value">{{ data.visitName }}</div>
+      </div>
+      <div class="item">
+        <div class="label">拜访时间:</div>
+        <div class="value">{{ data.visitTime }}</div>
+      </div>
+      <div class="item">
+        <van-image
+          width="100%"
+          height="160"
+          :src="data.imageUrl"
+          @click="previewImgs(data.imageUrl)" />
+      </div>
+      <div class="item">
+        <div class="label">识别结果:</div>
+        <div class="value">{{ data.result }}</div>
+      </div>
+      <div class="item">
+        <div class="label">反馈不准确原因:</div>
+        <div class="value">{{ data.feedback }}</div>
+      </div>
+    </div>
+    <p class="titleText">反馈不一致原因</p>
+    <div class="feedbackReason">
+      <radioGroup :clueOptionList="customerClueItemList"></radioGroup>
+    </div>
+    <div class="confirmBtn"><van-button type="info">提交</van-button></div>
+  </div>
+</template>
+<script>
+import { ImagePreview } from 'vant';
+import radioGroup from './radioGroup.vue';
+export default {
+  name: 'AIImageDetail',
+  components: { radioGroup },
+  data() {
+    return {
+      data: {},
+      storeId: null,
+      customerClueItemList: [
+        {
+          searchValue: null,
+          createBy: 'admin',
+          createTime: '2024-12-18 13:55:04',
+          updateBy: '',
+          updateTime: null,
+          remark: '',
+          params: {},
+          pageSize: null,
+          pageNum: null,
+          customerClueItemId: 357,
+          customerClueId: 72,
+          customerClueInfoId: 263,
+          customerClueName: 'Ai识别是否正檐',
+          itemOptionParentId: null,
+          isMust: '0',
+          answerType: 'dx',
+          minTextLength: null,
+          answerValue: null,
+          sort: 1,
+          delFlag: null,
+          fileIdList: null,
+          customerClueOptionList: [
+            {
+              searchValue: null,
+              createBy: 'admin',
+              createTime: '2024-12-18 13:55:04',
+              updateBy: '',
+              updateTime: null,
+              remark: null,
+              params: {},
+              pageSize: null,
+              pageNum: null,
+              customerClueOptionId: 470,
+              customerClueItemId: 357,
+              customerClueOption: '是',
+              value: 'N',
+              checked: false,
+              customerClueItemList: [],
+            },
+            {
+              searchValue: null,
+              createBy: 'admin',
+              createTime: '2024-12-18 13:55:04',
+              updateBy: '',
+              updateTime: null,
+              remark: null,
+              params: {},
+              pageSize: null,
+              pageNum: null,
+              customerClueOptionId: 471,
+              customerClueItemId: 357,
+              customerClueOption: '否',
+              value: 'N',
+              checked: false,
+              customerClueItemList: [],
+            },
+          ],
+          fileInfoList: null,
+          max: false,
+          del: true,
+        },
+        {
+          searchValue: null,
+          createBy: 'admin',
+          createTime: '2024-12-18 13:55:04',
+          updateBy: '',
+          updateTime: null,
+          remark: '',
+          params: {},
+          pageSize: null,
+          pageNum: null,
+          customerClueItemId: 358,
+          customerClueId: 72,
+          customerClueInfoId: 263,
+          customerClueName: '处理情况',
+          itemOptionParentId: null,
+          isMust: '0',
+          answerType: 'dx',
+          minTextLength: null,
+          answerValue: null,
+          sort: 2,
+          delFlag: null,
+          fileIdList: null,
+          customerClueOptionList: [
+            {
+              searchValue: null,
+              createBy: 'admin',
+              createTime: '2024-12-18 13:55:04',
+              updateBy: '',
+              updateTime: null,
+              remark: null,
+              params: {},
+              pageSize: null,
+              pageNum: null,
+              customerClueOptionId: 472,
+              customerClueItemId: 358,
+              customerClueOption: '处理中',
+              value: 'N',
+              checked: false,
+              customerClueItemList: [
+                {
+                  searchValue: null,
+                  createBy: 'admin',
+                  createTime: '2024-12-18 13:55:04',
+                  updateBy: '',
+                  updateTime: null,
+                  remark: '请输入进度',
+                  params: {},
+                  pageSize: null,
+                  pageNum: null,
+                  customerClueItemId: 359,
+                  customerClueId: 72,
+                  customerClueInfoId: null,
+                  customerClueName: '处理进度',
+                  itemOptionParentId: 472,
+                  isMust: '0',
+                  answerType: 'wb',
+                  minTextLength: null,
+                  answerValue: null,
+                  sort: 3,
+                  delFlag: null,
+                  fileIdList: null,
+                  customerClueOptionList: [],
+                  fileInfoList: null,
+                  max: false,
+                  del: true,
+                },
+              ],
+            },
+            {
+              searchValue: null,
+              createBy: 'admin',
+              createTime: '2024-12-18 13:55:04',
+              updateBy: '',
+              updateTime: null,
+              remark: null,
+              params: {},
+              pageSize: null,
+              pageNum: null,
+              customerClueOptionId: 473,
+              customerClueItemId: 358,
+              customerClueOption: '已解决',
+              value: 'N',
+              checked: false,
+              customerClueItemList: [
+                {
+                  searchValue: null,
+                  createBy: 'admin',
+                  createTime: '2024-12-18 13:55:04',
+                  updateBy: '',
+                  updateTime: null,
+                  remark: '解决方案请输入10字以上',
+                  params: {},
+                  pageSize: null,
+                  pageNum: null,
+                  customerClueItemId: 360,
+                  customerClueId: 72,
+                  customerClueInfoId: null,
+                  customerClueName: '解决方案',
+                  itemOptionParentId: 473,
+                  isMust: '0',
+                  answerType: 'wb',
+                  minTextLength: 10,
+                  answerValue: null,
+                  sort: 3,
+                  delFlag: null,
+                  fileIdList: null,
+                  customerClueOptionList: [],
+                  fileInfoList: null,
+                  max: false,
+                  del: true,
+                },
+              ],
+            },
+          ],
+          fileInfoList: null,
+          max: false,
+          del: true,
+        },
+        {
+          searchValue: null,
+          createBy: 'admin',
+          createTime: '2024-12-18 13:54:13',
+          updateBy: 'admin',
+          updateTime: '2024-12-18 13:55:04',
+          remark: '',
+          params: {},
+          pageSize: null,
+          pageNum: null,
+          customerClueItemId: 361,
+          customerClueId: 72,
+          customerClueInfoId: 263,
+          customerClueName: '结果照片上传',
+          itemOptionParentId: null,
+          isMust: '1',
+          answerType: 'zp',
+          minTextLength: null,
+          answerValue: null,
+          sort: 4,
+          delFlag: null,
+          fileIdList: null,
+          customerClueOptionList: [],
+          fileInfoList: null,
+          max: false,
+          del: true,
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.storeId = this.$route.query.storeId;
+    this.getDeytail();
+  },
+  methods: {
+    getDeytail() {
+      this.toastLoading(0, '加载中...', true);
+      this.storeId;
+      setTimeout(() => {
+        this.toastLoading().clear();
+        this.data = {
+          storeName: '和兴建材',
+          storeCode: '123456',
+          storeType: '铂金店',
+          storeAddress:
+            '河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东',
+          visitName: '都雷闪',
+          visitTime: '2025-02-0614:41:53',
+          storeId: 882005,
+        };
+      }, 1000);
+    },
+    previewImgs(val) {
+      ImagePreview(val);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.AIImageDetail {
+  .message {
+    padding: 10px;
+    background: #fff;
+    .storeTitle {
+      display: flex;
+      font-size: 16px;
+      font-weight: 600;
+      padding: 5px 0;
+    }
+    .item {
+      display: flex;
+      font-size: 14px;
+      padding: 3px 0;
+      .label {
+        width: 80px;
+        text-align: right;
+      }
+      .value {
+        flex: 1;
+      }
+    }
+  }
+  .titleText {
+    padding: 10px 0;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+  }
+  .feedbackReason {
+    padding: 10px;
+    background: #fff;
+  }
+  .confirmBtn {
+    position: sticky;
+    bottom: 0;
+    padding-top: 20px;
+    button {
+      width: 100%;
+    }
+  }
+}
+</style>

+ 141 - 0
src/views/AIImage/list.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="AIImage">
+    <van-nav-bar class="navBar" title="图片识别异常反馈"> </van-nav-bar>
+    <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
+      <van-tab title="未反馈" name="0" :disabled="disabled"></van-tab>
+      <van-tab title="已反馈" name="1" :disabled="disabled"></van-tab>
+    </van-tabs>
+    <div class="content">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+        <div
+          class="list_item"
+          v-for="(item, index) in listData"
+          :key="index"
+          @click="toDetail(item)">
+          <div class="storeTitle">
+            <div class="storeName">{{ item.storeName }}</div>
+            <div class="storeCode">
+              (<span style="color: #0057ba">{{ item.storeCode }}</span
+              >)
+            </div>
+          </div>
+          <div class="item">
+            <div class="label">门店类型:</div>
+            <div class="value">{{ item.storeType }}</div>
+          </div>
+          <div class="item">
+            <div class="label">地址:</div>
+            <div class="value">{{ item.storeAddress }}</div>
+          </div>
+          <div class="item">
+            <div class="label">拜访人:</div>
+            <div class="value">{{ item.visitName }}</div>
+          </div>
+          <div class="item">
+            <div class="label">拜访时间:</div>
+            <div class="value">{{ item.visitTime }}</div>
+          </div>
+        </div>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'list',
+  data() {
+    return {
+      tabVal: 0,
+      disabled: false,
+      listData: [],
+      isLoading: false,
+    };
+  },
+  activated() {},
+  created() {
+    this.getList();
+  },
+  mounted() {},
+  methods: {
+    tabChange(tab) {
+      this.getList();
+    },
+    onRefresh() {},
+    getList() {
+      this.tabVal;
+      this.toastLoading(0, '加载中...', true);
+      setTimeout(() => {
+        this.toastLoading().clear();
+        this.isLoading = false;
+        this.listData = [
+          {
+            storeName: '和兴建材',
+            storeCode: '123456',
+            storeType: '铂金店',
+            storeAddress:
+              '河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东',
+            visitName: '都雷闪',
+            visitTime: '2025-02-0614:41:53',
+            storeId: 882005,
+          },
+          {
+            storeName: '和兴建材',
+            storeCode: '123456',
+            storeType: '铂金店',
+            storeAddress: '河南省新乡市长葛县中心小学东20米路东',
+            visitName: '都雷闪',
+            visitTime: '2025-02-0614:41:53',
+            storeId: 882005,
+          },
+        ];
+      }, 1000);
+    },
+    // 详情
+    toDetail(item) {
+      this.$router.push({
+        path: '/AIImageDetail',
+        query: {
+          storeId: item.storeId,
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.AIImage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .content {
+    flex: 1;
+    padding: 10px;
+    .list_item {
+      padding: 10px 16px;
+      box-sizing: border-box;
+      background: #fff;
+      border-radius: 5px;
+      margin-bottom: 10px;
+      .storeTitle {
+        display: flex;
+        font-size: 16px;
+        font-weight: 600;
+        padding: 5px 0;
+      }
+      .item {
+        display: flex;
+        font-size: 14px;
+        padding: 3px 0;
+        .label {
+          width: 80px;
+          text-align: right;
+        }
+        .value {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+</style>

+ 232 - 0
src/views/AIImage/radioGroup.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="radioGroup">
+    <template v-for="(val, ind) in clueOptionList">
+      <!-- <div class="title" v-if="val.customerClueName">
+          <span class="van-f-red" v-if="val.isMust == 0">*</span>
+          {{ val.customerClueName }}
+        </div> -->
+      <template v-if="val.answerType == 'dx'">
+        <div class="title" v-if="val.customerClueName">
+          <span class="van-f-red" v-if="val.isMust == 0">*</span>
+          {{ val.customerClueName }}
+        </div>
+        <van-radio-group v-model="val.searchValue" @change="radioGroupChange">
+          <template v-for="(item, index) in val.customerClueOptionList">
+            <van-radio :name="item.customerClueOptionId" @click="radioClick" :key="index">
+              {{ item.customerClueOption }}
+            </van-radio>
+            <radioGroup
+              :clueOptionList="item.customerClueItemList"
+              :parentOptionList="val"
+              :parentId="item.customerClueOptionId"
+              v-if="val.searchValue == item.customerClueOptionId"></radioGroup>
+          </template>
+        </van-radio-group>
+      </template>
+      <!-- 回答类型:wb-文本,sz-数字,rq-日期,zp-照片,dx-单选,bg-表格 -->
+      <template v-if="val.answerType == 'wb'">
+        <div class="title" v-if="val.customerClueName">
+          <span class="van-f-red" v-if="val.isMust == 0">*</span>
+          {{ val.customerClueName }}
+        </div>
+        <template v-if="parentOptionList.searchValue == val.itemOptionParentId">
+          <van-field
+            v-model="val.answerValue"
+            :placeholder="val.remark"
+            :minTextLength="val.minTextLength"
+            :error-message="val.remark"
+            :class="{
+              fieldInput: true,
+              rulesClass: val.answerValue != null && val.answerValue.length < val.minTextLength,
+            }" />
+          <span
+            class="rulesErrorMessage"
+            v-if="val.answerValue != null && val.answerValue.length < val.minTextLength">
+            {{ val.remark }}
+          </span>
+        </template>
+      </template>
+      <!-- 数字输入框 -->
+      <template v-if="val.answerType == 'sz'">
+        <div class="title" v-if="val.customerClueName">
+          <span class="van-f-red" v-if="val.isMust == 0">*</span>
+          {{ val.customerClueName }}
+        </div>
+        <van-field
+          class="fieldInput"
+          v-model="val.answerValue"
+          :placeholder="val.remark"
+          :minTextLength="val.minTextLength"
+          :error-message="val.remark"
+          type="number"></van-field>
+      </template>
+      <!-- 表格 -->
+      <template v-if="val.answerType == 'bg'">
+        <div class="title" v-if="val.customerClueName">
+          <span class="van-f-red" v-if="val.isMust == 0">*</span>
+          {{ val.customerClueName }}
+        </div>
+        <el-table :data="val.tableData.data" style="width: 100%; position: relative; left: -10px">
+          <el-table-column
+            v-for="(item, index) in val.tableData.title"
+            :prop="item.prop"
+            :label="item.label"
+            align="center">
+            <template slot-scope="scope">
+              <template v-if="item.answerType == 'text'">
+                {{ scope.row[item.prop] }}
+              </template>
+              <template v-if="item.answerType == 'wb'">
+                <van-field v-model="scope.row[item.prop]" />
+              </template>
+              <!-- 正整数 digit -->
+              <template v-if="item.answerType == 'sz'">
+                <van-field v-model="scope.row[item.prop]" type="digit" />
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: 'radioGroup',
+  props: {
+    clueOptionList: {
+      type: Array,
+      default: () => [],
+    },
+    parentOptionList: {
+      type: Object,
+      default: () => {},
+    },
+    parentId: {
+      type: [Number, null],
+      default: null,
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    clueOptionList: {
+      handler(val) {
+        val.forEach((item) => {
+          // bg表格数据存在remark
+          if (item.answerType == 'bg') {
+            this.$set(item, 'tableData', JSON.parse(item.remark));
+          }
+        });
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // console.log(this.clueOptionList);
+  },
+  methods: {
+    radioGroupChange(name) {
+      if (!name) return;
+      // console.log(name);
+      // console.log(this.clueOptionList);
+      // 如果选中的数据有父级,将父级数据修改为选中状态
+      if (this.parentOptionList && this.parentId) {
+        this.$set(this.parentOptionList, 'searchValue', this.parentId);
+      }
+      // 获取选中数据
+      let clueOptionList = this.clueOptionList.find((val) => val.searchValue == name);
+      let activaRadio = clueOptionList.customerClueOptionList.find(
+        (val) => val.customerClueOptionId == name
+      );
+      // 修改选中状态
+      this.$set(activaRadio, 'value', 'Y');
+
+      // 过滤未选中的数据
+      let exceptItself = clueOptionList.customerClueOptionList.filter(
+        (val) => val.customerClueOptionId !== name
+      );
+      // 删除未选中数据状态兄弟级和子级
+      // console.log(exceptItself);
+      this.toggleOtheChildren(exceptItself);
+    },
+    toggleOtheChildren(exceptItself) {
+      if (!exceptItself) return;
+      exceptItself.forEach((val) => {
+        this.$set(val, 'value', 'N');
+        if (val.customerClueItemList && val.customerClueItemList[0]) {
+          this.$set(val.customerClueItemList[0], 'searchValue', null);
+          if (
+            val.customerClueItemList[0] &&
+            val.customerClueItemList[0].customerClueOptionList.length
+          ) {
+            this.toggleOtheChildren(val.customerClueItemList[0].customerClueOptionList);
+          }
+        }
+      });
+    },
+    radioClick(event) {
+      // console.log(event);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.radioGroup {
+  font-size: 15px;
+  .van-radio {
+    padding: 5px 0;
+  }
+  .van-radio-group {
+    padding-left: 20px;
+  }
+  .van-cell {
+    padding: 10px 0;
+    /* font-size: 14px; */
+  }
+  .van-cell::after {
+    border: 0;
+  }
+  .van-field {
+    padding: 0;
+    width: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: unset;
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid #cdc8c8;
+  }
+  .van-field__control {
+    /* padding: 0 10px; */
+    /* margin: 5px 0; */
+    padding-left: 10px;
+  }
+  .van-radio__label {
+    /* font-size: 14px; */
+  }
+  .van-f-red {
+    font-size: 14px;
+  }
+  .rulesClass {
+    border: 1px solid #ff0505;
+  }
+  .fieldInput {
+    /* height: 38px; */
+  }
+  .rulesErrorMessage {
+    color: red;
+    font-size: 12px;
+    padding: 3px 0;
+  }
+  .uploadImg {
+    width: 50px;
+  }
+  .el-table {
+    .el-table__cell {
+      padding: 3px 0;
+    }
+  }
+}
+</style>

+ 2 - 2
src/views/storeManagement/storeAdd.vue

@@ -867,8 +867,6 @@ export default {
     this.dictTypeQGJZFormShow = false;
     this.dictTypeSJSFormShow = false;
     this.dictTypeFormShow = false;
-    // 拍照次数重置
-    store.dispatch('setShotsNum', 0);
   },
   watch: {
     $route(to, from) {
@@ -951,6 +949,8 @@ export default {
         this.getLocation();
       });
     });
+    // 拍照次数重置
+    store.dispatch('setShotsNum', 0);
   },
   methods: {
     addressFns(val) {

+ 16 - 0
src/views/week/index.vue

@@ -75,6 +75,22 @@
             </template>
           </van-cell>
         </van-cell-group>
+        <!--拜访照片识别异常反馈-->
+        <van-cell-group inset class="mtb10" v-if="false">
+          <van-cell title="拜访照片识别异常反馈" to="/AIImage">
+            <template #icon>
+              <van-icon :name="history" class="zicon" />
+            </template>
+            <template #title>
+              <span>拜访照片识别异常反馈</span>
+              &nbsp;
+              <!-- <van-tag type="danger" v-if="customerClueNum > 0">({{ customerClueNum }})</van-tag> -->
+            </template>
+            <template #right-icon>
+              <van-icon name="arrow" size="16" />
+            </template>
+          </van-cell>
+        </van-cell-group>
         <!--      汇报类-->
         <van-cell-group inset class="mtb10">
           <van-cell