|
|
@@ -0,0 +1,308 @@
|
|
|
+<template>
|
|
|
+ <view class="record-container">
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <view class="header-nav">
|
|
|
+ <view class="nav-left" @click="goBack">
|
|
|
+ <AppIcon name="chevron-left" size="20" color="#FFFFFF" />
|
|
|
+ </view>
|
|
|
+ <text class="nav-title">停车券发放记录</text>
|
|
|
+ <view class="nav-right"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 状态筛选 -->
|
|
|
+ <view class="filter-bar">
|
|
|
+ <view
|
|
|
+ v-for="(option, index) in statusOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-item"
|
|
|
+ :class="{ active: activeStatus === option.value }"
|
|
|
+ @click="handleStatusChange(option.value)">
|
|
|
+ <text>{{ option.label }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 记录列表 -->
|
|
|
+ <view class="record-list" v-if="list.length > 0">
|
|
|
+ <view
|
|
|
+ class="record-item"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index">
|
|
|
+ <view class="item-header">
|
|
|
+ <text class="item-code">{{ item.code || '-' }}</text>
|
|
|
+ <text class="status-tag" :class="item.status === 1 ? 'used' : 'unused'">
|
|
|
+ {{ item.status === 1 ? '已使用' : '未使用' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="item-content">
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label">用户ID</text>
|
|
|
+ <text class="info-value">{{ item.userId || '-' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label">站点ID</text>
|
|
|
+ <text class="info-value">{{ item.stationId || '-' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label">关联订单</text>
|
|
|
+ <text class="info-value order">{{ item.orderId || '-' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label">过期时间</text>
|
|
|
+ <text class="info-value">{{ item.expireTime ? formatTime(item.expireTime) : '-' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-footer">
|
|
|
+ <text class="footer-time">发放: {{ formatTime(item.createTime) }}</text>
|
|
|
+ <text class="footer-time" v-if="item.status === 1">使用: {{ formatTime(item.usedTime) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 加载更多 -->
|
|
|
+ <view class="load-more" v-if="list.length > 0">
|
|
|
+ <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
|
|
|
+ <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
|
|
|
+ <text class="load-more-text" v-else>没有更多数据了</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view class="empty-state" v-if="list.length === 0 && !loading">
|
|
|
+ <view class="empty-icon-wrapper"><AppIcon name="home" size="48" color="#BFBFBF" /></view>
|
|
|
+ <text class="empty-text">暂无停车券发放记录</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 加载状态 -->
|
|
|
+ <view class="loading-state" v-if="loading && list.length === 0">
|
|
|
+ <view class="loading-spinner"></view>
|
|
|
+ <text class="loading-text">加载中...</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { onReachBottom } from '@dcloudio/uni-app'
|
|
|
+import { getParkingCouponRecordList } from '../../api/parkingCouponRecord.js'
|
|
|
+import { formatTime } from '../../utils/index.js'
|
|
|
+
|
|
|
+const list = ref([])
|
|
|
+const loading = ref(true)
|
|
|
+const page = ref(1)
|
|
|
+const pageSize = ref(10)
|
|
|
+const hasMore = ref(true)
|
|
|
+const loadMoreStatus = ref('more')
|
|
|
+const activeStatus = ref('')
|
|
|
+
|
|
|
+const statusOptions = [
|
|
|
+ { label: '全部', value: '' },
|
|
|
+ { label: '未使用', value: 0 },
|
|
|
+ { label: '已使用', value: 1 }
|
|
|
+]
|
|
|
+
|
|
|
+const goBack = () => {
|
|
|
+ uni.navigateBack()
|
|
|
+}
|
|
|
+
|
|
|
+const loadData = async (isLoadMore = false) => {
|
|
|
+ if (!isLoadMore) {
|
|
|
+ page.value = 1
|
|
|
+ list.value = []
|
|
|
+ hasMore.value = true
|
|
|
+ loadMoreStatus.value = 'more'
|
|
|
+ } else {
|
|
|
+ loadMoreStatus.value = 'loading'
|
|
|
+ }
|
|
|
+
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const params = {
|
|
|
+ pageNum: page.value,
|
|
|
+ pageSize: pageSize.value
|
|
|
+ }
|
|
|
+ if (activeStatus.value !== '') params.status = activeStatus.value
|
|
|
+
|
|
|
+ const res = await getParkingCouponRecordList(params)
|
|
|
+ if (res && res.code === 200) {
|
|
|
+ const data = res.data
|
|
|
+ const records = data.list || data.records || data
|
|
|
+ const total = data.total || 0
|
|
|
+
|
|
|
+ const totalPages = Math.ceil(total / pageSize.value)
|
|
|
+ hasMore.value = page.value < totalPages
|
|
|
+ loadMoreStatus.value = hasMore.value ? 'more' : 'noMore'
|
|
|
+
|
|
|
+ if (isLoadMore) {
|
|
|
+ list.value = [...list.value, ...records]
|
|
|
+ page.value++
|
|
|
+ } else {
|
|
|
+ list.value = records
|
|
|
+ page.value = 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载停车券记录失败:', error)
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const loadMore = () => {
|
|
|
+ if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
|
|
|
+ loadData(true)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onReachBottom(() => {
|
|
|
+ loadMore()
|
|
|
+})
|
|
|
+
|
|
|
+const handleStatusChange = (status) => {
|
|
|
+ activeStatus.value = status
|
|
|
+ loadData()
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ loadData()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.record-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F5F7FA;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.header-nav {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: calc(24rpx + var(--status-bar-height));
|
|
|
+ padding-right: 30rpx;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ background: #C6171E;
|
|
|
+}
|
|
|
+.nav-left, .nav-right { width: 120rpx; }
|
|
|
+.nav-title { font-size: 34rpx; color: #FFFFFF; font-weight: 600; }
|
|
|
+
|
|
|
+.filter-bar {
|
|
|
+ display: flex;
|
|
|
+ padding: 16rpx 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+.filter-item {
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.filter-item.active {
|
|
|
+ background: #C6171E;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.record-list {
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.record-item {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+.item-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 16rpx;
|
|
|
+ border-bottom: 1rpx solid #F0F0F0;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.item-code {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1A1A1A;
|
|
|
+ word-break: break-all;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 16rpx;
|
|
|
+}
|
|
|
+.status-tag {
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.status-tag.unused {
|
|
|
+ color: #909399;
|
|
|
+ background-color: #F4F4F5;
|
|
|
+}
|
|
|
+.status-tag.used {
|
|
|
+ color: #67C23A;
|
|
|
+ background-color: #F0F9EB;
|
|
|
+}
|
|
|
+
|
|
|
+.info-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8rpx 0;
|
|
|
+}
|
|
|
+.info-label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.info-value {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #1A1A1A;
|
|
|
+ max-width: 360rpx;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.info-value.order {
|
|
|
+ font-size: 22rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.item-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ border-top: 1rpx solid #F0F0F0;
|
|
|
+ margin-top: 16rpx;
|
|
|
+}
|
|
|
+.footer-time {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+.load-more {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 30rpx 0;
|
|
|
+}
|
|
|
+.load-more-text { font-size: 26rpx; color: #999999; }
|
|
|
+
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 120rpx 0;
|
|
|
+}
|
|
|
+.empty-text { font-size: 28rpx; color: #999999; }
|
|
|
+
|
|
|
+.loading-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 120rpx 0;
|
|
|
+}
|
|
|
+.loading-spinner {
|
|
|
+ font-size: 60rpx;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+}
|
|
|
+.loading-text { font-size: 28rpx; color: #999999; margin-top: 20rpx; }
|
|
|
+</style>
|