微信小程序评价页面

<!--服务评价-->
<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:0;
  top:0;
  z-index: 2;
}
.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: 0;
}

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
    })
  },
})