Ver las representaciones de evaluación:
¡Componente de puntuación en el último artículo! ! ! ! ! ! !
<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>