lufaneng
/
lift-drawing-wechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
main
Lufaneng 11 months ago
parent 198738cff2
commit 158713e3b8
1 changed files with 83 additions and 97 deletions
Show Stats Download Patch File Download Diff File

180
pages/order/order.vue
Unescape View File

@ -2,60 +2,33 @@
<view class="container"> <view class="container">
<!-- 顶部筛选标签 --> <!-- 顶部筛选标签 -->
<view class="filter-tabs"> <view class="filter-tabs">
<view <view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
class="tab-item"
:class="{ active: activeTab === 'all' }"
@click="switchTab('all')"
>
全部 全部
</view> </view>
<view <view class="tab-item" :class="{ active: activeTab === 'recharge' }" @click="switchTab('recharge')">
class="tab-item"
:class="{ active: activeTab === 'recharge' }"
@click="switchTab('recharge')"
>
充值 充值
</view> </view>
<view <view class="tab-item" :class="{ active: activeTab === 'monthly' }" @click="switchTab('monthly')">
class="tab-item"
:class="{ active: activeTab === 'monthly' }"
@click="switchTab('monthly')"
>
包月 包月
</view> </view>
<view <view class="tab-item" :class="{ active: activeTab === 'season' }" @click="switchTab('season')">
class="tab-item"
:class="{ active: activeTab === 'season' }"
@click="switchTab('season')"
>
包季 包季
</view> </view>
<view <view class="tab-item" :class="{ active: activeTab === 'yearly' }" @click="switchTab('yearly')">
class="tab-item"
:class="{ active: activeTab === 'yearly' }"
@click="switchTab('yearly')"
>
包年 包年
</view> </view>
</view> </view>
<!-- 订单列表 --> <!-- 订单列表 -->
<view class="order-list"> <view class="order-list">
<view <view class="order-item" v-for="order in filteredOrders" :key="order.id">
class="order-item"
v-for="order in filteredOrders"
:key="order.id"
>
<!-- 订单头部 --> <!-- 订单头部 -->
<view class="order-header"> <view class="order-header">
<view class="order-info"> <view class="order-info">
<text class="order-number">订单编号: {{ order.orderNumber }}</text> <text class="order-number">订单编号: {{ order.orderNumber }}</text>
<view class="order-type-tag">{{ order.typeLabel }}</view> <view class="order-type-tag">复制</view>
</view> </view>
<view <view class="order-status" :class="order.status">
class="order-status"
:class="order.status"
>
{{ order.statusText }} {{ order.statusText }}
</view> </view>
</view> </view>
@ -94,52 +67,53 @@
<!-- 订单操作 --> <!-- 订单操作 -->
<view class="order-actions"> <view class="order-actions">
<u-button <div>
v-if="order.status === 'pending'" <div class="countdown-text" v-if="order.status === 'pending'">支付剩余时间: {{ order.countdown }}
type="default" </div>
size="small" </div>
@click="cancelOrder(order)" <div class="buttonBox">
> <template v-if="order.status === 'pending'">
取消订单 <uv-button type="default" size="small" @click="cancelOrder(order)">
</u-button> 取消订单
<u-button </uv-button>
type="default" <uv-button type="error" size="small" @click="payOrder(order)">
size="small" 去支付
@click="deleteOrder(order)" </uv-button>
> </template>
删除订单 <template v-else>
</u-button>
<u-button <uv-button type="default" size="small" @click="deleteOrder(order)">
type="primary" 删除订单
size="small" </uv-button>
@click="viewOrderDetail(order)" <uv-button type="primary" size="small" @click="viewOrderDetail(order)">
> 查看详情
查看详情 </uv-button>
</u-button> </template>
</div>
</view> </view>
<!-- 待支付订单底部 --> <!-- 待支付订单底部 -->
<view v-if="order.status === 'pending'" class="pending-footer"> <!-- <view v-if="order.status === 'pending'" class="pending-footer">
<view class="countdown"> <view class="countdown">
<text class="countdown-text">支付剩余时间: {{ order.countdown }}</text> <text class="countdown-text">支付剩余时间: {{ order.countdown }}</text>
</view> </view>
<view class="pending-actions"> <view class="pending-actions">
<u-button <uv-button
type="default" type="default"
size="large" size="large"
@click="cancelOrder(order)" @click="cancelOrder(order)"
> >
取消订单 取消订单
</u-button> </uv-button>
<u-button <uv-button
type="error" type="error"
size="large" size="large"
@click="payOrder(order)" @click="payOrder(order)"
> >
去支付 去支付
</u-button> </uv-button>
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
@ -175,8 +149,7 @@
// 响应式数据 // 响应式数据
const activeTab = ref('all') const activeTab = ref('all')
const orders = ref([ const orders = ref([{
{
id: 1, id: 1,
orderNumber: 'ORD20230515001', orderNumber: 'ORD20230515001',
typeLabel: '续费', typeLabel: '续费',
@ -254,14 +227,14 @@
try { try {
// 调用取消订单API // 调用取消订单API
// await RPC.post('/api/order/cancel', { orderId: order.id }) // await RPC.post('/api/order/cancel', { orderId: order.id })
// 更新订单状态 // 更新订单状态
const index = orders.value.findIndex(item => item.id === order.id) const index = orders.value.findIndex(item => item.id === order.id)
if (index !== -1) { if (index !== -1) {
orders.value[index].status = 'cancelled' orders.value[index].status = 'cancelled'
orders.value[index].statusText = '已取消' orders.value[index].statusText = '已取消'
} }
uni.showToast({ uni.showToast({
title: '订单已取消', title: '订单已取消',
icon: 'success' icon: 'success'
@ -288,13 +261,13 @@
try { try {
// 调用删除订单API // 调用删除订单API
// await RPC.post('/api/order/delete', { orderId: order.id }) // await RPC.post('/api/order/delete', { orderId: order.id })
// 从列表中移除订单 // 从列表中移除订单
const index = orders.value.findIndex(item => item.id === order.id) const index = orders.value.findIndex(item => item.id === order.id)
if (index !== -1) { if (index !== -1) {
orders.value.splice(index, 1) orders.value.splice(index, 1)
} }
uni.showToast({ uni.showToast({
title: '订单已删除', title: '订单已删除',
icon: 'success' icon: 'success'
@ -355,7 +328,7 @@
background: white; background: white;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
.tab-item { .tab-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
@ -363,11 +336,11 @@
color: #666; color: #666;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
&.active { &.active {
color: #4285f4; color: #4285f4;
font-weight: 500; font-weight: 500;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -385,29 +358,29 @@
.order-list { .order-list {
padding: 16px; padding: 16px;
.order-item { .order-item {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
margin-bottom: 16px; margin-bottom: 16px;
overflow: hidden; overflow: hidden;
.order-header { .order-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 16px 0; padding: 16px 16px 0;
.order-info { .order-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
.order-number { .order-number {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
} }
.order-type-tag { .order-type-tag {
background: #f0f0f0; background: #f0f0f0;
color: #666; color: #666;
@ -416,60 +389,60 @@
font-size: 12px; font-size: 12px;
} }
} }
.order-status { .order-status {
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
&.paid { &.paid {
background: #e8f5e8; background: #e8f5e8;
color: #52c41a; color: #52c41a;
} }
&.pending { &.pending {
background: #fff7e6; background: #fff7e6;
color: #fa8c16; color: #fa8c16;
} }
&.cancelled { &.cancelled {
background: #fff1f0; background: #fff1f0;
color: #ff4d4f; color: #ff4d4f;
} }
} }
} }
.order-details { .order-details {
padding: 16px; padding: 16px;
.detail-row { .detail-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.label { .label {
color: #666; color: #666;
font-size: 14px; font-size: 14px;
} }
.value { .value {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
&.price { &.price {
color: #333; color: #333;
font-weight: 500; font-weight: 500;
} }
&.discount { &.discount {
color: #ff4d4f; color: #ff4d4f;
} }
&.final-price { &.final-price {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
@ -477,33 +450,46 @@
} }
} }
} }
.order-actions { .order-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
align-items: center;
gap: 8px; gap: 8px;
padding: 0 16px 16px; padding: 0 16px 16px;
border-top: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;
padding-top: 16px; padding-top: 16px;
.countdown-text {
color: #ff4d4f;
font-size: 12px;
}
.buttonBox {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
} }
.pending-footer { .pending-footer {
border-top: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;
padding: 16px; padding: 16px;
.countdown { .countdown {
margin-bottom: 12px; margin-bottom: 12px;
.countdown-text { .countdown-text {
color: #ff4d4f; color: #ff4d4f;
font-size: 12px; font-size: 12px;
} }
} }
.pending-actions { .pending-actions {
display: flex; display: flex;
gap: 12px; gap: 12px;
.u-button { .u-button {
flex: 1; flex: 1;
} }
@ -518,7 +504,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 80px 20px; padding: 80px 20px;
.empty-text { .empty-text {
color: #999; color: #999;
font-size: 14px; font-size: 14px;

Write Preview
Loading…
Cancel
Save