zhywpt-sp/subpackage/orders/cancel-order.vue

<!-- 取消订单 -->
<template>
	<view class="form">
		<form-builder :formData="state.formData" :config="config" @submit="doCancelOrder" />
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { request } from "@/utils/network/request.js";
	import { msg, confirm, getOrderStatusName } from "@/utils/utils";
	import { cancelOrder, cancelOrderNew } from "@/utils/network/api";
	import { getItem, StorageKeys } from "@/utils/storage";

	const config = {
		submitName: "取消订单", //按钮名称(默认提交)
		titleWidth: 160, //标题最小宽度
	};

	const state = reactive({
		orderInfo: {} as any, //订单数据
		formData: [
			{
				title: "订单编号",
				inputType: "number",
				type: 2,
				value: "orderNumber",
				bg: true,
				hint: "订单编号",
				disabled: true,
			},
			{
				title: "订单车牌号",
				type: 2,
				value: "carNumber",
				bg: true,
				hint: "订单车牌号",
				disabled: true,
			},
			{
				title: "订单状态",
				type: 2,
				value: "orderStatus",
				bg: true,
				hint: "订单状态",
				disabled: true,
			},
			{
				title: "请输入取消原因",
				required: true,
				type: 5,
				vertical: 2,
				value: "orderReason",
				maxlength: 100,
				bg: true,
				hint: "限制100字符以内",
				emptyHint: "请输入取消的原因",
			},
		],
	});

	//取消订单
	const doCancelOrder = (e : any) => {
		confirm(
			"是否确认取消订单",
			() => {
				const options = {
					type: 2,
					data: {
						id: state.orderInfo.id,
						source: "WECHAT",
						reason: e.orderReason,
						// opId: getItem(StorageKeys.OpenId),
						openId: getItem(StorageKeys.OpenId),
					},
					method: "POST",
					showLoading: true,
				};
				console.log("options", options)
				// #ifdef MP-WEIXIN
				request(cancelOrder, options).then((res) => {
					cancelOrderSuccess();
				});
				// #endif
				// #ifdef MP-ALIPAY
				request(cancelOrderNew, options).then((res) => {
					cancelOrderSuccess();
				});
				// #endif  
			},
			"取消确认"
		);
	};

	const cancelOrderSuccess = () => {
		const content =
			state.orderInfo.orderStep == 4
				? "您的订单已取消"
				: "您的订单已取消，我们将在1-2个工作日内将费用原路退回";
		confirm(
			content,
			() => {
				uni.$emit("refreshOrder");
				uni.navigateBack();
			},
			"取消成功",
			false
		);
	};

	onLoad((options) => {
		state.orderInfo = JSON.parse(options.data) ? JSON.parse(options.data) : {};
		state.formData[0].hint = state.orderInfo.orderId;
		state.formData[1].hint = state.orderInfo.vehiclePlate;
		state.formData[2].hint = getOrderStatusName(state.orderInfo.orderStep);
		console.log("options", options, getOrderStatusName(state.orderInfo.orderStep))
	});
</script>

<style lang="scss" scoped>
	.form {
		border-top: 1px solid #f7f7f7;
		padding: 20rpx;
	}
</style>