storevisit-ui-mobile/src/views/home/hintTabPage/visitPage.vue

<template>
  <div class="visitPage" v-if="resData">
    <div class="storeType" v-for="(item, index) in contentData" :key="index">
      <div class="title" :style="{ background: item.bagColor }">{{ item.title }}</div>
      <div class="itemContent">
        <div class="temList" v-for="(list, ind) in item.visitDetail" :key="ind">
          <div class="itemLeft">
            <div class="label">{{ list.leftTable }}</div>
            <div class="label">
              {{ resData[item.titleProp][list.leftProp] }}
            </div>
          </div>
          <div class="itemRight">
            <div class="label">{{ list.rightTable }}</div>
            <div class="label" :style="labelStyle(list)" @click="onClick(item, list)">
              {{ resData[item.titleProp][list.rightProp] }}{{ list.rightUnit }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-if="maskShow"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
export default {
  name: 'visitPage',
  props: {
    // 折叠数据label
    contentData: {
      type: Array,
      default: [],
    },
    // 遮罩层
    maskShow: {
      type: Boolean,
      default: false,
    },
    // 接口返回折叠数据
    resData: {
      type: Object,
      default: () => {},
    },
    // 用户等级
    empLevel: {
      type: String,
    },
    // 来源类型 'noVisit':未拜访; 'createStore':建店;
    fromType: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    labelStyle(list) {
      return {
        'text-decoration': list.rightIsClick ? 'underline' : 'none',
        color: list.rightIsClick ? '#0057ba' : '#666666',
      };
    },
    // 跳转详情
    onClick(item, list) {
      // 等级3（销售员）：点击未拜访；进入未拜访列表（noVIsit）；点击建店：进入我的-我的客户（storemanagementlist）
      // 等级2或1（销售部主管和大区负责人）：进入统页面（hintDetail）
      if (this.empLevel == '3') {
        if (this.fromType == 'noVisit') {
          // 进入未拜访列表（noVIsit）
          this.$router.push({ path: '/noVisit', query: { activeName: item.titleProp } });
        } else if (this.fromType == 'createStore') {
          // 进入我的-我的客户（storemanagementlist）
          // 1：未完工；2：未结案
          let storeStatus = list.rightTable.indexOf('未完工') != -1 ? '1' : '2';
          localStorage.setItem('storeStatus', storeStatus);
          this.$router.push({ path: '/storemanagementlist', query: { storeStatus: storeStatus } });
        }
      } else {
        // 销售部主管和大区负责人跳转统计页面
        this.$router.push({ path: '/hintDetail', query: { fromType: this.fromType } });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.visitPage {
  position: relative;
  .storeType {
    display: flex;
    padding: 8px 0;
    .title {
      color: #fff;
      height: 21px;
      margin-right: 10px;
      width: 50px;
      text-align: center;
      line-height: 21px;
      border-radius: 2px;
    }
    .itemContent {
      /* display: flex; */
      color: #666666;
      flex: 1;
      .temList {
        display: flex;
        justify-content: space-between;
        .itemLeft {
          display: flex;
          flex: 1;
        }
        .itemRight {
          width: 110px;
          display: flex;
        }
      }
    }
  }
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>