小程序云开发在已完成的订单列表点击某一个订单的评价按钮跳转到评价页面,去填写评价,填写评价后返回订单列表,已评价的订单的评价按钮替换为查看评价示例及代码
时间: 2024-01-02 09:47:59 浏览: 83
点餐系统+后台微信小程序源码分享,亲测可用,有需要拿走!~
1. 在订单列表页面,为每个订单的评价按钮添加一个点击事件:
```javascript
// 点击评价按钮
onEvaluateTap: function(event) {
// 获取订单 id
var orderId = event.currentTarget.dataset.orderId;
// 跳转到评价页面
wx.navigateTo({
url: '/pages/evaluate/evaluate?orderId=' + orderId
})
}
```
2. 在评价页面,获取订单 id 并向云数据库中添加评价记录:
```javascript
// 获取订单 id
var orderId = options.orderId;
// 获取云数据库引用
const db = wx.cloud.database();
// 获取当前用户 openid
const openid = wx.getStorageSync('openid');
// 添加评价记录
db.collection('evaluate').add({
data: {
orderId: orderId,
openid: openid,
score: 5, // 默认评分为 5 分
comment: '', // 默认评价为空
createTime: new Date()
},
success: res => {
console.log('评价记录添加成功', res);
},
fail: err => {
console.error('评价记录添加失败', err);
}
});
```
3. 在评价页面填写评价后,返回订单列表页面并更新已评价的订单的评价按钮:
```javascript
// 点击提交按钮
onSubmitTap: function() {
// 获取评分和评价内容
var score = this.data.score;
var comment = this.data.comment;
// 更新评价记录
db.collection('evaluate').where({
orderId: orderId,
openid: openid
}).update({
data: {
score: score,
comment: comment
},
success: res => {
console.log('评价记录更新成功', res);
// 返回订单列表页面
wx.navigateBack({
delta: 1,
success: res => {
// 更新已评价的订单的评价按钮
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
orders: this.updateEvaluateStatus(prevPage.data.orders, orderId)
});
}
});
},
fail: err => {
console.error('评价记录更新失败', err);
}
});
},
// 更新已评价的订单的评价按钮
updateEvaluateStatus: function(orders, orderId) {
for (var i = 0; i < orders.length; i++) {
if (orders[i]._id === orderId) {
orders[i].isEvaluated = true;
orders[i].evaluateText = '查看评价';
break;
}
}
return orders;
}
```
4. 在订单列表页面,根据订单是否已评价来显示不同的评价按钮:
```html
<view wx:for="{{orders}}" wx:key="index">
<!-- 订单信息 -->
<view>{{item.orderNo}}</view>
<!-- 评价按钮 -->
<button wx:if="{{!item.isEvaluated}}" data-order-id="{{item._id}}" bindtap="onEvaluateTap">评价</button>
<button wx:if="{{item.isEvaluated}}" data-order-id="{{item._id}}" bindtap="onViewEvaluateTap">{{item.evaluateText}}</button>
</view>
```
以上就是小程序云开发实现已完成的订单列表点击某一个订单的评价按钮跳转到评价页面,去填写评价,填写评价后返回订单列表,已评价的订单的评价按钮替换为查看评价的示例和代码。
阅读全文