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

add disabled style

Browse Source
This commit is contained in:
Timi
2026-09-14 01:00:15 +08:00
parent a87609261b
commit 6674a6690b
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/salesOrder/components/SalesOrderListCell.vue
+19 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="sales-order-cell bg-white"> <div class="sales-order-cell" :class="{ cancelled: isCancelled }">
<div class="header"> <div class="header">
<div class="left"> <div class="left">
<t-image <t-image
@@ -172,10 +172,11 @@ const photoURL = computed(() => getCustomerPhotoURL(props.order.customer, 64));
const orderNoText = computed(() => `订单号：${props.order.orderNo || props.order.id || "未知"}`); const orderNoText = computed(() => `订单号：${props.order.orderNo || props.order.id || "未知"}`);
const totalProductQuantity = computed(() => sumProductQuantity("quantity")); const totalProductQuantity = computed(() => sumProductQuantity("quantity"));
const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 订单数量 ${totalProductQuantity.value}`); const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 订单数量 ${totalProductQuantity.value}`);
const isCancelledPendingRefund = computed(() => props.order.status === "CANCELLED" && props.order.refundStatus === "PENDING"); const isCancelled = computed(() => props.order.status === "CANCELLED");
const isCancelledPendingRefund = computed(() => isCancelled.value && props.order.refundStatus === "PENDING");
const showRefundActions = computed(() => props.canRefund && isCancelledPendingRefund.value); const showRefundActions = computed(() => props.canRefund && isCancelledPendingRefund.value);
const showMoreActionMenu = computed(() => props.canCancel || showRefundActions.value); const showMoreActionMenu = computed(() => props.canCancel || showRefundActions.value);
const showReceiveAction = computed(() => props.canReceive && props.order.status !== "CANCELLED" && props.order.paymentStatus !== "PAID"); const showReceiveAction = computed(() => props.canReceive && !isCancelled.value && props.order.paymentStatus !== "PAID");
const canCancelOrder = computed(() => props.order.status === "ACTIVE"); const canCancelOrder = computed(() => props.order.status === "ACTIVE");
const canFulfillByPayment = computed(() => props.order.paymentStatus === "PAID" || props.canStoreManager); const canFulfillByPayment = computed(() => props.order.paymentStatus === "PAID" || props.canStoreManager);
const showFulfillAction = computed(() => props.canFulfill && canFulfillByPayment.value && props.order.status === "ACTIVE"); const showFulfillAction = computed(() => props.canFulfill && canFulfillByPayment.value && props.order.status === "ACTIVE");
@@ -241,8 +242,23 @@ function getProductText(item: NonNullable<SalesOrder["itemList"]>[number]): stri
gap: .5rem; gap: .5rem;
padding: 10px; padding: 10px;
display: flex; display: flex;
background: var(--td-bg-color-container);
flex-direction: column; flex-direction: column;
&.cancelled {
background: var(--td-gray-color-2);
.left,
.product,
.time-payment {
filter: grayscale(1);
}
.customer {
color: var(--td-text-color-secondary);
}
}
.header { .header {
gap: .5rem; gap: .5rem;
display: flex; display: flex;