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

2024-04-02 19:04:59 745人浏览八月长安

摘要

小程序做线上商城就离不开交互，包括最重要的支付和订单评价系统。订单评价简单的只有商品评价，比较齐全的是商品和商家一起评价。本文介绍的目录包含，商品评价，商家评价，星级评分，上传照片

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

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

在评论页中展示商品和商家两栏的评价内容，并且提交评价的时候也要区分开，将商品和商家的评论内容用数组的形式提交。
注意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 == 0?nORMalSrc: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 == 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="请输入评价内容..." 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="请输入评价内容..." 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:


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 () {

  }
})

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 小程序实现订单评价和商家评价

本文链接: https://www.lsjlt.com/news/146094.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

小程序做线上商城就离不开交互，包括最重要的支付和订单评价系统。订单评价简单的只有商品评价，比较齐全的是商品和商家一起评价。本文介绍的目录包含，商品评价，商家评价，星级评分，上传照片...

99+

2024-04-02
微信小程序实现五星评价

本文实例为大家分享了微信小程序实现五星评价的具体代码，供大家参考，具体内容如下首先准备两张图片，在阿里巴巴矢量图标库中随便下两个颜色不一样的星星效果如下 wxml 循环五次图...

99+

2024-04-02
微信小程序实现评价功能

本文实例为大家分享了微信小程序实现评价的具体代码，供大家参考，具体内容如下首先去图标库，找一个空心星图片和一个实星图片先是效果图代码 wxml文件 for循环5次，初始值是5...

99+

2024-04-02
微信小程序实现五星评价功能

本文实例为大家分享了微信小程序实现五星评价的具体代码，供大家参考，具体内容如下需求如图： 1个星-很不满意； 2个星-不满意； 3个星-一般； 4个星-还不错； 5个星-很满意...

99+

2024-04-02
微信小程序如何实现五星评价功能

小编给大家分享一下微信小程序如何实现五星评价功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！微信小程序五星评价功能效果图：要...

99+

2024-04-02
MySQL 实现点餐系统的订单评价管理功能

MySQL 实现点餐系统的订单评价管理功能在餐饮行业中，订单评价管理功能是非常重要的一部分。通过评价管理功能，店铺可以了解顾客对餐品和服务的满意度，从而优化经营策略和提供更好的服务。MySQL 是一个广泛应用于数据库管理的工具，本文将介绍如...

99+

2023-11-01

MySQL 点餐系统订单评价管理
如何使用PHP实现商品评价与评论系统

随着电子商务的普及，商品评价与评论系统已成为购物网站必备的功能之一。这种功能不仅可以提高用户的体验，也可以为商家提供价值信息，以优化他们的产品和服务。本文将介绍如何使用 PHP 实现一个简单的商品评价与评论系统。第一步：创建数据库表格首先，...

99+

2023-05-21

PHP 商品评价评论系统
买菜系统中如何实现用户订单评价与晒单功能？

买菜系统中如何实现用户订单评价与晒单功能？随着互联网的发展，各种电子商务平台不断涌现出来，买菜系统作为其中的一种，已经逐渐成为了人们生活中不可或缺的一部分。而在买菜系统中，用户订单评价与晒单功能的实现，不仅可以提供给用户一个互动交流的平台，...

99+

2023-11-01

订单评价用户订单晒单功能
PHP开发点餐系统的订单评价功能实现步骤是什么？

PHP开发点餐系统的订单评价功能实现步骤是什么？随着互联网的发展，点餐系统已经成为很多餐馆的必备工具。为了提升餐馆的服务质量和用户体验，订单评价功能是一个很重要的功能。PHP作为一种流行的服务器端脚本语言，可以很好地实现订单评价功能。本文将...

99+

2023-11-01

功能实现关键词：PHP开发订单评价
微信小程序实现星级评分

本文实例为大家分享了微信小程序实现星级评分的具体代码，供大家参考，具体内容如下第一种方法： WXML代码： <view> 星级评分 </view&g...

99+

2024-04-02
如何使用PHP开发微信小程序的任务评价功能？

如何使用PHP开发微信小程序的任务评价功能？在如今的互联网时代，任务评价是微信小程序中非常重要的一个功能模块。通过任务评价，用户可以对完成的任务进行评价，为其他用户提供参考和选择。在开发微信小程序的任务评价功能时，使用PHP是一种非常常见和...

99+

2023-10-27

微信小程序 PHP开发任务评价功能
小程序开店可以为商家带来哪些价值

这篇文章主要介绍“小程序开店可以为商家带来哪些价值”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“小程序开店可以为商家带来哪些价值”文章能帮助大家解决问题。　　小程序开店有什么作用　　首先，我们要了解...

99+

2023-06-26
小程序私域流量能为商家带来什么商业价值

这篇文章将为大家详细讲解有关小程序私域流量能为商家带来什么商业价值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。近几年，不难发现淘宝或者是京东的流量红利已经消失，中小电商商家想要获得更多的流量就需要投入更...

99+

2023-06-27
微信小程序如何实现星级评分

这篇文章主要为大家展示了“微信小程序如何实现星级评分”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序如何实现星级评分”这篇文章吧。具体内容如下第一种方法：WXML代码：<view&...

99+

2023-06-25
微信小程序怎么实现评论功能

要实现评论功能，您可以参考以下步骤：在小程序中创建一个评论的输入框和提交按钮，让用户可以输入评论内容并提交。将用户输入的...

99+

2024-04-09

微信小程序
装修小程序开发可以给商家带来哪些价值

本篇内容主要讲解“装修小程序开发可以给商家带来哪些价值”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“装修小程序开发可以给商家带来哪些价值”吧!　　装修小程序开发可以给商家带来什么价值　　1、获客...

99+

2023-06-26
开发短视频小程序能为商家带来哪些价值

今天小编给大家分享一下开发短视频小程序能为商家带来哪些价值的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。价值一：功能多，解决...

99+

2023-06-27
微信小程序实现星级评分与展示

本文实例为大家分享了微信小程序实现星级评分与展示的具体代码，供大家参考，具体内容如下一、效果展示星级评分星级评分展示二、代码实现星级评分部分： <!-- wxml...

99+

2024-04-02
商城小程序软件有哪些实质性价值

本篇内容介绍了“商城小程序软件有哪些实质性价值”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　首先我们先要了解商城小程序的作用，才能了解其...

99+

2023-06-26
微信小程序五星评分效果怎么实现

这篇文章主要介绍微信小程序五星评分效果怎么实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序五星评分效果实现代码很多做过电商项目的朋友会经常用到评分的功能，我这里正好写了一...

99+

2024-04-02