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

<!-- 申请换货 -->
<template>
  <view class="box">
    <form-builder
      :config="config"
      :formData="state.formData"
      @submit="submit"
      @addressInfo="addressInfo"
      @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,
  orderDetail,
  orderExchange,
  outletList,
} from "@/utils/network/api";
import { stringToJson } from "@/utils/network/encryption";
import { getItem, StorageKeys } from "@/utils/storage";

const config = {
  submitName: "申请换货",
  titleWidth: 160,
};

const state = reactive({
  //订单信息
  orderInfo: {} as any,
  //网点信息
  outlets: [],
  //换货类型: MAIL-线上-邮寄  SELF-线上-自提  OFFLINE-线下
  exchangeMode: "SELF",
  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: "exchangeMode",
      star: true,
      required: true,
      divider: true,
      emptyHint: "请选择退货方式",
      itemData: [
        {
          checked: false,
          value: "ON_LINE",
          name: "线上",
        },
        {
          checked: false,
          value: "OFFLINE",
          name: "线下",
        },
      ],
    },

    /* 区别-线上方式 */
    {
      title: "物流公司:",
      type: 4,
      value: "exchangeLogisticsCompany",
      required: true,
      star: true,
      hint: "请选择",
      divider: true,
      itemData: [],
      hide: false,
      emptyHint: "请选择物流公司",
      mode: "search",
      searchPickerVisible: false,
    },
    {
      title: "物流单号:",
      type: 2,
      value: "exchangeLogisticsNumber",
      required: true,
      maxlength: 20,
      hint: "请输入",
      emptyHint: "请输入物流单号",
      star: true,
      divider: true,
      hide: false,
    },
    {
      title: "收货方式:",
      type: 7,
      value: "exchangeRgMode",
      required: true,
      star: true,
      divider: true,
      itemData: [
        {
          checked: false,
          value: "SELF",
          name: "营业点自提",
        },
        {
          checked: false,
          value: "MAIL",
          name: "邮寄",
        },
      ],
      hide: false,
      emptyHint: "请选择收货方式",
    },

    /* 线上-营业点自提 */
    {
      title: "自提网点:",
      type: 4,
      value: "exchangeRgNetworkName",
      required: true,
      star: true,
      hint: "请选择",
      divider: true,
      hide: false,
      itemData: [],
      emptyHint: "请选择自提网点",
      mode: "search",
      searchPickerVisible: false,
    },

    /* 线上-邮寄 */
    {
      title: "收件人地址:",
      type: 2,
      value: "address",
      maxlength: 50,
      hint: " ",
      disabled: true,
      divider: true,
      btn: true,
      btnTitle: "获取微信地址",
      btnType: "address",
      hide: true,
    },
    {
      title: "姓名:",
      type: 2,
      value: "consignee",
      maxlength: 20,
      required: true,
      hint: "请输入",
      emptyHint: "请输入收件人姓名",
      star: true,
      divider: true,
      hide: true,
    },
    {
      title: "电话:",
      type: 2,
      value: "consigneeTel",
      required: true,
      inputType: "number",
      maxlength: 11,
      hint: "请输入",
      emptyHint: "请输入收件人电话",
      star: true,
      divider: true,
      hide: true,
    },
    {
      title: "地区:",
      type: 10,
      value: "region",
      required: true,
      hint: "选择省/市/区",
      emptyHint: "请选择收件人所在地区",
      star: true,
      divider: true,
      hide: true,
    },
    {
      title: "详细地址:",
      type: 2,
      value: "address",
      maxlength: 100,
      required: true,
      hint: "街道门牌、楼层房间号等信息",
      emptyHint: "请输入收件人详细地址",
      star: true,
      divider: true,
      hide: true,
    },
    {
      title: "邮政编码:",
      type: 2,
      value: "postalCode",
      inputType: "number",
      maxlength: 20,
      hint: "请输入邮政编码",
      emptyHint: "请输入邮政编码",
      divider: true,
      hide: true,
    },

    /* 区别-线下方式 */
    {
      title: "退货网点:",
      type: 4,
      value: "exchangeNetworkName",
      required: true,
      star: true,
      hint: "请选择",
      divider: true,
      itemData: [],
      hide: true,
      emptyHint: "请选择退货网点",
      mode: "search",
      searchPickerVisible: false,
    },

    {
      title: "换货原因:",
      required: true,
      type: 5,
      vertical: 2,
      value: "exchangeReason",
      maxlength: 50,
      bg: true,
      star: true,
      hint: "请输入换货原因，限制50字以内",
      emptyHint: "请输入换货原因",
    },
  ],
});

