504 lines
12 KiB
Vue
504 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="order-list-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" @click="refreshData">
|
|||
|
|
<uni-icons type="refresh" size="20" color="#64748B"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 筛选标签 -->
|
|||
|
|
<view class="filter-bar">
|
|||
|
|
<view
|
|||
|
|
v-for="tab in tabs"
|
|||
|
|
:key="tab.value"
|
|||
|
|
class="filter-item"
|
|||
|
|
:class="{ active: activeTab === tab.value }"
|
|||
|
|
@click="switchTab(tab.value)"
|
|||
|
|
>
|
|||
|
|
<text>{{tab.label}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
class="page-content"
|
|||
|
|
@scrolltolower="loadMore"
|
|||
|
|
refresher-enabled
|
|||
|
|
:refresher-triggered="refreshing"
|
|||
|
|
@refresherrefresh="onRefresh"
|
|||
|
|
>
|
|||
|
|
<!-- 订单列表 -->
|
|||
|
|
<view class="order-list" v-if="filteredOrders.length > 0">
|
|||
|
|
<view
|
|||
|
|
v-for="(order, index) in filteredOrders"
|
|||
|
|
:key="order.id"
|
|||
|
|
class="order-card"
|
|||
|
|
@click="viewOrderDetail(order)"
|
|||
|
|
>
|
|||
|
|
<view class="order-header">
|
|||
|
|
<view class="order-info">
|
|||
|
|
<text class="order-no">订单号：{{order.orderNo}}</text>
|
|||
|
|
<text class="order-time">{{formatDateTime(order.createTime)}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-status" :class="order.status">
|
|||
|
|
{{getStatusText(order.status)}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="order-body">
|
|||
|
|
<view class="plan-info">
|
|||
|
|
<text class="plan-name">{{order.planName || order.subscriptionPlan?.name || '-'}}</text>
|
|||
|
|
<text class="plan-duration">{{order.months}} 个月</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-info">
|
|||
|
|
<view v-if="order.amount !== order.actualAmount" class="original-price">
|
|||
|
|
¥{{order.amount}}
|
|||
|
|
</view>
|
|||
|
|
<view class="actual-price">¥{{order.actualAmount}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="order-footer" v-if="order.status === 'pending'">
|
|||
|
|
<button class="action-btn cancel" @click.stop="cancelOrder(order)">取消订单</button>
|
|||
|
|
<button class="action-btn pay" @click.stop="payOrder(order)">去支付</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载更多 -->
|
|||
|
|
<view class="load-more" v-if="hasMore">
|
|||
|
|
<text v-if="loading">加载中...</text>
|
|||
|
|
<text v-else @click="loadMore">加载更多</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<view class="empty-state" v-else>
|
|||
|
|
<uni-icons type="wallet-filled" size="80" color="#E4E7ED"></uni-icons>
|
|||
|
|
<text class="empty-title">暂无订单</text>
|
|||
|
|
<text class="empty-desc">您还没有创建任何订单</text>
|
|||
|
|
<button class="empty-action" @click="goToPlanSelect">去购买套餐</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="safe-area-bottom" style="height: 40rpx;"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { billingApi } from '@/api/index.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
tabs: [
|
|||
|
|
{ label: '全部', value: 'all' },
|
|||
|
|
{ label: '待支付', value: 'pending' },
|
|||
|
|
{ label: '已支付', value: 'paid' },
|
|||
|
|
{ label: '已取消', value: 'cancelled' }
|
|||
|
|
],
|
|||
|
|
activeTab: 'all',
|
|||
|
|
orders: [],
|
|||
|
|
page: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
hasMore: true,
|
|||
|
|
loading: false,
|
|||
|
|
refreshing: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
filteredOrders() {
|
|||
|
|
if (this.activeTab === 'all') {
|
|||
|
|
return this.orders
|
|||
|
|
}
|
|||
|
|
return this.orders.filter(order => order.status === this.activeTab)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.loadOrders()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.refreshData()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async loadOrders() {
|
|||
|
|
if (this.loading || !this.hasMore) return
|
|||
|
|
this.loading = true
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await billingApi.getOrders({
|
|||
|
|
page: this.page,
|
|||
|
|
pageSize: this.pageSize
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const newOrders = res.data.list || []
|
|||
|
|
if (this.page === 1) {
|
|||
|
|
this.orders = newOrders
|
|||
|
|
} else {
|
|||
|
|
this.orders = [...this.orders, ...newOrders]
|
|||
|
|
}
|
|||
|
|
this.hasMore = newOrders.length >= this.pageSize
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载订单失败:', error)
|
|||
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
this.refreshing = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
switchTab(value) {
|
|||
|
|
this.activeTab = value
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onRefresh() {
|
|||
|
|
this.refreshing = true
|
|||
|
|
this.page = 1
|
|||
|
|
this.hasMore = true
|
|||
|
|
this.loadOrders()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
refreshData() {
|
|||
|
|
this.page = 1
|
|||
|
|
this.hasMore = true
|
|||
|
|
this.loadOrders()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
loadMore() {
|
|||
|
|
if (this.hasMore && !this.loading) {
|
|||
|
|
this.page++
|
|||
|
|
this.loadOrders()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getStatusText(status) {
|
|||
|
|
const map = {
|
|||
|
|
pending: '待支付',
|
|||
|
|
paid: '已支付',
|
|||
|
|
cancelled: '已取消'
|
|||
|
|
}
|
|||
|
|
return map[status] || status
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
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')}`
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
viewOrderDetail(order) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/billing/order-detail?id=${order.id}`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async cancelOrder(order) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要取消该订单吗？',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
try {
|
|||
|
|
const result = await billingApi.cancelOrder(order.id)
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
uni.showToast({ title: '已取消', icon: 'success' })
|
|||
|
|
this.refreshData()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: result.message || '取消失败', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('取消订单失败:', error)
|
|||
|
|
uni.showToast({ title: '取消失败', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async payOrder(order) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '支付确认',
|
|||
|
|
content: `确认支付订单 #${order.orderNo}，金额 ¥${order.actualAmount}？`,
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.showLoading({ title: '支付中...' })
|
|||
|
|
try {
|
|||
|
|
const result = await billingApi.payOrder(order.id)
|
|||
|
|
uni.hideLoading()
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
this.refreshData()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: result.message || '支付失败', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.error('支付失败:', error)
|
|||
|
|
uni.showToast({ title: '支付失败', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goToPlanSelect() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/billing/plan-select'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.order-list-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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 筛选栏 */
|
|||
|
|
.filter-bar {
|
|||
|
|
display: flex;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
border-bottom: 2rpx solid #F1F5F9;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-item {
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
background: #F8FAFC;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-item.active {
|
|||
|
|
background: #667eea;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 页面内容 */
|
|||
|
|
.page-content {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 订单列表 */
|
|||
|
|
.order-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-card {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
border-bottom: 2rpx solid #F1F5F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-no {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-time {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #94A3B8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-status {
|
|||
|
|
padding: 8rpx 20rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-status.pending {
|
|||
|
|
background: #FEF3C7;
|
|||
|
|
color: #D97706;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-status.paid {
|
|||
|
|
background: #D1FAE5;
|
|||
|
|
color: #059669;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-status.cancelled {
|
|||
|
|
background: #F3F4F6;
|
|||
|
|
color: #6B7280;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-body {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-name {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-duration {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-info {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.original-price {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #94A3B8;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actual-price {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
border-top: 2rpx solid #F1F5F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn.cancel {
|
|||
|
|
background: #F3F4F6;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn.pay {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载更多 */
|
|||
|
|
.load-more {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 空状态 */
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 120rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1E293B;
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-desc {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
margin-bottom: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-action {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 28rpx 64rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
</style>
|