crm-mobile/pages/home/components/chartForgetCustomer.vue

<template>
  <home-section title="遗忘提醒" class="forget-customer">
    <view class="list">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="list-item"
        @click="handleToForgetList(item)">
        <view class="list-item__label">
          {{ item.label }}
        </view>
        <view class="list-item__content">
          <text class="num">
            {{ item.num }}
          </text>
          <text class="unit">
            个
          </text>
        </view>
      </view>
    </view>
  </home-section>
</template>

<script>
  import { ForgetCount } from 'API/crm/work'
  import HomeSection from './homeSection'

  export default {
    name: 'ChartForgetCustomer',
    components: {
      HomeSection
    },
    props: {
      params: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        list: [
          {label: '超过7天未联系的客户', num: 0, field: 'sevenDays', day: 7},
          {label: '超过15天未联系的客户', num: 0, field: 'fifteenDays', day: 15},
          {label: '超过30天未联系的客户', num: 0, field: 'oneMonth', day: 30},
          {label: '超过3个月未联系的客户', num: 0, field: 'threeMonth', day: 90},
          {label: '超过6个月未联系的客户', num: 0, field: 'sixMonth', day: 180},
          {label: '逾期未联系的客户', num: 0, field: 'unContactCustomerCount', day: 0},
        ]
      }
    },
    watch: {
      params: {
        handler() {
          this.getDataNum()
        },
        deep: true
      }
    },
    mounted() {
      this.getDataNum()
    },
    methods: {
      /**
       * 获取遗忘提醒数据
       */
      getDataNum() {
        ForgetCount(this.params).then(res => {
          this.list.forEach((item, index) => {
            if (res.hasOwnProperty(item.field)) {
              item.num = res[item.field]
            }
            this.$set(this.list, index, item)
          })
        }).catch()
      },

      handleToForgetList(item) {
        console.log('item: ', item)
        this.$Router.navigateTo({
          url: '/pages_crm/homeReport/forgetCustomer',
          query: {
            ...this.params,
            day: item.day
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .list {
    width: 100%;
    padding: 10rpx 0 20rpx;
    // flex-wrap: wrap;
    .list-item {
      width: 47.5%;
      font-size: 24rpx;
      // box-shadow: 0 0 16px 0 rgba(0,0,0,.08);
      margin-top: 10rpx;
      padding: 15rpx 20rpx;
      display: inline-block;
      &:nth-child(2n+1) {
        margin-right: 5%;
      }
      .list-item__label {
      }
      .list-item__content {
        line-height: normal;
        margin-top: 5rpx;
        .num {
          color: $theme-color;
          font-size: 34rpx;
          font-weight: bold;
          margin-right: 10rpx;
        }
        .unit {
          font-size: 26rpx;
        }
      }
    }
  }
</style>