yicangzongtai_app_240321/pages/order/orderList/applicationDrawback.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="bg-fff u-mt20 u-p30" v-if="keystatus == 1">
      <view class="goodsItem  u-flex-center mb20" v-for="(value, index) in list" :key="value.id">
        <image :src="value.goods_cover" v-if="value.goods_cover" class="u-goods200 u-ml15" mode=""></image>
        <image :src="value.goods_img" v-if="value.goods_img" class="u-goods200 u-ml15" mode=""></image>
        <view class="u-flex1 u-flex-column-start rightText u-ml30">
          <view class="u-text2 u-1A1A1A u-font28">{{ value.goods_title }}</view>
          <view class="bottext u-flex-column-start u-flex1">
            <text class="u-font22 u-999" v-if="value.sku_set_name">规格： {{ value.sku_set_name }}</text>
            <view class="u-flex-center botPrice">
              <view class="u-FF0000 u-font32 " v-if="value.exchange">{{ value.exchange_point }} 积分</view>
              <view class="u-FF0000 u-font32 " v-else>
                <rich-text :nodes="$mUtil.priceBigSmall(value.sale_price)"></rich-text>
              </view>
              <text class="u-font26 u-666 u-ml15" v-if="value.num">x {{ value.num }}</text>
              <text class="u-font26 u-666 u-ml15" v-if="value.number">x {{ value.number }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bg-fff u-mt20 u-p30" v-if="keystatus == 2 || keystatus == 3">
      <view class="goodsItem  u-flex-center">
        <image :src="value.goods_cover" v-if="value.goods_cover" class="u-goods200 u-ml15" mode=""></image>
        <image :src="value.goods_img" v-if="value.goods_img" class="u-goods200 u-ml15" mode=""></image>
        <view class="u-flex1 u-flex-column-start rightText u-ml30">
          <view class="u-text2 u-1A1A1A u-font28">{{ value.goods_title }}</view>
          <view class="bottext u-flex-column-start u-flex1">
            <text class="u-font22 u-999" v-if="value.sku_set_name">规格： {{ value.sku_set_name }}</text>
            <view class="u-flex-center botPrice">
              <view class="u-FF0000 u-font32 " v-if="value.exchange">{{ value.exchange_point }} 积分</view>
              <view class="u-FF0000 u-font32 " v-else>
                <rich-text :nodes="$mUtil.priceBigSmall(value.sale_price)"></rich-text>
              </view>
              <text class="u-font26 u-666 u-ml15" v-if="value.num">x {{ value.num }}</text>
              <text class="u-font26 u-666 u-ml15" v-if="value.number">x {{ value.number }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="u-bg-fff u-mt20">
      <view class="u-plr30">
        <picker @change="pickerChange($event, 'industry')" :value="applicationTypeIndex" range-key="name"
          :range="applicationTypeList" v-if="applicationTypeList.length > 0">
          <view class="u-flex-center-sb u-border-one-one ht104">
            <view class="u-1A1A1A">售后类型</view>
            <view class="u-flex">
              <view class="uni-input ml38 u-4D4D4D">{{ applicationTypeList[applicationTypeIndex].name }}</view>
              <view class="iconfont u-666">&#xe6c7;</view>
            </view>
          </view>
        </picker>
        <picker @change="pickerChangeres($event, 'industry')" :value="applicationIndex" range-key="name"
          :range="applicationList" v-if="applicationList.length > 0">
          <view class="u-flex-center-sb u-border-one-one ht104">
            <view class="u-1A1A1A">售后原因</view>
            <view class="u-flex">
              <view class="uni-input ml38 u-4D4D4D">{{ applicationList[applicationIndex].name }}</view>
              <view class="iconfont u-666">&#xe6c7;</view>
            </view>
          </view>
        </picker>
        <view class="u-flex-center-sb u-border-one-one ht104" v-if="keystatus == 2">
          <view class="u-1A1A1A">数量</view>
          <view class="rightAddRes u-flex-center">
            <text class=" btnTag" @click="resNum">-</text>
            <text class="u-flex1 centertext u-font28 u-999">{{ num }}</text>
            <text class="btnTag" @click="addNum">+</text>
          </view>
        </view>
        <view class="u-flex-center-sb u-border-one-one ht104">
          <view class="u-1A1A1A">退款金额</view>
          <!-- <view class="u-FF0000 u-font32 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(12.2)" ></rich-text></view> -->
          <input type="digit" :value="money" maxlength="10" @input="onchangeInput"
            class="u-FF0000 u-font32  u-flex1 u-text-right" />
        </view>
        <view class="u-flex-center-sb u-border-one-one ht104" v-if="able_refund_point > 0">
          <view class="u-1A1A1A">退款积分</view>
          <view class="u-FF0000 u-font32 ">{{ able_refund_point }}</view>
        </view>
      </view>
    </view>

    <view class="u-bg-fff u-plr30  apply">
      <view class="u-060606">退款备注</view>
      <view class="u-mt25"><textarea placeholder="请您详细填写申请说明" @input="onchangeText" maxlength="45"></textarea></view>
      <view class="u-mt30 u-060606">上传凭证</view>
      <view class="u-mt25">
        <uploadImg imgCount="3" url="" :type="upimgtype" @result="resultUrl" @delImg="delImg"></uploadImg>
      </view>
    </view>

    <view class="btn" @click="submitApply"><button class="u-btn-two">提交审核</button></view>
  </view>
</template>

<script>
  import uploadImg from '../../../components/uploadImg/imgUpload.vue';
  import uniPopup from '../../../components/uni-popup/uni-popup.vue';
  export default {
    components: {
      uploadImg,
      uniPopup
    },
    data() {
      return {
        upimgtype: 'rights',
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '申请退款',
          color: '#1a1a1a',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          statusBarFontColor: '#1A1A1A'
        },
        applicationTypeIndex: 0,
        applicationIndex: 0,
        applicationTypeList: [], //申请类型
        applicationList: [{
          code: 1,
          name: '多拍、错拍、不想要'
        }, {
          code: 1,
          name: '不喜欢、效果不好'
        }, {
          code: 1,
          name: '商品成分描述不符'
        }, {
          code: 1,
          name: '其他'
        }], //申请类型
        imgArray: [], //图片列表
        value: {},
        keystatus: 1, //1未发货，退款，2收到货退款/退货
        parent_order_id: null,
        order_id: null,
        list: [],
        money: 0,
        moneyold: 0,
        num: 0,
        number: 0,
        flag: true,
        reason: '',
        caption: '',
        able_refund_point: 0,
        type: null,
        third: false,
        verifyList: [],
        third_service_type: 0,
        third_reasons_type_code: 0,
        third_package_type_code: 0,
      };
    },
    onLoad(option) {
      let goodslist = uni.getStorageSync('blackgoodsList');
      if (option.title) {
        this.config.title = option.title;
      }
      if (option.id) {
        this.order_id = option.id;
      }
      if (option.orderid) {
        this.parent_order_id = option.orderid;
      }
      if (option.type) {
        this.type = option.type;
      }
      if (option.third == 'true') {
        this.third = option.third == 'true' ? true : false
        this.verify()
      }
      if (option.keystatus) {
        this.keystatus = option.keystatus;
        if (option.keystatus == 2 || option.keystatus == 3) {
          //子订单
          if (goodslist) {
            goodslist.forEach(item => {
              if (item.id == option.id) {
                this.value = item;
                this.childOrder(option.orderid, option.id, item.number);
                this.addNumber(option.orderid, option.id, item.number);
              }
            });
          }
          if (option.keystatus == 2) {
            this.applicationTypeList = [{
              i: 0,
              name: '退款'
            }, {
              i: 1,
              name: '退货'
            }];
            this.reason = this.applicationList[this.applicationIndex].name;
          }
        } else {
          //主订单
          if (goodslist) {
            this.list = goodslist;
          }
          this.mainOrder(option.orderid);
          this.applicationTypeList = [{
            i: 0,
            name: '退款'
          }];
          this.reason = this.applicationList[this.applicationIndex].name;
        }
      }
    },

    methods: {
      onchangeText(e) {
        if (e) {
          this.caption = e.detail.value;
        }
        e;
      },
      onchangeInput(e) {
        if (e) {
          this.money = e.detail.value;
        }
      },

      resultUrl(e) {
        this.imgArray = e;
      },
      delImg(e) {
        this.imgArray = e;
      },
      submitApply() {
        let that = this;
        if (!that.caption) {
          that.$mUtil.toast('请填写退款备注');
          return false;
        }
        if (this.imgArray.length == 0) {
          this.$mUtil.toast('请填上传凭证')
          return false
        }
        if (that.money * 1 > that.moneyold * 1) {
          that.$mUtil.toast('退款金额不能大于' + that.moneyold);
          return false;
        }
        if (that.keystatus == 1) {
          let data = {
            order_id: that.parent_order_id,
            rights_cargo_status: 0, //0未收货，1已收货
            rights_type: 1, //1仅退款,2退款退货
            reason: that.reason,
            caption: that.caption,
            voucher_images: that.imgArray,
            refund_money: that.money,
            refund_point: that.able_refund_point
          };
          that.$http.post('/rights/apply/order', data).then(res => {
            if (res && res.code == 200) {
              that.$mUtil.toast('申请成功');
              setTimeout(() => {
                // uni.reLaunch({
                //   url: '/pages/order/orderList/orderList?keys=6'
                // });
				uni.navigateBack()
              }, 1000);
            }
          });
        } else {
          let data = {
            order_id: that.parent_order_id,
            child_order_id: that.order_id,
            rights_cargo_status: 1, //0未收货，1已收货
            rights_type: that.applicationTypeIndex * 1 + 1, //1仅退款,2退款退货
            reason: that.reason,
            caption: that.caption,
            voucher_images: that.imgArray,
            refund_money: that.money,
            refund_num: that.num,
            refund_point: that.able_refund_point
          };
          if (that.third) {
            data.third_service_type = this.third_service_type
            if (data.third_service_type == '40') {
              data.rights_type = 1
            } else if (data.third_service_type == '50') {
              data.rights_type = 2
            }
            data.third_reasons_type_code = this.third_reasons_type_code
            data.third_package_type_code = 0
          } else {
            data.third_service_type = 0
            data.third_reasons_type_code = 0
            data.third_package_type_code = 0
          }
          that.$http.post('/rights/apply/child', data).then(res => {
            if (res && res.code == 200) {
              that.$mUtil.toast('申请成功');
              setTimeout(() => {
                // uni.reLaunch({
                //   url: '/pages/order/orderList/orderList'
                // });
				uni.navigateBack()
              }, 1000);
            }
          });
        }
      },
      //减
      resNum() {
        if (this.num * 1 > 1) {
          this.flag = false;
          this.num--;
          this.addNumber(this.parent_order_id, this.order_id, this.num);
        }
      },
      //加
      addNum() {
        console.log(this.number);
        if (this.num < this.number) {
          this.flag = false;
          this.num++;
          this.addNumber(this.parent_order_id, this.order_id, this.num);
        }
      },
      //主订单可以最多可以退多少钱
      mainOrder(id) {
        let data = {
          order_id: id
        };
        this.$http.post('/rights/main/able-refund-money', data).then(res => {
          if (res && res.code == 200) {
            this.money = res.data.able_refund_money;
            this.moneyold = res.data.able_refund_money;
            this.able_refund_point = res.data.able_refund_point;
            // this.num = res.data.goods_num
            // this.number = res.data.goods_num
          }
        });
      },
      //子订单可以最多可以退多少钱
      childOrder(id, childid, num) {
        let data = {
          order_id: id,
          child_order_id: childid,
          refund_num: num
        };
        this.$http.post('/rights/child/able-refund-money', data).then(res => {
          if (res && res.code == 200) {
            this.money = res.data.able_refund_money;
            this.moneyold = res.data.able_refund_money;
            this.able_refund_point = res.data.able_refund_point;
            this.number = res.data.goods_num;
            if (this.flag) {
              this.num = res.data.goods_num;
            }
          }
        });
      },
      addNumber(id, childid, num) {
        let data = {
          order_id: id,
          child_order_id: childid,
          refund_num: num
        };
        this.$http.post('/rights/child/able-refund-money', data).then(res => {
          if (res && res.code == 200) {
            this.money = res.data.able_refund_money;
            this.moneyold = res.data.able_refund_money;
            this.able_refund_point = res.data.able_refund_point;

            if (this.flag) {
              this.num = res.data.goods_num;
            }
          }
        });
      },

      pickerChange(e, val) {
        this.applicationTypeIndex = e.target.value;
        if (this.third) {
          this.third_service_type = this.applicationTypeList[e.target.value].code
        }
      },
      pickerChangeres(e, val) {
        this.applicationIndex = e.target.value;
        this.reason = this.applicationList[e.target.value].name;
        if (this.third) {
          this.third_reasons_type_code = this.applicationList[e.target.value].code
        }
      },
      // 第三方售后前置校验
      verify() {
        this.$http.post('/rights/third/beforeCheck', {
          order_id: this.parent_order_id,
          child_order_id: this.order_id
        }).then(res => {
          if (res.code == 200 && res.data) {
            if (res.data.serviceType.length > 0) {
              this.verifyList = res.data.serviceType
              this.applicationTypeList = []
              this.applicationList = []
              this.applicationList = res.data.reasonsType
              for (let item of res.data.serviceType) {
                if (item.code == '40' || item.code == '50') {
                  this.applicationTypeList.push(item);
                }
              }
              this.third_service_type = this.applicationTypeList[0].code
              this.third_reasons_type_code = this.applicationList[0].code
              this.reason = this.applicationList[0].name;
            }
          }
        }).catch(err => {})
      }
    }
  };
</script>

<style lang="scss">
  page {
    background-color: #fafafa;
  }

  .bg-fff {
    background-color: #fff;
  }

  .ml38 {
    margin-left: 38rpx;
  }

  .mb20 {
    margin-bottom: 20rpx;
  }

  .ht104 {
    height: 104rpx;
    line-height: 104rpx;
  }

  .rightAddRes {
    width: 172rpx;
    height: 50rpx;
    border-radius: 8rpx;
    border: 1px solid #e5e5e5;

    .centertext {
      text-align: center;
    }

    .btnTag {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background-color: #dedede;
      font-size: 46rpx;
      color: #888;
    }
  }

  .p-tlbr30 {
    padding: 30rpx;
  }

  textarea {
    width: 100%;
    height: 210rpx;
    opacity: 0.66;
    border: 1rpx solid #e6e6e6;
    border-radius: 8rpx;
    padding-left: 22rpx;
    padding-top: 14rpx;
    box-sizing: border-box;
  }

  .apply {
    padding-top: 34rpx;
    padding-bottom: 42rpx;
  }

  .btn {
    padding: 70rpx 30rpx;

    button {
      background: #FA6138;
      color: #ffffff;
    }
  }
</style>