小程序?qū)崿F(xiàn)訂單評價和商家評價

更新時間：2022年04月15日 10:24:04 作者：沉默的小猴子

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)訂單評價和商家評價功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

小程序做線上商城就離不開交互，包括最重要的支付和訂單評價系統(tǒng)。訂單評價簡單的只有商品評價，比較齊全的是商品和商家一起評價。

本文介紹的目錄包含，商品評價，商家評價，星級評分，上傳照片，以及評論字?jǐn)?shù)限制。

在評論頁中展示商品和商家兩欄的評價內(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)容一起進行表單提交。

$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'], // 可以指定來源是相冊還是相機，默認(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: