xdd-uniapp-new/components/CouponsPopup.vue

<template>
  <view class="popup-coupons">
    <view class="popup-box">
      <view class="popup-title bold tc">优惠详情</view>
      <SubSection
        :current="current"
        :can-use="canUse"
        :not-use="notUse"
        radio-model
        @change="changeNav"
        v-if="showTab"
      />
      <view class="v12-radius-20 v12-white v12-align-center v12-justify-around v12-pa-3" v-else>
        <view class="">
          <view class="v12-text-center v12-font-28">
            券后价
          </view>
          <view class="v12-mt-3 v12-text-center v12-red-text">
            <text class="v12-font-28">
              ￥
            </text>
            <text class="v12-font-44">
              {{ computePrice }}
            </text>
          </view>
        </view>
        <view class="v12-text-center  v12-font-44">
          =
        </view>
        <view class="">
          <view class="v12-text-center v12-font-28">
            当前售价
          </view>
          <view class="v12-mt-3 v12-text-center">
            <text class="v12-font-28">
              ￥
            </text>
            <text class="v12-font-44">
              {{ currentPrice }}
            </text>
          </view>
        </view>
        <view class="v12-text-center  v12-font-44">
          -
        </view>
        <view class="">
          <view class="v12-text-center">
            满减
          </view>
          <view class="v12-mt-3 v12-text-center v12-font-44">
            {{ selectItem.couponPrice }}
          </view>
        </view>
      </view>
      
      <view class="list-box">
        <view class="larg-one v12-mb-3">
          <Coupons
            :data="largOne"
            :radio-model="current === 0"
            @change="selectCoupon"
          />
        </view>
        <view class="v12-font-32 v12-dark-text v12-spacing-2 v12-font-bold v12-mb-3">
          更多可使用券
        </view>
        <view
          v-for="(item, index) in list"
          :key="index"
          style="margin-bottom: 20rpx"
        >
          <Coupons
            :data="item"
            :radio-model="current === 0"
            @change="selectCoupon"
            v-if="index !== maxIndex"
          />
        </view>
        <view
          v-if="list.length === 0"
          class="tc"
        >
          <image class="zero-coupons" :src="webUrl+'/20231201201733142658.png'" mode="scaleToFill"/>
        </view>
      </view>
    </view>
    <button disabled></button>
    <view
      v-if="current === 0"
      :class="{ 'btn-disabled': current === 1 }"
      class="btn-done bold flex jc-center ai-center v12-primary"
      @click="setCoupon"
    >
      确定
    </view>
  </view>
</template>

<script>
import SubSection from "@/components/SubSection.vue"
import Coupons from '@/components/Coupons.vue'

export default {
  name: 'CouponsPopup',
  components: { SubSection, Coupons },
  props: {
    twoList: {
      type: Object,
      default: {
        usable: [],
        unusable: []
      }
    },
    showTab: {
      type: Boolean,
      default: true
    },
    currentPrice: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      current: 0,
      couponId: uni.getStorageSync('couponId') || 0,
      selectItem: {
        couponPrice: 0
      },
    }
  },
  computed: {
    list() {
      const temp = this.current === 0 ? this.twoList['usable'] : this.twoList['unusable']
      if (this.current === 0) {
        const localCouponId = uni.getStorageSync('couponId') || 0
        temp.map(item => {
          item.checked = localCouponId === item.id
        })
      }
      return this.$global.deepClone(temp)
    },
    canUse() {
      return this.twoList['usable'].length
    },
    notUse() {
      return this.twoList['unusable'].length
    },
    computePrice() {
      return this.currentPrice - this.selectItem.couponPrice
    },
    maxIndex() {
      const maxIndex = this.list.reduce((a, b, c) => {
        return (this.list[a].couponPrice < b.couponPrice) ? c : a
      }, 0)
      return maxIndex
    },
    largOne() {
      this.selectCoupon(this.list[this.maxIndex].id)
      return this.list[this.maxIndex]
    }
    
  },
  methods: {
    changeNav(index) {
      this.current = index
    },
    selectCoupon(id) {
      this.couponId = id
      this.selectItem = this.list.find(e => e.id === id)
      this.list.map(item => {
        item.checked = id === item.id
      })
    },
    setCoupon() {
      if (this.current === 1) return
      uni.setStorageSync('couponId', this.couponId)
      this.$emit('change', this.selectItem || {})
    }
  }
}
</script>

<style scoped lang="less">
.popup-coupons {
  background: #F0F0F0;
  .popup-box {
    padding: 34rpx 32rpx;
  }

  .popup-title {
    margin-bottom: 20rpx;
    color: #333333;
    font-size: 36rpx;
    line-height: 52rpx;
  }

  .list-box {
    max-height: 640rpx;
    height: 640rpx;
    margin-top: 32rpx;
    overflow-y: auto;
  }

  .btn-done {
    width: 100%;
    height: 80rpx;
    background: #FF564A;
    color: #FFFFFF;
    font-size: 36rpx;
  }

  .btn-disabled {
    background: #BFBFBF;
  }

  .zero-coupons {
    width: 400rpx;
    height: 366rpx;
    vertical-align: middle;
  }
}
</style>