微信小程序多商品評價評星提交
<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="">評分</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="請寫下你對寶貝的感受吧,對其他人有很大幫助哦!" data-index="{{index}}" value="{{item.content}}" bindblur="saveContent"/> </block> <button class="submit" formType="submit">提交評價</button> </form> wxml頁面結構如上。小程序的textarea組件的bindblur事件更新不及時,所以用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 }); }, 主要的難點在于雙循環(huán)中要獲取到上一個循環(huán)體當前索引,后來發(fā)現(xiàn)其實可以通過g_id而不是index來區(qū)分這是哪個商品的評價,這樣一來就可以拿到每一個商品的星星評級。 /** * 提交評價 */ 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)默認好評' } // 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: '提交評價成功!', icon: 'success', duration: 2000 }) setTimeout(function () { wx.navigateBack({ }) }, 2000) } else { wx.showToast({ title: data.msg, icon: 'loading', duration: 2000 }) } }) }, 提交的時候有個坑,原本傳給后端的數據應該是三個數組,但是它自動轉成了字符串,后端同事查過后發(fā)現(xiàn)無解(或者暫時無解),于是選擇直接拼接字符串傳遞,原本打算通過“,”區(qū)分,考慮到評價內容中可能出現(xiàn)的“,”最后決定以“}>”作為分隔。 |