CommunityApp/pagesM/pages/after_sale_choose.vue

<template>
<!-- 选择申请售后货物 -->
<view class="dt-page">
  <block v-for="(item,idx) in dataList" :key="idx">
    <view class="goods-wrap">
      <view class="hd-row">
        <view class="pay">支付总额：￥{{item.priceAll|moneyEx}}</view>
        <!-- <view class="state">{{ item.statusTxt }}</view> -->
      </view>
      <view class="mid-row">
        <view class="goods-item">
          <view class="check-wrap" @tap="tapCheck(idx)">
            <image class="dt-checked" :src="item.checked?'http://139.9.103.171:1888/img/image/selected_icon.png':'http://139.9.103.171:1888/img/image/no_selected_icon.png'" mode="widthFix"></image>
          </view>
          <image class="main-pic" :src="item.thumbnail" mode="aspectFit"></image>
          <view class="rt-wrap">
            <view class="good-mn">
              <view class="goods-name dt-text-row-one">{{ item.name }}</view>
              <view class="goods-num">x {{ item.quantity }}</view>
            </view>
            <view class="specifications">{{ item.specificationsDesc }}</view>
            <view class="price">￥{{ item.price|moneyEx }}</view>
          </view>
        </view>
      </view>
      <view class="ft-row">
        <view class="lt">选择商品：规格/单价/数量</view>
        <DtAccumulator 
          :isFocus.sync="isFocus" 
          :val="item.quantityCalc" 
          @change="onAccumulatorChange($event,idx)" />
      </view>
    </view>
  </block>

  <FootToolbar bgColor="#fff">
    <view slot="main" class="ft-btn-wrap">
      <view class="lt" @tap="tapCheckedAll">
        <image class="dt-checked" :src="checkedAll?'http://139.9.103.171:1888/img/image/selected_icon.png':'http://139.9.103.171:1888/img/image/no_selected_icon.png'" mode="widthFix"></image>

        <view class="tips">已选货物数量 <text v-if="checkedNum>0">({{checkedNum}})</text></view>
      </view>
      <button class="ft-btn-submit" @tap="tapSubmit">确认售后货物</button>
    </view>
  </FootToolbar>
</view>
</template>

<script>

import DtAccumulator from '../comps/dt_accumulator.vue'
import FootToolbar from '../comps/foot_toolbar.vue'

export default {
  components: {
    DtAccumulator,
    FootToolbar
  },
  data() {
    return {
      dataDetail: {},
      dataList:[],
      isFocus: false,
      checkedNum:0,
      checkedAll:false,
    }
  },
  methods: {
    tapCheckedAll(){
      this.checkedAll = !this.checkedAll
      let dataList = this.dataList.slice(0)
      dataList.map((item)=>{
        item.checked = this.checkedAll
        return item
      })
      if(this.checkedAll){
        this.checkedNum = dataList.length
      }else{
        this.checkedNum = 0
      }
      this.dataList = dataList
    },
    tapCheck(idx) {
      let dataList = this.dataList.slice(0)
      dataList[idx].checked = !dataList[idx].checked
      let checkedNum = 0
      dataList.forEach((item)=>{
        if(item.checked){
          checkedNum++
        }
      })
      this.checkedNum = checkedNum
      this.checkedAll = checkedNum == dataList.length
      this.dataList = dataList
    },
    onAccumulatorChange(val, idx) {
      let dataList = this.dataList.slice(0)
      
      if(val > dataList[idx].quantity){
        this.$dialog.toast('售后数量不能大于已购数量')
        val = dataList[idx].quantity
      }

      if(val < 0){
        val = 0
      }

      dataList[idx].quantityCalc = val
      this.dataList = dataList
    },
    
    tapSubmit(){
      let orderItems = {}, disableItem = {}
      let dataList = this.dataList.slice(0)
      for(let i=0,item; item = dataList[i]; i++){
        if(item.checked){
        	if(item.quantityCalc>0){
        	  orderItems[item.id] = item.quantityCalc 
        	}else{
        	  disableItem = item
        	  break;
        	}
        }
      }

      if(!(this.checkedNum>0)){
        this.$dialog.toast('请选择售后商品')
        return
      }
      if(disableItem.id){
        this.$dialog.toast(`商品 “${disableItem.name}” 的售后数量不能为0`)
        return
      }

      let params = {
        orderSn: this.dataDetail.sn,
        orderItems:JSON.stringify(orderItems),
		orderId: this.loadOptions.orderId,
        saleType:3, // 默认退货
      }
      uni.navigateTo({
        // url:'/pages/after_sale_apply?'+this.$util.serialize(params)
        url:'/pagesM/pages/after_sale_submit?'+this.$util.serialize(params)
      })
    },
    async queryDataList() {
      let resp = await this.$api.getOrderAfterSaleInfo({
        _isShowLoading: true,
        orderId: this.loadOptions.orderId
      })
      if(Array.isArray(resp)){
        for(let i=0,item; item = resp[i]; i++){
          if(item.store.id == this.$global.server.storeId){
            item.orderItems.map((oItem)=>{
              oItem.quantityCalc = oItem.quantity
              oItem.priceAll = oItem.quantity * oItem.price
              oItem.specificationsDesc = oItem.specifications.join('+')
              return oItem
            })
            // this.dataList = item.orderItems||[]
			this.dataList.push(...item.orderItems);
            this.dataDetail = item
            // break;
          }
        }
      }
    },
    onLoadPage() {
	  wx.hideShareMenu();
      if (this.isLoad) {
        this.memberId = this.$auth.getMemberId()
      }
      this.queryDataList()
    }
  },
  
}
</script>

