storevisit-ui-mobile-agent/src/views/home/visitHistory.vue

<template>
  <!-- 拜访历史 -->
  <div class="visitHistory">
    <div class="headers">
      <van-nav-bar class="navBar" :title="$route.meta.title" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="container">
      <div class="card" v-if="data">
        <div class="title f-blue">
          {{ data.storeName }}(<span style="color: #0057ba">{{ data.storeCode }}</span
          >)
        </div>
        <div class="info">客户分类：{{ data.storeCategory }}</div>
        <div class="info">实际经营者：{{ data.storeCategory }}</div>
        <div class="info">开户日期：{{ data.storeCategory }}</div>
        <div class="info">是否冻结：{{ data.storeCategory }}</div>
        <div class="info">是否关户：{{ data.storeCategory }}</div>
      </div>
      <div style="color: #999; font-size: 12px; padding: 10px; background-color: #f5f5f5">
        <van-icon name="info-o" />&nbsp;历史拜访。
      </div>
      <div class="card">
        <div
          class="info"
          v-for="(item, index) in list"
          :key="index"
          @click="examineHistory(item, index)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'visitPage',
  data() {
    return {
      data: null,
      storeId: '',
    };
  },
  created() {
    this.storeId = this.$route.query.storeId;
  },
  mounted() {},
  methods: {
    // 查看拜访历史详情
    examineHistory(item) {},
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.visitHistory {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .container {
    overflow-y: auto;
    flex: 1;
    margin-bottom: 10px;
    background-color: white;
  }
}
.card {
  background: #fff;
  box-sizing: border-box;
  padding: 10px 16px;
  .title {
    line-height: 32px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  .subtitle {
    line-height: 24px;
    font-size: 14px;
    color: #7b7b7b;
    .status {
      float: right;
    }
  }
  .info {
    font-size: 14px;
    color: #484848;
    padding: 14px;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
    .arrow {
      float: right;
      display: inline-block;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      background: #0057ba;
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      position: absolute;
      margin-top: -10px;
      right: 0;
      top: 50%;
    }
  }
  .info1 {
    font-size: 14px;
    color: #666;
    line-height: 18px;
    padding: 4px 0;
    position: relative;
    .arrow {
      float: right;
      display: inline-block;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      background: #0057ba;
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      margin-top: 9px;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10px;
    }
  }
}
.card .f-blue {
  color: #0057ba;
}
</style>