fanghuayuexuan/components/coupon-popup/coupon-popup.vue

<template>
	<view v-if="value" class="coupon-popup-overlay" @click="close">
		<view class="coupon-popup" @click.stop>
			<view class="coupon-popup-header">
				<view class="coupon-popup-title">领取优惠券</view>
				<view class="coupon-popup-close" @click="close">×</view>
			</view>
			<view class="coupon-popup-content">
				<view v-if="couponsList.length > 0" class="tui-coupon-list">
					<view class="tui-coupon-item tui-top20" v-for="(item, index) in couponsList" :key="index">
						<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/bg_coupon_3x.png" class="tui-coupon-bg" mode="widthFix"></image>
						<view class="tui-coupon-item-left">
							<view class="tui-coupon-price-box" :class="{ 'tui-color-grey': item.receiveCount>0 }">
								<view class="tui-coupon-price-sign">￥</view>
								<view class="tui-coupon-price">{{ item.couponPrice }}</view>
							</view>
							<view class="tui-coupon-intro">满{{ item.useMinPrice }}元可用</view>
						</view>
						<view class="tui-coupon-item-right">
							<view class="tui-coupon-content">
								<view class="tui-coupon-title-box">
									<view class="tui-coupon-title">{{ item.couponName }}</view>
								</view>
								<view class="tui-coupon-rule">
									<view class="tui-rule-box tui-padding-btm">
										<view class="tui-coupon-circle"></view>
										<view class="tui-coupon-text">不可叠加使用</view>
									</view>
									<view class="tui-rule-box">
										<view class="tui-coupon-circle"></view>
										<view class="tui-coupon-text">{{ item.limitTime }} 到期</view>
									</view>
								</view>
							</view>
						</view>
						<view class="tui-btn-box">
							<view 
								class="btn receive" 
								@click="getCouponIssueById(item)"
								:class="{ 'btn-received': item.receiveCount > 0 }"
							>
								{{ item.receiveCount > 0 ? '已领取' : '领取' }}
							</view>
						</view>
					</view>
				</view>
				<view v-else class="no-data-box">
					<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/no_data.png" mode="aspectFit"></image>
					<view class="empty-title">暂无优惠券</view>
					<view class="empty-desc">更多优惠敬请期待</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getCompanyCouponIssueList, receive, getCouponIssueById as apiGetCouponIssueById } from '@/api/coupon'

export default {
	name: 'CouponPopup',
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			couponsList: [],
			loading: false,
			loadend: false,
			page: 1,
			limit: 10
		}
	},
	watch: {
		value: {
			immediate: true,
			handler(newVal) {
				if (newVal) {
					this.loadCoupons()
				}
			}
		}
	},
	methods: {
		// 关闭弹窗
		close() {
			this.$emit('input', false)
		},

		// 加载优惠券列表
		loadCoupons() {
			this.page = 1
			this.couponsList = []
			this.loadend = false
			this.getCouponsList()
		},

		// 获取优惠券列表
		getCouponsList() {
			if (this.loadend) return
			this.loading = true
			getCompanyCouponIssueList().then(res => {
				this.loading = false
				if (res.code == 200) {
					this.couponsList.push.apply(this.couponsList, res.data.list)
					this.loadend = res.data.list.length < this.limit
					this.page++
				}
			}).catch(err => {
				this.loading = false
				console.error('获取优惠券列表失败:', err)
			})
		},
		
	// 获取销售可用套餐卷
		getCouponIssueById(item) {
			console.log('获取销售可用套餐卷item:', item)
			if (this.loading) return
			if (item.receiveCount > 0) return
			this.loading = true
			// 调用接口获取优惠券信息
			const data = { id: item.id };
			console.log('API参数:', data)
			apiGetCouponIssueById(data).then(res => {
				this.loading = false
				console.log('获取销售可用套餐卷接口返回:', res)
				if (res && (res.code == 200 || res.msg == "success")) {
					console.log('获取销售可用套餐卷成功，准备调用领取方法')
					// 调用领取优惠券方法，传递完整的item对象
					this.receiveCoupon(item, res.code)
				} else {
					console.error('获取销售可用套餐卷失败:', res.message || '接口返回错误')
					uni.showToast({
						title: res.message || '获取优惠券信息失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				this.loading = false
				console.error('获取销售可用套餐卷异常:', err)
				uni.showToast({
					title: '获取优惠券信息失败',
					icon: 'none'
				})
			})
		},
		// 领取优惠券
		receiveCoupon(item, code) {
			console.log('领取优惠券item:', item)
			console.log('领取优惠券code:', code)
			if (!item) {
				console.error('领取优惠券失败：item 参数未定义')
				return
			}
			if (item.receiveCount > 0) return
			receive({ couponIssueId: item.id, code: code }).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					})
					// 更新优惠券状态
					item.receiveCount = 1
				} else {
					uni.showToast({
						title: res.message || '领取失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				console.error('领取优惠券失败:', err)
				uni.showToast({
					title: '领取失败',
					icon: 'none'
				})
			})
		}
	}
}
</script>

