yshop-pro-uniapp/pages/discountCoupon/components/CouponItem.vue

<!--
    @name: CouponItem
    @author: kahu4
    @date: 2023-10-31 11:22
    @description：CouponItem
    @update: 2023-10-31 11:22
-->
<script setup>
import { toRefs } from "vue";
import { receiveACoupon } from "@/api/coupon";
import { useRouter } from "@/hooks/useRouter";

const {push} = useRouter()
const props = defineProps({
  coupons: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: String,
    default: 'select'
  },
  tabType: {
    type: Number,
    default: 0
  }
})

const {
  coupons
} = toRefs(props)

const getCoupon = async () => {
  await receiveACoupon(coupons.value.id)
  uni.showToast({
    title: "领取成功",
    icon: "none",
    duration: 2000
  });
}

const goToProduct = (coupons) => {
  push({url: '/pages/goodsList/goodsList'},{data: {couponId: coupons.id}})
}

</script>

<template>
  <view class="coupon-item">
    <!-- 折扣力度 -->
    <view class="discount">
      <view class="unit pre-unit" v-if="coupons.couponType === 1">
        ￥
      </view>
      {{coupons.couponType == 1 ? coupons.couponValue : coupons.discount}}
      <view class="unit" v-if="coupons.couponType === 2">
        折
      </view>
    </view>
    <!-- 优惠券信息 -->
    <view class="info">
      <view class="row">
        {{coupons.couponType == 1 ? '满减券' : '折扣券'}}
      </view>
      <view class="row tip">
        (实付{{coupons.threshold}}元使用)
      </view>
    </view>
    <!-- button -->
    <view v-if="type === 'select'">
      <view class="button" v-if="tabType === 0">
        <span @click="goToProduct(coupons)">去使用</span>
      </view>
      <view class="button disable" v-if="tabType === 1">
        <span>已使用</span>
      </view>
      <view class="button expired" v-if="tabType === 2">
        <span>已失效</span>
      </view>
    </view>
    <view class="button get-coupon" v-if="type === 'get'" @click="getCoupon">
      领取
    </view>
  </view>
</template>

<style
    scoped
    lang="scss"
>
.coupon-item {
  width: 100%;
  aspect-ratio: 682/176;
  background: url("https://b2c-pro-static-dev.zkthink.com/static/background/coupon-bg.png") no-repeat ;
  background-size: 100%;
  padding: 25rpx 60rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .discount{
    display: flex;
    align-items: flex-end;
    font-size: 68rpx;
    .unit{
      font-size: 38rpx;
      margin-bottom: 15rpx;
    }
  }

  .info{
    font-size: 38rpx;
    .tip{
      font-size: 24rpx;
    }
  }

  .button{
    padding: 14rpx 22rpx;
    background: #ee6d46;
    color: #fff;
  }
  .get-coupon {

  }
  .disable{
    background: #666666;
  }
  .expired{
    background: #999999;
  }
}
</style>