You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
6.2 KiB
299 lines
6.2 KiB
<template>
|
|
<view style="padding:20rpx;">
|
|
<view>
|
|
<view class="card">
|
|
<view class="card-left">
|
|
<view class="">
|
|
{{switchType(couponData.stockType)}}
|
|
</view>
|
|
</view>
|
|
<view class="card-center">
|
|
<view class="card-center-top"></view>
|
|
<view class="card-center-bottom"></view>
|
|
</view>
|
|
<view class="card-right">
|
|
<view class="card-content">
|
|
<view class="card-info">{{couponData.stockName}}</view>
|
|
<view class="card-type">可用于
|
|
<text class="card-type-text">专业喂养</text>
|
|
<text class="card-type-text">专业遛狗</text>
|
|
<!-- <text class="card-type-text">{{ couponData.goodsName }}</text> -->
|
|
</view>
|
|
<view class="card-time">有效期至: {{couponData.availableEndTime ? couponData.availableEndTime.slice(0, 16) : ''}}</view>
|
|
</view>
|
|
<view :class="['coupon-btn', { 'coupon-btn-disabled': !canReceiveCoupon }]" @click="handleReceiveCoupon">
|
|
<text class="coupon-btn-text">{{ getCouponButtonText }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-bottom">
|
|
<view class="card-bottom-text">
|
|
优惠券不可兑换现金
|
|
</view>
|
|
<view class="card-bottom-text" @click="showRulePopup">
|
|
查看详细规则>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { receiveCoupon } from "@/api/system/user"
|
|
|
|
export default {
|
|
name: 'CouponItem',
|
|
props: {
|
|
// 优惠券数据
|
|
couponData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
computed: {
|
|
// 判断优惠券是否可以领取
|
|
canReceiveCoupon() {
|
|
// 如果已经领取过，则不能再领取
|
|
if (this.couponData.alreadyReceived && this.couponData.alreadyReceived >= this.couponData.maxCouponsPerUser) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
// 获取按钮文本
|
|
getCouponButtonText() {
|
|
if (!this.canReceiveCoupon) {
|
|
return '已领取';
|
|
}
|
|
return '立即领取';
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换优惠券类型显示
|
|
switchType(type) {
|
|
if (type == 'PNORMAL') {
|
|
return '满减券'
|
|
}
|
|
if (type == 'PDISCOUNT') {
|
|
return '折扣券'
|
|
}
|
|
if (type == 'PTRAIL') {
|
|
return '体验券'
|
|
}
|
|
return '优惠券'
|
|
},
|
|
|
|
// 处理优惠券领取点击事件
|
|
handleReceiveCoupon() {
|
|
if (!this.canReceiveCoupon) {
|
|
return; // 已领取的优惠券不能再次领取
|
|
}
|
|
// 直接调用API领取优惠券
|
|
this.receiveCouponApi(this.couponData.id);
|
|
},
|
|
|
|
// 调用优惠券领取API
|
|
receiveCouponApi(id) {
|
|
let data = {
|
|
stockId: id
|
|
}
|
|
receiveCoupon(data).then(res => {
|
|
console.log("receiveCoupon response:", res)
|
|
if (res.code == 200) {
|
|
// 显示成功提示
|
|
if (this.$modal && this.$modal.showToast) {
|
|
this.$modal.showToast('优惠券领取成功')
|
|
} else {
|
|
uni.showToast({
|
|
title: '优惠券领取成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
// 更新本地优惠券状态
|
|
this.updateLocalCouponStatus();
|
|
// 通知父组件优惠券已领取
|
|
this.$emit('coupon-received', this.couponData);
|
|
} else {
|
|
// 显示失败提示
|
|
if (this.$modal && this.$modal.showToast) {
|
|
this.$modal.showToast('领取优惠券失败')
|
|
} else {
|
|
uni.showToast({
|
|
title: '领取优惠券失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}).catch(err => {
|
|
console.error('领取优惠券失败:', err)
|
|
// 显示错误提示
|
|
if (this.$modal && this.$modal.showToast) {
|
|
this.$modal.showToast('领取优惠券失败')
|
|
} else {
|
|
uni.showToast({
|
|
title: '领取优惠券失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 更新本地优惠券状态
|
|
updateLocalCouponStatus() {
|
|
// 创建更新后的优惠券数据副本
|
|
const updatedCoupon = { ...this.couponData };
|
|
// 如果alreadyReceived字段不存在，初始化为0
|
|
if (!updatedCoupon.alreadyReceived) {
|
|
updatedCoupon.alreadyReceived = 0;
|
|
}
|
|
// 累加已领取次数
|
|
updatedCoupon.alreadyReceived += 1;
|
|
// 通知父组件更新数据
|
|
this.$emit('update-coupon', updatedCoupon);
|
|
},
|
|
|
|
// 显示优惠券规则弹窗
|
|
showRulePopup() {
|
|
// 触发父组件的显示规则事件
|
|
this.$emit('show-rule', this.couponData);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
background: #fff;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.card-bottom {
|
|
display: flex;
|
|
background-color: #FFF1E0;
|
|
height: 50rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx 0 20rpx;
|
|
border-radius: 0 0 8px 8px;
|
|
|
|
.card-bottom-text {
|
|
color: #AAAAAA;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.card-left {
|
|
width: 88px;
|
|
text-align: center;
|
|
color: #FF530A;
|
|
font-size: 28rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.card-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.card-center-top {
|
|
width: 40rpx;
|
|
height: 20rpx;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
background-color: #F5F5F7;
|
|
line-height: 20rpx;
|
|
margin-top: -22rpx;
|
|
margin-bottom: 20rpx;
|
|
margin-left: -19rpx;
|
|
}
|
|
|
|
.card-center-bottom {
|
|
border-right: 1px dashed #AAAAAA;
|
|
width: 1px;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
|
|
.card-right {
|
|
padding: 0px 12px;
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 60px;
|
|
|
|
.card-content {
|
|
width: 77%;
|
|
}
|
|
|
|
.card-icon {
|
|
position: relative;
|
|
right: -10px;
|
|
top: -10px;
|
|
}
|
|
}
|
|
|
|
.card-info {
|
|
margin: 0;
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.card-type {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 24rpx;
|
|
font-weight: 400;
|
|
color: #AAAAAA;
|
|
margin-top: 10rpx;
|
|
|
|
.card-type-text {
|
|
color: #FFAA48;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 24rpx;
|
|
border: #FFAA48 1px solid;
|
|
border-radius: 7rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.card-time {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 24rpx;
|
|
font-weight: 400;
|
|
color: #AAAAAA;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
// 优惠券按钮样式
|
|
.coupon-btn {
|
|
width: 132rpx;
|
|
height: 52rpx;
|
|
background-color: #FFAA48;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 56rpx;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&.coupon-btn-disabled {
|
|
background-color: #CCCCCC;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.coupon-btn-text {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
</style>
|