微信小程序评价页面

 <!--服务评价-->
 <view class="service">
   <!--评分-->
   <view class='score'>
     <view class='left'>
       评分
     </view>
     <view class='right'>
        <view bindtap="starTap" data-index="{{index}}"  class="star" wx:for="{{userStars}}" wx:key="index">
         <image src="{{item}}"></image>
       </view>
       <text class='rtxt'>{{wjxScore}}.0分</text>
     </view>
   </view>
   <!--内容-->
   <view class='content'>
     <view class='left'>
       内容
     </view>
     <view class='right'>
       <text bindtap='label' class="{{attitude===true ? 'labelColor':''}}" data-index="{{attitude}}">服务态度好</text>
       <text bindtap='label1' class="{{time===false? 'labelColor':''}}" data-index="{{time}}">排队时间短</text>
       <text bindtap='label2' class="{{efficiency===false?'labelColor':''}}" data-index="{{efficiency}}">效率高</text>
       <text bindtap='label3' class="{{environment===false?'labelColor':''}}" data-index="{{environment}}">门店环境好</text>
       <text bindtap='label4' class="{{professional===false?'labelColor':''}}" data-index="{{professional}}">很专业</text>
     </view>
   </view>
   <!--图片-->
   <view class='picture'>
     <view class='left'>
       图片
     </view>
     <view class='right'>
        <view class="parcel" wx:for="{{pics}}" wx:key="{{index}}">
        <image src="{{pics[index]}}" class="According" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
        <image src="{{staticImg}}home/order/apply/error.png" class='deleteimg' catchtap="deleteImg" data-index="{{index}}"></image>
        </view>
       <image src='/pages/service/img/add.png' class='add' bindtap='choose'></image>
     </view>
   </view>
 </view>
 <!--textarea-->
 <view class="conts">
     <textarea class="areas" placeholder='更多评价请写在这里（最多300字）' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs">
         <!-- <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text> -->
     </textarea>
 </view>
 <!--提交评价-->
 <button class='btn'>提交评价</button>

 page {
   width: 100%;
   height: 100%;
   background: #f0f0f0;
 }
 .service {
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
   padding: 0 20rpx;
   background: #fff;
 }
 .score {
   width: 100%;
   height: 100rpx;
   border-bottom: 1px solid #ccc;
 }
 .star {
   float: left;
   width: 54rpx;
   height: 100rpx;
   text-align: center;
   line-height: 100rpx;
 }
 .star image{
   width: 40rpx;
   height: 40rpx;
   margin-top: 30rpx;
 }
 .score .left {
   width: 100rpx;
   line-height: 100rpx;
   font-size: 30rpx;
   float: left;
 }
 .score .right {
   width: 610rpx;
   font-size: 30rpx;
   float: left;
   color: #888;
 }

 .score .right .rtxt {
   display: inline-block;
   height: 100rpx;
   line-height: 100rpx;
   margin-left: 15rpx;
   color: #c00;
   font-weight: bold;
 }
 .labelColor {
   color: #c00;
   border: 1px solid #c00 !important;
 }
 .content {
   width: 100%;
   overflow: hidden;
   border-bottom:1px solid #ccc;
   padding:0 0 26rpx 0;
   box-sizing: border-box;
 }
 .content .left {
   width: 100rpx;
   font-size: 30rpx;
   float: left;
   padding-top: 20rpx;
 }
 .content .right {
   width: 610rpx;
   font-size: 24rpx;
   float: left;
   color: #888;
 }
 .content .right text {
   font-size: 24rpx;
   padding: 13rpx 24rpx;
   float: left;
   border: 1px solid #888;
   border-radius: 10rpx;
   margin-right: 34rpx;
   margin-top: 20rpx;
 }
 .picture {
   width: 100%;
   overflow: hidden;
   background: #fff;
   border-bottom: 1px solid #ccc;
 }
 .picture .left {
   width: 100rpx;
   font-size: 30rpx;
   float: left;
   padding-top: 20rpx;
 }
 .picture .right {
   width: 610rpx;
   font-size: 24rpx;
   float: left;
   color: #888;
   box-sizing: border-box;
   padding-top:36rpx;
 }
 .picture .right .add {
   width: 120rpx;
   height: 120rpx;
   margin-right: 10rpx;
 }
 .According{
   width:120rpx;
   height:120rpx;
   float:left;
   margin-right:10rpx;
   margin-bottom: 10rpx;
 }
 .parcel{
  width:120rpx;
   height:120rpx;
   float:left;
   margin-right:10rpx;
    margin-bottom: 10rpx;
   position: relative;
 }
 .deleteimg{
   width:30rpx;
   height:30rpx;
   position: absolute;
   right:;
   top:;
   z-index:;
 }
 .conts{
   width: 100%;
   height: auto;
   background: #fff;
 }
 textarea {
   width: 687rpx;
 }
 .areas{
   height:315rpx;
   font-size: 30rpx;
   padding-top: 30rpx;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
 }
 .currentWordNumber{
   font-size: 28rpx;
   position: absolute;
   left: 0%;
   bottom: 0rpx;
   color: #c00;
 }
 .hint{
    font-size: 28rpx;
    position: absolute;
    top: 120rpx;
    left: 30rpx;
    color: #FF6600;
 }
 .btn {
   width: 600rpx;
   height: 80rpx;
   line-height: 80rpx;
   font-size: 30rpx;
   color: #fff;
   background: #c00;
   position: fixed;
   left:75rpx;
   bottom: 37rpx;
 }
 button:after {
   border:;
 }

 const app = getApp();
 Page({
   data: {
     staticImg: app.globalData.staticImg,
     current:0,
     attitude:true,
     time: true,
     efficiency: true,
     environment:true,
     professional:true,
     userStars: [
       "/pages/service/img/rwjx.png",
       "/pages/service/img/rwjx.png",
       "/pages/service/img/rwjx.png",
       "/pages/service/img/rwjx.png",
       "/pages/service/img/rwjx.png",
     ],
     wjxScore:5,
     // textarea
     min: 5,//最少字数
     max: 300, //最多字数 (根据自己需求改变)
     pics:[],
   },
   // 星星点击事件
   starTap: function (e) {
     var that = this;
     var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
     var tempUserStars = this.data.userStars; // 暂存星星数组
     var len = tempUserStars.length; // 获取星星数组的长度
     for (var i = 0; i < len; i++) {
       if (i <= index) { // 小于等于index的是满心
         tempUserStars[i] = "/pages/service/img/rwjx.png";
         that.setData({
           wjxScore:i+1,
         })
       } else { // 其他是空心
         tempUserStars[i] = "/pages/service/img/wjx.png"
       }
     }
     // 重新赋值就可以显示了
     that.setData({
       userStars: tempUserStars
     })
   },
   // 标签
   label:function(e){
     console.log(e)
     var that = this;
     that.setData({
       attitude:!e.currentTarget.dataset.index
     })
   },
    label1: function (e) {
     console.log(e)
     var that = this;
     that.setData({
       time: !e.currentTarget.dataset.index
     })
   },
    label2: function (e) {
      console.log(e)
      var that = this;
      that.setData({
        efficiency: !e.currentTarget.dataset.index
      })
    },
     label3: function (e) {
      console.log(e)
      var that = this;
      that.setData({
        environment: !e.currentTarget.dataset.index
      })
    },
     label4: function (e) {
       console.log(e)
       var that = this;
       that.setData({
         professional: !e.currentTarget.dataset.index
       })
     },
     // 留言
     //字数限制
   inputs: function (e) {
       // 获取输入框的内容
       var value = e.detail.value;
       // 获取输入框内容的长度
       var len = parseInt(value.length);
       //最多字数限制
       if (len > this.data.max) return;
       // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行
       this.setData({
         currentWordNumber: len //当前字数
       });
     },
     // 图片
     choose: function (e) {//这里是选取图片的方法
     var that = this;
     var pics = that.data.pics;
     wx.chooseImage({
       count: 5 - pics.length, // 最多可以选择的图片张数，默认9
       sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
       sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
       success: function (res) {

         var imgsrc = res.tempFilePaths;
         pics = pics.concat(imgsrc);
         console.log(pics);
         // console.log(imgsrc);
         that.setData({
           pics: pics,
           // console.log(pics),
         });
       },
       fail: function () {
         // fail
       },
       complete: function () {
         // complete
       }
     })

   },
   uploadimg: function () {//这里触发图片上传的方法
     var pics = this.data.pics;
     console.log(pics);
     app.uploadimg({
       url: 'https://........',//这里是你图片上传的接口
       path: pics//这里是选取的图片的地址数组
     });
   },
   onLoad: function (options) {

   },
   // 删除图片
   deleteImg: function (e) {
     var pics = this.data.pics;
     var index = e.currentTarget.dataset.index;
     pics.splice(index, 1);
     this.setData({
       pics: pics
     });
   },
   // 预览图片
   previewImg: function (e) {
     //获取当前图片的下标
     var index = e.currentTarget.dataset.index;
     //所有图片
     var pics = this.data.pics;
     wx.previewImage({
       //当前显示图片
       current: pics[index],
       //所有图片
       urls: pics
     })
   },
 })