<style scoped lang="scss">
/* 优惠券弹窗样式 */
.coupon-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.coupon-popup {
	width: 100%;
	max-height: 80vh;
	background: #fff;
	border-radius: 16rpx 16rpx 0 0;
	overflow: hidden;
	position: fixed;
	bottom: 0;
}

.coupon-popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
}

.coupon-popup-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
}

.coupon-popup-close {
	font-size: 40rpx;
	color: #999999;
}

.coupon-popup-content {
	padding: 20rpx;
	max-height: 60vh;
	overflow-y: auto;
}

/* 优惠券列表样式，参考 coupon.vue */
.tui-coupon-list {
	width: 100%;
	padding: 0 10rpx;
}

.tui-coupon-item {
	width: 100%;
	height: 210rpx;
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 30rpx;
	box-sizing: border-box;
	overflow: hidden;
	margin-top: 20rpx;
}

.tui-coupon-bg {
	width: 100%;
	height: 210rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.tui-coupon-item-left {
	width: 218rpx;
	height: 210rpx;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-shrink: 0;
}

.tui-coupon-price-box {
	display: flex;
	color: #e41f19;
	align-items: flex-end;
}

.tui-coupon-price-sign {
	font-size: 30rpx;
}

.tui-coupon-price {
	font-size: 32rpx;
	line-height: 68rpx;
	font-weight: bold;
}

.tui-color-grey {
	color: #888 !important;
}

.tui-coupon-intro {
	background: #f7f7f7;
	padding: 8rpx 10rpx;
	font-size: 26rpx;
	line-height: 26rpx;
	font-weight: 400;
	color: #666;
	margin-top: 18rpx;
}

.tui-coupon-item-right {
	flex: 1;
	height: 210rpx;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 24rpx;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-coupon-content {
	width: 82%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tui-coupon-title-box {
	display: flex;
	align-items: center;
}

.tui-coupon-title {
	width: 100%;
	font-size: 26rpx;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-coupon-rule {
	padding-top: 52rpx;
}

.tui-rule-box {
	display: flex;
	align-items: center;
	transform: scale(0.8);
	transform-origin: 0 100%;
}

.tui-padding-btm {
	padding-bottom: 6rpx;
}

.tui-coupon-circle {
	width: 8rpx;
	height: 8rpx;
	background: rgb(160, 160, 160);
	border-radius: 50%;
}

.tui-coupon-text {
	font-size: 28rpx;
	line-height: 28rpx;
	font-weight: 400;
	color: #666;
	padding-left: 8rpx;
	white-space: nowrap;
}

.tui-btn-box {
			position: absolute;
			right: 20rpx;
			bottom: 40rpx;
			z-index: 10;
			.btn {
				width: 155upx;
				height: 64upx;
				line-height: 64upx;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: center;
				border-radius: 32upx;
				margin-left: 15upx;
				transition: all 0.3s ease;

				&.receive {
					background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
					color: #FFFFFF;
					box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
					
					&:hover {
						transform: translateY(-2rpx);
						box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.4);
					}
					
					&:active {
						transform: translateY(0);
						box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
					}
				}

				&.btn-received {
					background: #F5F5F5;
					color: #999999;
					border: 1rpx solid #E0E0E0;
				}
			}
		}

		.no-data-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 120rpx 0;
			background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
			margin: 20rpx;
			border-radius: 16rpx;
			box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}

		.no-data-box image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
			opacity: 0.7;
		}

		.empty-title {
			font-size: 30rpx;
			color: #666666;
			font-weight: 500;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
			text-align: center;
			padding: 0 40rpx;
		}

		/* 优惠券项美化 */
		.tui-coupon-item {
			transition: all 0.3s ease;
			transform-origin: center;
			
			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			}
		}

		/* 价格样式优化 */
		.tui-coupon-price {
			font-size: 40rpx;
			line-height: 68rpx;
			font-weight: bold;
			background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.tui-color-grey .tui-coupon-price {
			background: linear-gradient(135deg, #999999 0%, #777777 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		/* 标题样式优化 */
		.tui-coupon-title {
			width: 100%;
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* 规则样式优化 */
		.tui-coupon-rule {
			padding-top: 40rpx;
		}

		.tui-coupon-text {
			font-size: 24rpx;
			line-height: 28rpx;
			font-weight: 400;
			color: #888;
			padding-left: 8rpx;
			white-space: nowrap;
		}

		/* 分隔线美化 */
		.tui-coupon-item-left::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1rpx;
			height: 120rpx;
			background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
			z-index: 1;
		}
</style>