storevisit-ui-mobile/src/views/AIImage/list.vue

<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>