<style lang="scss" scoped>
.dt-page {
  min-height: 100vh;

  .goods-wrap {
    margin-bottom: 20upx;
    background-color: #fff;

    .hd-row {
      display: flex;
      justify-content: space-between;
      padding: 0 30upx;
      line-height: 60upx;
      color: #666666;
      font-size: 24upx;
      border-bottom: 1upx solid #e5e5e5;
    }

    .mid-row {
      .check-wrap {
        display: flex;
        align-items: center;
        padding-right: 20rpx;
      }

      .goods-item {
        display: flex;
        padding: 20upx 30upx;
        height: 180rpx;
        box-sizing: border-box;
        border-bottom: 1upx solid #e5e5e5;

        .main-pic {
          width: 120upx;
          height: 120upx;
        }

        .rt-wrap {
          padding-left: 26upx;
          flex: 1;
          line-height: 1;

          .good-mn {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 30upx;

            .goods-name {
              flex: 1;
              margin-right: 20upx;
              line-height: 1.2;
            }
          }

          .specifications {
            margin: 20upx 0;
            color: #999999;
            font-size: 26upx;
            font-weight: 500;
          }

          .price {
            font-size: 30upx;
          }
        }
      }
    }

    .ft-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30upx;
      height: 90upx;
    }

    .btn-base {
      position: relative;
      width: 150upx;
      height: 56upx;
      line-height: 56upx;
      font-size: 28upx;
      border-radius: 6upx;
      box-sizing: border-box;
    }

    .btn-base:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2upx solid $dt-color-primary;
      border-radius: 6upx;
      box-sizing: border-box;
      content: '';
    }

    .btn-plain {
      background-color: transparent;
      color: $dt-text-color;
    }

    .btn-plain:before {
      border-color: #ccc;
      box-sizing: border-box;
      content: '';
    }

    .btn-primary {
      background-color: $dt-color-primary;
      color: #fff;
    }

    .btn-primary:before {
      border-color: $dt-color-primary;
      box-sizing: border-box;
      content: '';
    }
  }

  // 底部工具栏
  .ft-btn-wrap {
    display: flex;
    width: 100%;
    height: 100%;

    .lt{
      flex:2;
      display:flex;
      align-items: center;
      padding-left:30upx;
      .tips{
        padding-left:20upx;
        color:#666;
        font-size:26iupx;
        font-weight:400;
      }
    }
    .ft-btn-submit {
      display:flex;
      justify-content: center;
      align-items: center;
      width:260upx;
      background-color: $dt-color-primary;
      font-size:30upx;
      color: #fff;
      border-radius: 0;
    }
  }
}
.dt-checked{
  display: flex;
  width:40upx;
  height:40upx;
}
</style>