zhywpt-sp/orders/apply-return-goods.vue

<!-- 申请退货 -->
<template>
  <view class="box">
    <form-builder
      :config="config"
      :formData="state.formData"
      @submit="submit"
      @radioChange="radioChange"
    />
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { msg, confirm, getOrderStatusName } from "@/utils/utils";
import { request } from "@/utils/network/request";
import { getLogistics, orderReturn, outletList } from "@/utils/network/api";
import { stringToJson } from "@/utils/network/encryption";
import { getItem, StorageKeys } from "@/utils/storage";

const config = {
  submitName: "申请退货",
  titleWidth: 160,
  divider: true,
};

const state = reactive({
  //订单信息
  orderInfo: {} as any,
  //退货类型: OFFLINE-线下  ON_LINE-线上
  returnMode: "ON_LINE",
  //网点列表
  outlets: [],
  //表单数据
  formData: [
    {
      title: "订单编号:",
      inputType: "number",
      type: 2,
      value: "id",
      hint: "订单编号",
      disabled: true,
      divider: true,
    },
    {
      title: "订单车牌号:",
      type: 2,
      value: "vehiclePlate",
      hint: "订单车牌号",
      disabled: true,
      divider: true,
    },
    {
      title: "订单状态:",
      type: 2,
      value: "orderStep",
      hint: "订单状态",
      disabled: true,
      divider: true,
    },
    {
      title: "退货方式:",
      type: 7,
      value: "returnMode",
      star: true,
      required: true,
      divider: true,
      emptyHint: "请选择退货方式",
      itemData: [
        {
          checked: false,
          value: "ON_LINE",
          name: "线上",
        },
        {
          checked: false,
          value: "OFFLINE",
          name: "线下",
        },
      ],
    },

    {
      title: "物流公司:",
      type: 4,
      value: "returnLogisticsCompany",
      required: true,
      star: true,
      hint: "请选择",
      divider: true,
      itemData: [],
      hide: false,
      emptyHint: "请选择物流公司",
      mode: "search",
      searchPickerVisible: false,
    },
    {
      title: "物流单号:",
      type: 2,
      value: "returnLogisticsNumber",
      required: true,
      maxlength: 20,
      hint: "请输入",
      emptyHint: "请输入物流单号",
      star: true,
      divider: true,
      hide: false,
    },
    {
      title: "退货网点:",
      type: 4,
      value: "returnNetworkName",
      required: true,
      star: true,
      hint: "请选择",
      emptyHint: "请选择退货网点",
      divider: true,
      itemData: [],
      hide: true,
      mode: "search",
      searchPickerVisible: false,
    },
    {
      title: "退货原因:",
      required: true,
      type: 5,
      vertical: 2,
      value: "returnReason",
      maxlength: 50,
      bg: true,
      star: true,
      hint: "请输入退货原因，限制50字以内",
      emptyHint: "请输入退货原因",
    },
  ],
});

/* 获取所有的快递公司 */
const getLogisticsList = () => {
  const options = {
    type: 2,
    data: {},
    method: "POST",
    showLoading: true,
  };

  request(getLogistics, options).then((res) => {
    const data = stringToJson(res.bizContent);
    state.formData[4].itemData = data;
  });
};

/* 获取退货网点 */
const getOutletList = () => {
  const options = {
    type: 2,
    data: {},
    method: "POST",
    showLoading: true,
  };

  request(outletList, options).then((res) => {
    state.outlets = stringToJson(res.bizContent);
    let nameList = [];
    state.outlets.map((item) => {
      nameList.push(item.name);
    });
    state.formData[6].itemData = nameList;
  });
};

//radio改变
const radioChange = (e: any, item: any) => {
  if (item.value === "returnMode") {
    //退货方式
    state.returnMode = item.returnMode;
    state.formData[4].hide = state.returnMode === "ON_LINE" ? false : true;
    state.formData[5].hide = state.returnMode === "ON_LINE" ? false : true;
    state.formData[6].hide = state.returnMode === "ON_LINE" ? true : false;
  }
};

//提交退货申请
const submit = (e: any) => {
  confirm(
    "是否确认退货？",
    () => {
      const curOutlet = state.outlets.find(
        (out) => out.name === e.returnNetworkName
      );
      const options = {
        type: 2,
        data: {
          id: state.orderInfo.id,
          returnMode: e.returnMode,
          returnNetworkId: curOutlet == null ? "" : curOutlet.servicehallId,
          returnNetworkName: e.returnNetworkName,
          returnLogisticsCompany: e.returnLogisticsCompany,
          returnLogisticsNumber: e.returnLogisticsNumber,
          returnReason: e.returnReason,
          opId: getItem(StorageKeys.OpenId),
        },
        method: "POST",
        showLoading: true,
      };

      request(orderReturn, options).then((res) => {
        confirm(
          "您申办的ETC订单已申请退货",
          () => {
            uni.$emit("refreshOrder");
            uni.navigateBack();
          },
          "申请成功",
          false
        );
      });
    },
    "退货确认",
    true
  );
};

onLoad((option) => {
  state.orderInfo = JSON.parse(option.data);
  state.formData[0].hint = state.orderInfo.orderId;
  state.formData[1].hint = state.orderInfo.vehiclePlate;
  state.formData[2].hint = getOrderStatusName(state.orderInfo.orderStep);

  //获取物流公司
  getLogisticsList();

  //获取退货网点
  getOutletList();
});
</script>

<style>
page {
  background-color: #f3f3f3;
  padding-bottom: 30rpx;
}
</style>
<style lang="scss" scoped>
.box {
  margin: 20rpx 0rpx;
  background-color: white;
  padding: 0 20rpx 20rpx;
}
</style>