413 lines
10 KiB
Vue
413 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar title="我的排队" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
|||
|
|
title-size='36' height='36' id="navbar">
|
|||
|
|
</u-navbar>
|
|||
|
|
|
|||
|
|
<scroll-view class="content" @scrolltolower="handleLoadMore" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white">
|
|||
|
|
<!-- 记录列表 -->
|
|||
|
|
<view class="queue-list">
|
|||
|
|
<view v-if="loading && pageNum === 1" style="color:#808080;font-size:28rpx;padding:20rpx;">加载中...</view>
|
|||
|
|
<view v-else-if="!queueList.length && !loading" style="color:#808080;font-size:28rpx;padding:20rpx;">
|
|||
|
|
{{ errorMessage || '暂无数据' }}
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in queueList"
|
|||
|
|
:key="item.id || index"
|
|||
|
|
class="queue-item"
|
|||
|
|
>
|
|||
|
|
<!-- 记录头部 -->
|
|||
|
|
<view class="item-header">
|
|||
|
|
<view class="store-info">
|
|||
|
|
<view class="store-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/uYpIXrpxk4rW7fHQh70X" alt="" /></view>
|
|||
|
|
<text class="store-name">{{ item.storeName || '门店名称' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="status-text" :class="'status-' + normalizeStatus(item.status)">
|
|||
|
|
{{ getStatusText(item.status) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 记录详情 -->
|
|||
|
|
<view class="item-details">
|
|||
|
|
<view class="detail-row">
|
|||
|
|
<text class="detail-label">我的号码</text>
|
|||
|
|
<text class="detail-value number">{{ item.number }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-row">
|
|||
|
|
<text class="detail-label">卡座类型</text>
|
|||
|
|
<text class="detail-value">{{ item.tableType || '大桌 5-10人' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-row">
|
|||
|
|
<text class="detail-label">取号时间</text>
|
|||
|
|
<text class="detail-value">{{ item.createTime }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 详情按钮 -->
|
|||
|
|
<view class="detail-btn-wrapper">
|
|||
|
|
<view class="detail-btn" @click="goDetail(item, index)">详情</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载更多提示 -->
|
|||
|
|
<view v-if="hasMore && queueList.length > 0" class="load-more">
|
|||
|
|
<view v-if="loadingMore" style="color:#808080;font-size:28rpx;text-align:center;padding:20rpx;">加载更多...</view>
|
|||
|
|
<view v-else style="color:#808080;font-size:28rpx;text-align:center;padding:20rpx;">上拉加载更多</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 没有更多数据提示 -->
|
|||
|
|
<view v-if="!hasMore && queueList.length > 0" class="no-more">
|
|||
|
|
<view style="color:#808080;font-size:28rpx;text-align:center;padding:20rpx;">没有更多数据了</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#000",
|
|||
|
|
},
|
|||
|
|
queueList: [],
|
|||
|
|
loading: false,
|
|||
|
|
loadingMore: false,
|
|||
|
|
errorMessage: '',
|
|||
|
|
total: 0,
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
hasMore: true,
|
|||
|
|
isRefreshing: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.resetAndLoad()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 重置并加载数据
|
|||
|
|
resetAndLoad() {
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.queueList = []
|
|||
|
|
this.hasMore = true
|
|||
|
|
this.getMyList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上拉加载更多
|
|||
|
|
handleLoadMore() {
|
|||
|
|
if (this.loadingMore || !this.hasMore) return
|
|||
|
|
this.loadMore()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载更多数据
|
|||
|
|
loadMore() {
|
|||
|
|
if (this.loadingMore || !this.hasMore) return
|
|||
|
|
|
|||
|
|
this.loadingMore = true
|
|||
|
|
this.pageNum++
|
|||
|
|
this.getMyList(true)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 下拉刷新
|
|||
|
|
onRefresh() {
|
|||
|
|
this.isRefreshing = true
|
|||
|
|
this.resetAndLoad()
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isRefreshing = false
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 拉取我的排队记录
|
|||
|
|
getMyList(isLoadMore = false){
|
|||
|
|
if (isLoadMore) {
|
|||
|
|
this.loadingMore = true
|
|||
|
|
} else {
|
|||
|
|
this.loading = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.errorMessage = ''
|
|||
|
|
const storeId = this.$store && this.$store.state ? this.$store.state.storeId : ''
|
|||
|
|
|
|||
|
|
if(!storeId){
|
|||
|
|
uni.showToast({ title:'缺少门店信息', icon:'none' })
|
|||
|
|
this.queueList = []
|
|||
|
|
this.loading = false
|
|||
|
|
this.loadingMore = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$u.get(`/app/queueUser/list?storeId=${storeId}&pageNum=${this.pageNum}&pageSize=${this.pageSize}&orderByColumn=createTime&isAsc=desc`).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
const newData = res.rows || res.data || []
|
|||
|
|
this.total = res.total || 0
|
|||
|
|
|
|||
|
|
if (isLoadMore) {
|
|||
|
|
// 加载更多时，追加数据
|
|||
|
|
this.queueList = [...this.queueList, ...newData]
|
|||
|
|
} else {
|
|||
|
|
// 首次加载或刷新时，替换数据
|
|||
|
|
this.queueList = newData
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断是否还有更多数据
|
|||
|
|
this.hasMore = this.queueList.length < this.total
|
|||
|
|
|
|||
|
|
// 如果当前页数据少于pageSize，说明没有更多数据了
|
|||
|
|
if (newData.length < this.pageSize) {
|
|||
|
|
this.hasMore = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}else if(res.code == 401){
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '你还未登录，是否去登录？',
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确定')
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/login/login'
|
|||
|
|
})
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消')
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
if (!isLoadMore) {
|
|||
|
|
this.queueList = []
|
|||
|
|
}
|
|||
|
|
this.errorMessage = (res && res.msg) ? res.msg : '加载失败'
|
|||
|
|
}
|
|||
|
|
}).catch(()=>{
|
|||
|
|
if (!isLoadMore) {
|
|||
|
|
this.queueList = []
|
|||
|
|
}
|
|||
|
|
this.errorMessage = '网络错误'
|
|||
|
|
}).finally(()=>{
|
|||
|
|
this.loading = false
|
|||
|
|
this.loadingMore = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转详情
|
|||
|
|
goDetail(item, index){
|
|||
|
|
console.log('=== 调试信息开始 ===');
|
|||
|
|
console.log('传入的item参数:', item);
|
|||
|
|
console.log('传入的index参数:', index);
|
|||
|
|
console.log('当前queueList:', this.queueList);
|
|||
|
|
console.log('当前queueList长度:', this.queueList.length);
|
|||
|
|
|
|||
|
|
// 如果item是undefined，尝试从queueList中获取
|
|||
|
|
if (!item && typeof index === 'number' && this.queueList[index]) {
|
|||
|
|
item = this.queueList[index];
|
|||
|
|
console.log('从queueList中获取的item:', item);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果仍然没有item，显示错误
|
|||
|
|
if (!item) {
|
|||
|
|
console.error('无法获取排队记录信息');
|
|||
|
|
uni.showToast({ title: '无法获取记录信息', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('最终使用的item:', item);
|
|||
|
|
console.log('记录ID:', item?.id);
|
|||
|
|
console.log('记录完整信息:', JSON.stringify(item, null, 2));
|
|||
|
|
|
|||
|
|
// 尝试多种可能的ID字段
|
|||
|
|
let recordId = item?.id || item?.queueUserId || item?.queueId || item?.recordId;
|
|||
|
|
console.log('最终使用的ID:', recordId);
|
|||
|
|
|
|||
|
|
if (!recordId) {
|
|||
|
|
// 如果没有ID，尝试使用其他唯一标识符
|
|||
|
|
recordId = item?.number || item?.createTime || Date.now();
|
|||
|
|
console.log('使用备用标识符:', recordId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构建跳转URL
|
|||
|
|
const targetUrl = `/page_shanghu/paidui/hexiao?id=${recordId}`;
|
|||
|
|
console.log('跳转URL:', targetUrl);
|
|||
|
|
console.log('=== 调试信息结束 ===');
|
|||
|
|
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: targetUrl,
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('跳转失败:', err);
|
|||
|
|
uni.showToast({ title: '跳转失败', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 规范状态
|
|||
|
|
normalizeStatus(status) {
|
|||
|
|
if (status === 1 || status === '1') return 'inQueue'
|
|||
|
|
if (status === 2 || status === '2') return 'calling'
|
|||
|
|
if (status === 3 || status === '3') return 'verified'
|
|||
|
|
if (status === 4 || status === '4') return 'missed'
|
|||
|
|
if (status === 5 || status === '5') return 'cancelled'
|
|||
|
|
return status
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getStatusText(status) {
|
|||
|
|
const statusTexts = {
|
|||
|
|
'inQueue': '排队中',
|
|||
|
|
'calling': '叫号中',
|
|||
|
|
'missed': '已过号',
|
|||
|
|
'verified': '已核销',
|
|||
|
|
'cancelled': '已取消'
|
|||
|
|
};
|
|||
|
|
const key = this.normalizeStatus(status)
|
|||
|
|
return statusTexts[key] || '';
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 87vh;
|
|||
|
|
overflow: scroll;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 记录列表 */
|
|||
|
|
.queue-list {
|
|||
|
|
.queue-item {
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
border: 1px solid #333;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
/* 记录头部 */
|
|||
|
|
.item-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
|
|||
|
|
.store-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
|
|||
|
|
.store-icon {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store-name {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-text {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
|
|||
|
|
&.status-inQueue {
|
|||
|
|
color: #FF8998;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-calling {
|
|||
|
|
color: #FF8998;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-verified {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-cancelled {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-missed {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 记录详情 */
|
|||
|
|
.item-details {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
|
|||
|
|
.detail-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-label {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-value {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
|
|||
|
|
&.number {
|
|||
|
|
color: #FF8998;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 详情按钮 */
|
|||
|
|
.detail-btn-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
|
|||
|
|
.detail-btn {
|
|||
|
|
padding: 16rpx 24rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
background: transparent;
|
|||
|
|
color: #FF8998;
|
|||
|
|
border: 1px solid #FF8998;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
min-width: 120rpx;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background: rgba(255, 137, 152, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载更多提示 */
|
|||
|
|
.load-more {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 没有更多数据提示 */
|
|||
|
|
.no-more {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|