This commit is contained in:
kk
@@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<view class="detail-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
<text class="nav-title">订单详情</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view class="detail-scroll" scroll-y>
|
||||
<view v-if="loading" class="loading-state">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="order" class="detail-body">
|
||||
<!-- 状态卡片 -->
|
||||
<view class="status-card">
|
||||
<view class="status-icon-row">
|
||||
<view class="status-dot" :class="statusDotClass"></view>
|
||||
<text class="status-main">{{ orderStatusText(order.order_status) }}</text>
|
||||
</view>
|
||||
<text class="status-sub">{{ payStatusText(order.payment_status) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="section-card">
|
||||
<view class="section-title">商品信息</view>
|
||||
<view
|
||||
class="product-item"
|
||||
v-for="(product, idx) in order.products"
|
||||
:key="idx"
|
||||
>
|
||||
<image class="product-img" :src="product.image" mode="aspectFill" />
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<view class="product-bottom">
|
||||
<text class="product-price">￥{{ getDecimal(product.unit_price) }}</text>
|
||||
<text class="product-qty">x{{ product.qty }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="section-card">
|
||||
<view class="section-title">订单信息</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单编号</text>
|
||||
<text class="info-value" @click="copyText(order.order_id)">{{ order.order_id }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">下单时间</text>
|
||||
<text class="info-value">{{ formatTime(order.createdAt) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">设备编号</text>
|
||||
<text class="info-value">{{ order.device_id }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单来源</text>
|
||||
<text class="info-value">{{ orderSourceText(order.order_source) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">商品数量</text>
|
||||
<text class="info-value">{{ order.total_qty }} 件</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 金额信息 -->
|
||||
<view class="section-card">
|
||||
<view class="section-title">金额信息</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">商品总额</text>
|
||||
<text class="info-value">￥{{ getDecimal(order.total_amount) }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="getDecimal(order.discount_amount) !== '0'">
|
||||
<text class="info-label">优惠金额</text>
|
||||
<text class="info-value discount">-￥{{ getDecimal(order.discount_amount) }}</text>
|
||||
</view>
|
||||
<view class="info-row total">
|
||||
<text class="info-label">实付金额</text>
|
||||
<text class="info-value price">￥{{ getDecimal(order.paid_amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款信息 -->
|
||||
<view class="section-card" v-if="order.has_refund && order.refund_info">
|
||||
<view class="section-title">退款信息</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">退款状态</text>
|
||||
<text class="info-value refunded">已退款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-text">订单不存在</text>
|
||||
</view>
|
||||
|
||||
<view class="bottom-spacer"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar" v-if="order">
|
||||
<view
|
||||
v-if="order.payment_status === 'PENDING'"
|
||||
class="btn-action btn-pay"
|
||||
@click="handlePay"
|
||||
>
|
||||
立即支付
|
||||
</view>
|
||||
<view
|
||||
v-else-if="order.payment_status === 'PAID' && !order.has_refund"
|
||||
class="btn-action btn-refund"
|
||||
@click="handleRefund"
|
||||
>
|
||||
申请退款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get } from '@/utils/request.js';
|
||||
import { checkLoginWithPrompt } from '@/utils/auth-guard.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
order: null,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
statusDotClass() {
|
||||
if (!this.order) return '';
|
||||
const s = this.order.order_status;
|
||||
if (s === 'COMPLETED') return 'dot-success';
|
||||
if (s === 'CANCELLED') return 'dot-grey';
|
||||
return 'dot-blue';
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderId = options.order_id || '';
|
||||
if (this.orderId) {
|
||||
this.fetchOrder();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchOrder() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await get('/user/orders', {
|
||||
page: 1,
|
||||
limit: 1,
|
||||
filter: JSON.stringify({ order_id: this.orderId })
|
||||
});
|
||||
|
||||
const ret = res.data || {};
|
||||
if (ret.code === 0 && Array.isArray(ret.data) && ret.data.length > 0) {
|
||||
this.order = ret.data[0];
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '获取订单失败', icon: 'none' });
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
getDecimal(val) {
|
||||
if (!val) return '0.00';
|
||||
if (val.$numberDecimal) return val.$numberDecimal;
|
||||
return String(val);
|
||||
},
|
||||
|
||||
formatTime(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
const pad = n => String(n).padStart(2, '0');
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
},
|
||||
|
||||
orderStatusText(status) {
|
||||
const map = { PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' };
|
||||
return map[status] || status;
|
||||
},
|
||||
payStatusText(status) {
|
||||
const map = { PENDING: '待支付', PAID: '已支付', REFUNDED: '已退款', PARTIAL_REFUND: '部分退款' };
|
||||
return map[status] || status;
|
||||
},
|
||||
orderSourceText(source) {
|
||||
const map = { SCAN: '扫码开门', APP: 'APP下单' };
|
||||
return map[source] || source;
|
||||
},
|
||||
|
||||
copyText(text) {
|
||||
uni.setClipboardData({
|
||||
data: text,
|
||||
success: () => uni.showToast({ title: '已复制', icon: 'success' })
|
||||
});
|
||||
},
|
||||
|
||||
handlePay() {
|
||||
uni.showModal({
|
||||
title: '立即支付',
|
||||
content: `确认支付￥${this.getDecimal(this.order.total_amount)}？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '支付功能开发中', icon: 'none' });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleRefund() {
|
||||
uni.showModal({
|
||||
title: '申请退款',
|
||||
content: '确认申请退款？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '退款功能开发中', icon: 'none' });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
height: 88rpx;
|
||||
background: #fff;
|
||||
padding-top: constant(safe-area-inset-top);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.back-arrow {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.nav-placeholder {
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.detail-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 状态卡片 */
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
padding: 40rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.status-icon-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.status-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dot-blue { background: #fff; }
|
||||
.dot-success { background: #52c41a; }
|
||||
.dot-grey { background: #999; }
|
||||
.status-main {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.status-sub {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
padding-left: 28rpx;
|
||||
}
|
||||
|
||||
/* 通用卡片 */
|
||||
.section-card {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 商品项 */
|
||||
.product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
.product-item + .product-item {
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
.product-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.product-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 120rpx;
|
||||
}
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.product-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.product-price {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.product-qty {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 信息行 */
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
.info-row + .info-row {
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
.info-row.total {
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
margin-top: 8rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
.info-value.discount {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
.info-value.price {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #e4393c;
|
||||
}
|
||||
.info-value.refunded {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
/* 加载/空状态 */
|
||||
.loading-state, .empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
.loading-text, .empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-bar {
|
||||
background: #fff;
|
||||
padding: 16rpx 30rpx;
|
||||
padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.btn-action {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn-pay {
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-refund {
|
||||
background: #fff;
|
||||
border: 2rpx solid #2979ff;
|
||||
color: #2979ff;
|
||||
}
|
||||
|
||||
/* 底部占位 */
|
||||
.bottom-spacer {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
+236
-143
@@ -2,24 +2,24 @@
|
||||
<view class="order-page">
|
||||
<!-- 顶部Tab切换 -->
|
||||
<view class="tab-header">
|
||||
<view
|
||||
class="tab-item"
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'all' }"
|
||||
@click="switchTab('all')"
|
||||
>
|
||||
<text class="tab-text">全部订单</text>
|
||||
<view class="tab-line" v-if="currentTab === 'all'"></view>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'paid' }"
|
||||
@click="switchTab('paid')"
|
||||
>
|
||||
<text class="tab-text">已支付</text>
|
||||
<view class="tab-line" v-if="currentTab === 'paid'"></view>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'unpaid' }"
|
||||
@click="switchTab('unpaid')"
|
||||
>
|
||||
@@ -43,34 +43,39 @@
|
||||
</view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<scroll-view class="order-scroll" scroll-y>
|
||||
<scroll-view class="order-scroll" scroll-y @scrolltolower="loadMore">
|
||||
<view class="order-list">
|
||||
<view
|
||||
class="order-card"
|
||||
v-for="(order, index) in filteredOrders"
|
||||
:key="index"
|
||||
<view
|
||||
class="order-card"
|
||||
v-for="order in filteredOrders"
|
||||
:key="order._id"
|
||||
>
|
||||
<!-- 第一行: 日期 + 状态 -->
|
||||
<view class="order-header">
|
||||
<text class="order-date">{{ order.create_time }}</text>
|
||||
<text class="order-status" :class="{ paid: order.status === 'paid', unpaid: order.status === 'unpaid' }">
|
||||
{{ order.status === 'paid' ? '已支付' : '未支付' }}
|
||||
</text>
|
||||
<text class="order-date">{{ formatTime(order.createdAt) }}</text>
|
||||
<view class="status-tags">
|
||||
<text class="order-status" :class="orderStatusClass(order.order_status)">
|
||||
{{ orderStatusText(order.order_status) }}
|
||||
</text>
|
||||
<text class="pay-status" :class="payStatusClass(order.payment_status)">
|
||||
{{ payStatusText(order.payment_status) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 商品列表（整体可点击跳转） -->
|
||||
<!-- 商品列表 -->
|
||||
<view class="product-section" @click="goToDetail(order)">
|
||||
<view class="product-list">
|
||||
<view
|
||||
class="product-item"
|
||||
v-for="(product, pIndex) in order.products"
|
||||
<view
|
||||
class="product-item"
|
||||
v-for="(product, pIndex) in order.products"
|
||||
:key="pIndex"
|
||||
>
|
||||
<image class="product-img" :src="product.image" mode="aspectFill" />
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<text class="product-price-qty">￥{{ product.price }} x {{ product.quantity }}</text>
|
||||
<text class="product-price-qty">￥{{ getDecimal(product.unit_price) }} x {{ product.qty }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -81,27 +86,44 @@
|
||||
|
||||
<!-- 总计 -->
|
||||
<view class="order-total">
|
||||
<text class="total-qty">共{{ order.totalQuantity }}件</text>
|
||||
<text class="total-qty">共{{ order.total_qty }}件</text>
|
||||
<view class="total-amount">
|
||||
<text class="total-label">总计:</text>
|
||||
<text class="total-price">￥{{ order.totalAmount }}</text>
|
||||
<text class="total-price">￥{{ getDecimal(order.total_amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="order-action">
|
||||
<view
|
||||
class="action-btn"
|
||||
:class="{ 'pay-btn': order.status === 'unpaid', 'refund-btn': order.status === 'paid' }"
|
||||
@click="handleAction(order)"
|
||||
<view
|
||||
v-if="order.payment_status === 'PENDING'"
|
||||
class="action-btn pay-btn"
|
||||
@click="handlePay(order)"
|
||||
>
|
||||
{{ order.status === 'unpaid' ? '立即支付' : '申请退款' }}
|
||||
立即支付
|
||||
</view>
|
||||
<view
|
||||
v-else-if="order.payment_status === 'PAID' && !order.has_refund"
|
||||
class="action-btn refund-btn"
|
||||
@click="handleRefund(order)"
|
||||
>
|
||||
申请退款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 / 没有更多 -->
|
||||
<view class="load-more" v-if="!loading && orderList.length > 0 && total > limit">
|
||||
<text class="load-more-text">{{ hasNext ? '上拉加载更多' : '没有更多了' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="filteredOrders.length === 0">
|
||||
<view class="empty-state" v-if="!loading && filteredOrders.length === 0">
|
||||
<text class="empty-text">暂无订单</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -118,11 +140,7 @@
|
||||
<view class="sidebar-content">
|
||||
<view class="date-row">
|
||||
<text class="date-label">开始时间</text>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="tempStartTime"
|
||||
@change="onStartTimeChange"
|
||||
>
|
||||
<picker mode="date" :value="tempStartTime" @change="onStartTimeChange">
|
||||
<view class="date-picker">
|
||||
<text class="date-value">{{ tempStartTime || '请选择' }}</text>
|
||||
</view>
|
||||
@@ -130,11 +148,7 @@
|
||||
</view>
|
||||
<view class="date-row">
|
||||
<text class="date-label">结束时间</text>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="tempEndTime"
|
||||
@change="onEndTimeChange"
|
||||
>
|
||||
<picker mode="date" :value="tempEndTime" @change="onEndTimeChange">
|
||||
<view class="date-picker">
|
||||
<text class="date-value">{{ tempEndTime || '请选择' }}</text>
|
||||
</view>
|
||||
@@ -164,7 +178,8 @@
|
||||
|
||||
<script>
|
||||
import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
|
||||
import { checkLoginWithPrompt } from '@/utils/auth-guard.js';
|
||||
import { get } from '@/utils/request.js';
|
||||
import { checkLoginWithPrompt, getCachedUserInfo } from '@/utils/auth-guard.js';
|
||||
|
||||
export default {
|
||||
components: { PageNavBar },
|
||||
@@ -176,99 +191,92 @@ export default {
|
||||
tempEndTime: '',
|
||||
filterStartTime: '',
|
||||
filterEndTime: '',
|
||||
// 模拟订单数据
|
||||
orderList: [
|
||||
{
|
||||
id: 1,
|
||||
create_time: '2026-04-30 10:25:30',
|
||||
status: 'paid',
|
||||
products: [
|
||||
{ name: '君乐宝450ml悦鲜活', price: 0.01, quantity: 2, image: '/static/c1.png' },
|
||||
{ name: '可口可乐330ml', price: 3.00, quantity: 1, image: '/static/c4.png' }
|
||||
],
|
||||
totalQuantity: 3,
|
||||
totalAmount: '0.04'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
create_time: '2026-04-29 15:12:45',
|
||||
status: 'unpaid',
|
||||
products: [
|
||||
{ name: '农夫山泉550ml', price: 2.00, quantity: 3, image: '/static/c5.png' }
|
||||
],
|
||||
totalQuantity: 3,
|
||||
totalAmount: '6.00'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
create_time: '2026-04-28 09:30:00',
|
||||
status: 'paid',
|
||||
products: [
|
||||
{ name: '乐事薯片原味75g', price: 7.50, quantity: 1, image: '/static/c6.png' },
|
||||
{ name: '白桔（0.0.0.0-5.5.5）', price: 0.05, quantity: 5, image: '/static/c3.png' }
|
||||
],
|
||||
totalQuantity: 6,
|
||||
totalAmount: '1.00'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
create_time: '2026-04-27 18:45:20',
|
||||
status: 'unpaid',
|
||||
products: [
|
||||
{ name: '白红（0.0.0.0-9.9.9）', price: 0.06, quantity: 10, image: '/static/c2.png' }
|
||||
],
|
||||
totalQuantity: 10,
|
||||
totalAmount: '0.60'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
create_time: '2026-04-25 12:00:00',
|
||||
status: 'paid',
|
||||
products: [
|
||||
{ name: '君乐宝450ml悦鲜活', price: 0.01, quantity: 1, image: '/static/c1.png' }
|
||||
],
|
||||
totalQuantity: 1,
|
||||
totalAmount: '0.01'
|
||||
}
|
||||
]
|
||||
orderList: [],
|
||||
loading: false,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
hasNext: true,
|
||||
total: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredOrders() {
|
||||
let list = this.orderList;
|
||||
|
||||
// Tab筛选
|
||||
|
||||
if (this.currentTab === 'paid') {
|
||||
list = list.filter(o => o.status === 'paid');
|
||||
list = list.filter(o => o.payment_status === 'PAID');
|
||||
} else if (this.currentTab === 'unpaid') {
|
||||
list = list.filter(o => o.status === 'unpaid');
|
||||
list = list.filter(o => o.payment_status === 'PENDING');
|
||||
}
|
||||
|
||||
// 日期筛选
|
||||
if (this.filterStartTime) {
|
||||
list = list.filter(o => o.create_time >= this.filterStartTime);
|
||||
}
|
||||
if (this.filterEndTime) {
|
||||
list = list.filter(o => o.create_time.split(' ')[0] <= this.filterEndTime);
|
||||
}
|
||||
|
||||
|
||||
return list;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 进入订单页需要登录
|
||||
if (!checkLoginWithPrompt('order')) return;
|
||||
this.fetchOrders();
|
||||
},
|
||||
methods: {
|
||||
// 拉取订单列表
|
||||
async fetchOrders(append = false) {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const userInfo = getCachedUserInfo();
|
||||
const userId = userInfo && userInfo.user_id;
|
||||
if (!userId) {
|
||||
uni.showToast({ title: '无法获取用户信息', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const filter = { user_id: userId };
|
||||
if (this.filterStartTime) filter.start_time = this.filterStartTime;
|
||||
if (this.filterEndTime) filter.end_time = this.filterEndTime;
|
||||
|
||||
const res = await get('/user/orders', {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
filter: JSON.stringify(filter)
|
||||
});
|
||||
|
||||
const ret = res.data || {};
|
||||
if (ret.code === 0) {
|
||||
const list = Array.isArray(ret.data) ? ret.data : [];
|
||||
const meta = ret.meta || {};
|
||||
|
||||
if (append) {
|
||||
this.orderList = this.orderList.concat(list);
|
||||
} else {
|
||||
this.orderList = list;
|
||||
}
|
||||
|
||||
this.total = meta.total || list.length;
|
||||
this.hasNext = !!meta.hasNext;
|
||||
} else {
|
||||
uni.showToast({ title: ret.message || '获取订单失败', icon: 'none' });
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 上拉加载更多
|
||||
loadMore() {
|
||||
if (!this.hasNext || this.loading) return;
|
||||
this.page++;
|
||||
this.fetchOrders(true);
|
||||
},
|
||||
|
||||
switchTab(tab) {
|
||||
this.currentTab = tab;
|
||||
},
|
||||
onStartTimeChange(e) {
|
||||
this.tempStartTime = e.detail.value;
|
||||
},
|
||||
onEndTimeChange(e) {
|
||||
this.tempEndTime = e.detail.value;
|
||||
},
|
||||
|
||||
// 筛选
|
||||
onStartTimeChange(e) { this.tempStartTime = e.detail.value; },
|
||||
onEndTimeChange(e) { this.tempEndTime = e.detail.value; },
|
||||
resetFilter() {
|
||||
this.tempStartTime = '';
|
||||
this.tempEndTime = '';
|
||||
@@ -277,39 +285,82 @@ export default {
|
||||
this.filterStartTime = this.tempStartTime;
|
||||
this.filterEndTime = this.tempEndTime;
|
||||
this.showFilterSidebar = false;
|
||||
this.page = 1;
|
||||
this.hasNext = true;
|
||||
this.fetchOrders();
|
||||
},
|
||||
clearFilter() {
|
||||
this.filterStartTime = '';
|
||||
this.filterEndTime = '';
|
||||
this.page = 1;
|
||||
this.hasNext = true;
|
||||
this.fetchOrders();
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
const pad = n => String(n).padStart(2, '0');
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
},
|
||||
|
||||
// 解析 MongoDB Decimal128
|
||||
getDecimal(val) {
|
||||
if (!val) return '0.00';
|
||||
if (val.$numberDecimal) return val.$numberDecimal;
|
||||
return String(val);
|
||||
},
|
||||
|
||||
// 订单状态
|
||||
orderStatusText(status) {
|
||||
const map = { PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' };
|
||||
return map[status] || status;
|
||||
},
|
||||
orderStatusClass(status) {
|
||||
if (status === 'COMPLETED') return 'paid';
|
||||
if (status === 'CANCELLED') return 'cancelled';
|
||||
return 'processing';
|
||||
},
|
||||
|
||||
// 支付状态
|
||||
payStatusText(status) {
|
||||
const map = { PENDING: '待支付', PAID: '已支付', REFUNDED: '已退款', PARTIAL_REFUND: '部分退款' };
|
||||
return map[status] || status;
|
||||
},
|
||||
payStatusClass(status) {
|
||||
if (status === 'PAID') return 'paid';
|
||||
if (status === 'PENDING') return 'unpaid';
|
||||
return '';
|
||||
},
|
||||
|
||||
goToDetail(order) {
|
||||
uni.showToast({ title: '订单详情开发中', icon: 'none' });
|
||||
uni.navigateTo({ url: `/pages/order/detail?order_id=${order.order_id}` });
|
||||
},
|
||||
handleAction(order) {
|
||||
if (order.status === 'unpaid') {
|
||||
// 支付需要登录
|
||||
if (!checkLoginWithPrompt('pay')) return;
|
||||
uni.showModal({
|
||||
title: '立即支付',
|
||||
content: `确认支付￥${order.totalAmount}？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '支付成功', icon: 'success' });
|
||||
}
|
||||
handlePay(order) {
|
||||
if (!checkLoginWithPrompt('pay')) return;
|
||||
uni.showModal({
|
||||
title: '立即支付',
|
||||
content: `确认支付￥${this.getDecimal(order.total_amount)}？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '支付功能开发中', icon: 'none' });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '申请退款',
|
||||
content: '确认申请退款？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '退款申请已提交', icon: 'success' });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleRefund(order) {
|
||||
uni.showModal({
|
||||
title: '申请退款',
|
||||
content: '确认申请退款？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '退款功能开发中', icon: 'none' });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleNavPrev() {
|
||||
uni.navigateBack({ fail: () => { uni.switchTab({ url: '/pages/index/index' }); } });
|
||||
},
|
||||
@@ -426,16 +477,36 @@ page { height: 100%; background-color: #f5f5f5; }
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
.status-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.order-status, .pay-status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.order-status.processing {
|
||||
background: #e8f4ff;
|
||||
color: #2979ff;
|
||||
}
|
||||
.order-status.paid {
|
||||
background: #e8faf0;
|
||||
color: #19be6b;
|
||||
}
|
||||
.order-status.unpaid {
|
||||
.order-status.cancelled {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
.pay-status.paid {
|
||||
background: #e8faf0;
|
||||
color: #19be6b;
|
||||
}
|
||||
.pay-status.unpaid {
|
||||
background: #fff0f0;
|
||||
color: #e4393c;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background: #f0f0f0;
|
||||
@@ -554,6 +625,28 @@ page { height: 100%; background-color: #f5f5f5; }
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
.loading-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 加载更多 */
|
||||
.load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
.load-more-text {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 筛选侧边栏 */
|
||||
.filter-sidebar-mask {
|
||||
position: fixed;
|
||||
@@ -645,4 +738,4 @@ page { height: 100%; background-color: #f5f5f5; }
|
||||
.bottom-spacer {
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user