效果图
wxml 部分
<view class="nav_box">
<view class="rate">
<van-rate
name="rate_value"
value="{{ value }}"
size="{{ 25 }}"
color="#FFD21E"
void-color="#eee"
void-icon="star"
bind:change="onChange"
touchable
/>
<view class="reate_eavl">
<view wx:for="{{eval_rate}}" :key="item.id" class="rate_eval" name="rate_eavl" wx:if="{{item.id===rate_eavl}}">{{item.rate}}</view>
</view>
<view class="rate_but">
<view wx:for="{{eval_but}}" style="display:inline-block" wx:key="index" data-item="{{index}}" wx:if="{{index==rate_eavl}}">
<view style="display:inline-block">
<text wx:for="{{eval_but[rate_eavl]}}" data-item="{{item.id}}" wx:key="item.id" data-index="{{index}}" data-name="{{item.name}}" class="reate_style {{tools.fn_indexOf(choiceIdStyle,item.id).indexOf ? 'reate_active' : ''}}" bindtap="clickButton">{{item.name}}</text>
</view>
</view>
<!-- <van-button class="reate_style {{item.id >1 ? 'reate_active' : 'reate_style'}}" size="small" round data-item="{{item}}" wx:for="{{eval_but}}" wx:key="{{item.id}}" bindtap="clickButton">{{item.eval}}</van-button> -->
</view>
</view>
</view>
<view class="subimt_but">
<van-button color="#FFB71B" block bindtap="subimtBut" disabled="{{isSubmit}}">匿名提交</van-button>
</view>
</view>
js 部分
data: {
rate_eavl: 0,
rate_value: 0,
isSubmit: true,
eval_but: [],
eval_rate: [{
id: 0,
rate: '待评价'
}, {
id: 1,
rate: '非常不满意,各方面都很差;'
}, {
id: 2,
rate: '不满意,比较差;'
}, {
id: 3,
rate: '一般,还需改善;'
}, {
id: 4,
rate: '比较满意,仍可改善;'
}, {
id: 5,
rate: '非常满意,无需挑剔;'
}]
},
vant-rate 星级评价增加判断button 设为disabled
onChange(e) {
console.log(e.detail)
this.setData({
rate_value: e.detail,
rate_eavl: e.detail,
})
if (e.detail < 1) {
this.setData({
isSubmit: true
})
} else {
this.setData({
isSubmit: false
})
}
},
获取评价Lable 标签
getEvalLabel() {
const that = this
app.post(service.xxxxxx).then(res => {
if (res.code == 200) {
console.log(res.data)
that.eval_but = res.data
console.log(that.eval_but)
this.setData({
eval_but: that.eval_but
})
} else if (res.code == 400) {
wx.showToast({
title: '获取标签失败',
icon: 'none',
duration: 2000
})
}
})
}
clickButton(e) {
const that = this
console.log(e)
let _data = e.currentTarget.dataset;
let _list_data = _data.item;
let _idArr = that.data.eval_but[that.data.rate_value]; //后台返回的对应星级的标签数据;
let eq = _idArr.indexOf(_list_data) // 判断这个标签是是否存在被选
console.log(eq)
if (eq == -1) {
_idArr.push(_list_data) // 没有就添加
var _filter_idarr = _idArr.filter((element, index, self) => {
return typeof element !== 'object'
})
//因为放在一个数组里面,然后filter 过滤一下,!==='object'要传参给后台
} else {
_idArr.splice(eq, 1)
}
this.setData({
choiceIdStyle: _idArr,
_filter_idarr: _filter_idarr
})
},
## button 按钮提交
subimtBut() {
const that = this
app.post(service.xxxxxx, {
extension_id: that.data.id,
ids: this.data._filter_idarr.join(',')
}).then(res => {
if (res.code == 200) {
console.log(res.data)
wx.navigateBack();
wx.showToast({
title: '评价成功',
icon: 'none',
duration: 2000
})
} else if (res.code == 400) {
wx.showToast({
title: '获取标签失败',
icon: 'none',
duration: 2000
})
}
})
},