diff --git a/src/pages-order/order/components/OrderInfo/index.vue b/src/pages-order/order/components/OrderInfo/index.vue
index 9c82ead..4c3d046 100644
--- a/src/pages-order/order/components/OrderInfo/index.vue
+++ b/src/pages-order/order/components/OrderInfo/index.vue
@@ -39,12 +39,7 @@
\ No newline at end of file
+
diff --git a/src/pages-order/order/components/RefundPopup/styles/index.scss b/src/pages-order/order/components/RefundPopup/styles/index.scss
index dac80d3..c7a3939 100644
--- a/src/pages-order/order/components/RefundPopup/styles/index.scss
+++ b/src/pages-order/order/components/RefundPopup/styles/index.scss
@@ -1,168 +1,164 @@
// RefundPopup 退款弹窗样式
.refund-popup {
- width: 320px;
- background: linear-gradient(173deg, #cbf6ff 3%, #ffffff 32%);
- border-radius: 12px;
- box-sizing: border-box;
- padding-top: 64px;
- position: relative;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ width: 320px;
+ background: linear-gradient(173deg, #cbf6ff 3%, #ffffff 32%);
+ border-radius: 12px;
+ box-sizing: border-box;
+ padding-top: 64px;
+ position: relative;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
- // 头部区域
- &__avatar {
- width: 132px;
- height: 132px;
- position: absolute;
- top: -45px;
- left: 50%;
- transform: translateX(-50%);
+ // 头部区域
+ &__avatar {
+ width: 132px;
+ height: 132px;
+ position: absolute;
+ top: -75px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ // 内容区域
+ &__content {
+ padding: 12px 20px 20px;
+ text-align: center;
+ }
+
+ &__title {
+ font-size: 16px;
+ font-weight: 500;
+ color: #333;
+ line-height: 22px;
+ margin-bottom: 12px;
+ text-align: center;
+ }
+
+ &__amount {
+ display: flex;
+ justify-content: center;
+ align-items: baseline;
+ margin-bottom: 4px;
+
+ .amount-symbol {
+ font-size: 12px;
+ color: #ff6a00;
}
- // 内容区域
- &__content {
- padding: 12px 20px 20px;
- text-align: center;
+ .amount-value {
+ font-size: 24px;
+ color: #ff6a00;
+ margin: 0 2px;
}
- &__title {
- font-size: 16px;
- font-weight: 500;
- color: #333;
- line-height: 22px;
- margin-bottom: 12px;
- text-align: center;
+ .amount-unit {
+ font-size: 12px;
+ color: #ff6a00;
+ }
+ }
+
+ &__amount-label {
+ font-size: 12px;
+ color: #333;
+ margin-bottom: 16px;
+ }
+
+ &__policy {
+ text-align: left;
+ margin-bottom: 16px;
+
+ .policy-title {
+ font-size: 14px;
+ color: #007aff;
+ font-weight: 600;
+ margin-bottom: 8px;
}
- &__amount {
- display: flex;
- justify-content: center;
- align-items: baseline;
- margin-bottom: 4px;
+ .policy-content {
+ font-size: 12px;
+ color: #333333;
+ line-height: 22px;
+ text-align: justify;
+ }
+ }
- .amount-symbol {
- font-size: 12px;
- color: #ff6a00;
+ // 按钮区域
+ &__actions {
+ display: flex;
+ gap: 12px;
+ padding: 0 20px 20px;
+
+ .action-btn {
+ flex: 1;
+ height: 44px;
+ border-radius: 22px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ transition: all 0.3s ease;
+ outline: none;
+
+ &.secondary-btn {
+ background: #007aff;
+ color: #ffffff;
+
+ &:active {
+ background: #0056cc;
+ transform: scale(0.98);
}
+ }
- .amount-value {
- font-size: 24px;
- color: #ff6a00;
- margin: 0 2px;
- }
-
- .amount-unit {
- font-size: 12px;
- color: #ff6a00;
+ &.primary-btn {
+ background: #ff9500;
+ color: #ffffff;
+
+ &:active {
+ background: #e6850e;
+ transform: scale(0.98);
}
+ }
}
+ }
- &__amount-label {
- font-size: 12px;
- color: #333;
- margin-bottom: 16px;
- }
-
- &__description {
- font-size: 14px;
- color: #333333;
- line-height: 1.5;
- margin-bottom: 16px;
- text-align: left;
- }
-
- &__policy {
- text-align: left;
- margin-bottom: 16px;
-
- .policy-title {
- font-size: 14px;
- color: #007aff;
- font-weight: 600;
- margin-bottom: 8px;
- }
-
- .policy-list {
- .policy-item {
- font-size: 12px;
- color: #333333;
- line-height: 22px;
- text-align: justify;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
-
- // 按钮区域
- &__actions {
- display: flex;
- gap: 12px;
- padding: 0 20px 20px;
-
- .action-btn {
- flex: 1;
- height: 44px;
- border-radius: 22px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- transition: all 0.3s ease;
- outline: none;
-
- &.secondary-btn {
- background: #007aff;
- color: #ffffff;
-
- &:active {
- background: #0056cc;
- transform: scale(0.98);
- }
- }
-
- &.primary-btn {
- background: #ff9500;
- color: #ffffff;
-
- &:active {
- background: #e6850e;
- transform: scale(0.98);
- }
- }
- }
- }
+ // 关闭按钮
+ &__close {
+ position: absolute;
+ bottom: -60px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 40px;
+ height: 40px;
+ }
}
// 动画效果
@keyframes popupFadeIn {
- from {
- opacity: 0;
- transform: scale(0.8);
- }
- to {
- opacity: 1;
- transform: scale(1);
- }
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
}
@keyframes flowerBounce {
- 0%,
- 20%,
- 50%,
- 80%,
- 100% {
- transform: translateY(0);
- }
- 40% {
- transform: translateY(-4px);
- }
- 60% {
- transform: translateY(-2px);
- }
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ transform: translateY(0);
+ }
+ 40% {
+ transform: translateY(-4px);
+ }
+ 60% {
+ transform: translateY(-2px);
+ }
}
.refund-popup {
- animation: popupFadeIn 0.3s ease-out;
+ animation: popupFadeIn 0.3s ease-out;
}
diff --git a/src/pages-order/order/detail.vue b/src/pages-order/order/detail.vue
index 9bda787..4b118b9 100644
--- a/src/pages-order/order/detail.vue
+++ b/src/pages-order/order/detail.vue
@@ -17,10 +17,8 @@
@@ -38,15 +36,12 @@ import OrderInfo from "./components/OrderInfo/index.vue";
import RefundPopup from "./components/RefundPopup/index.vue";
const refundVisible = ref(false);
-const refundType = ref("free_cancel"); // 默认退款类型
-const refundAmount = ref(0); // 退款金额
const orderData = ref({});
+
onLoad(async ({ orderId }) => {
const res = await userOrderDetail({ orderId });
orderData.value = res.data;
- // 设置退款金额为订单支付金额
- refundAmount.value = parseFloat(res.data.payAmt || 0);
console.log(res);
});
@@ -62,17 +57,11 @@ const showRefundPopup = () => {
refundVisible.value = true;
};
-// 查看退款政策
-const viewRefundPolicy = () => {
- console.log("查看退款政策");
- // 这里可以跳转到退款政策页面或显示详细政策
-};
-
// 确认退款
-const handleRefundConfirm = async () => {
+const handleRefundConfirm = async ({ orderId }) => {
try {
// 调用退款API
- await orderRefund({ orderId: orderData.value.orderId });
+ await orderRefund({ orderId });
uni.showToast({
title: "退款申请已提交",
@@ -80,10 +69,8 @@ const handleRefundConfirm = async () => {
});
// 刷新订单状态
- const res = await userOrderDetail({ orderId: orderData.value.orderId });
+ const res = await userOrderDetail({ orderId });
orderData.value = res.data;
- // 更新退款金额
- refundAmount.value = parseFloat(res.data.payAmt || 0);
} catch (error) {
console.error("退款失败:", error);
uni.showToast({
diff --git a/src/pages/goods/components/GoodConfirm/styles/index.scss b/src/pages/goods/components/GoodConfirm/styles/index.scss
index 9146130..8a76994 100644
--- a/src/pages/goods/components/GoodConfirm/styles/index.scss
+++ b/src/pages/goods/components/GoodConfirm/styles/index.scss
@@ -41,9 +41,7 @@
.wrapper {
box-sizing: border-box;
- padding-left: 12px;
- padding-right: 12px;
- padding-top: 12px;
+ padding: 12px;
}
.good-info-wrapper {
@@ -160,7 +158,7 @@
box-sizing: border-box;
padding-left: 12px;
padding-right: 12px;
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-bottom: 24px;
.left {
display: flex;