timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix SalesOrderCancel.vue style

Browse Source
This commit is contained in:
Timi
2026-09-09 15:13:57 +08:00
parent 0732d401c4
commit 04405c7bfe
1 changed files with 51 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/salesOrder/SalesOrderCancel.vue
+47 -14
View File
@@ -1,13 +1,29 @@
<template>
<div v-can="permissionCodes.salesOrder.cancel" class="sales-order-operation">
<t-cell-group v-if="order" title="销售订单" theme="card">
<t-notice-bar
theme="warning"
visible
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 v-if="order" class="form" label-align="left" label-width="6rem">
<t-form-item label="取消原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入取消原因" /></t-form-item>
<t-form
v-if="order"
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 ? '正在加载订单' : '订单不存在'"/>
</div>
@@ -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 order = ref<SalesOrder>(); const loading = ref(false); const saving = ref(false); const reason = ref(""); const hasPendingFulfillment = ref(false);
const route = useRoute();
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, "订单取消失败")); }
finally { saving.value = false; }
} catch (error) {
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;
.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; }
.form { padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
.sales-order-operation {
gap: 1rem;
padding: var(--app-nav-height) 0 2rem;
display: flex;
flex-direction: column;
}
</style>