|
微信小程序多商品評(píng)價(jià)評(píng)星提交
<form bindsubmit="submitComment">
<block wx:for="{{commentList}}" wx:key="{{item.g_id}}">
<view class="rating-top bgw">
<image src="{{url+item.thumb}}" class="proimg"></image>
<view class="rating-right">
<view class="">評(píng)分</view>
<view class="star-wrapper">
<block wx:for="{{starnum}}" wx:key="unique" wx:for-item="v">
<view class="star {{item.star>=v?'on':''}}" style="background-image:url({{star}})" bindtap="checkStar" data-num="{{v}}" data-id="{{item.g_id}}"></view>
</block>
</view>
</view>
</view>
<textarea auto-height class="rating-con bgw pd20" placeholder="請(qǐng)寫(xiě)下你對(duì)寶貝的感受吧,對(duì)其他人有很大幫助哦!" data-index="{{index}}" value="{{item.content}}" bindblur="saveContent"/>
</block>
<button class="submit" formType="submit">提交評(píng)價(jià)</button>
</form>
wxml頁(yè)面結(jié)構(gòu)如上。小程序的textarea組件的bindblur事件更新不及時(shí),所以用form提交。
/**
* 星星選擇
*/
checkStar: function (e) {
var commentList = this.data.commentList;
var id = parseInt(e.currentTarget.dataset.id);
var num = parseInt(e.currentTarget.dataset.num);
for (let i = 0, l = commentList.length; i < l; i++) {
if (commentList[i].g_id == id) {
commentList[i].star = num
}
}
this.setData({
'commentList': commentList
});
},
主要的難點(diǎn)在于雙循環(huán)中要獲取到上一個(gè)循環(huán)體當(dāng)前索引,后來(lái)發(fā)現(xiàn)其實(shí)可以通過(guò)g_id而不是index來(lái)區(qū)分這是哪個(gè)商品的評(píng)價(jià),這樣一來(lái)就可以拿到每一個(gè)商品的星星評(píng)級(jí)。
/**
* 提交評(píng)價(jià)
*/
submitComment: function (e) {
var g_id = '';
var star = '';
var content = '';
var commentList = this.data.commentList;
for (var i = 0, len = commentList.length; i < len; i++) {
g_id += commentList[i].g_id + '>}';
star += commentList[i].star + '>}';
if (utils.judgeNull(commentList[i].content)) {
commentList[i].content = '系統(tǒng)默認(rèn)好評(píng)'
}
// content.push(commentList[i].content);
content += commentList[i].content + '>}';
}
// console.log(content)
// console.log(g_id)
// console.log(star)
app.fetch1(API.addEvaluate,
{
uid: wx.getStorageSync('uid'),
user_id: wx.getStorageSync('user_id'),
g_id: g_id,
content: content,
star: star,
order_id: this.data.order_id
}, (err, data) => {
console.log(data)
if (data.code == ERR_OK) {
wx.showToast({
title: '提交評(píng)價(jià)成功!',
icon: 'success',
duration: 2000
})
setTimeout(function () {
wx.navigateBack({
})
}, 2000)
} else {
wx.showToast({
title: data.msg,
icon: 'loading',
duration: 2000
})
}
})
},
提交的時(shí)候有個(gè)坑,原本傳給后端的數(shù)據(jù)應(yīng)該是三個(gè)數(shù)組,但是它自動(dòng)轉(zhuǎn)成了字符串,后端同事查過(guò)后發(fā)現(xiàn)無(wú)解(或者暫時(shí)無(wú)解),于是選擇直接拼接字符串傳遞,原本打算通過(guò)“,”區(qū)分,考慮到評(píng)價(jià)內(nèi)容中可能出現(xiàn)的“,”最后決定以“}>”作為分隔。 |