481 lines
11 KiB
Vue
481 lines
11 KiB
Vue
<template>
|
||
<view class="queue-status-page" :style="colorStyle">
|
||
<view class="header-gradient">
|
||
<view class="header-gradient__bg-circle header-gradient__bg-circle--1"></view>
|
||
<view class="header-gradient__bg-circle header-gradient__bg-circle--2"></view>
|
||
|
||
<view class="header-card">
|
||
<view class="header-card__label">公排池总单数</view>
|
||
<view class="header-card__total">{{ queueStatus.totalOrders || 0 }}</view>
|
||
<view class="header-card__progress" v-if="queueStatus.progress">
|
||
<HjfQueueProgress
|
||
:current-count="queueStatus.progress.current_batch_count"
|
||
:trigger-multiple="queueStatus.progress.trigger_multiple"
|
||
:next-refund-no="queueStatus.progress.next_refund_queue_no"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-list-section">
|
||
<view class="section-header">
|
||
<view class="section-header__dot"></view>
|
||
<view class="section-header__title">我的排队订单</view>
|
||
</view>
|
||
|
||
<view v-if="loading" class="loading-wrap">
|
||
<view class="loading-dots">
|
||
<view class="loading-dot loading-dot--1"></view>
|
||
<view class="loading-dot loading-dot--2"></view>
|
||
<view class="loading-dot loading-dot--3"></view>
|
||
</view>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<view v-else-if="!queueStatus.myOrders || queueStatus.myOrders.length === 0" class="empty-wrap">
|
||
<emptyPage title="暂无排队记录～" src="/statics/images/noOrder.gif" />
|
||
</view>
|
||
|
||
<view v-else class="order-list">
|
||
<view
|
||
v-for="(order, index) in queueStatus.myOrders"
|
||
:key="order.id || index"
|
||
class="order-item"
|
||
>
|
||
<view class="order-item__top">
|
||
<view class="order-item__no">
|
||
<text class="order-item__no-hash">#</text>
|
||
<text class="order-item__no-value">{{ order.queue_no }}</text>
|
||
</view>
|
||
<view
|
||
class="order-item__tag"
|
||
:class="order.status === 0 ? 'order-item__tag--active' : 'order-item__tag--refunded'"
|
||
>
|
||
<view class="order-item__tag-dot" :class="order.status === 0 ? 'order-item__tag-dot--active' : 'order-item__tag-dot--refunded'"></view>
|
||
{{ order.status === 0 ? '排队中' : '已退款' }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-item__id">{{ order.order_id }}</view>
|
||
|
||
<view class="order-item__bottom">
|
||
<text class="order-item__amount">¥{{ Number(order.amount).toFixed(2) }}</text>
|
||
<text class="order-item__wait">{{ order.estimated_wait }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="queueStatus.myOrders && queueStatus.myOrders.length > 0" class="load-more-bar">
|
||
<text v-if="loadingMore" class="load-more-text">加载中...</text>
|
||
<text v-else-if="finished" class="load-more-text">没有更多内容啦~</text>
|
||
<text v-else class="load-more-text">上拉加载更多</text>
|
||
</view>
|
||
|
||
<HjfRefundNotice
|
||
:visible="showRefund"
|
||
:amount="refundData.amount"
|
||
:order-id="refundData.orderId"
|
||
@close="handleRefundClose"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* @file pages/queue/status.vue
|
||
* @description P12 公排状态页 — 展示公排池总单数、当前批次进度及我的排队订单列表，
|
||
* 并在退款到账时弹出 HjfRefundNotice 通知。
|
||
* @see docs/frontend-new-pages-spec.md 第 2.2.4 节
|
||
*/
|
||
|
||
import { getQueueStatus } from '@/api/hjfQueue.js';
|
||
import HjfQueueProgress from '@/components/HjfQueueProgress.vue';
|
||
import HjfRefundNotice from '@/components/HjfRefundNotice.vue';
|
||
import emptyPage from '@/components/emptyPage.vue';
|
||
import colors from '@/mixins/color.js';
|
||
|
||
export default {
|
||
name: 'QueueStatus',
|
||
|
||
mixins: [colors],
|
||
|
||
components: {
|
||
HjfQueueProgress,
|
||
HjfRefundNotice,
|
||
emptyPage
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
/**
|
||
* 公排状态数据，包含 totalOrders、myOrders、progress
|
||
* @type {{ totalOrders: number, myOrders: Array, progress: Object }}
|
||
*/
|
||
queueStatus: {},
|
||
|
||
/**
|
||
* 是否正在加载数据
|
||
* @type {boolean}
|
||
*/
|
||
loading: false,
|
||
|
||
/**
|
||
* 是否显示退款通知弹窗
|
||
* @type {boolean}
|
||
*/
|
||
showRefund: false,
|
||
|
||
/**
|
||
* 退款弹窗所需数据
|
||
* @type {{ amount: number, orderId: string }}
|
||
*/
|
||
refundData: {
|
||
amount: 0,
|
||
orderId: ''
|
||
},
|
||
|
||
/** @type {boolean} 是否正在上拉加载更多 */
|
||
loadingMore: false,
|
||
|
||
/** @type {boolean} 是否已加载完全部数据 */
|
||
finished: false
|
||
};
|
||
},
|
||
|
||
onLoad() {
|
||
this.loadQueueStatus();
|
||
},
|
||
|
||
onShow() {
|
||
this.checkPendingRefundNotice();
|
||
},
|
||
|
||
onReachBottom() {
|
||
this.loadMoreOrders();
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* 加载公排状态数据
|
||
* 调用 getQueueStatus()，将返回值赋给 queueStatus，
|
||
* 并在检测到已退款订单时触发退款弹窗。
|
||
* @returns {Promise<void>}
|
||
*/
|
||
loadQueueStatus() {
|
||
this.loading = true;
|
||
getQueueStatus()
|
||
.then(res => {
|
||
if (res && res.data) {
|
||
this.$set(this, 'queueStatus', res.data);
|
||
this.detectNewRefund(res.data.myOrders || []);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error('[QueueStatus] loadQueueStatus error:', err);
|
||
uni.showToast({ title: '加载失败，请稍后重试', icon: 'none' });
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 检测是否存在刚完成退款的订单，有则弹出退款通知。
|
||
* 策略：取 status=1 且 refund_time 最大的一条（最近退款），
|
||
* 结合页面跳转参数 show_refund=1 触发弹窗。
|
||
* @param {Array} orders - 我的排队订单列表
|
||
*/
|
||
detectNewRefund(orders) {
|
||
const refunded = orders.filter(o => o.status === 1 && o.refund_time > 0);
|
||
if (!refunded.length) return;
|
||
refunded.sort((a, b) => b.refund_time - a.refund_time);
|
||
const latest = refunded[0];
|
||
const showParam = this._pageParams && this._pageParams.show_refund;
|
||
if (showParam === '1') {
|
||
this.refundData = {
|
||
amount: latest.amount,
|
||
orderId: latest.order_id
|
||
};
|
||
this.showRefund = true;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 页面显示时检查是否需要弹出退款通知（从外部跳转携带参数时使用）
|
||
*/
|
||
checkPendingRefundNotice() {
|
||
const pages = getCurrentPages();
|
||
const current = pages[pages.length - 1];
|
||
const options = (current && current.options) || {};
|
||
if (options.show_refund === '1' && this.queueStatus.myOrders) {
|
||
this.detectNewRefund(this.queueStatus.myOrders);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 上拉加载更多（当前数据由单次接口全量返回，模拟已到底状态）
|
||
* Phase 4 接入分页接口后替换为真实分页逻辑。
|
||
*/
|
||
loadMoreOrders() {
|
||
if (this.loadingMore || this.finished) return;
|
||
this.loadingMore = true;
|
||
setTimeout(() => {
|
||
this.finished = true;
|
||
this.loadingMore = false;
|
||
}, 500);
|
||
},
|
||
|
||
/**
|
||
* 关闭退款通知弹窗
|
||
*/
|
||
handleRefundClose() {
|
||
this.showRefund = false;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.queue-status-page {
|
||
min-height: 100vh;
|
||
background: #f4f5f7;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.header-gradient {
|
||
background: linear-gradient(135deg, var(--view-theme, #e93323) 0%, var(--view-gradient, #f76b1c) 100%);
|
||
padding: 36rpx 30rpx 48rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header-gradient__bg-circle {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
opacity: 0.06;
|
||
}
|
||
|
||
.header-gradient__bg-circle--1 {
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
top: -160rpx;
|
||
right: -100rpx;
|
||
}
|
||
|
||
.header-gradient__bg-circle--2 {
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
bottom: -60rpx;
|
||
left: -50rpx;
|
||
}
|
||
|
||
.header-card {
|
||
position: relative;
|
||
z-index: 1;
|
||
background: rgba(255, 255, 255, 0.14);
|
||
border-radius: 28rpx;
|
||
padding: 36rpx 32rpx;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.header-card__label {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.header-card__total {
|
||
font-size: 64rpx;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
font-family: 'SemiBold', sans-serif;
|
||
line-height: 1.1;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.header-card__progress {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 18rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.order-list-section {
|
||
margin: -16rpx 20rpx 0;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 4rpx 20rpx;
|
||
}
|
||
|
||
.section-header__dot {
|
||
width: 8rpx;
|
||
height: 30rpx;
|
||
border-radius: 4rpx;
|
||
background: var(--view-theme, #e93323);
|
||
margin-right: 14rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.section-header__title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.loading-wrap {
|
||
padding: 60rpx 0;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.loading-dots {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.loading-dot {
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border-radius: 50%;
|
||
background: var(--view-theme, #e93323);
|
||
animation: dot-bounce 1.2s infinite ease-in-out;
|
||
}
|
||
|
||
.loading-dot--2 { animation-delay: 0.2s; }
|
||
.loading-dot--3 { animation-delay: 0.4s; }
|
||
|
||
@keyframes dot-bounce {
|
||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||
40% { opacity: 1; transform: scale(1.2); }
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.empty-wrap {
|
||
padding: 40rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.order-item {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 30rpx 32rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.order-item__top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.order-item__no {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.order-item__no-hash {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: var(--view-theme, #e93323);
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.order-item__no-value {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
font-family: 'SemiBold', sans-serif;
|
||
}
|
||
|
||
.order-item__tag {
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.order-item__tag-dot {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.order-item__tag--active {
|
||
background: #e6f7ee;
|
||
color: #389e0d;
|
||
}
|
||
|
||
.order-item__tag-dot--active {
|
||
background: #52c41a;
|
||
}
|
||
|
||
.order-item__tag--refunded {
|
||
background: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
|
||
.order-item__tag-dot--refunded {
|
||
background: #bbb;
|
||
}
|
||
|
||
.order-item__id {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
padding-bottom: 18rpx;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.order-item__bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 18rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.order-item__amount {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
font-family: 'SemiBold', sans-serif;
|
||
}
|
||
|
||
.order-item__wait {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
background: #fafafa;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.load-more-bar {
|
||
padding: 32rpx 0 48rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.load-more-text {
|
||
font-size: 26rpx;
|
||
color: #aaa;
|
||
}
|
||
</style>
|