569 lines
15 KiB
Vue
569 lines
15 KiB
Vue
<template>
|
||
<view class="order-detail-page">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="custom-nav safe-area-top">
|
||
<view class="nav-content">
|
||
<view class="nav-btn" @click="goBack">
|
||
<uni-icons type="left" size="22" color="#1E293B"></uni-icons>
|
||
</view>
|
||
<text class="nav-title">订单详情</text>
|
||
<view class="nav-btn"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="page-content" v-if="order">
|
||
<!-- 订单状态 -->
|
||
<view class="status-section" :class="order.status">
|
||
<view class="status-icon">
|
||
<uni-icons :type="statusIcon" size="48" color="#FFFFFF"></uni-icons>
|
||
</view>
|
||
<text class="status-text">{{statusText}}</text>
|
||
<text class="status-desc">{{statusDesc}}</text>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="section-card">
|
||
<view class="section-title">订单信息</view>
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="info-label">订单编号</text>
|
||
<text class="info-value">{{order.orderNo}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">创建时间</text>
|
||
<text class="info-value">{{formatDateTime(order.createTime)}}</text>
|
||
</view>
|
||
<view class="info-item" v-if="order.payTime">
|
||
<text class="info-label">支付时间</text>
|
||
<text class="info-value">{{formatDateTime(order.payTime)}}</text>
|
||
</view>
|
||
<view class="info-item" v-if="order.cancelTime">
|
||
<text class="info-label">取消时间</text>
|
||
<text class="info-value">{{formatDateTime(order.cancelTime)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 套餐信息 -->
|
||
<view class="section-card" v-if="order.subscriptionPlan">
|
||
<view class="section-title">套餐信息</view>
|
||
<view class="plan-card">
|
||
<text class="plan-name">{{order.subscriptionPlan.name}}</text>
|
||
<text class="plan-desc">{{order.subscriptionPlan.description}}</text>
|
||
<view class="plan-resources">
|
||
<view class="resource-item">
|
||
<uni-icons type="home-filled" size="16" color="#667eea"></uni-icons>
|
||
<text>{{order.subscriptionPlan.maxApartments}} 栋公寓</text>
|
||
</view>
|
||
<view class="resource-item">
|
||
<uni-icons type="shop-filled" size="16" color="#667eea"></uni-icons>
|
||
<text>{{order.subscriptionPlan.maxRooms}} 个房间</text>
|
||
</view>
|
||
<view class="resource-item">
|
||
<uni-icons type="person-filled" size="16" color="#667eea"></uni-icons>
|
||
<text>{{order.subscriptionPlan.maxUsers}} 个用户</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 费用明细 -->
|
||
<view class="section-card">
|
||
<view class="section-title">费用明细</view>
|
||
<view class="price-list">
|
||
<view class="price-row">
|
||
<text class="row-label">套餐单价</text>
|
||
<text class="row-value">¥{{order.unitPrice || order.subscriptionPlan?.monthlyPrice || 0}}/月</text>
|
||
</view>
|
||
<view class="price-row">
|
||
<text class="row-label">购买时长</text>
|
||
<text class="row-value">{{order.months}} 个月</text>
|
||
</view>
|
||
<view class="price-row">
|
||
<text class="row-label">基础费用</text>
|
||
<text class="row-value">¥{{order.amount}}</text>
|
||
</view>
|
||
<view class="price-row" v-if="order.discountAmount > 0">
|
||
<text class="row-label">优惠金额</text>
|
||
<text class="row-value discount">-¥{{order.discountAmount}}</text>
|
||
</view>
|
||
<view class="price-row total">
|
||
<text class="row-label">实付金额</text>
|
||
<text class="row-value total-price">¥{{order.actualAmount}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付信息 -->
|
||
<view class="section-card" v-if="order.status === 'paid'">
|
||
<view class="section-title">支付信息</view>
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="info-label">支付方式</text>
|
||
<text class="info-value">{{getPaymentMethodText(order.paymentMethod)}}</text>
|
||
</view>
|
||
<view class="info-item" v-if="order.transactionId">
|
||
<text class="info-label">交易号</text>
|
||
<text class="info-value">{{order.transactionId}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 有效期 -->
|
||
<view class="section-card" v-if="order.status === 'paid' && order.startDate">
|
||
<view class="section-title">有效期</view>
|
||
<view class="validity-info">
|
||
<view class="validity-item">
|
||
<text class="validity-label">开始时间</text>
|
||
<text class="validity-value">{{formatDate(order.startDate)}}</text>
|
||
</view>
|
||
<view class="validity-arrow">
|
||
<uni-icons type="right" size="20" color="#94A3B8"></uni-icons>
|
||
</view>
|
||
<view class="validity-item">
|
||
<text class="validity-label">结束时间</text>
|
||
<text class="validity-value">{{formatDate(order.endDate)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="safe-area-bottom" style="height: 140rpx;"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="bottom-bar safe-area-bottom" v-if="order && order.status === 'pending'">
|
||
<button class="action-btn cancel" @click="cancelOrder">取消订单</button>
|
||
<button class="action-btn pay" @click="payOrder">立即支付</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { billingApi } from '@/api/index.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderId: null,
|
||
order: null
|
||
}
|
||
},
|
||
computed: {
|
||
statusIcon() {
|
||
const map = {
|
||
pending: 'info-filled',
|
||
paid: 'checkmarkempty',
|
||
cancelled: 'closeempty'
|
||
}
|
||
return map[this.order?.status] || 'info-filled'
|
||
},
|
||
statusText() {
|
||
const map = {
|
||
pending: '待支付',
|
||
paid: '已支付',
|
||
cancelled: '已取消'
|
||
}
|
||
return map[this.order?.status] || '未知状态'
|
||
},
|
||
statusDesc() {
|
||
const map = {
|
||
pending: '请在24小时内完成支付，否则订单将自动取消',
|
||
paid: '订单已支付成功，套餐已生效',
|
||
cancelled: '订单已取消，如有疑问请联系客服'
|
||
}
|
||
return map[this.order?.status] || ''
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.orderId = options.id
|
||
if (this.orderId) {
|
||
this.loadOrderDetail()
|
||
}
|
||
},
|
||
methods: {
|
||
async loadOrderDetail() {
|
||
try {
|
||
uni.showLoading({ title: '加载中...' })
|
||
const res = await billingApi.getOrderDetail(this.orderId)
|
||
uni.hideLoading()
|
||
|
||
if (res.code === 200) {
|
||
this.order = res.data
|
||
} else {
|
||
uni.showToast({ title: res.message || '加载失败', icon: 'none' })
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
console.error('加载订单详情失败:', error)
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
getPaymentMethodText(method) {
|
||
const map = {
|
||
alipay: '支付宝',
|
||
wechat: '微信支付',
|
||
bank: '银行转账'
|
||
}
|
||
return map[method] || method || '-'
|
||
},
|
||
|
||
formatDateTime(dateTime) {
|
||
if (!dateTime) return '-'
|
||
const date = new Date(dateTime)
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||
},
|
||
|
||
formatDate(date) {
|
||
if (!date) return '-'
|
||
return new Date(date).toLocaleDateString('zh-CN')
|
||
},
|
||
|
||
cancelOrder() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要取消该订单吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
uni.showLoading({ title: '取消中...' })
|
||
const result = await billingApi.cancelOrder(this.orderId)
|
||
uni.hideLoading()
|
||
|
||
if (result.code === 200) {
|
||
uni.showToast({ title: '已取消', icon: 'success' })
|
||
this.loadOrderDetail()
|
||
} else {
|
||
uni.showToast({ title: result.message || '取消失败', icon: 'none' })
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
console.error('取消订单失败:', error)
|
||
uni.showToast({ title: '取消失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
payOrder() {
|
||
uni.showModal({
|
||
title: '支付确认',
|
||
content: `确认支付订单 #${this.order.orderNo}，金额 ¥${this.order.actualAmount}？`,
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
uni.showLoading({ title: '支付中...' })
|
||
const result = await billingApi.payOrder(this.orderId)
|
||
uni.hideLoading()
|
||
|
||
if (result.code === 200) {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
this.loadOrderDetail()
|
||
} else {
|
||
uni.showToast({ title: result.message || '支付失败', icon: 'none' })
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
console.error('支付失败:', error)
|
||
uni.showToast({ title: '支付失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
goBack() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.order-detail-page {
|
||
min-height: 100vh;
|
||
background: #F8FAFC;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 导航栏 */
|
||
.custom-nav {
|
||
background: #FFFFFF;
|
||
border-bottom: 2rpx solid #F1F5F9;
|
||
}
|
||
|
||
.nav-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 32rpx;
|
||
}
|
||
|
||
.nav-btn {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #1E293B;
|
||
}
|
||
|
||
/* 页面内容 */
|
||
.page-content {
|
||
flex: 1;
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
|
||
/* 状态区域 */
|
||
.status-section {
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding: 48rpx;
|
||
margin-bottom: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.status-section.pending {
|
||
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
|
||
}
|
||
|
||
.status-section.paid {
|
||
background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
|
||
}
|
||
|
||
.status-section.cancelled {
|
||
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
|
||
}
|
||
|
||
.status-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.status-section.pending .status-icon {
|
||
background: #F59E0B;
|
||
}
|
||
|
||
.status-section.paid .status-icon {
|
||
background: #10B981;
|
||
}
|
||
|
||
.status-section.cancelled .status-icon {
|
||
background: #9CA3AF;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #1E293B;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.status-desc {
|
||
font-size: 26rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
/* 区块卡片 */
|
||
.section-card {
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #1E293B;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
/* 信息列表 */
|
||
.info-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 28rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
color: #1E293B;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 套餐卡片 */
|
||
.plan-card {
|
||
background: #F8FAFC;
|
||
border-radius: 16rpx;
|
||
padding: 28rpx;
|
||
}
|
||
|
||
.plan-name {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1E293B;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.plan-desc {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #64748B;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.plan-resources {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.resource-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
font-size: 26rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
/* 费用明细 */
|
||
.price-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.price-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.price-row.total {
|
||
margin-top: 20rpx;
|
||
padding-top: 20rpx;
|
||
border-top: 2rpx solid #F1F5F9;
|
||
}
|
||
|
||
.row-label {
|
||
font-size: 28rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.row-value {
|
||
font-size: 28rpx;
|
||
color: #1E293B;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.row-value.discount {
|
||
color: #67C23A;
|
||
}
|
||
|
||
.row-value.total-price {
|
||
font-size: 40rpx;
|
||
color: #F56C6C;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* 有效期 */
|
||
.validity-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.validity-item {
|
||
flex: 1;
|
||
background: #F8FAFC;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.validity-label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.validity-value {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #1E293B;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.validity-arrow {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
.bottom-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #FFFFFF;
|
||
border-top: 2rpx solid #F1F5F9;
|
||
padding: 24rpx 32rpx;
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
padding: 28rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
border: none;
|
||
}
|
||
|
||
.action-btn.cancel {
|
||
background: #F3F4F6;
|
||
color: #64748B;
|
||
}
|
||
|
||
.action-btn.pay {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #FFFFFF;
|
||
}
|
||
</style>
|