zhywpt-sp/subpackage/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",
				returnMode: "ON_LINE",
				star: true,
				required: true,
				divider: true,
				emptyHint: "请选择退货方式",
				itemData: [
					{
						checked: true,
						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,
						returnNetworkId: e.returnNetworkName,
						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>