fix SalesOrderCancel.vue style

src/pages/salesOrder/SalesOrderCancel.vue

@@ -1,15 +1,31 @@
 <template>
 	<div v-can="permissionCodes.salesOrder.cancel" class="sales-order-operation">
-		<t-cell-group v-if="order" title="销售订单" theme="card">
+		<t-notice-bar
-			<t-cell title="订单号" :note="order.orderNo || order.id" />
+			theme="warning"
-			<t-cell title="当前状态" :note="getSalesOrderStatusText(order.status)" />
+			visible
-			<t-cell v-if="hasPendingFulfillment" title="履约提示" note="存在待处理履约，暂不能取消订单" />
+			content="取消订单会立即撤销本单有效消费；受影响的订单积分和签到消费条件积分将由系统自动追加撤销流水。退款仍需按资金流程处理。"
+		/>
+		<t-cell-group
+			v-if="order"
+			title="销售订单"
+			theme="card"
+			v-entrance-transition
+		>
+			<t-cell title="订单号" :note="order.orderNo || order.id"/>
+			<t-cell title="当前状态" :note="getSalesOrderStatusText(order.status)"/>
+			<t-cell v-if="hasPendingFulfillment" title="履约提示" note="存在待处理履约，暂不能取消订单"/>
 		</t-cell-group>
-		<div v-if="order" class="revoke-tip">取消订单会立即撤销本单有效消费；受影响的订单积分和签到消费条件积分将由系统自动追加撤销流水。退款仍需按资金流程处理。</div>
+		<t-form
-		<t-form v-if="order" class="form" label-align="left" label-width="6rem">
+			v-if="order"
-			<t-form-item label="取消原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入取消原因" /></t-form-item>
+			class="form"
+			label-width="6rem"
+			v-entrance-transition="70"
+		>
+			<t-form-item label="取消原因" required-mark>
+				<t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入取消原因"/>
+			</t-form-item>
 		</t-form>
-		<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
+		<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'"/>
 	</div>
 </template>
 
@@ -25,8 +41,16 @@ import { permissionCodes } from "@/utils/permission";
 import { getSalesOrderStatusText } from "@/utils/salesOrder";
 
 defineOptions({ name: "SalesOrderCancel" });
-const route = useRoute(); const router = useRouter(); const navBarStore = useNavBarStore(); const userStore = useUserStore();
+const route = useRoute();
-const order = ref<SalesOrder>(); const loading = ref(false); const saving = ref(false); const reason = ref(""); const hasPendingFulfillment = ref(false);
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const order = ref<SalesOrder>();
+const loading = ref(false);
+const saving = ref(false);
+const reason = ref("");
+const hasPendingFulfillment = ref(false);
+
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) return;
@@ -40,10 +64,13 @@ async function loadData(): Promise<void> {
 			]);
 			hasPendingFulfillment.value = !!pendingResult.list?.length || !!waitingStockResult.list?.length;
 		}
+	} catch (error) {
+		Message.error(getErrorMessage(error, "订单加载失败"));
+	} finally {
+		loading.value = false;
 	}
-	catch (error) { Message.error(getErrorMessage(error, "订单加载失败")); }
-	finally { loading.value = false; }
 }
+
 async function save(): Promise<void> {
 	if (!order.value?.id || !reason.value || saving.value) return;
 	if (order.value.status !== "ACTIVE") {
@@ -59,20 +86,26 @@ async function save(): Promise<void> {
 		await SalesOrderAPI.cancel({ salesOrderId: order.value.id, reason: reason.value.trim() });
 		Message.success("订单已取消");
 		await router.replace(`/management/sales-orders/${order.value.id}`);
-	} catch (error) { Message.error(getErrorMessage(error, "订单取消失败")); }
+	} catch (error) {
-	finally { saving.value = false; }
+		Message.error(getErrorMessage(error, "订单取消失败"));
+	} finally {
+		saving.value = false;
+	}
 }
+
 onMounted(async () => {
 	if (!userStore.hasPermissions(permissionCodes.salesOrder.cancel)) return;
-	navBarStore.setRightText("确认取消", "var(--td-danger-color)", save);
+	navBarStore.setRightText("确认", "var(--td-error-color)", save);
 	await loadData();
 });
 onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.sales-order-operation { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 1rem 2rem; display: flex; flex-direction: column;
+.sales-order-operation {
-	.revoke-tip { padding: .75rem; color: var(--td-warning-color); font-size: .8125rem; line-height: 1.5; background: var(--td-warning-color-1); border-radius: .75rem; }
+	gap: 1rem;
-	.form { padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
+	padding: var(--app-nav-height) 0 2rem;
+	display: flex;
+	flex-direction: column;
 }
 </style>