小程序?qū)崿F(xiàn)訂單評價和商家評價
小程序做線上商城就離不開交互,包括最重要的支付和訂單評價系統(tǒng)。訂單評價簡單的只有商品評價,比較齊全的是商品和商家一起評價。
本文介紹的目錄包含,商品評價,商家評價,星級評分,上傳照片,以及評論字?jǐn)?shù)限制。
目錄:
(一)星級評分的寫法
(二)評論區(qū)的字?jǐn)?shù)顯示和限制
(三)圖片張數(shù)限制和上傳到服務(wù)器
(四)完整代碼
看看開發(fā)工具中的樣品圖:
在評論頁中展示商品和商家兩欄的評價內(nèi)容,并且提交評價的時候也要區(qū)分開,將商品和商家的評論內(nèi)容用數(shù)組的形式提交。
注意array和[object,object]的數(shù)據(jù)格式。
先說邏輯,因為兩塊其實是同一個功能,只不過是把方法名字區(qū)分為A和B,A和B的函數(shù)內(nèi)容一樣的,只有數(shù)據(jù)內(nèi)容不一樣。
所以這里是只講A方法。
(一)先說星級評分方法;
<view class='stars'> ?<view class='text'>評分</view> ?<view class='star_list'> ? ?<block wx:for="{{stars}}" wx:key> ? ? ?<image class="star-image" name="defen" value="{{key}}" style="left: {{item*30}}rpx" src="{{key > item ?(key-item == 0?normalSrc:selectedSrc) : normalSrc}}"> ? ? ? ?<view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view> ? ? ?</image> ? ?</block> ?</view> </view>
用數(shù)組來存儲圖片,wx:for來循環(huán)圖片列表,五星,列表長度就是0-4總共5,10星則是0-9。
兩張圖片。一張是帶顏色的作為點亮狀態(tài),一張是默認(rèn)的作為默認(rèn)狀態(tài)。設(shè)置選中函數(shù)selectRight。點星星一次則將星星圖片的位置從left位移多少個單位到點擊的對應(yīng)位置。反之則取消對應(yīng)的星星選中。
函數(shù):
//點擊右邊遞增,否則遞減,評分,商品+商家B ? selectRight (e) { ? ? var key = e.currentTarget.dataset.key; ?//評分 ? ? if (this.data.key == 1 && e.currentTarget.dataset.key == 1) { ? ? ? //只有一顆星的時候,再次點擊,變?yōu)?顆 ? ? ? key = 0; ? ? } ? ? this.setData({ ? ? ? key: key ? ? }) ? },
(二)評論區(qū)的字?jǐn)?shù)顯示和限制。
方法,給textarea一個最大的length.max-length =300.然后給輸入域一個獲取輸入的事件,bindInput。通過獲取bindInput的value長度,來限制。
<view class='textarea'> ? <textarea id='advice' name="advice" type="text" maxlength="{{max}}" bindinput="inputs" value="{{advice}}" placeholder="請輸入評價內(nèi)容..." placeholder-class='p_s'></textarea> ? <view class='fontNum'>{{fontNum}}</view> </view>
JS中通過最大長度與輸入長度的減法來動態(tài)改變fontNum剩余字?jǐn)?shù)。
//字?jǐn)?shù)限制 商品+商家B? ? inputs (e) { ? ? var value = e.detail.value, ? ? ? ? len = parseInt(value.length); ? ? //最多字?jǐn)?shù)限制 ? ? if (len > this.data.max) return; ? ? this.setData({ ? ? ? fontNum: 300-len //當(dāng)前字?jǐn)?shù) ? ? ? }); ? },
(三)上傳多張圖片并發(fā)送到服務(wù)器
默認(rèn)的API即可,但是圖片地址需要轉(zhuǎn)化。wx.chooseImage所給出的圖片地址是本地,并沒有存到服務(wù)器上,還需要保存到服務(wù)器上。
使用wx.request的方法。在回調(diào)的結(jié)果中,取出地址鏈接,存為數(shù)組或者單個url信息。與其他內(nèi)容一起進(jìn)行表單提交。
$uploadFile({ ? filePath: tempFilePaths[0], ? formData: { ? ? evaluateType: 'store' ? }, ? name: 'evaluteImage', ? url: 'v4/shop/file/uploadBySmall' }).then((res) => { ? if (res.isSuccess) { ? ? let url = res.resultData ? ? that.setData({ ? ? ? imgboxB: [url], ? ? ? imgboxB: imgboxB, ? ? }) ? ? //$toast('圖片上傳成功') ? } else { ? ? //$toast(res.message) ? } })
(四)完整代碼
wxml:
<!--pages/addProComment/addProComment.wxml--> <form bindsubmit="hrSubmit"> ? <view class='content'> ? ? <view class='form'> ? ? ? <view class='stores'> ? ? ? ? <image src='{{goodsImg}}'></image> ? ? ? ? <view class='stor_t'>{{gooodsName}}</view> ? ? ? </view> ? ? ? <view class='stars'> ? ? ? ? <view class='text'>評分</view> ? ? ? ? <view class='star_list'> ? ? ? ? ? <block wx:for="{{stars}}" wx:key> ? ? ? ? ? ? <image class="star-image" name="defen" value="{{key}}" style="left: {{item*30}}rpx" src="{{key > item ?(key-item == 0?normalSrc:selectedSrc) : normalSrc}}"> ? ? ? ? ? ? ? <view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view> ? ? ? ? ? ? </image> ? ? ? ? ? </block> ? ? ? ? </view> ? ? ? </view> ? ? ? <view class='textarea'> ? ? ? ? <textarea id='advice' name="advice" type="text" maxlength="{{max}}" bindinput="inputs" value="{{advice}}" placeholder="請輸入評價內(nèi)容..." placeholder-class='p_s'></textarea> ? ? ? ? <view class='fontNum'>{{fontNum}}</view> ? ? ? </view> ? ? ? <view class='up-pic'> ? ? ? ? <view class='flex pic-box'> ? ? ? ? ? <block wx:key="imgbox" wx:for="{{imgbox}}"> ? ? ? ? ? ? <view class='ap-box'> ? ? ? ? ? ? ? <view class='add-pic' name="Pics" value="{{item}}"> ? ? ? ? ? ? ? ? <image class='add-pic' src='{{item}}'></image> ? ? ? ? ? ? ? ? <view class='img-de' bindtap="clearPic" data-deindex='{{index}}'> ? ? ? ? ? ? ? ? ? <image class='img' src='/images/error.png'></image> ? ? ? ? ? ? ? ? </view> ? ? ? ? ? ? ? </view> ? ? ? ? ? ? </view> ? ? ? ? ? </block> ? ? ? ? ? <view class='add-pic add-photo' bindtap="uploadPic" wx:if="{{imgbox.length<4}}"> ? ? ? ? ? ? <image src='../../images/add.png' /> ? ? ? ? ? </view> ? ? ? ? </view> ? ? ? </view> ? ? </view> ? </view> ? <!-- 商家信息 --> ? <view class='content' wx:if="{{isTrue}}"> ? ? <view class='form'> ? ? ? <view class='stores'> ? ? ? ? <image src='{{goodsImg}}'></image> ? ? ? ? <view class='stor_t'>{{storeName}}</view> ? ? ? </view> ? ? ? <view class='stars'> ? ? ? ? <view class='text'>評分</view> ? ? ? ? <view class='star_list'> ? ? ? ? ? <block wx:for="{{starsB}}" wx:key> ? ? ? ? ? ? <image class="star-image" style="left: {{item*30}}rpx" src="{{keyB > item ?(keyB-item == 0?normalSrc:selectedSrc) : normalSrc}}"> ? ? ? ? ? ? ? <view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRightB"></view> ? ? ? ? ? ? </image> ? ? ? ? ? </block> ? ? ? ? </view> ? ? ? </view> ? ? ? <view class='textarea'> ? ? ? ? <textarea id='advice' name="adviceB" type="text" maxlength="{{max}}" bindinput="inputsB" value="{{adviceB}}" placeholder="請輸入評價內(nèi)容..." placeholder-class='p_s'></textarea> ? ? ? ? <view class='fontNum'>{{fontNumB}}</view> ? ? ? </view> ? ? ? <view class='up-pic'> ? ? ? ? <view class='flex pic-box'> ? ? ? ? ? <block wx:key="imgboxB" wx:for="{{imgboxB}}"> ? ? ? ? ? ? <view class='ap-box'> ? ? ? ? ? ? ? <view class='add-pic'> ? ? ? ? ? ? ? ? <image class='add-pic' src='{{item}}'></image> ? ? ? ? ? ? ? ? <view class='img-de' bindtap="clearPicB" data-deindex='{{index}}'> ? ? ? ? ? ? ? ? ? <image class='img' src='/images/error.png'></image> ? ? ? ? ? ? ? ? </view> ? ? ? ? ? ? ? </view> ? ? ? ? ? ? </view> ? ? ? ? ? </block> ? ? ? ? ? <view class='add-pic add-photo' bindtap="uploadPicB" wx:if="{{imgbox.length<4}}"> ? ? ? ? ? ? <image src='../../images/add.png' /> ? ? ? ? ? </view> ? ? ? ? </view> ? ? ? </view> ? ? </view> ? </view> ? <button class='submit' formType="submit"> 發(fā)布 </button> </form>
WXSS:
/* pages/addProComment/addProComment.wxss */ page{ ? background:#F5F5F2; } button::after{ ? border:none; } .content{ ? width:100%; ? margin:20rpx 0 0 0; ? background:#ffffff; } .form{ ? width:95%; ? margin:0 auto; ? padding:0 20rpx 0 20rpx; } .stores{ ? width:100%; ? display:flex; ? align-items: center; ? padding-top:30rpx; ? padding-bottom:30rpx; } .stores image{ ? width:45px; ? height:45px; ? border:1px solid #EBEBEB; } .stores .stor_t{ ? font-size:28rpx; ? color:#000; ? margin-left:30rpx; } .stars{ ? width:100%; ? height:40px; ? display:flex; ? align-items: center; ? border-top:1px solid #EBEBEB; ? border-bottom:1px solid #EBEBEB; } .stars .text{ ? font-size:30rpx; ? flex:1; } .stars .star_list{ ? flex:1; ? position:relative; ? margin-left:100rpx; } .textarea{ ? width: 100%; ? display: -webkit-flex; ? display: flex; ? -webkit-flex-direction: row; ? flex-direction: row; ? padding-top:20rpx; } .textarea .fontNum{ ? font-size:30rpx; ? line-height:40rpx; ? color:#333; } .textarea textarea{ ? -webkit-flex: 1; ? flex: 1; ? height:240rpx; ? font-size:26rpx; ? line-height: 42rpx; ? text-align: left; } .p_s{ ? font-size:30rpx; ? line-height:40rpx; ? color:#CCCCCC; } .submit { ? width: 100%; ? height:45px; ? margin:0 auto; ? margin-top: 25rpx; ? background:#00DF8C; ? color:#fff; ? font-size:32rpx; ? line-height:45px; ? border-radius:0; } .star-image { ? position: relative; ? width: 30rpx; ? height: 30rpx; } .item { ? position: absolute; ? top:0; ? width: 30rpx; ? height: 30rpx; } /* 上傳圖片 */ .flex{ ? display: flex; } .up-pic{ ? width: 100%; ? justify-content: center; } .pic-box{ ? flex-flow:wrap; ? width:100%;? } .ap-box{ ? position: relative; ? width: 150rpx; ? height: 150rpx; ? margin:0 15rpx 20rpx 10rpx; } .add-pic{ ? width: 150rpx; ? height: 150rpx; ? position: relative; ? display: flex; ? align-items: center; ? justify-content: center; ? border-radius: 5rpx; } .add-photo{ ?margin-bottom:20rpx;border: 1px solid #DDDDDD;} .add-photo image{ ? width:100rpx; ? height:100rpx; } /* 刪除圖片 */ .img-de{ ? width:45rpx; ? height:45rpx; ? border-radius:50%; ? position:absolute; ? right:-30rpx; ? top:-15rpx; ? z-index:999; } .img-de .img { ? width:30rpx; ? height:30rpx; }
JS:
// pages/addProComment/addProComment.js const app = getApp() const $http = app.$http const $toast = app.$toast const $getLocation = app.$getLocation const setStorage = app.setStorage const getStorage = app.getStorage const cdnPath = app.cdnPath const makePhoneCall = app.makePhoneCall const $uploadFile = app.$uploadFile import wxx from '../../utils/wx.js' import { parseParam } from '../../utils/index.js' const baseUrl = app.baseUrl Page({ ? data: { ? ? cdnPath: cdnPath, ? ? goodsId: '', ? ? gooodsName: '', ? ? storeName: '', ? ? goodsImg: '', ? ? orderSn:'', ? ? openId: '', ? ? memberId: '', ? ? fontNum:300, ? ? fontNumB: 300, ? ? stars: [0, 1, 2, 3, 4], ? ? starsB: [0, 1, 2, 3, 4], ? ? normalSrc: cdnPath+'img/addProcoment/nostar.png', ? ? selectedSrc: cdnPath +'img/addProcoment/star.png', ? ? key: 0,//評分 ? ? keyB: 0,//評分 ? ? isTrue:true, //是否多個商家 ? ? imgbox: '', ? ? imgboxB: '' ? }, ? onLoad (opt) { ? ? if (opt.length == 2){ ? ? ? that.setData({ ? ? ? ? isTrue: true, ? ? ? }) ? ? } ? ? this.setData({? ? ? ? src: '', ? ? ? gooodsName: opt.gooodsName, ? ? ? storeName: opt.storeName, ? ? ? goodsImg: opt.goodsImage, ? ? ? goodsId: opt.goodsId, ? ? ? orderSn: opt.orderSn, ? ? ? openId: wx.getStorageSync('openId') || '', ? ? ? memberId: 1000000000243316 //wx.getStorageSync('memberId') || '' ? ? }) ? }, ? //點擊右邊遞增,否則遞減,評分,商品+商家B ? selectRight (e) { ? ? var key = e.currentTarget.dataset.key; ?//評分 ? ? if (this.data.key == 1 && e.currentTarget.dataset.key == 1) { ? ? ? //只有一顆星的時候,再次點擊,變?yōu)?顆 ? ? ? key = 0; ? ? } ? ? this.setData({ ? ? ? key: key ? ? }) ? }, ? selectRightB (e) { ? ? var keyB = e.currentTarget.dataset.key; ? ? if (this.data.keyB == 1 && e.currentTarget.dataset.keyB == 1) { ? ? ? keyB = 0; ? ? } ? ? this.setData({ ? ? ? keyB: keyB ? ? }) ? }, ? //字?jǐn)?shù)限制 商品+商家B? ? inputs (e) { ? ? var value = e.detail.value, ? ? ? ? len = parseInt(value.length); ? ? //最多字?jǐn)?shù)限制 ? ? if (len > this.data.max) return; ? ? this.setData({ ? ? ? fontNum: 300-len //當(dāng)前字?jǐn)?shù) ? ? ? }); ? }, ? inputsB (e) { ? ? var value = e.detail.value, ? ? ? ? len = parseInt(value.length); ? ? if (len > this.data.max) return; ? ? this.setData({ ? ? ? fontNumB: 300 - len? ? ? }); ? }, //發(fā)布評論不驗證圖片 ? hrSubmit (t) { //提交發(fā)布,商品+商家 ? ? ? var d = t.detail.value, ? ? ? ? orderSn = this.data.orderSn, ? ? ? ? memberId = this.data.memberId, ? ? ? ? evaG = JSON.stringify({ evaGoodsInfo: [{ goodsId: this.data.goodsId, evaGoodsGrade: this.data.key, evaGoodsContent: d.advice, evaGoodsImage: this.data.imgbox }]}), ? ? ? ? evaS = JSON.stringify({ evaStoreInfo: { evaServiceGrade: this.data.keyB, evaServiceContent: d.adviceB, evaStoreImage: this.data.imgboxB }}); ? ? ? $http({ ? ? ? ? url: `v4/shop/evaluate/goodsOrStore/${orderSn}/${memberId}`, ?//{orderSn}/{memberId} ? ? ? ? method: 'POST', ? ? ? ? data: { ? ? ? ? ? evaGoodsInfo:evaG, ?//商品評價 ? ? ? ? ? evaStoreInfo: evaS, ?//商家評價 ? ? ? ? ? inway:2 ? ? ? ? } ? ? ? }).then(response => { ? ? ? ? if (response.isSuccess === true) { ? ? ? ? ? $toast('評價成功!') ? ? ? ? ? setTimeout(() => { ? ? ? ? ? ? wx.navigateTo({ url: '/pages/myOrder/myOrder'}) ? ? ? ? ? }, 1000) ? ? ? ? } ? ? ? }).catch((error) => { ? ? ? ? console.log(error) ? ? ? }) ? }, ? //上傳圖片,商品+商家B ? uploadPic: function (e) { ? ? var that = this; ? ? var imgbox = this.data.imgbox; ? ? var picid = e.currentTarget.dataset.pic; ? ? var n = 4; ? ? if (4 > imgbox.length > 0) { ? ? ? n = 4 - imgbox.length; ? ? } else if (imgbox.length == 4) { ? ? ? n = 1; ? ? } ? ? wx.chooseImage({ ? ? ? count: n, // 默認(rèn)數(shù)量 ? ? ? sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 ? ? ? sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有 ? ? ? success: function (res) { ? ? ? ? var tempFilePaths = res.tempFilePaths; ? ? ? ? if (imgbox.length == 0) { ? ? ? ? ? imgbox = tempFilePaths ? ? ? ? } else if (4 > imgbox.length) { ? ? ? ? ? imgbox = imgbox.concat(tempFilePaths); ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? imgbox[picid] = tempFilePaths[0]; ? ? ? ? } ? ? ? ? $uploadFile({ ? ? ? ? ? filePath: tempFilePaths[0], ? ? ? ? ? formData: { ? ? ? ? ? ? evaluateType: 'store' ? ? ? ? ? }, ? ? ? ? ? name: 'evaluteImage', ? ? ? ? ? url: 'v4/shop/file/uploadBySmall' ? ? ? ? }).then((res) => { ? ? ? ? ? if (res.isSuccess) { ? ? ? ? ? ? let url = res.resultData ? ? ? ? ? ? that.setData({ ? ? ? ? ? ? ? imgbox: [url], ? ? ? ? ? ? ? imgbox: imgbox, ? ? ? ? ? ? }) ? ? ? ? ? ? //$toast('圖片上傳成功') ? ? ? ? ? } else { ? ? ? ? ? ? //$toast(res.message) ? ? ? ? ? } ? ? ? ? }) ? ? ? } ? ? }) ? }, ? uploadPicB: function (e) { ? ? var that = this; ? ? var imgboxB = this.data.imgboxB; ? ? var picid = e.currentTarget.dataset.pic; ? ? var n = 4; ? ? if (4 > imgboxB.length > 0) { ? ? ? n = 4 - imgboxB.length; ? ? } else if (imgboxB.length == 4) { ? ? ? n = 1; ? ? } ? ? wx.chooseImage({ ? ? ? count: n, // 默認(rèn)圖片數(shù)量 ? ? ? sizeType: ['original', 'compressed'],? ? ? ? sourceType: ['album', 'camera'],? ? ? ? success: function (res) { ? ? ? ? var tempFilePaths = res.tempFilePaths; ? ? ? ? if (imgboxB.length == 0) { ? ? ? ? ? imgboxB = tempFilePaths; ? ? ? ? } else if (4 > imgboxB.length) { ? ? ? ? ? imgboxB = imgboxB.concat(tempFilePaths); ? ? ? ? } else { ? ? ? ? ? imgboxB[picid] = tempFilePaths[0]; ? ? ? ? } ? ? ? ? $uploadFile({ ? ? ? ? ? filePath: tempFilePaths[0], ? ? ? ? ? formData: { ? ? ? ? ? ? evaluateType: 'store' ? ? ? ? ? }, ? ? ? ? ? name: 'evaluteImage', ? ? ? ? ? url: 'v4/shop/file/uploadBySmall' ? ? ? ? }).then((res) => { ? ? ? ? ? if (res.isSuccess) { ? ? ? ? ? ? let url = res.resultData ? ? ? ? ? ? that.setData({ ? ? ? ? ? ? ? imgboxB: [url], ? ? ? ? ? ? ? imgboxB: imgboxB, ? ? ? ? ? ? }) ? ? ? ? ? ? //$toast('圖片上傳成功') ? ? ? ? ? } else { ? ? ? ? ? ? //$toast(res.message) ? ? ? ? ? } ? ? ? ? }) ? ? ? } ? ? }) ? }, ? // 上傳圖片 ? uploadImgSuccess(res, file, fileList) { ? ? if (res.isSuccess) { ? ? ? let arr = res.resultData.split('/') ? ? ? this.data.imageListHD.push(arr[arr.length - 1]) ? ? } else { ? ? ? fileList.splice(-1, 1) ? ? ? $toast(res.message) ? ? ? return ? ? } ? }, ? //刪除圖片 ? clearPic: function (e) {//刪除圖片 ? ? let that = this; ? ? let index = e.currentTarget.dataset.deindex; ? ? let imgbox = this.data.imgbox; ? ? imgbox.splice(index, 1) ? ? that.setData({ ? ? ? imgbox: imgbox ? ? }); ? }, ? clearPicB: function (e) {//刪除圖片 ? ? let that = this; ? ? let index = e.currentTarget.dataset.deindex; ? ? let imgboxB = this.data.imgboxB; ? ? imgboxB.splice(index, 1) ? ? that.setData({ ? ? ? imgboxB: imgboxB ? ? }); ? }, ? onShareAppMessage: function () { ? } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Chrome中模態(tài)對話框showModalDialog返回值問題的解決方法
chrome中彈出模態(tài)對話框,通過window.returnValue賦返回值關(guān)閉后,有的情況下無法取得返回值。2010-05-05如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁中的JS?文件
這篇文章主要為大家介紹了如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁中的JS文件實現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05javascript substr和substring用法比較
在js中substring和substr都是用來截取字符串的,那么substring和substr之間的具體區(qū)別在哪里,有沒有區(qū)別呢,下面我來給各位詳細(xì)引用一些實例來介紹這些問題2009-06-06