applet/pages/order/applicationDrawback.vue

<template>
  <view class="container">
    <view class="bg-fff u-mt20 u-p30" v-if="keystatus == 1">
      <view
        class="goodsItem u-flex-center mb20"
        v-for="value in list"
        :key="value.id"
      >
        <image
          :src="value.productCover"
          v-if="value.productCover"
          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.productTitle }}</view>
          <view class="bottext u-flex-column-start u-flex1">
            <text class="u-font22 u-999" v-if="value.skuSetName"
              >规格： {{ value.skuSetName }}</text
            >
            <view class="u-flex-center botPrice">
              <view class="u-FF0000 u-font32" v-if="value.exchange"
                >{{ value.singlePoint }} 积分</view
              >
              <view class="u-FF0000 u-font32" v-else>
                <rich-text
                  :nodes="$mUtil.priceBigSmall(value.realPrice)"
                ></rich-text>
              </view>
              <text class="u-font26 u-666 u-ml15" v-if="value.productNum"
                >x {{ value.productNum }}</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.productCover"
          v-if="value.productCover"
          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.productTitle }}</view>
          <view class="bottext u-flex-column-start u-flex1">
            <text class="u-font22 u-999" v-if="value.skuSetName"
              >规格： {{ value.skuSetName }}</text
            >
            <view class="u-flex-center botPrice">
              <view class="u-FF0000 u-font32" v-if="value.singlePoint && value.singlePoint * 1"
                >{{ value.singlePoint }} 积分</view
              >
              <view class="u-FF0000 u-font32" v-else>
                <rich-text
                  :nodes="$mUtil.priceBigSmall(value.realPrice)"
                ></rich-text>
              </view>
              <text class="u-font26 u-666 u-ml15" v-if="value.productNum"
                >x {{ value.productNum }}</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="ableRefundPoint > 0"
        >
          <view class="u-1A1A1A">退款积分</view>
          <view class="u-FF0000 u-font32">{{ ableRefundPoint }}</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"
          :uploadImgCount="1"
          v-model="imgArray"
        ></uploadImg>
      </view>
    </view>

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

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  ableRefundMoney_Api,
  ableRefundMoneyMain_Api,
  childOrder_Api,
  applyOrder_Api,
} from "@/api/order.js";

const applicationTypeIndex = ref(0);
const applicationIndex = ref(0);
const applicationTypeList = ref([]); //申请类型
const applicationList = ref([
  {
    code: 1,
    name: "多拍、错拍、不想要",
  },
  {
    code: 1,
    name: "不喜欢、效果不好",
  },
  {
    code: 1,
    name: "商品成分描述不符",
  },
  {
    code: 1,
    name: "其他",
  },
]); //申请类型
const imgArray = ref([]); //图片列表
const value = ref({});
const keystatus = ref(1); //1未发货，退款，2收到货退款/退货
const parentOrderId = ref(null);
const orderId = ref(null);
const list = ref([]);
const money = ref(0);
const moneyold = ref(0);
const num = ref(0);
const number = ref(0);
const flag = ref(true);
const reason = ref("");
const caption = ref("");
const ableRefundPoint = ref(0);
const type = ref(null);

// 页面加载
onLoad((option) => {
  let goodslist = uni.getStorageSync("blackgoodsList");
  // 注意：在Vue3中，this.config.title需要替换为其他方式设置标题
  // 这里我们忽略标题设置，因为在实际应用中可能通过路由参数传递

  if (option.id) {
    orderId.value = option.id;
  }
  if (option.orderId) {
    parentOrderId.value = option.orderId;
  }
  if (option.type) {
    type.value = option.type;
  }
  if (option.keystatus) {
    keystatus.value = option.keystatus;
    if (option.keystatus == 2 || option.keystatus == 3) {
      //子订单
      if (goodslist) {
        goodslist.forEach((item) => {
          if (item.orderDetailId == option.id) {
            value.value = item;
            getChildOrder(option.orderId, option.id, item.number);
            // getAddNumber(option.orderId, option.id, item.number);
          }
        });
      }
      if (option.keystatus == 2) {
        applicationTypeList.value = [
          {
            i: 0,
            name: "退款",
          },
          {
            i: 1,
            name: "退货退款",
          },
        ];
        reason.value = applicationList.value[applicationIndex.value].name;
      }
    } else {
      //主订单
      if (goodslist) {
        list.value = goodslist;
      }
      mainOrder(option.orderId);
      applicationTypeList.value = [
        {
          i: 0,
          name: "退款",
        },
      ];
      reason.value = applicationList.value[applicationIndex.value].name;
    }
  }
});

