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

Write Preview
Loading…
Cancel
Save