<template>
<view>
<view class="xing">
<view class="xing_k" v-for="(a,b) in content" :key="b">
<view class="x_title">{
{
a.name}}：</view>
<view class="x_img">
<view class="ping">
<view class="zheng_xin" v-for="(row,index) in a.hui" @click="dian(b,index)" :key="index">
<image class="img" src="../xin.png" v-if="a.zheng-0.5>index" />
<image class="img" src="../b_xin.png" v-if="a.ban && a.zheng>index" />
<image class="img" src="../h_xin.png" v-if="a.zheng<=index" />
</view>
</view>
</view>
<view class="x_fen">{
{
a.zheng}}分</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ping: '',
content: [{
name: '性格',
hui: 5,
zheng: '0',
ban: 'false',
sum: 0
},
{
name: '相貌',
hui: 5,
zheng: '0',
ban: 'false',
sum: 0
},
{
name: '学历',
hui: 5,
zheng: '0',
ban: 'false',
sum: 0
},
{
name: '身高',
hui: 5,
zheng: '0',
ban: 'false',
sum: 0
}
],
id: ''
}
},
methods: {
dian(b, e) {
var that = this
var a = e++
that.content[b].sum++
console.log(that.content[b].sum, 22)
if (that.content[b].sum == 1) {
that.content[b].zheng = e - 0.5
that.content[b].ban = true
that.content[b].sum = -1
} else {
that.content[b].ban = false
that.content[b].zheng = e++
}
},
}
}
</script>
<style>
/* 点评星级 */
.xing {
width: 100%;
height: 300upx;
padding: 25upx;
padding-top: 52rpx;
box-sizing: border-box;
overflow: hidden;
}
.xing_k {
width: 100%;
line-height: 80upx;
}
.x_title {
float: left;
}
.x_img {
/* width: 250upx; */
height: 44upx;
max-width: 80%;
float: left;
}
.x_fen{
margin-left: 28rpx;
}
.ping {
/* width: 150upx; */
height: 44upx;
float: left;
overflow: hidden;
}
.zheng_xin {
width: 44upx;
height: 44upx;
// margin: 10upx;
float: left;
margin-left: 30rpx;
}
.ban_xin {
width: 44upx;
height: 44upx;
// margin: 10upx;
float: left;
}
.img {
width: 100%;
height: 100%;
}
</style>
原文插件链接：https://ext.dcloud.net.cn/plugin?id=3671