微信小程序实现订单多商品评价(页面模板)

微信小程序实现多商品评论(页面模板)

1. wxml

<block wx:for="{{orderList}}" wx:for-index="index" wx:for-item="item" wx:key="key">
  <view class="order-info">
    <view class="order-info-prod">
      <image src="{{item.image}}" mode="aspectFit"></image>
      <view class="order-info-prod-right">
        <view class="order-info-prod-right-name">{{item.subTitle}}</view>
        <view class="order-info-prod-right-size">尺寸：{{item.orderColor}} {{item.orderSize}}</view>
      </view>
    </view>
    <view class="order-info-star">
      <view class="order-info-star-label">整体评价</view>
      <van-rate value="{{item.star }}" data-item="{{item}}" data-id="{{index}}"  void-icon="star" color='#F3AE5A' void-color="#eee" custom-class="order-info-star-star" bind:change="changeStar" />
    </view>
    <view class="showImages">
      <textarea bindinput="setMessage" placeholder-class="message-placeholder" maxlength="100" placeholder="快写下你的感受分享给大家吧！" />
      <van-uploader file-list="{{ item.fileList }}" multiple="true" accept="image" max-count="3" data-id="{{index}}"  image-fit="aspectFit" bind:after-read="afterRead" bind:delete="deleteImages" />
    </view>
    <view class="publish">
      <view class="message">
        <van-checkbox custom-class="checkbox"  data-id="{{index}}"  value="{{item.anonymity }}" checked-color="#D40A14" bind:change="changeCheck">
          匿名
        </van-checkbox>
        <view class="showImages-label">您的评价会以匿名的形式展现</view>
      </view>
      <view class="publishBtn" id="{{item.orderItemId}}" bindtap="publish">发布</view>
    </view>
  </view>
</block>
<van-toast id="van-toast" />
<van-dialog id="van-dialog" />

2. wxss

/* pages/prod-comm/prod-comm.wxss */
page{
  background-color: whitesmoke;
}
.order-info{
  width: 89%;
  background-color: white;
  border-radius: 8px;
  margin: 10px 0px 10px 10px;
  padding: 10px;
}

.order-info-prod image{
  margin-top: -20px;
  width: 60px;
  height: 80px;
}
.order-info-prod .order-info-prod-right{
  margin-left: 70px;
  margin-top: -60px;
}

.order-info-prod .order-info-prod-right .order-info-prod-right-name {
  width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

.order-info-prod .order-info-prod-right .order-info-prod-right-size{
  width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: darkgray;
}

.order-info .showImages{
  margin-top: 10px;
}

.order-info .showImages textarea{
  width: 98%;
}
.message-placeholder{
  font-size: 13px;
  color: darkgray;
}

.showImages-label{
  font-size: 12px;
  margin-top: -17px;
  margin-left: 70px;
  color: darkgray;
  width: 160px;
}

.publish{
  padding-top: 10px;
}
.publishBtn{
  float: right;
  margin-top: -26px;
  background-color: #ff3333;
  color: white;
  width: 65px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
}

.order-info-star{
  padding-top: 10px;
}

.order-info-star .order-info-star-star{
  margin-top: -21px;
  margin-left: 70px;
}

3. js 假数据

orderList : [{"image":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=596276033,515392538&fm=26&gp=0.jpg","subTitle":"测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据ss","orderColor":"22","orderSize":"2222222222222222222222222222222222222222222222222223"},{"image":"https://ss1.bdstatic.com//it/u=596276033,515392538&fm=26&gp=0.jpg","subTitle":"测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据ss","orderColor":"22","orderSize":"2222222222222222222222222222222222222222222222222223"}],

源代码来其它文章，此处拿着进行修改了，原有文章没有wxss，只有js和wxml，此文章的wxss完全自己手写，如果喜欢的话请点个赞吧。(后端人员来写前段真不容易啊)