134 lines
2.6 KiB
Vue
134 lines
2.6 KiB
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("@/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>
|