zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 订单样式优化

Browse Source
This commit is contained in:
duanshuwen 2025-10-05 15:59:39 +08:00
parent e58ded9b84
commit 59c8fd515b
3 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Divider/styles/index.scss
View File

@ -1,30 +1,36 @@
.divider { .divider {
height: 1px; height: 1px;
margin: 0 10px; margin: 0 10px;
background: linear-gradient(to right, #eee, #eee 5px, transparent 5px, transparent); background: linear-gradient(
to right,
#eee,
#eee 5px,
transparent 5px,
transparent
);
background-size: 10px 100%; background-size: 10px 100%;
position: relative; position: relative;
&::before, &::after { // &::before, &::after {
position: absolute; // position: absolute;
content: ''; // content: '';
height: 12px; // height: 12px;
width: 6px; // width: 6px;
background-color: #E2EDF2; // background-color: #E2EDF2;
top: 50%; // top: 50%;
transform: translateY(-50%); // transform: translateY(-50%);
} // }
&::before { // &::before {
border-radius: 0 20px 20px 0; // border-radius: 0 20px 20px 0;
top: 0; // top: 0;
left: -10px; // left: -10px;
} // }
&::after { // &::after {
border-radius: 20px 0 0 20px; // border-radius: 20px 0 0 20px;
top: 0; // top: 0;
right: -10px; // right: -10px;
} // }
} }

5
src/pages-order/order/components/OrderCard/styles/index.scss
View File

@ -4,6 +4,11 @@
box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
margin: 12px; margin: 12px;
transition: all 0.3s ease; transition: all 0.3s ease;
mask: radial-gradient(circle at 0 57px, #0000 6px, red 0),
radial-gradient(circle at right 57px, #0000 6px, red 0);
mask-size: 50%;
mask-position: 0, 100%;
mask-repeat: no-repeat;
&:active { &:active {
transform: scale(0.98); transform: scale(0.98);

11
src/pages-order/order/components/OrderInfo/index.vue
View File

@ -80,7 +80,7 @@ const formattedAmount = computed(() => {
return amount ? `${parseFloat(amount).toFixed(2)}` : "0.00"; return amount ? `${parseFloat(amount).toFixed(2)}` : "0.00";
}); });
// 按钮文案逻辑 // 按钮文案逻辑，订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
const buttonText = computed(() => { const buttonText = computed(() => {
const status = props.orderData.orderStatus; const status = props.orderData.orderStatus;
switch (status) { switch (status) {
@ -88,14 +88,17 @@ const buttonText = computed(() => {
return "立即支付"; return "立即支付";
case "2": // 待使用状态 case "2": // 待使用状态
return "申请退款"; return "申请退款";
default: // 其他状态 case "3": // 已取消状态
case "5": // 已关闭状态
case "6": // 已完成状态
return "再次预定"; return "再次预定";
} }
}); });
// 是否显示按钮（退款中状态不显示） // 是否显示按钮（待支付、待使用、已取消、已关闭、已完成）
const shouldShowButton = computed(() => { const shouldShowButton = computed(() => {
return props.orderData.orderStatus !== "4"; // 4-退款中 const status = props.orderData.orderStatus;
return ["0", "2", "3", "5", "6"].includes(status);
}); });
// 处理按钮点击事件 // 处理按钮点击事件