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" 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"
            :style="setTargetNameStyle(item1.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']"
                  :style="{
                    color:
                      item2.targetName == '未拜访' && (empLevel == 2 || empLevel == 3)
                        ? '#1989fa'
                        : '',
                  }">
                  {{ item2.targetValue }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
export default {
  name: 'visitCollapse',
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  props: {
    visitCollapse: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      empLevel: '', //员工级别，1大区主管2销售部主管3业务员4其他 ***其他级别4
    };
  },
  created() {
    this.empLevel = this.userInfo.empLevel;
  },
  methods: {
    setTargetNameStyle(targetName) {
      let style = {};
      if (targetName == '涂料片区') {
        style.background = '#84ccc9';
      } else if (targetName == '厨卫片区') {
        style.background = '#f6b37f';
      } else if (targetName == '质感外墙片区') {
        style.background = '#88abda';
      } else if (targetName == 'SAF片区') {
        style.background = '#ff6565';
      } else if (targetName == '工业漆片区') {
        style.background = '#7ecef4';
      } else if (targetName == '粉料片区') {
        style.background = '#f19ec2';
      } else if (targetName == '片区经销商（36城）') {
        style.background = '#9ea4f1';
      }
      return style;
    },
    clickTarget(item, item1, item2) {
      if (this.empLevel != 2 && this.empLevel != 3) return;
      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 {
      text-align: center;
      border-radius: 3px;
      font-size: 18px;
      color: #000;
      font-weight: 600;
    }
    .child {
      padding-top: 10px;
    }
    .children-item {
      .child-targetName {
        display: inline-block;
        color: #fff;
        padding: 3px 5px;
        border-radius: 6px;
        margin-bottom: 5px;
      }
      .target-box {
        overflow: hidden;
        padding-bottom: 8px;
        .target {
          width: 33%;
          float: left;
          text-align: center;
          &:first-child {
            text-align: left !important;
          }
          .target-value {
            padding-left: 10px;
          }
        }
        .clickTarget {
          .target-value {
            // color: #1989fa;
          }
        }
      }
    }
  }
}
</style>