微信小程序的订单评论页面-仿淘宝

微信小程序的订单评论页面-仿淘宝

在网上搜了下，大部分都挺麻烦的，所以自己写了个，感觉还可以
先看效果图：

需要用到的图片：




上代码：
wxml:

<view class='contains'>
<form bindsubmit="onSubmit">
  <view class='textarea'>
    <textarea placeholder-class='textarea-text' placeholder='期待您的评论' name="text"></textarea>
    <view class='title'>添加图片:(最多四张)</view>
    <view class='picture'>
       <view class='picture' wx:if="{{!is_upload}}" >
        <view class='picture_item' bindtap="chooseImage">
          <image src='{{camera_pic}}' mode="widthFix" />
        </view>
      </view>
      <view  class='picture' wx:if="{{upload_pic.length>0}}">
        <view class='picture_upload' bindtap="" wx:for-items="{{upload_pic}}" wx:for-item="pic" wx:key="index">
          <image src='{{pic}}'  />
          <view class='picture_delete' bindtap='deletePic' data-pic_index='{{index}}'>
            <image src='{{delete_ico}}'  />
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class='score'>
    <view class='score-left'>
      <view>
        <text>交易评分:</text>
      </view>
    </view>
    <view class='score-right'>
      <view wx:for-items="{{score_img_arr}}" wx:for-item="img" wx:key="index">
        <image bindtap='onScore' data-score='{{index+1}}'   src="{{img}}" />
      </view>
      <view class='score_text'>
        <text>{{score_text}}</text>
      </view>
    </view>
  </view>
    <button class='release' form-type='submit'>发布</button>
    </form>
</view>

wxss:

.contains{
  color:#ccc;
  font-size: 34rpx;
  margin: 15rpx;
}
.release{
  color: #fff;
  background: #f95807;
  margin: 0 10%;
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  bottom: 10rpx;
  
}

.score{
  height: 150rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.score-left{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 34rpx;
  justify-content: space-between;
}
.score-left image{
  height: 100rpx;
  width: 100rpx;
}
.score-right{
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 77%;
}
.score-right image{
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}
.score_text{
  width: 150rpx;
  text-align: center;
  color: #b0b0b0;
}

.textarea{
  position: relative;
  margin-top: 20rpx;
  height: 540rpx;
  width: 100%;
  border-bottom: 1rpx #e6e6e6 solid;
}
.textarea textarea{
  height: 200rpx;
  width: 100%;
  border:0.1rpx solid #efefef;
  border-radius: 15rpx;
  color: black;
  padding-left: 20rpx;
}
.textarea-text{
  color: #ccc;
  font-size: 34rpx;
}
.textarea .title{
  margin:10rpx 0;
}
.picture{

  z-index: 99;
  display: flex;
  flex-direction: row;

}

.picture_item{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 230rpx;
  width: 180rpx;
  border: 1rpx #e6e6e6 dashed;
}
.picture_item image{
  width: 100rpx;
  height: 100rpx;
}
.picture_upload{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 180rpx;
  width: 180rpx;
  margin: 5rpx;
 
}
.picture_upload image{
  height: 180rpx;
  width: 180rpx;
}
.picture_delete{
  width: 180rpx;
  height: 50rpx;
  position: absolute;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  bottom:-50rpx;
  right:0rpx;
  border: 1rpx #e6e6e6 solid;
  border-top: none;
 
}
.picture_delete image{
  width: 50rpx;
  height: 50rpx;
}

js:

// pages/evaluate/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    default_score: 0,
    score:0,
    score_text_arr: ['非常差', '差', '一般', '好', '非常好'],
    score_text: "",
    score_img_arr: [],
    upload_pic: [],
    is_upload: false,
    delete_ico: "./delete.png",
    camera_pic: "./camera.png",
    time:null,
    upload_img:[],
    text:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this._default_score(this.data.default_score);

  },
//初始化星的数量
  _default_score: function (tauch_score = 0) {
    var score_img = [];
    var score = 0;
    for (let i = 0; i < 5; i++) {
      if (i < tauch_score) {
        score_img[i] = "./star_on.png"
        score = i;
      } else {
        score_img[i] = "./star_off.png"
      }
    }

    this.setData({
      score_img_arr: score_img,
      score_text: this.data.score_text_arr[score]
    });
  },

  onScore: function (e) {
    var score = e.currentTarget.dataset.score;
    this._default_score(score);
    this.setData({
      score:score
    })
  },
  //选择图片
  chooseImage(e) {
    var that = this;
    wx.chooseImage({
      count: 4,
      sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
      success: res => {
        var addImg = res.tempFilePaths;
        var upload_pic = that.data.upload_pic;
        for(var i in addImg){
          //判断已选图片数量
          if (upload_pic.length<4){
              upload_pic.push(addImg[i]);
          }
        } 
        var is_upload = false;
        if (upload_pic.length >= 4) {
          is_upload = true;
        }
        that.setData({
          upload_pic: upload_pic,
          is_upload: is_upload
        })
      }
    })

  },

  //上传评论
  onSubmit: function (e) {
    wx.showLoading({
      title: '上传中',
    })
    var that = this;
    var is = false;
    var picture_list = that.data.upload_pic;
    var upload_img = [];
    var flag = false;
    var index=0;
    for (var i in picture_list) {
      this.upload_file_server(picture_list[i]).then(res=>{
        upload_img.push({id:index,url:res});
        index+=1;
        that.setData({
          upload_img: upload_img
        })
      }); 
    }
    this.setData({
      text: e.detail.value.text
    })
    //判断图片上传成功后，在上传评论到服务器，解决异步问题
    this.setTime();
    
    
  },
 setTime:function(){
   var that= this;
   var time = setTimeout(function(){
     var upload_img = that.data.upload_img;
     var picture_list = that.data.upload_pic;
     //判断是否成功
     if (upload_img.length == picture_list.length){
       //清除定时
       clearTimeout(that.data.time);
       //添加评论
       wx.request({
         url: 'http://localhost:8080' + '/comment/add',
         method: "POST",
         data: {
           text: that.data.text,
           urls: JSON.stringify(upload_img),
           score1: that.data.score
         },
         success: res => {
           wx.hideLoading();
           console.log(res);
         }
       });
     }else{
       //执行定时判断
       that.setTime();
     }
   },400);
   that.setData({
     time:time
   })
 },
//上传图片
  upload_file_server: function (path) {
    return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: 'http://localhost:8080' + '/uploadFile',
      filePath: path,
      name: 'file',
      success: res => {
        var result = JSON.parse(res.data);
        resolve(result.msg);
      }
    });
    });
  },
//删除图片
  deletePic: function (e) {
    var pic_index = e.currentTarget.dataset.pic_index;
    var upload_pic = [];
    for (let i in this.data.upload_pic) {
      if (i != pic_index) {
        upload_pic.push(this.data.upload_pic[i])
      }
    }
    this.setData({
      upload_pic: upload_pic,
      is_upload: false
    })

  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

})

感觉界面不美观的可以自己调整