uniapp 小程序查看评价-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 小程序查看评价。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

查看评价效果图：
uniapp 小程序查看评价,uni-app,小程序

评分组件在上一篇文章！！！！！！！文章来源地址https://www.toymoban.com/news/detail-602427.html

<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.orderId
			this.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.commentStart
						this.commentContent = res.data.commentContent
						this.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 = this
				if (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>