lilishop-uniapp/pages/cart/coupon/index.vue

<template>
  <div class="wrapper">
    <u-tabs
      class="coupon-tabs"
      :list="list"
      :scrollable="false"
      :lineColor="lightColor"
      :activeStyle="{ color: lightColor }"
      v-model:current="current"
    >
    </u-tabs>

    <div class="empty" v-if="couponsList.length <= 0">
      <u-empty text="暂无优惠券" mode="coupon"></u-empty>
    </div>
    <view class="coupon-item" v-for="(item, index) in couponsList" :key="index">
      <view class="left">
        <view class="wave-line">
          <view class="wave" v-for="(item, index) in 12" :key="index"></view>
        </view>
        <view class="message">
          <view>
            <span v-if="item.couponType == 'DISCOUNT'">{{ item.discount }}折</span>
            <span v-else>{{ item.price }}元</span>
          </view>
          <view>满{{unitPrice(item.consumeThreshold) }}元可用</view>
        </view>
        <view class="circle circle-top"></view>
        <view class="circle circle-bottom"></view>
      </view>
      <view class="right">
        <view class="desc">
          <view v-if="item.scopeType">
            <span v-if="item.scopeType == 'ALL' && item.storeId == '0'">全平台</span>
            <span v-if="item.scopeType == 'PORTION_GOODS_CATEGORY'">仅限品类</span>
            <view v-else
              >{{
                item.storeName == "platform" ? "全平台" : item.storeName + "店铺"
              }}使用</view
            >
          </view>
          <view class="reason" v-if="item.reason">{{ item.reason }}</view>
          <view class="end-time">有效期至:{{ item.endTime }}</view>
        </view>
        <view
          class="receive"
          v-if="current == 0 && !routerVal.selectedCoupon.includes(item.id)"
          @click="clickWay(item)"
        >
          <text>立即</text><br />
          <text>使用</text>
        </view>
        <view class="used" v-if="current == 0 && routerVal.selectedCoupon.includes(item.id)" @click="clickWay(item)">
          <text>取消</text><br />
          <text>使用</text>
        </view>
        <view class="bg-quan">券</view>
      </view>
    </view>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from '@/store'
import { useCoupon } from '@/api/trade.js'
import { unitPrice } from '@/utils/filters.js'

const store = useStore()

const lightColor = computed(() => store.getters.lightColor)
const current = ref(0)
const list = [
  { name: '可用优惠券' },
  { name: '不可用优惠券' },
]
const couponsList = ref<any[]>([])
const routerVal = ref<Record<string, any>>({})

onLoad((options) => {
  routerVal.value = options || {}
})

watch(current, (val) => {
  couponsList.value = val == 0
    ? store.state.canUseCoupons
    : store.state.cantUseCoupons
})

onMounted(() => {
  init()
})

function init() {
  couponsList.value = store.state.canUseCoupons
}

function clickWay(coupon: any) {
  useCoupon({
    memberCouponId: coupon.id,
    used: !routerVal.value.selectedCoupon.includes(coupon.id),
    way: routerVal.value.way,
  }).then((res) => {
    if (res.data.success) {
      uni.navigateBack()
    } else {
      uni.showToast({
        title: res.data.message,
        duration: 2000,
        icon: 'none',
      })
    }
  })
}
</script>
<style scoped lang="scss">
.desc {
  height: 220rpx;
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.end-time,
.reason {
  color: #999;
  line-height: 1.5;
  font-size: 24rpx;
}

.empty {
  margin-top: 20px;
  text-align: center;
}
.wrapper {
  background: #f9f9f9;
  overflow: hidden;

  .coupon-tabs {
    width: 100%;
    background: #fff;
  }
}
.coupon-item {
  display: flex;
  align-items: center;
  height: 220rpx;
  margin: 20rpx;

  .left {
    height: 100%;
    width: 260rpx;
    background-color: $light-color;
    position: relative;
    .message {
      color: $font-color-white;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-top: 40rpx;

      view:nth-child(1) {
        font-weight: bold;
        font-size: 60rpx;
      }

      view:nth-child(2) {
        font-size: $font-sm;
      }
    }

    .wave-line {
      height: 220rpx;
      width: 8rpx;
      position: absolute;
      top: 0;
      left: 0;
      background-color: $light-color;
      overflow: hidden;

      .wave {
        width: 8rpx;
        height: 16rpx;
        background-color: #ffffff;
        border-radius: 0 16rpx 16rpx 0;
        margin-top: 4rpx;
      }
    }
    .circle {
      width: 40rpx;
      height: 40rpx;
      background-color: $bg-color;
      position: absolute;
      border-radius: 50%;
      z-index: 111;
    }
    .circle-top {
      top: -20rpx;
      right: -20rpx;
    }
    .circle-bottom {
      bottom: -20rpx;
      right: -20rpx;
    }
  }

  .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 450rpx;
    font-size: $font-sm;
    height: 220rpx;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    > view:nth-child(1) {
      color: #666666;
      margin-left: 20rpx;

      > view:nth-child(1) {
        color: #ff6262;
        font-size: 30rpx;
      }
    }

    .receive {
      color: #ffffff;
      background-color: $main-color;
      border-radius: 50%;
      width: 86rpx;
      height: 86rpx;
      text-align: center;
      margin-right: 30rpx;
      vertical-align: middle;
      padding-top: 8rpx;
      position: relative;
      z-index: 2;
    }

    .used {
      color: #ffffff;
      background-color: black;
      border-radius: 50%;
      width: 86rpx;
      height: 86rpx;
      text-align: center;
      margin-right: 30rpx;
      vertical-align: middle;
      padding-top: 8rpx;
      position: relative;
      z-index: 2;
    }

    .bg-quan {
      width: 244rpx;
      height: 244rpx;
      border: 6rpx solid $main-color;
      border-radius: 50%;
      opacity: 0.1;
      color: $main-color;
      text-align: center;
      padding-top: 30rpx;
      font-size: 130rpx;
      position: absolute;
      right: -54rpx;
      bottom: -60rpx;
    }
  }
}
</style>