用微信小程序写一个外卖优惠券功能代码
时间: 2024-03-26 16:40:54 浏览: 68
好的,这里是一个简单的微信小程序外卖优惠券功能的代码示例,供参考:
```
// index.js
Page({
data: {
coupons: [], // 存储优惠券数据
filterIndex: 0, // 存储筛选状态
filterOptions: ['全部', '未使用', '已使用', '已过期'] // 筛选选项
},
onLoad: function () {
// 发送网络请求获取优惠券数据
wx.request({
url: 'xxx',
success: (res) => {
this.setData({
coupons: res.data
})
}
})
},
// 筛选优惠券
filterCoupons: function () {
let filter = this.data.filterIndex
let coupons = this.data.coupons
if (filter === 0) {
// 全部
this.setData({
filteredCoupons: coupons
})
} else {
// 未使用、已使用、已过期
let filtered = coupons.filter((coupon) => {
if (filter === 1) {
return coupon.status === '未使用'
} else if (filter === 2) {
return coupon.status === '已使用'
} else if (filter === 3) {
return coupon.status === '已过期'
}
})
this.setData({
filteredCoupons: filtered
})
}
},
// 更改筛选状态
changeFilter: function (event) {
let index = event.currentTarget.dataset.index
this.setData({
filterIndex: index
})
this.filterCoupons()
},
// 使用优惠券
useCoupon: function (event) {
let id = event.currentTarget.dataset.id
// 发送网络请求更新优惠券状态
wx.request({
url: 'xxx',
data: {
id: id,
status: '已使用'
},
success: (res) => {
// 更新优惠券列表
let coupons = this.data.coupons
let updated = coupons.map((coupon) => {
if (coupon.id === id) {
coupon.status = '已使用'
}
return coupon
})
this.setData({
coupons: updated
})
this.filterCoupons()
}
})
}
})
```
这个示例包括获取优惠券数据、筛选优惠券、更改筛选状态、使用优惠券等功能。当用户使用优惠券时,会向后端发送请求更新优惠券状态,并在前端更新优惠券列表。
需要注意的是,示例中的网络请求 URL 和参数需要根据实际情况进行修改。同时,如果后端接口返回的数据结构和示例中不同,需要对代码进行相应调整。
阅读全文