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

<!-- 申请换货 -->
<template>
	<view class="box">
		<form-builder :config="config" :formData="state.formData" @submit="submit" @addressInfo="addressInfo"
			@radioChange="radioChange" @handleGetRegion="handleGetRegion" />
	</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: ["1"],
				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) => {
			//回显订单信息
			console.log("回显订单信息", stringToJson(res.bizContent))
			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.regionList.slice(0, 3);
			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] ? 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;
		}
		console.log("全部数据", state.formData)
	};
	const handleGetRegion = (e : any, item : any) => {
		console.log("dizhi")
	}
	//地址改变
	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 curRegin = e.region == null ? null : e.region;
				const options = {
					type: 2,
					data: {
						id: state.orderInfo.id,
						exchangeMode: e.exchangeMode,
						// exchangeNetworkId: curOutlet == null ? "" : curOutlet.servicehallId,
						exchangeNetworkId: e.exchangeNetworkName,
						exchangeNetworkName: e.exchangeNetworkName,
						exchangeRgMode: e.exchangeRgMode,
						// exchangeRgNetworkId: curOutlet == null ? "" : curOutlet.servicehallId,
						exchangeRgNetworkId: e.exchangeNetworkName,
						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,
				};
				console.log("提交数据", options)
				request(orderExchange, options).then((res) => {
					confirm(
						"您申办的ETC订单已申请换货",
						() => {
							uni.$emit("refreshOrder");
							uni.navigateBack();
						},
						"申请成功",
						false
					);
				});
			},
			"换货确认",
			true
		);
	};

	onLoad((option) => {
		console.log(option);//id是申请的接口获取的id
		getOrderDetails(option.orderId);
		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>