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

喜欢ヅ旅行 2022-02-04 13:53 324阅读 0赞

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

在网上搜了下，大部分都挺麻烦的，所以自己写了个，感觉还可以  
先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nMTgyMzgwMzI4OTE_size_16_color_FFFFFF_t_70]  
需要用到的图片：  
![在这里插入图片描述][20190507213519832.png]  
![在这里插入图片描述][20190507213722542.png]  
![在这里插入图片描述][20190507213802695.png]  
![在这里插入图片描述][20190507213824387.png]  
上代码：  
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 () { 
    
      },
    
    })

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nMTgyMzgwMzI4OTE_size_16_color_FFFFFF_t_70]: /images/20220204/078531eafd0e4a5c9875f6f70201e06a.png
[20190507213519832.png]: /images/20220204/5442e215ecd44ab384e79bcbb30439c0.png
[20190507213722542.png]: /images/20220204/f8be5b3bc46a4a6fafd112bf397289e3.png
[20190507213802695.png]: /images/20220204/f46670f7b5e64c528ba8aee51c9815de.png
[20190507213824387.png]: /images/20220204/09ec8661fc4a4b15940490ff77435f3a.png