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

<template>
  <div class="visitCollapse">
    <div class="visitCollapse-box" v-for="(item, index) in visitCollapse" :key="index">
      <div class="targetName" :style="setTargetNameStyle(item.targetName)" v-if="item.targetName">
        {{ item.targetName }}
      </div>
      <div class="child" v-if="item.children">
        <div :class="['children-item']" v-for="(item1, index1) in item.children" :key="index1">
          <div class="child-targetName" v-if="item1.targetName">
            {{ item1.targetName }}
          </div>
          <template v-if="item1.children">
            <div class="target-box">
              <div
                :class="['target', item2.targetName == '未拜访' ? 'clickTarget' : '']"
                v-for="(item2, index2) in item1.children"
                :key="index2"
                @click="clickTarget(item, item1, item2)">
                <div class="target-label">{{ item2.targetName }}</div>
                <div :class="['target-value']">{{ item2.targetValue }}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import store from '@/store';
export default {
  name: 'visitCollapse',
  props: {
    visitCollapse: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    setTargetNameStyle(targetName) {
      let style = {};
      if (targetName == '片区经销商') {
        style.background = '#bd3124';
      } else if (targetName == '非片经销商') {
        style.background = '#cba43f';
      }
      return style;
    },
    clickTarget(item, item1, item2) {
      store.dispatch(
        'setActivaTypeStore',
        item1.targetName ? item1.targetName + '经销商' : item.targetName
      );
      if (item2.targetName != '未拜访') return;
      this.$router.push({
        path: '/noVisit',
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.visitCollapse {
  .visitCollapse-box {
    .targetName {
      width: 120px;
      padding: 8px 10px;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      font-size: 16px;
    }
    .child {
      padding-top: 10px;
    }
    .children-item {
      .child-targetName {
        padding-bottom: 5px;
        font-weight: 600;
      }
      .target-box {
        overflow: hidden;
        padding-bottom: 8px;
        .target {
          width: 30%;
          float: left;
          .target-value {
            padding-left: 10px;
          }
        }
        .clickTarget {
          .target-value {
            color: #1989fa;
          }
        }
      }
    }
  }
}
</style>