storevisit-ui-mobile/src/components/shareCommonTarget.vue

<template>
  <div class="shareCommonTarget">
    <!-- labelStyle 垃圾，不能全匹配，需要特殊处理 -->
    <template>
      <div class="container linep">
        <van-collapse v-model="activeNames">
          <div v-for="(homePageItem, index) in homePageIndicatorDate" :key="index">
            <van-collapse-item v-if="homePageItem.labelStyle == 1" :name="(index + 1).toString()">
              <template #title>
                <div class="text">{{ homePageItem.name }}</div>
              </template>
              <van-row>
                <!-- 动态渲染标题栏 -->
                <div
                  v-for="(periodItem, periodIndex) in homePageItem.children"
                  :key="'title-' + periodIndex">
                  <van-col span="12" v-if="periodItem.name">
                    <span :class="periodIndex % 2 === 0 ? 'leftTitle' : 'rightTitle'">{{
                      periodItem.name
                    }}</span>
                  </van-col>
                </div>
                <!-- 动态渲染指标项 -->
                <div v-if="homePageItem.children.length >= 2">
                  <!-- 遍历第一个周期的所有指标 -->
                  <div
                    v-for="(metric, metricIndex) in homePageItem.children[0].children"
                    :key="'metric-' + metricIndex">
                    <!-- 左侧指标 -->
                    <van-col span="12">
                      <p>
                        {{ metric.name }}:
                        <span class="colorblack">
                          {{ metric.indicatorDisplayValue }}
                        </span>
                      </p>
                    </van-col>
                    <!-- 对应右侧指标 -->
                    <van-col span="12">
                      <p>
                        {{ homePageItem.children[1]?.children[metricIndex]?.name || '-' }}:
                        <span class="colorblack">
                          {{
                            homePageItem.children[1]?.children[metricIndex]?.indicatorDisplayValue
                          }}
                        </span>
                      </p>
                    </van-col>
                  </div>
                </div>
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="homePageItem.labelStyle == 2" :name="(index + 1).toString()">
              <template #title>
                <div class="text">{{ homePageItem.name }}</div>
              </template>
              <!-- 外层循环：遍历主要类别 -->
              <van-row
                v-for="(category, index) in homePageItem.children"
                :key="index"
                :style="{ marginTop: index > 0 ? '10px' : '0' }">
                <van-col span="24" v-if="category.name">
                  <span :class="index % 2 === 0 ? 'leftTitle' : 'rightTitle'">{{
                    category.name
                  }}</span>
                </van-col>

                <!-- 内层循环：遍历各个统计项 -->
                <div v-for="(item, idx) in category.children" :key="idx">
                  <van-col :span="idx == 0 ? 24 : 12">
                    <p>
                      {{ item.name }}：<span
                        :style="labelStyle(item.clickable)"
                        class="colorbalck"
                        >{{ item.indicatorDisplayValue }}</span
                      >
                    </p>
                  </van-col>
                </div>
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="homePageItem.labelStyle == 3" :name="(index + 1).toString()">
              <template #title>
                <div class="text">{{ homePageItem.name }}</div>
              </template>
              <!-- 外层循环：遍历主要类别 -->
              <van-row
                v-for="(category, index) in homePageItem.children"
                :key="index"
                :style="{ marginTop: index == 0 ? '-10px' : '0' }">
                <!-- 内层循环：遍历各个统计项 -->
                <div v-for="(item, idx) in category.children" :key="idx">
                  <van-col :span="idx == 0 ? 24 : 12">
                    <p>
                      {{ item.name }}：<span
                        :style="labelStyle(item.clickable)"
                        class="colorbalck"
                        >{{ item.indicatorDisplayValue }}</span
                      >
                    </p>
                  </van-col>
                </div>
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="homePageItem.labelStyle == 4" :name="(index + 1).toString()">
              <template #title>
                <div class="text">{{ homePageItem.name }}</div>
              </template>
              <!-- 外层循环：遍历主要类别 -->
              <template v-for="(category, index) in homePageItem.children">
                <van-row
                  :style="{
                    width: category.name ? '49%' : '100%',
                    float: category.name ? 'left' : 'none',
                  }">
                  <van-col
                    span="20"
                    :class="index % 2 === 0 ? 'leftTitle' : 'rightTitle'"
                    v-if="category.name">
                    <span>{{ category.name }}</span>
                  </van-col>

                  <!-- 内层循环：遍历各个统计项 -->
                  <div v-for="(item, idx) in category.children" :key="idx">
                    <van-col :span="24">
                      <p>
                        {{ item.name }}：<span
                          :style="labelStyle(item.clickable)"
                          class="colorbalck"
                          >{{ item.indicatorDisplayValue }}</span
                        >
                      </p>
                    </van-col>
                  </div>
                </van-row>
              </template>
            </van-collapse-item>
            <van-collapse-item v-if="homePageItem.labelStyle == 5" :name="(index + 1).toString()">
              <template #title>
                <div class="text">{{ homePageItem.name }}</div>
              </template>
              <!-- 外层循环：遍历主要类别 -->
              <van-row
                v-for="(category, index) in homePageItem.children"
                :key="index"
                :style="{ marginTop: index == 0 ? '-10px' : '0' }">
                <!-- 内层循环：遍历各个统计项 -->
                <div v-for="(item, idx) in category.children" :key="idx">
                  <van-col :span="24">
                    <p>
                      {{ item.name }}：<span
                        :style="labelStyle(item.clickable)"
                        class="colorbalck"
                        >{{ item.indicatorDisplayValue }}</span
                      >
                    </p>
                  </van-col>
                </div>
              </van-row>
            </van-collapse-item>
          </div>
        </van-collapse>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'shareCommonTarget',
  props: {
    homePageIndicatorDate: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      shows: true,
      show: true,
      num: 0,
      todayGoal: {},
      progressWidth: 0,
      updataTime: '',
      activeNames: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '10',
        '11',
        '12',
        '16',
        '17',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '38',
        '39',
        '40',
        '41',
        '42',
        '43',
      ],
      activeNameType: [],
      powerGradeShow: false,
      showButton: false,
      isCommit: null,
      powerGrade: '2',
      deptLevel: '',
      // positionId：等级（1-销售员 2-销售部主管 3-大区主管 4-区域公司总经理 5-DIY公司）
      reportTargetAll: {},
      approvalPendingNum: 0,
      isDiy: false,
      approvalButton: false,
      times: 5,
      timer: null,
      type: '-1',
      monthNoVisit: {},
      flag: true,
      reportInfoData: {},
      applyNumber: '',
      proccessPendingNum: 0,
      JZQuota: false,
      GZdata: false,
    };
  },
  methods: {
    labelStyle(val) {
      return {
        'text-decoration': 'none',
        color: '#fff',
      };
    },
  },
};
</script>
<style scoped>
.shareCommonTarget {
  .homeTitle {
    padding: 6px 16px;
  }

  .homeTitle .van-icon__image {
    width: 1.4em;
    height: auto;
  }

  .container {
    margin: 10px 0;
  }

  .container .van-collapse-item {
    margin-bottom: 10px;
    overflow: hidden;
  }

  .progressContentlist {
    font-size: 14px;
    padding: 10px 0;
  }

  .linep p {
    margin: 10px 0 0 0;
    font-size: 14px;
    color: #fff;
  }

  .leftTitle {
    color: #fff;
    display: inline-block;
    margin-top: 10px;
  }

  .rightTitle {
    color: #fff;
    display: inline-block;
    white-space: nowrap;
    margin-top: 10px;
  }
  .colorblack {
    color: #fff;
  }
  .colorbalck {
    color: #fff;
  }
}
</style>
<style lang="scss">
.shareCommonTarget {
  .myTab .van-tabs__nav--card {
    margin: 0 !important;
  }

  .myTab .van-tabs__wrap,
  .van-tabs__nav--card {
    height: 39px;
  }

  .myTab .van-tab {
    line-height: 40px;
  }

  .linep .van-collapse-item__content {
    color: #fff;
  }

  .linep .van-collapse-item__content {
    color: #fff;
  }

  .linep .van-cell__title {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
  }

  .homeCellIcon {
    line-height: 34px;
  }

  .homeTitle .van-cell__title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    line-height: 36px;
    height: 36px;
  }

  .updataTime {
    color: #fff;
    font-size: 12px;
    text-align: center;
  }

  .homeTitle .van-tag--danger {
    /* border-radius: 20px; */
  }

  .van-dialog__confirm,
  .van-dialog__confirm:active {
    color: #fff;
  }

  .van-collapse-item__content {
    padding: 0px !important;
    overflow: hidden;
    background-color: unset !important;
  }

  .storeTypeHome .storeTypeHomeList .van-cell__title {
    color: #fff;
    font-size: 14px;
  }

  .storeTypeHome .monthNoVisit {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    background-color: #ebf4ff;
  }

  .storeTypeHome .leftContent {
    padding-right: 68px;
    position: relative;
  }

  .storeTypeHome .monthNoVisitStatstext {
    font-size: 12px;
    background-color: #0057ba;
    position: absolute;
    right: 0;
    top: 6px;
    padding: 2px 6px 2px 12px;
    color: #fff;
  }

  .colBack {
    width: 100%;
    height: 100%;
    display: block;
    /* overflow: unset; */
    position: relative;
    z-index: 2;
    float: left;
    z-index: 2;

    .back {
      position: absolute;
      background: rgb(226, 240, 217);
      height: 100%;
      display: block;
      overflow: hidden;
      /* z-index: 1; */
      border-radius: 12px;
      bottom: -4px;
    }

    .backLeft {
      width: 45%;
      left: -12px;
    }

    .backRight {
      width: 50%;
      left: calc(50% - 12px);
    }

    .van-col {
      position: relative;
      z-index: 3;
    }
  }
}
.shareCommonTarget {
  color: #fff;
  .van-cell {
    background-color: unset !important;
    padding: 0 !important;
  }
  :deep(*) {
    border: none !important;
  }

  .table-headermdhome {
    font-size: 14px;
  }

  .table-headermdhome th.el-table__cell > .cell {
    white-space: pre;
  }

  .table-headermd .el-table__header,
  .table-headermd .el-table__body {
    width: 100% !important;
  }

  .table-headermdhome.van-cell {
    padding: 0 6px;
    height: 100%;
  }

  .table-headermd th.el-table__cell > .cell {
    padding: 0 4px;
    text-align: center;
  }

  .table-headermdhometh.el-table__cell:first-child > .cell {
    text-align: left;
  }

  .table-headermd th.el-table__cell {
    background-color: #1989fa;
    color: #fff;
  }

  .table-headermdhome th.el-table__cell {
    // background-color: #fff;
    color: #fff;
  }

  .table-headermd .el-table__cell {
    padding: 4px 0;
  }

  .table-headermdhome.el-table .cell {
    padding: 0 4px;
    text-align: center;
  }

  .table-headermdhome .tipTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: center;
  }

  .table-headermd::before {
    height: 0;
  }

  .table-headermd .cell,
  .el-table--border .el-table__cell:first-child .cell {
    padding: 0 4px;
  }
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0;
  }
  .van-cell::after {
    border-width: 0;
  }
  .van-collapse-item--border::after {
    border-width: 0;
  }
  .van-cell__right-icon {
    display: none;
  }
  .text {
    background: url('../assets/textBack.png') no-repeat;
    width: 100%;
    height: vw(94);
    background-size: cover;
    color: #7d0207;
    font-size: vw(36);
    text-align: center;
    line-height: vw(94);
    // margin-top: vw(152);
    // margin-bottom: vw(45);
    margin: vw(35) 0 vw(15) 0;
    font-weight: bold;
  }
}
</style>