小程序云开发在已完成的订单列表点击某一个订单的评价按钮跳转到评价页面,去填写评价,填写评价后返回订单列表,已评价的订单的评价按钮不显示,查看评价按钮显示示例及代码
时间: 2024-04-30 11:19:15 浏览: 52
以下是一个简单的示例,展示了如何使用小程序云开发实现评价功能:
首先,在订单列表页面,点击某一个订单的评价按钮时,使用 `wx.navigateTo` 方法跳转到评价页面,并将该订单的 `_id` 作为参数传递:
```
// 订单列表页面
wx.navigateTo({
url: '/pages/comment/comment?id=' + orderId,
})
```
在评价页面,使用 `wx.cloud.callFunction` 方法调用云函数,将评价内容保存到云数据库中:
```
// 评价页面
const db = wx.cloud.database()
wx.cloud.callFunction({
name: 'addComment',
data: {
orderId: orderId,
content: content,
score: score,
},
success: res => {
wx.showToast({
title: '评价成功',
})
// 返回订单列表页面
wx.navigateBack()
},
fail: err => {
console.error(err)
wx.showToast({
icon: 'none',
title: '评价失败',
})
}
})
```
其中,`addComment` 云函数的代码如下:
```
// 云函数 addComment
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
})
const db = cloud.database()
exports.main = async (event, context) => {
const { orderId, content, score } = event
try {
// 在评价表中插入一条记录
await db.collection('comments').add({
data: {
order_id: orderId,
content: content,
score: score,
},
})
// 更新订单表中的评价状态
await db.collection('orders').doc(orderId).update({
data: {
is_commented: true,
},
})
return {
success: true,
}
} catch (err) {
console.error(err)
return {
success: false,
errMsg: err.message,
}
}
}
```
最后,在订单列表页面中,根据订单的 `is_commented` 字段来判断该订单是否已评价,如果已评价,则显示查看评价按钮,否则显示评价按钮:
```
// 订单列表页面
const db = wx.cloud.database()
db.collection('orders').where({
user_id: userId,
}).get({
success: res => {
const orders = res.data
for (let i = 0; i < orders.length; i++) {
const order = orders[i]
if (order.is_commented) {
// 已评价
order.isCommented = true
} else {
// 未评价
order.isCommented = false
}
}
this.setData({
orders: orders,
})
},
fail: err => {
console.error(err)
}
})
```
例如,在订单列表页面中,可以使用以下代码来显示评价按钮或查看评价按钮:
```
<view wx:if="{{!order.isCommented}}">
<button bindtap="commentOrder">评价</button>
</view>
<view wx:if="{{order.isCommented}}">
<button bindtap="viewComment">查看评价</button>
</view>
```
阅读全文