微信小程序商城，评论产品，商品图片上传，商品服务评分

实现效果

wxml代码

<view class="comment">
  <view class="comment_title">
    <view class="comment_image">
      <image class="comment_image" src="http://goods-4.png"
        mode="widthFix" />
    </view>
    <view class="comment_text"><text>苹果12</text></view>
  </view>
  <view class="comment_concent">
    <textarea class="comment_textarea" placeholder="从多角度评价商品，可以帮助更多想买的人"></textarea>
  </view>
  <view class="goods_image">
    <view class="goods_image_title">商品图片</view>
    <view class="goods_image_item">
      <view class="goods_image_list" wx:for="{{tempFilePaths}}" wx:key="item">
        <image class="comment_image" src="{{item}}"
        mode="widthFix"/>
      </view>
      <view class="goods_image_content" bindtap="chooseImage" wx:if="{{tempFilePaths.length<6}}">
        <text class="cuIcon-cameraadd goods_image_text"></text>
        
      </view>
    </view>

  </view>
  <!-- 小程序图标使用了ColorUI (cuIcon-favorfill,text-orange)
      地址：https://github.com/weilanwl/ColorUI 
  -->
  <view class="goods_score">
    <view class="score">
      商品相符
      <text wx:for="{{score}}" wx:key="item" bindtap="handleScore" data-type="1" data-index="{{item}}"
        class="cuIcon-favorfill {{item<goodsScore?'text-orange':''}}"></text>
    </view>
    <view class="score">
      物流服务
      <text wx:for="{{score}}" wx:key="item" bindtap="handleScore" data-type="2" data-index="{{item}}"
        class="cuIcon-favorfill {{item<logisticsScore?'text-orange':''}}"></text>
    </view>
    <view class="score">
      服务态度
      <text wx:for="{{score}}" wx:key="item" bindtap="handleScore" data-type="3" data-index="{{item}}"
        class="cuIcon-favorfill {{item<serviceScore?'text-orange':''}}"></text>
    </view>
  </view>
  <view class="comment_button">
    <button class="cu-btn bg-red margin-tb-sm lg">提交评论</button>
  </view>
</view>

wxss

.comment {
  background-color: #f0f0f0;
}
.comment .comment_title {
  background-color: #ffffff;
  width: 95%;
  height: 150rpx;
  display: flex;
  overflow: hidden;
  border-radius: 15rpx;
  margin: 20rpx;
}
.comment .comment_title .comment_image {
  margin: 10rpx;
  flex: 1;
  width: 100%;
  border-radius: 15rpx;
}
.comment .comment_title .comment_text {
  width: 100%;
  margin: 10rpx;
  flex: 5;
  font-weight: bold;
}
.comment .comment_concent {
  background-color: #fff;
  padding-top: 20rpx;
  margin: 20rpx;
  border-radius: 15rpx;
}
.comment .goods_image {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 15rpx;
  _height: 500rpx;
  min-height: 250rpx;
}
.comment .goods_image .goods_image_title {
  margin: 20rpx;
  padding-top: 10rpx;
}
.comment .goods_image .goods_image_item {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.comment .goods_image .goods_image_item .goods_image_list {
  width: 150rpx;
  height: 150rpx;
  margin: 25rpx;
  border: 1px solid #aaaaaa;
  border-radius: 15rpx;
  overflow: hidden;
}
.comment .goods_image .goods_image_item .goods_image_list image {
  width: 100%;
  border-radius: 15rpx;
}
.comment .goods_image .goods_image_item .goods_image_content {
  width: 150rpx;
  height: 150rpx;
  margin: 20rpx;
  border: 1px solid #aaaaaa;
  border-radius: 15rpx;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  overflow: hidden;
}
.comment .goods_score {
  background-color: #fff;
  padding-top: 10rpx;
  margin: 20rpx;
  border-radius: 15rpx;
  height: 200rpx;
}
.comment .goods_score .score {
  margin: 20rpx;
}
.comment .goods_score .score text {
  margin-left: 30rpx;
}
.comment .comment_button {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 15rpx;
  text-align: center;
}
.comment .comment_button button {
  width: 90%;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    orderinfo: {},
    score: 5,
    //商品评分
    goodsScore: 0,
    //物流评分
    logisticsScore: 0,
    //服务态度
    serviceScore: 0,
    //评论图片
    tempFilePaths:[]
  },
  handleScore(e) {
    let { index, type } = e.currentTarget.dataset;
    if (type == "1") {
      this.setData({
        goodsScore: index + 1
      })
    }
    if (type == "2") {
      this.setData({
        logisticsScore: index + 1
      })
    }
    if (type == "3") {
      this.setData({
        serviceScore: index + 1
      })
    }
  },
  chooseImage() {
    let then=this
    wx.chooseImage({
      count:6,
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
      success: function (res) {
        then.setData({
          tempFilePaths:then.data.tempFilePaths.concat(res.tempFilePaths)
        })
      }
    })
  },
  //上传到服务器
  upImgs: function (imgurl, index) {
    var that = this;
    wx.uploadFile({
      url: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx',//
      filePath: imgurl,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data'
      },
      formData: null,
      success: function (res) {
        
      }
    })
  }

})