小程序实现订单评价和商家评价

时间：2022-04-15 12:32 来源：未知作者：谢谢你给的幸福收藏

这篇文章主要为大家详细介绍了小程序实现订单评价和商家评价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

小程序做线上商城就离不开交互，包括最重要的支付和订单评价系统。订单评价简单的只有商品评价，比较齐全的是商品和商家一起评价。

本文介绍的目录包含，商品评价，商家评价，星级评分，上传照片，以及评论字数限制。

在评论页中展示商品和商家两栏的评价内容，并且提交评价的时候也要区分开，将商品和商家的评论内容用数组的形式提交。
注意array和[object,object]的数据格式。
先说逻辑，因为两块其实是同一个功能，只不过是把方法名字区分为A和B，A和B的函数内容一样的，只有数据内容不一样。
所以这里是只讲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 == 0normalSrc:selectedSrc) : normalSrc}}">
   <view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
  </image>
 </block>
</view>
</view>

用数组来存储图片，wx:for来循环图片列表，五星，列表长度就是0-4总共5，10星则是0-9。
两张图片。一张是带颜色的作为点亮状态，一张是默认的作为默认状态。设置选中函数selectRight。点星星一次则将星星图片的位置从left位移多少个单位到点击的对应位置。反之则取消对应的星星选中。

函数：

//点击右边递增,否则递减，评分，商品+商家B
 selectRight (e) {
  var key = e.currentTarget.dataset.key; //评分
  if (this.data.key == 1 && e.currentTarget.dataset.key == 1) {
   //只有一颗星的时候,再次点击,变为0颗
   key = 0;
  }
  this.setData({
   key: key
  })
 },

（二）评论区的字数显示和限制。

方法，给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="请输入评价内容..." placeholder-class='p_s'></textarea>
 <view class='fontNum'>{{fontNum}}</view>
</view>

JS中通过最大长度与输入长度的减法来动态改变fontNum剩余字数。

//字数限制 商品+商家B
 inputs (e) {
  var value = e.detail.value,
    len = parseInt(value.length);
  //最多字数限制
  if (len > this.data.max) return;
  this.setData({
   fontNum: 300-len //当前字数 
  });
 },

（三）上传多张图片并发送到服务器

默认的API即可，但是图片地址需要转化。wx.chooseImage所给出的图片地址是本地，并没有存到服务器上，还需要保存到服务器上。
使用wx.request的方法。在回调的结果中，取出地址链接，存为数组或者单个url信息。与其他内容一起进行表单提交。

$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 == 0normalSrc: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="请输入评价内容..." 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 == 0normalSrc: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="请输入评价内容..." 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"> 发布 </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) {
   //只有一颗星的时候,再次点击,变为0颗
   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
  })
 },
 //字数限制 商品+商家B
 inputs (e) {
  var value = e.detail.value,
    len = parseInt(value.length);
  //最多字数限制
  if (len > this.data.max) return;
  this.setData({
   fontNum: 300-len //当前字数 
  });
 },
 inputsB (e) {
  var value = e.detail.value,
    len = parseInt(value.length);
  if (len > this.data.max) return;
  this.setData({
   fontNumB: 300 - len
  });
 },
//发布评论不验证图片
 hrSubmit (t) { //提交发布,商品+商家
   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, // 默认数量
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
   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, // 默认图片数量
   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 () {

 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。