效果图
1、新建“评价”界面review.vue，并对其按照要求设置样式，样式如下：
{
"path" : "pages/review/review",
"style" :
{
"navigationBarTitleText": "评价",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#ffffff"
}
}
“评价”界面通过“历史订单”界面和“订单详情”界面中“去评价”按钮进行交互跳转（如图5.4.2），跳转时需利用URL编程式传入参数storename（店铺名称）、typeCate（取餐类型）、date（订单时间），传入时间需进行分割，只需年月日，不需精确到时分秒。具体跳转方法如下：
review(order) {//去评价
const date = order.completed_time.split(' ')[0]//对时间进行分割，只需年月日，不需精确到时分秒
uni.navigateTo({
url: '/pages/review/review?storename=' + order.store.name + '&typeCate=' + order.typeCate + '& =' + date
})
}
此处需注意，对“去评价”按钮进行点击事件设置时，按照@tap.stop="review(item)"使用。由于“去评价”按钮在每个列表item之上，会出现事件传递到父元素item上，通过.stop修饰符可以阻止这种冒泡行为，从而防止事件传播到父元素。具体学习查看本工单知识技能。
2、引入自定义rate-form-item评分组件到review文件夹下，如图5.4.3。
在“评价”界面的onload声明周期函数中，获取上级界面传递的三个参数，代码如下：
onLoad({storename, typeCate, date}) {
this.storename = storename
this.typeCate = typeCate
this.date = date
}
同时定义form对象参数，在form对象中设置评分的维度score_service（服务）、score_order（点单）、score_speed（速度）、score_product（产品）、score_enviroment（环境）、opinion（文字意见），在界面布局通过v-model与之进行绑定。
form: {
score_service: 0,
score_order: 0,
score_speed: 0,
score_product: 0,
score_enviroment: 0,
opinion: ''
}
3、完成本页面相关布局及关联。特别注意“提交评论”交互时候，通过以下方法判断每项是否已经完成打分及评论。通过利用!this.form.score_service || !this.form.score_order || !this.form.score_speed || !this.form.score_product || !this.form.score_enviroment判断，如有一项返回值为0则需要提示“请先选择评论内容”，效果如图5.4.4。
submit() {
if(!this.form.score_service || !this.form.score_order || !this.form.score_speed || !this.form.score_product || !this.form.score_enviroment){
uni.showToast({
title: '请先选择评论内容',
icon: 'none'
})
return
}
uni.showToast({
title: '提交成功'
})
uni.navigateBack()
}
4、最后需测试本模块页面，首先启动项目，打开开发者工具。通过模拟器或真机运行页面，检查布局是否适配不同屏幕尺寸。观察页面加载速度，确保资源加载正常，无白屏或卡顿。
点击按钮、输入数据等交互操作，验证功能逻辑是否符合预期，如表单提交是否成功、数据展示是否正确。查看控制台，排查是否有错误或警告信息，如图5.4.5。最后，进行性能测试，查看页面内存占用和渲染性能，优化可能的性能瓶颈。
5、至此，“评价”界面的相关功能开发工作结束。团队成员应运用SourceTree工具执行版本控制的提交操作，以便为本次工单的开发代码建立历史版本的记录。
review.vue源码
<template>
<!-- 评价页面 -->
<view class="container">
<view class="content">
<list-cell last class="mb-20" :hover="false">
<view class="w-100 d-flex justify-content-between align-items-center">
<view class="font-size-lg text-color-base flex-fill">{{ storename }}</view>
<view class="font-size-base text-color-assist mr-10">{{ date }}</view>
<view class="font-size-base text-color-assist">{{ typeCate == 1 ? '堂食' : '外卖' }}</view>
</view>
</list-cell>
<view class="review-form">
<view class="review-rate-form mb-20">
<rate-form-item v-model="form.score_service" label="服务" tips="能感受到良好的服务态度吗？"></rate-form-item>
<rate-form-item v-model="form.score_order" label="点单" tips="点单有恰当的介绍，快速准确地下单吗？"></rate-form-item>
<rate-form-item v-model="form.score_speed" label="速度" tips="出品的速度您认为可接受吗？"></rate-form-item>
<rate-form-item v-model="form.score_product" label="产品" tips="您享用的茶饮或面包，如您所期待吗？"></rate-form-item>
<rate-form-item v-model="form.score_enviroment" label="环境" tips="门店环境和清洁卫生，您满意吗？"></rate-form-item>
</view>
<view class="review-textarea-form">
<textarea v-model="form.opinion" placeholder="如果您有什么意见和建议,请告诉我们,我们会认真聆听"
placeholder-class="font-size-sm text-color-assist"/>
<view class="text-right font-size-sm text-color-assist">{{ form.opinion.length }}/500</view>
</view>
</view>
</view>
<view class="btn-box">
<button type="primary" @tap="submit">提交评论</button>
</view>
</view>
</template>
<script>
import rateFormItem from './rate-form-item'
export default {
components: {
rateFormItem
},
data() {
return {
form: {
score_service: 0,
score_order: 0,
score_speed: 0,
score_product: 0,
score_enviroment: 0,
opinion: ''
},
storename: '',
typeCate: 1,
date: ''
};
},
onLoad({storename, typeCate, date}) {
this.storename = storename
this.typeCate = typeCate
this.date = date
},
methods: {
submit() {
if(!this.form.score_service || !this.form.score_order || !this.form.score_speed || !this.form.score_product || !this.form.score_enviroment){
uni.showToast({
title: '请先选择评论内容',
icon: 'none'
})
return
}
uni.showToast({
title: '提交成功'
})
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding-bottom: 120rpx;
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
background-color: #FFFFFF;
padding: 20rpx 0;
display: flex;
justify-content: center;
button {
width: 90%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rem !important;
}
}
.review-form {
background-color: #FFFFFF;
padding: 20rpx 0;
}
.review-textarea-form {
padding: 0 30rpx;
textarea {
width: 100%;
background-color: $bg-color;
padding: 30rpx;
font-size: $font-size-sm;
color: $font-size-base;
}
}
</style>
