小程序云开发在已完成的订单列表点击某一个订单的评价按钮跳转到评价页面,去填写评价,填写评价后返回订单列表,已评价的订单的评价按钮不显示,查看评价显示示例及代码
时间: 2024-01-02 14:15:20 浏览: 30
评价按钮不显示的实现可以通过在订单列表页面获取该订单的评价状态(已评价或未评价),然后根据状态决定是否显示评价按钮。评价状态可以通过在订单数据库中添加一个字段来记录。
评价页面可以设计成一个表单,用户需要填写评价内容和评分。填写完成后,可以通过云函数将评价内容和评分存储到订单数据库中。
以下是一个简单的示例代码:
订单列表页面:
```js
// 获取订单列表
const db = wx.cloud.database();
const orderList = await db.collection('orders').get();
// 遍历订单列表
orderList.forEach(order => {
const isRated = order.isRated; // 获取订单评价状态
const orderId = order._id; // 获取订单ID
// 渲染订单项
const orderItem = `
<view>
<text>${order.title}</text>
${isRated ? '<text>已评价</text>' : '<button bindtap="gotoRate">评价</button>'}
</view>
`;
// 将订单项添加到页面
});
// 点击评价按钮跳转到评价页面
function gotoRate(event) {
const orderId = event.currentTarget.dataset.orderId;
wx.navigateTo({
url: `/pages/rate/rate?orderId=${orderId}`
});
}
```
评价页面:
```js
// 获取订单ID
const orderId = options.orderId;
// 提交表单
function submitForm(event) {
const content = event.detail.value.content; // 获取评价内容
const score = event.detail.value.score; // 获取评分
// 调用云函数提交评价
wx.cloud.callFunction({
name: 'rateOrder',
data: {
orderId: orderId,
content: content,
score: score
},
success: res => {
// 评价成功,返回订单列表页面
wx.navigateBack();
},
fail: err => {
// 评价失败,提示用户
wx.showToast({
title: '评价失败',
icon: 'none'
});
}
});
}
```
云函数:
```js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const db = cloud.database();
const orderId = event.orderId;
const content = event.content;
const score = event.score;
// 更新订单评价状态和评价内容
try {
await db.collection('orders').doc(orderId).update({
data: {
isRated: true,
rateContent: content,
rateScore: score
}
});
return {
success: true
};
} catch (err) {
return {
success: false,
errMsg: err.message
};
}
}
```
注意:以上代码仅为示例代码,需要根据实际需求进行修改和优化。