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;