feat: 新增订单详情退款弹窗
This commit is contained in:
duanshuwen
274
pages/order/components/RefundPopup/example.vue
Normal file
274
pages/order/components/RefundPopup/example.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<view class="example-page">
|
||||
<view class="page-header">
|
||||
<text class="page-title">订单详情</text>
|
||||
</view>
|
||||
|
||||
<view class="order-info">
|
||||
<view class="order-item">
|
||||
<text class="item-name">鲜牛肉红烧牛肉面二两+例汤1份</text>
|
||||
<text class="item-price">¥128</text>
|
||||
</view>
|
||||
<view class="order-item">
|
||||
<text class="item-name">红油干拌鲜肉云吞+例汤1份</text>
|
||||
<text class="item-price">¥50</text>
|
||||
</view>
|
||||
<view class="order-total">
|
||||
<text class="total-label">总计：</text>
|
||||
<text class="total-price">¥178</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-actions">
|
||||
<button class="action-button refund-btn" @click="showRefundPopup">
|
||||
申请退款
|
||||
</button>
|
||||
<button class="action-button contact-btn" @click="contactService">
|
||||
联系客服
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 退款弹窗组件 -->
|
||||
<RefundPopup
|
||||
v-model="refundVisible"
|
||||
:refund-type="refundType"
|
||||
:refund-amount="refundAmount"
|
||||
@policy-click="viewRefundPolicy"
|
||||
@confirm-click="handleRefundConfirm"
|
||||
@close="handleRefundClose"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import RefundPopup from './index.vue'
|
||||
|
||||
// 响应式数据
|
||||
const refundVisible = ref(false)
|
||||
const refundType = ref('partial_refund')
|
||||
const refundAmount = ref(89) // 50% 退款
|
||||
|
||||
// 方法定义
|
||||
const showRefundPopup = () => {
|
||||
// 根据订单状态和时间判断退款类型
|
||||
const orderTime = new Date('2024-01-15 10:00:00')
|
||||
const currentTime = new Date()
|
||||
const hoursDiff = (currentTime - orderTime) / (1000 * 60 * 60)
|
||||
|
||||
if (hoursDiff < 12) {
|
||||
refundType.value = 'no_refund'
|
||||
refundAmount.value = 0
|
||||
} else if (hoursDiff < 24) {
|
||||
refundType.value = 'partial_refund'
|
||||
refundAmount.value = 89 // 50% 退款
|
||||
} else if (hoursDiff < 48) {
|
||||
refundType.value = 'free_cancel'
|
||||
refundAmount.value = 178 // 全额退款
|
||||
} else {
|
||||
refundType.value = 'anytime_refund'
|
||||
refundAmount.value = 178
|
||||
}
|
||||
|
||||
refundVisible.value = true
|
||||
}
|
||||
|
||||
const viewRefundPolicy = () => {
|
||||
// 跳转到退款政策页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/policy/refund'
|
||||
})
|
||||
}
|
||||
|
||||
const handleRefundConfirm = () => {
|
||||
if (refundType.value === 'no_refund') {
|
||||
uni.showToast({
|
||||
title: '已了解退款政策',
|
||||
icon: 'success'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 提交退款申请
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
})
|
||||
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '退款申请已提交',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 可以跳转到退款状态页面
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/refund/status'
|
||||
// })
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const handleRefundClose = () => {
|
||||
console.log('退款弹窗已关闭')
|
||||
}
|
||||
|
||||
const contactService = () => {
|
||||
uni.showActionSheet({
|
||||
itemList: ['在线客服', '电话客服', '意见反馈'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
// 打开在线客服
|
||||
uni.navigateTo({
|
||||
url: '/pages/service/chat'
|
||||
})
|
||||
break
|
||||
case 1:
|
||||
// 拨打客服电话
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '400-123-4567'
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
// 打开意见反馈
|
||||
uni.navigateTo({
|
||||
url: '/pages/feedback/index'
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example-page {
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 16px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.order-total {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
margin-top: 12px;
|
||||
border-top: 2px solid #f0f0f0;
|
||||
|
||||
.total-label {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 20px;
|
||||
color: #ff6b35;
|
||||
font-weight: 700;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.action-button {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.refund-btn {
|
||||
background: #ff6b35;
|
||||
color: #ffffff;
|
||||
|
||||
&:active {
|
||||
background: #e55a2b;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
&.contact-btn {
|
||||
background: #007aff;
|
||||
color: #ffffff;
|
||||
|
||||
&:active {
|
||||
background: #0056cc;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 375px) {
|
||||
.example-page {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
gap: 12px;
|
||||
|
||||
.action-button {
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user