小程序云开发在已完成的订单列表点击某一个订单的评价按钮,跳转到评价页面,填写评价后返回订单列表,已评价的订单的评价按钮不显示,查看评价按钮显示,这个流程的完整示例代码
时间: 2024-05-13 16:16:14 浏览: 69
这是一个较为复杂的流程,需要涉及到小程序云开发的数据库操作、页面跳转和数据传递等方面。下面是一个简单的示例代码,供参考:
1. 在已完成订单列表的页面中,为每个订单添加评价按钮,并将该订单的_id传递给评价页面:
```html
<view wx:for="{{orderList}}" wx:key="{{index}}">
<view>{{item.orderNo}}</view>
<view>{{item.status}}</view>
<button wx:if="{{item.status === '已完成'}}" bindtap="gotoEvaluate" data-order-id="{{item._id}}">评价</button>
<button wx:if="{{item.status === '已评价'}}" bindtap="gotoEvaluate" data-order-id="{{item._id}}">查看评价</button>
</view>
```
2. 点击评价按钮后,跳转到评价页面,并将该订单的_id传递给评价页面:
```javascript
gotoEvaluate: function(e) {
wx.navigateTo({
url: '/pages/evaluate/evaluate?orderId=' + e.currentTarget.dataset.orderId
})
}
```
3. 在评价页面中,获取传递过来的订单_id,并根据该订单_id从数据库中获取该订单的信息:
```javascript
onLoad: function(options) {
const db = wx.cloud.database()
db.collection('order').doc(options.orderId).get().then(res => {
this.setData({
order: res.data
})
})
}
```
4. 在评价页面中,填写评价后,将评价信息保存到数据库中,并更新该订单的状态为“已评价”:
```javascript
submitEvaluate: function() {
const db = wx.cloud.database()
db.collection('evaluate').add({
data: {
orderId: this.data.order._id,
content: this.data.content,
score: this.data.score
}
}).then(res => {
return db.collection('order').doc(this.data.order._id).update({
data: {
status: '已评价'
}
})
}).then(res => {
wx.navigateBack()
})
}
```
5. 在已完成订单列表的页面中,根据订单的状态显示不同的按钮:
```html
<view wx:for="{{orderList}}" wx:key="{{index}}">
<view>{{item.orderNo}}</view>
<view>{{item.status}}</view>
<button wx:if="{{item.status === '已完成'}}" bindtap="gotoEvaluate" data-order-id="{{item._id}}">评价</button>
<button wx:if="{{item.status === '已评价'}}" bindtap="gotoEvaluate" data-order-id="{{item._id}}">查看评价</button>
</view>
```
这只是一个简单的示例代码,实际开发中还需要考虑更多的细节和异常情况。
阅读全文