<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>
|