/* 获取订单详情 */
const getOrderDetails = (id) => {
  const options = {
    type: 2,
    data: { id: id },
    method: "POST",
    showLoading: true,
  };
  request(orderDetail, options).then((res) => {
    //回显订单信息
    state.orderInfo = stringToJson(res.bizContent);
    state.formData[0].hint = state.orderInfo.orderId;
    state.formData[1].hint = state.orderInfo.vehiclePlate;
    state.formData[2].hint = getOrderStatusName(state.orderInfo.orderStep);

    //回显收件人地址
    state.formData[9][state.formData[9].value] =
      state.orderInfo.orderInfoExt.consignee;
    state.formData[10][state.formData[10].value] =
      state.orderInfo.orderInfoExt.consigneeTel;
    state.formData[11][state.formData[11].value] =
      state.orderInfo.orderInfoExt.region;
    state.formData[12][state.formData[12].value] =
      state.orderInfo.orderInfoExt.address;
    state.formData[13][state.formData[13].value] =
      state.orderInfo.orderInfoExt.postalCode;
  });
};

/* 获取所有的快递公司 */
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[7].itemData = nameList;
    state.formData[14].itemData = nameList;
  });
};

//radio改变
const radioChange = (e: any, item: any) => {
  if (item.value === "exchangeMode") {
    //退货方式
    state.exchangeMode =
      item.exchangeMode === "ON_LINE"
        ? state.formData[6][state.formData[6].value] ?? "SELF"
        : item.exchangeMode;
  } else if (item.value === "exchangeRgMode") {
    //收货方式
    state.exchangeMode = item.exchangeRgMode;
  }

  state.formData[4].hide = state.exchangeMode === "OFFLINE" ? true : false;
  state.formData[5].hide = state.exchangeMode === "OFFLINE" ? true : false;
  state.formData[6].hide = state.exchangeMode === "OFFLINE" ? true : false;
  for (let i = 7; i < 15; i++) {
    state.formData[i].hide = true;
  }
  if (state.exchangeMode === "MAIL") {
    //MAIL-线上-邮寄
    for (let i = 8; i < 14; i++) {
      state.formData[i].hide = false;
    }
  } else if (state.exchangeMode === "SELF") {
    //SELF-线上-营业点自提
    state.formData[7].hide = false;
  } else if (state.exchangeMode === "OFFLINE") {
    //OFFLINE-线下
    state.formData[14].hide = false;
  }
};

//地址改变
const addressInfo = (content: any) => {
  state.formData[9][state.formData[9].value] = content.userName;
  state.formData[10][state.formData[10].value] = content.telNumber;
  state.formData[11][
    state.formData[11].value
  ] = `${content.provinceName}/${content.cityName}/${content.countyName}`;
  state.formData[12][state.formData[12].value] = content.detailInfo;
  state.formData[13][state.formData[13].value] = content.postalCode;
};

//提交换货申请
const submit = (e: any) => {
  confirm(
    "是否确认换货？",
    () => {
      const curOutletName =
        e.exchangeMode === "ON_LINE"
          ? e.exchangeRgNetworkName
          : e.exchangeNetworkName;
      const curOutlet = state.outlets.find((out) => out.name === curOutletName);
      const curRegin = e.region == null ? null : e.region.split("/");
      const options = {
        type: 2,
        data: {
          id: state.orderInfo.id,
          exchangeMode: e.exchangeMode,
          exchangeNetworkId: curOutlet == null ? "" : curOutlet.servicehallId,
          exchangeNetworkName: e.exchangeNetworkName,
          exchangeRgMode: e.exchangeRgMode,
          exchangeRgNetworkId: curOutlet == null ? "" : curOutlet.servicehallId,
          exchangeRgNetworkName: e.exchangeRgNetworkName,
          exchangeLogisticsCompany: e.exchangeLogisticsCompany,
          exchangeLogisticsNumber: e.exchangeLogisticsNumber,
          exchangeReason: e.exchangeReason,
          consignee: e.consignee,
          consigneeTel: e.consigneeTel,
          region: curRegin ? `${curRegin[0]}${curRegin[1]}${curRegin[2]}` : "",
          address: e.address,
          postalCode: e.postalCode,
          opId: getItem(StorageKeys.OpenId),
        },
        method: "POST",
        showLoading: true,
      };

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

onLoad((option) => {
  getOrderDetails(option.id);
  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>