uniapp 小程序查看评价

查看评价效果图：
在这里插入图片描述

评分组件在上一篇文章！！！！！！！

<template><view class="view-comments"><view class="evaluate-box"><view class="title">服务评价:</view><view class="star-rating"><stars-rating :starsIndex="starsIndex" :starsObject="clicked_list" :isEditStars="false"@starsClick="starsClick"></stars-rating></view></view><view class="evaluate-comment">{{commentContent}}</view></view>
</template><script>var http = require("../../utils/http.js");var config = require("../../utils/config.js");import starsRating from '../../components/starsRating/starsRating'export default {data() {return {starsIndex: 1, // 默认星级评价分数clicked_list: {} ,//星级评价图标数组commentContent:''}},components: {starsRating},props: {},computed: {},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {this.orderId = options.orderIdthis.getPageData()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},methods: {/*** 查看评价*/getPageData: function(e) {uni.showLoading(); var params = {url: "/order/info",method: "GET",data: {orderId: this.orderId},callBack: res=> {this.starsIndex = res.data.commentStartthis.commentContent = res.data.commentContentthis.curShowStars(this.starsIndex)uni.hideLoading()}};http.request(params);},starsClick: function(starsNum) {var _this = this_this.starsIndex = starsNum_this.curShowStars(starsNum)},// 星星评价展示curShowStars: function(starsNum) {var _this = thisif (starsNum == 1) {_this.clicked_list = ["../../static/img/stars_selected.png", "../../static/img/stars_defalt.png","../../static/img/stars_defalt.png", "../../static/img/stars_defalt.png","../../static/img/stars_defalt.png"]} else if (starsNum == 2) {_this.clicked_list = ["../../static/img/stars_selected.png", "../../static/img/stars_selected.png","../../static/img/stars_defalt.png", "../../static/img/stars_defalt.png","../../static/img/stars_defalt.png"]} else if (starsNum == 3) {_this.clicked_list = ["../../static/img/stars_selected.png", "../../static/img/stars_selected.png","../../static/img/stars_selected.png", "../../static/img/stars_defalt.png","../../static/img/stars_defalt.png"]} else if (starsNum == 4) {_this.clicked_list = ["../../static/img/stars_selected.png", "../../static/img/stars_selected.png","../../static/img/stars_selected.png", "../../static/img/stars_selected.png","../../static/img/stars_defalt.png"]} else if (starsNum == 5) {_this.clicked_list = ["../../static/img/stars_selected.png", "../../static/img/stars_selected.png","../../static/img/stars_selected.png", "../../static/img/stars_selected.png","../../static/img/stars_selected.png"]} else {_this.clicked_list = ["../../static/img/stars_defalt.png", "../../static/img/stars_defalt.png","../../static/img/stars_defalt.png", "../../static/img/stars_defalt.png","../../static/img/stars_defalt.png"]_this.starsIndex = 0}}}}
</script>
<style>page {background: #f8f8f8;
}
.view-comments {margin: 32rpx 21rpx 0rpx 21rpx;border-radius: 20rpx;background: #FFFFFF;padding: 42rpx 20rpx 41rpx 20rpx;
}
.evaluate-box{display: flex;justify-content: flex-start;align-items: center;
}
.title{font-size: 32rpx;color: #333333;margin-right: 50rpx;
}
.evaluate-comment{font-size: 32rpx;color: #333333;margin-top: 47rpx;
}</style>