// 输入框变化处理
const onchangeText = (e) => {
  if (e) {
    caption.value = e.detail.value;
  }
};

const onchangeInput = (e) => {
  if (e) {
    money.value = e.detail.value;
  }
};

// 图片上传结果处理
const resultUrl = (e) => {
  imgArray.value = e;
};

// 提交申请
const submitApply = () => {
  let that = {
    keystatus: keystatus.value,
    parentOrderId: parentOrderId.value,
    orderId: orderId.value || parentOrderId.value,
    applicationTypeIndex: applicationTypeIndex.value,
    reason: reason.value,
    caption: caption.value,
    imgArray: imgArray.value,
    money: money.value,
    moneyold: moneyold.value,
    num: num.value,
    ableRefundPoint: ableRefundPoint.value,
  };

  if (that.money * 1 > that.moneyold * 1) {
    uni.$uv.toast("退款金额不能大于" + that.moneyold);
    return false;
  }
  if (that.keystatus == 1) {
    let data = {
      parentOrderId: parentOrderId.value,
      orderId: that.parentOrderId,
      rightsCargoStatus: 0, //0未收货，1已收货
      rightsType: 5, //5仅退款,10退款退货
      reason: that.reason,
      caption: that.caption,
      voucherImages: that.imgArray,
      refundMoney: that.money,
      refundPoint: that.ableRefundPoint,
      isAllRights: true
    };
    console.log(data)
    applyOrder_Api(data).then((res) => {
      if (res && res.code == 200) {
        uni.$uv.toast("申请成功");
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }
    });
  } else {
    let data = {
      orderId: that.parentOrderId,
      childOrderId: that.orderId,
      rightsCargoStatus: 1, //0未收货，1已收货
      rightsType: that.applicationTypeIndex == 0 ? 5 : 10, //5仅退款,10退款退货
      reason: that.reason,
      caption: that.caption,
      refundMoney: that.money,
      refundNum: that.num,
      refundPoint: that.ableRefundPoint,
    };
    childOrder_Api(data).then((res) => {
      if (res && res.code == 200) {
        uni.$uv.toast("申请成功");
        setTimeout(() => {
          // uni.reLaunch({
          //   url: '/pages/order/mallOrder/orderList'
          // });
          uni.navigateBack();
        }, 1000);
      }
    });
  }
};

// 减数量
const resNum = () => {
  if (num.value * 1 > 1) {
    flag.value = false;
    num.value--;
    getAddNumber(parentOrderId.value, orderId.value, num.value);
  }
};

// 加数量
const addNum = () => {
  console.log(number.value);
  if (num.value < number.value) {
    flag.value = false;
    num.value++;
    getAddNumber(parentOrderId.value, orderId.value, num.value);
  }
};

// 主订单可以最多可以退多少钱
const mainOrder = (id) => {
  let data = {
    orderId: id,
  };
  ableRefundMoneyMain_Api(data).then((res) => {
    if (res && res.code == 200) {
      money.value = res.data.ableRefundMoney;
      moneyold.value = res.data.ableRefundMoney;
      ableRefundPoint.value = res.data.ableRefundPoint;
      // num.value = res.data.goods_num
      // number.value = res.data.goods_num
    }
  });
};

// 子订单可以最多可以退多少钱
const getChildOrder = (id, childid, nums) => {
  let data = {
    orderId: id,
    childOrderId: childid,
    refundNum: nums,
  };
  ableRefundMoney_Api(data).then((res) => {
    if (res && res.code == 200) {
      money.value = res.data.ableRefundMoney;
      moneyold.value = res.data.ableRefundMoney;
      ableRefundPoint.value = res.data.ableRefundPoint;
      number.value = res.data.productNum;
      if (flag.value) {
        num.value = res.data.productNum;
      }
    }
  });
};

const getAddNumber = (id, childid, nums) => {
  let data = {
    orderId: id,
    childOrderId: childid,
    refundNum: nums,
  };
  ableRefundMoney_Api(data).then((res) => {
    if (res && res.code == 200) {
      money.value = res.data.ableRefundMoney;
      moneyold.value = res.data.ableRefundMoney;
      ableRefundPoint.value = res.data.ableRefundPoint;
      if (flag.value) {
        num.value = res.data.productNum;
      }
    }
  });
};

const pickerChange = (e, val) => {
  // console.log('applicationTypeList.value', applicationTypeList.value);
  // console.log('e.target.val', e);
  applicationTypeIndex.value = e.detail.value;
};

const pickerChangeres = (e, val) => {
  applicationIndex.value = e.detail.value;
  reason.value = applicationList.value[e.detail.value].name;
};
</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>