146 lines
4.4 KiB
Vue
146 lines
4.4 KiB
Vue
|
<template>
|
||
|
|
<view class="stars">
|
||
|
|
<image @click="btnStars1" class="starsicon" :src="starsObject[0]" mode=“widthFix”></image>
|
||
|
|
<image @click="btnStars2" class="starsicon" :src="starsObject[1]" mode=“widthFix”></image>
|
||
|
|
<image @click="btnStars3" class="starsicon" :src="starsObject[2]" mode=“widthFix”></image>
|
||
|
|
<image @click="btnStars4" class="starsicon" :src="starsObject[3]" mode=“widthFix”></image>
|
||
|
|
<image @click="btnStars5" class="starsicon" :src="starsObject[4]" mode=“widthFix”></image>
|
||
|
|
<text class="txt-stars">{{value}}分</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
starsIndex: Number, // 星级评价分数
|
||
|
|
isEditStars: {}, // 是否编辑星级评价分数
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
starsObject: {} ,// 数组
|
||
|
|
value:this.starsIndex,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.curShowStars(this.value)
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
btnStars1: function() {
|
||
|
|
var _this = this
|
||
|
|
// console.log("btnStars1 = " + _this.isEditStars)
|
||
|
|
if (_this.isEditStars) {
|
||
|
|
_this.curShowStars(1)
|
||
|
|
_this.value = 1;
|
||
|
|
_this.$emit("starsClick", _this.value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
btnStars2: function() {
|
||
|
|
var _this = this
|
||
|
|
if (_this.isEditStars) {
|
||
|
|
_this.curShowStars(2)
|
||
|
|
_this.value = 2;
|
||
|
|
_this.$emit("starsClick", _this.value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
btnStars3: function() {
|
||
|
|
var _this = this
|
||
|
|
if (_this.isEditStars) {
|
||
|
|
_this.curShowStars(3)
|
||
|
|
_this.value = 3;
|
||
|
|
_this.$emit("starsClick", _this.value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
btnStars4: function() {
|
||
|
|
var _this = this
|
||
|
|
if (_this.isEditStars) {
|
||
|
|
_this.curShowStars(4)
|
||
|
|
_this.value = 4;
|
||
|
|
_this.$emit("starsClick", _this.value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
btnStars5: function() {
|
||
|
|
var _this = this
|
||
|
|
if (_this.isEditStars) {
|
||
|
|
_this.curShowStars(5)
|
||
|
|
_this.value = 5;
|
||
|
|
_this.$emit("starsClick", _this.value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 星星评价展示
|
||
|
|
curShowStars (starsNum) {
|
||
|
|
console.log(starsNum)
|
||
|
|
this.value = starsNum
|
||
|
|
var _this = this
|
||
|
|
if (Math.round(starsNum) == 1) {
|
||
|
|
_this.starsObject = _this.changStarsImg(1)
|
||
|
|
} else if (Math.round(starsNum) == 2) {
|
||
|
|
_this.starsObject = _this.changStarsImg(2)
|
||
|
|
} else if (Math.round(starsNum) == 3) {
|
||
|
|
_this.starsObject = _this.changStarsImg(3)
|
||
|
|
} else if (Math.round(starsNum) == 4) {
|
||
|
|
_this.starsObject = _this.changStarsImg(4)
|
||
|
|
} else if (Math.round(starsNum) == 5) {
|
||
|
|
_this.starsObject = _this.changStarsImg(5)
|
||
|
|
} else {
|
||
|
|
_this.starsObject = _this.changStarsImg(starsNum)
|
||
|
|
_this.value = 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changStarsImg(num){
|
||
|
|
let starsNum = num;
|
||
|
|
if (starsNum == 1) {
|
||
|
|
return [
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_defalt.png",
|
||
|
|
"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
|
||
|
|
"../../static/imgs/stars_defalt.png"
|
||
|
|
]
|
||
|
|
} else if (starsNum == 2) {
|
||
|
|
return [
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
|
||
|
|
"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
|
||
|
|
"../../static/imgs/stars_defalt.png"
|
||
|
|
]
|
||
|
|
} else if (starsNum == 3) {
|
||
|
|
return [
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_defalt.png",
|
||
|
|
"../../static/imgs/stars_defalt.png"
|
||
|
|
]
|
||
|
|
} else if (starsNum == 4) {
|
||
|
|
return [
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
|
||
|
|
"../../static/imgs/stars_defalt.png"
|
||
|
|
]
|
||
|
|
} else if (starsNum == 5) {
|
||
|
|
return [
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
|
||
|
|
"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
|
||
|
|
"../../static/imgs/stars_selected.png"
|
||
|
|
]
|
||
|
|
} else {
|
||
|
|
return [
|
||
|
|
"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
|
||
|
|
"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
|
||
|
|
"../../static/imgs/stars_defalt.png"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.stars{
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.starsicon{
|
||
|
|
width: 48upx;
|
||
|
|
height: 48upx;
|
||
|
|
}
|
||
|
|
.txt-stars{
|
||
|
|
color: #999;
|
||
|
|
margin-left: 50upx;
|
||
|
|
}
|
||
|
|
</style>
|