小程序云开发在订单列表点击签到按钮弹出弹窗进行签到,签到完成后调用云函数将订单状态改为‘完成中’示例完整代码
时间: 2023-06-13 12:07:06 浏览: 66
1. 在订单列表页面的wxml文件中添加签到按钮,并绑定点击事件:
```html
<view class="order-item" wx:for="{{orderList}}" wx:key="id">
<view class="order-info">
<!-- 订单信息展示 -->
</view>
<view class="order-operation">
<button bindtap="signIn" data-id="{{item._id}}">签到</button>
</view>
</view>
```
2. 在订单列表页面的js文件中编写点击签到按钮的事件处理函数,弹出签到弹窗:
```javascript
signIn(event) {
const orderId = event.currentTarget.dataset.id;
wx.showModal({
title: '签到确认',
content: '确定要签到吗?',
success: (res) => {
if (res.confirm) {
// 用户点击确定按钮,调用云函数进行签到
wx.cloud.callFunction({
name: 'signIn',
data: { orderId },
success: (res) => {
wx.showToast({
title: '签到成功',
icon: 'success'
});
// 更新订单列表数据
this.getOrderList();
},
fail: (err) => {
wx.showToast({
title: '签到失败,请稍后再试',
icon: 'none'
});
}
});
}
}
});
}
```
3. 在云函数中编写签到函数signIn,将订单状态改为‘完成中’:
```javascript
// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init();
// 云函数入口函数
exports.main = async (event, context) => {
const db = cloud.database();
try {
await db.collection('order').doc(event.orderId).update({
data: { status: '完成中' }
});
return { success: true };
} catch (err) {
return { success: false };
}
}
```
这样,在订单列表页面点击签到按钮后,会弹出签到确认弹窗,用户点击确定后会调用云函数进行签到,并将订单状态改为‘完成中’。签到完成后,会更新订单列表数据,用户可以看到订单状态已经变为‘完成中’。
阅读全文