小程序仿淘宝- 五星点评

先看一下整体效果:

在网上看了一下,不是界面功能风格不符合要求,就是代码搞得太复杂, 还不如自己写一个

WXML代码

<view>
    <view class='head-main'>
        <view class='head'>
            <view>发表评价</view>
            <view class='release' bindtap='onSubmit'>发布</view>
        </view>
    </view>

    <view class='score'>
        <view class='score-left'>
            <image src='{{goods_img}}' />
            <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>

    <view class='textarea'>
        <textarea placeholder-class='textarea-text' placeholder='宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧'></textarea>
        <view class='picture'>
            <view class='picture' wx:if="{{!is_upload}}">
                <view class='picture_item' bindtap="chooseImage">
                    <image src='{{camera_pic}}'  />
                </view>
            </view>
            <view wx:else  class='picture'>
                <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 class='picture_item' bindtap="chooseImage" hidden="{{pic_length}}">
                    <image src='{{camera_pic}}'  />
                </view>
            </view>

        </view>
    </view>
</view>

JS代码

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

    /**
     * 页面的初始数据
     */
    data: {
        default_score: 5,
        score_text_arr: ['非常差','差','一般','好','非常好'],
        score_text: "",
        score_img_arr: [],
        upload_pic: [],
        upload_pic_name: [],
        upload_succ: true,
        pic_length: false,
        is_upload: false,
        delete_ico: "https://api.gzshisu.com/data/xcx/images/delete_ico.png",
        camera_pic: "http://pnga.mypng.cn/1324/98-Camera.png",
        goods_img:"https://img.alicdn.com/imgextra/i2/2585780740/O1CN011HKxYBjGug0VPwX_!!2585780740-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp",


    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options)
        this.setData({
          order_id: options.order_id,
          goods_id: options.goods_id,
          goods_ext_id: options.goods_ext_id
        });

        this.get_goods( options.goods_id, options.goods_ext_id)
        this._default_score(this.data.default_score);

    },

    get_goods:function(goods_id, goods_ext_id){
      var that= this;
      wx.request({
        url: 'https://xxx.com/home/goods/goodsEvaluate',
        method: 'POST',
        data: {
          token: wx.getStorageSync('token'),
          goods_id: that.data.goods_id,
          goods_ext_id: that.data.goods_ext_id
        },
        success: function (res) {
          that.setData({
            goods_img: res.data.goods_ext_image,
          });

        }
      })
    },

    _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] = "img/star_on.png"
                score= i;
            } else {
                score_img[i] = "img/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);
    },

    chooseImage(e) {
        var that= this;
        wx.chooseImage({
            count: 3,
            sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
            sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
            success: res => {
                var addImg = res.tempFilePaths;
                var pic_length= false;
                if (addImg.length<3){
                    pic_length= false;
                }else{
                    pic_length = true;
                }
                that.setData({
                    upload_pic: addImg,
                    pic_length: pic_length,
                    is_upload: true
                })
            }
        })

    },

  //上传评论
  onSubmit:function(){
    var that= this;
    var is= false;
    var upload_picture_list = that.data.upload_pic
    var upload_img =[]
    for (var i in upload_picture_list) {
        that.upload_file_server(that, upload_picture_list, i)
    }

    setTimeout(function () {
      if (that.data.upload_succ) {
        var ddd = [];
        for (var i in that.data.upload_pic_name) {
          console.log(that.data.upload_pic_name[i]);
          ddd.push(that.data.upload_pic_name[i])
        }
        console.log(that.data.upload_pic_name);
        wx.request({
          url: 'https://xxx.com/home/order/addEvaluate',
          method: 'POST',
          data: {
            token: wx.getStorageSync('token'),
            order_evaluate: {
              "order_id": that.data.order_id,
              "goods_id": that.data.goods_id,
              "goods_ext_id": that.data.goods_ext_id,
              "img_name": that.data.upload_pic_name
            },

          },
          success: function (res) {

          }
        })
      }
    }, 800);
    
    

  },

  upload_file_server: function (that, upload_picture_list, i){
    var upload_task = wx.uploadFile({
      header: { "Content-Type": "multipart/form-data" },
      url: "https://xxx.com/home/goods/goodsEvaluatePic",
      filePath: upload_picture_list[i],
      name: 'img_file',
      formData: {
        token: wx.getStorageSync('token'),

      },
      success: function (res) {

        let json_data= JSON.parse(res.data);
        if (json_data.code==200){

         let img_name= json_data.img_name;

          that.data.upload_pic_name[i]= img_name;
          that.setData({
            upload_pic_name: that.data.upload_pic_name
          })
          
        }else{
          that.data.upload_succ= false;
          wx.showToast({
            title: json_data.msg,
            icon: 'loading',
            duration: 2000
          })  
        }
       
      }
    });
    
  },

    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])
            }
        }
        console.log(upload_pic)
        this.setData({
            upload_pic: upload_pic,
            pic_length: false,
            is_upload: true
        })

    },


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

    },

})

WCSS代码

.head-main{
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #f8f8f8;
}
.head{
  display: flex;
  width: 90%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 38rpx;
  font-weight: bold;
}
.release{
  color: #f95807;
}
.score{
  height: 150rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx #e6e6e6 solid;
  /* background: cornflowerblue; */
}
.score-left{
  width: 33%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 37rpx;
  font-weight: bold;
  justify-content: space-between;
}
.score-left image{
  height: 100rpx;
  width: 100rpx;
}
.score-right{
  height: 150rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 65%;
  /* background: red; */
}
.score-right image{
  width: 60rpx;
  height: 60rpx;
  margin-right: 12rpx;
}
.score_text{
  width: 150rpx;
  text-align: center;
  color: #b0b0b0;
}
.textarea{
  position: relative;
  margin-top: 20rpx;
  height: 600rpx;
  width: 100%;
  border-bottom: 1rpx #e6e6e6 solid;
}
.textarea textarea{
  height: 400rpx;
  width: 100%;
}
.textarea-text{
  color: #b0b0b0;
}
.picture{
  position: absolute;
  z-index: 99;
  bottom: 30rpx;
  height: 200rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}
.picture_item{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  width: 200rpx;
  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: 200rpx;
  width: 200rpx;

}
.picture_upload image{
  height: 200rpx;
  width: 200rpx;
}
.picture_delete{
  width: 200rpx;
  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;
}