wechat/src/pages/sales/cardAndCouponNum/index.vue

<template>
  <div class="mainPage flex-v" v-if="data">
    <div class="top flex-h">
      <span>￥<em>{{parseInt(data.Price)}}</em>元</span>
      <div class="flex-item">
        <div>
          <span>{{data.CardName}}</span>
          <span>卡券描述卡券描述卡券描述卡券描述卡券描述</span>
          <span>{{toolClass.dateFormat(data.StartDate)}} - {{toolClass.dateFormat(data.EndDate)}}</span>
        </div>
      </div>
    </div>
    <ul class="numList flex-h">
      <li class="flex-item">
        <div>
          <span>总数量</span>
          <span>{{data.TotalCount}}</span>
        </div>
      </li>
      <li class="flex-item">
        <div>
          <span>剩余</span>
          <span>{{data.TotalCount - data.SentCount}}</span>
        </div>
      </li>
      <li class="flex-item">
        <div>
          <span>用户领取</span>
          <span>{{data.SentCount}}</span>
        </div>
      </li>
      <li class="flex-item">
        <div>
          <span>实际使用</span>
          <span>{{data.UsedCount}}</span>
        </div>
      </li>
    </ul>
    <div class="flex-item">
      <div>
        <div>
          <ul>
            <li class="flex-h">
              <span>销售名称</span>
              <div class="flex-item">
                <div>
                  <span>实际使用</span>
                </div>
              </div>
              <span>用户领取</span>
            </li>
            <li class="flex-h" v-for="(item,index) in data.CustomerCard" :key="index">
              <span>{{salesData(item).name}}</span>
              <div class="flex-item">
                <div>
                  <span>{{salesData(item).receive}}</span>
                </div>
              </div>
              <span>{{salesData(item).used}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapForbidState, mapActions: mapForbidActions } = createNamespacedHelpers('forbid')
export default {
  name: '',
  data () {
    return {
      data: {}
    }
  },
  created () {
    if (this.$route.query.type === 'card') {
      this.getCardNum({ id: this.$route.query.id }).then(() => {
        this.getSales({ type: 'sales' }).then(() => {
          this.data = this.cardAndCoupon
          this.data.CustomerCard = this.data.CustomerCard || []
        })
      })
    } else {
      this.getCouponNum({ id: this.$route.query.id }).then(() => {
        this.getSales({ type: 'sales' }).then(() => {
          this.data = this.cardAndCoupon
          this.data.CustomerCard = this.data.CustomerCoupon || []
        })
      })
    }
  },
  computed: {
    ...mapForbidState({
      salesList: x => x.salesList,
      cardAndCoupon: x => x.cardAndCoupon
    })
  },
  methods: {
    ...mapForbidActions(['getCardNum', 'getCouponNum', 'getSales']),
    salesData (item) {
      let receive = 0
      let used = 0
      let name
      if (this.$route.query.type === 'card') {
        for (let i = 0; i < this.salesList.length; i++) {
          this.salesList[i].CustomerCard = this.salesList[i].CustomerCard || []
          for (let j = 0; j < this.salesList[i].CustomerCard.length; j++) {
            if (this.salesList[i].CustomerCard[j].SalesId === item.SalesId) {
              name = this.salesList[i].RealName
              receive++
              if (!item.VerifyStatus) {
                used++
              }
            }
          }
        }
      } else {
        for (let i = 0; i < this.salesList.length; i++) {
          this.salesList[i].CustomerCoupon = this.salesList[i].CustomerCoupon || []
          for (let j = 0; j < this.salesList[i].CustomerCoupon.length; j++) {
            if (this.salesList[i].CustomerCoupon[j].SalesId === item.SalesId) {
              name = this.salesList[i].RealName
              receive++
              if (!item.VerifyStatus) {
                used++
              }
            }
          }
        }
      }

      return {
        'name': name,
        'receive': receive,
        'used': used
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>