pet-front-order/pages_order/companionPetList/couponList.vue

<template>
	<view class="coupon-list">
		<CouponItem 
			v-for="(item,index) in couponData" 
			:key="index"
			:couponData="item"
			@coupon-received="handleCouponReceived"
			@update-coupon="updateCouponData"
			@show-rule="showRulePopup"
		/>
		
		<!-- 优惠券详细规则弹窗组件 -->
		<CouponRulePopup ref="couponRulePopup" />
	</view>
</template>
<script>
	import {
		getCouponList,
	} from "@/api/system/user"
	import CouponRulePopup from '@/components/CouponRulePopup/index.vue'
	import CouponItem from '@/components/CouponItem/index.vue'
	export default {
		components: {
			CouponRulePopup,
			CouponItem
		},
		data() {
			return {
				couponData: []
			}
		},
		onLoad() {
			// this.openIdStr = this.$globalData.openIdStr;
			this.getCouponListAuth()
		},
		methods: {
			getCouponListAuth() {
				getCouponList().then(res => {
					if (res.code == 200) {
						this.couponData = res.data
						console.log("this.couponData", this.couponData)
					} else {
						this.$modal.showToast('获取优惠券失败')
					}
				})
			},

			// 显示优惠券规则弹窗
			showRulePopup(item) {
				this.$refs.couponRulePopup.open(item || {});
			},

			// 处理优惠券领取成功事件
			handleCouponReceived(couponData) {
				console.log('优惠券领取成功:', couponData);
				// 可以在这里处理一些额外的逻辑，比如刷新列表等
			},
			
			// 更新优惠券数据
			updateCouponData(updatedCoupon) {
				// 找到对应的优惠券并更新数据
				const couponIndex = this.couponData.findIndex(item => item.id === updatedCoupon.id);
				if (couponIndex !== -1) {
					// 使用Vue.set或者$set来确保响应式更新
					this.$set(this.couponData, couponIndex, updatedCoupon);
				}
			}
		}
	}
</script>

<style lang="scss">
	.coupon-list {
		// 优惠券列表容器样式
	}
</style>