h5-colexiu/src/views/order-detail/use-coupons/choice-coupon.tsx

import ColResult from '@/components/col-result'
import { useEventTracking } from '@/helpers/hooks'
import request from '@/helpers/request'
import { state } from '@/state'
import Item from '@/views/coupons/item'
import { Button, Loading } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'choice-coupon',
  props: {
    orderAmount: {
      type: Number,
      default: 0
    },
    orderGoodsType: {
      type: Array,
      default: () => []
    },
    useCoupon: {
      type: Array,
      default: () => []
    },
    couponCategory: {
      type: String,
      default: 'UNIVERSAL'
    },
    couponList: {
      type: Array,
      default: () => []
    },
    usedLength: {
      type: String as PropType<'SINGLE' | 'MULTIPLE'>,
      default: 'MULTIPLE'
    }
  },
  emits: ['close', 'submit'],
  data() {
    return {
      list: [] as any,
      // consumeAmount: 0 // 消耗金额
      dataLoading: false
    }
  },
  computed: {
    // 使用优惠券的数量
    useLength() {
      return this.list.filter((list: any) => list.checked).length || 0
    }
  },
  async mounted() {
    // this.getList()
    // 处理显示已选择的优惠券
    // 处理可用优惠券是否支付使用
    this.couponList.forEach((item: any) => {
      this.useCoupon.forEach((coupon: any) => {
        if (item.couponIssueId === coupon.couponIssueId) {
          item.checked = true
        }
      })
    })
    const canUsable = this.couponList.filter((list: any) => !list.disabled)
    const canUsed = this.couponList.filter((list: any) => list.disabled)
    this.list = [...canUsable, ...canUsed]
    this.calcCoupon()
    useEventTracking('优惠券')
  },
  methods: {
    onSubmit() {
      // 返回选中的优惠券
      this.$emit(
        'submit',
        this.list.filter((list: any) => list.checked)
      )

      this.list.forEach((item: any) => {
        item.checked = false
      })
    },
    onSelect(item: any) {
      item.checked = !item.checked
      this.calcCoupon()
    },
    calcCoupon() {
      // 已使用的优惠券
      const useList = this.list.filter((list: any) => list.checked)
      if(this.usedLength === 'SINGLE') {
        let usedMap: any = new Map()
        useList.forEach((item: any) => {
          const price = usedMap.get(item.couponCategory)
          usedMap.set(item.couponCategory, (price || 0) + item.useLimit)
        })

        // 判断使用优惠券之后还有没有其它优惠券可用
        this.list.forEach((item: any) => {
          let disabled = true
          if(item.couponCategory === 'UNIVERSAL') {
            this.orderGoodsType.forEach((goods: any) => {
              const useLastAmount = goods ? goods.price - (usedMap.get(item.couponCategory) || 0) : 0
              if(Number(item.useLimit) <= useLastAmount && disabled) {
                disabled = false
              }
            })
          } else {
            const disItem: any = this.orderGoodsType.find((goods: any) => goods.orderType === item.couponCategory)
            const useLastAmount = disItem ? disItem.price - (usedMap.get(item.couponCategory) || 0) : 0
            disabled = Number(item.useLimit) > useLastAmount
          }
          
          if (!item.checked && (useList.length > 0  || disabled)) {
            item.disabled = true
          } else {
            item.disabled = false
          }
        })
        usedMap = null
      } else {
        // 计算优惠券
        const limitCount = useList.map((list: any) => {
          return Number(list.useLimit || 0)
        })
        const usePrice =
          limitCount.length > 0
            ? limitCount.reduce((sum: any, list: any) => {
                return sum + list
              })
            : 0
        // 使用优惠券后，可判断的金额
        const useLastAmount = this.orderAmount - usePrice
        // 判断使用优惠券之后还有没有其它优惠券可用
        this.list.forEach((item: any) => {
          if (Number(item.useLimit) > useLastAmount && !item.checked) {
            item.disabled = true
          } else {
            item.disabled = false
          }
        })
      }
    }
  },
  render() {
    return (
      <div class={styles.choiceCoupon}>
        <div class={styles.couponTitle}>
          <span>优惠券</span>
          <i class={styles.iconClose} onClick={() => this.$emit('close')}></i>
        </div>

        <div class={styles.couponContent}>
          {!this.dataLoading ? (
            <>
              {this.list.length > 0 ? (
                <>
                  {this.list.map((item: any) => (
                    <Item item={item} isSelect onClick={this.onSelect} />
                  ))}
                </>
              ) : (
                <ColResult
                  btnStatus={false}
                  tips="暂无优惠券"
                  classImgSize="SMALL"
                />
              )}
            </>
          ) : (
            <Loading
              size={48}
              color="#2dc7aa"
              vertical
              style={{ height: '100%', justifyContent: 'center' }}
            >
              加载中...
            </Loading>
          )}
        </div>

        <div class={[styles.couponFooter, 'van-hairline--top']}>
          <div class={styles.couponSelectText}>
            已选<span>{this.useLength}</span>张
          </div>
          <Button
            type="primary"
            round
            class={state.projectType === 'tenant' && styles.btnTenant}
            style={{ minWidth: '105px', fontSize: '16px' }}
            onClick={this.onSubmit}
          >
            确定
          </Button>
        </div>
      </div>
    )
  }
})