novel-front-app/pages_order/components/novel/signRecordPopup.vue

<template>
	<view class="sign-record-popup" :class="{'dark-mode': isDarkMode}">
		<uv-popup ref="popup" mode="center" :closeOnClickOverlay="true" :customStyle="popupStyle">
			<view class="content theme-transition">
				<view class="popup-header">
					<view class="popup-title theme-transition">签到记录</view>
					<view class="close-btn" @click="close">
						<uv-icon name="close" :color="isDarkMode ? '#ccc' : '#666'" size="32rpx"></uv-icon>
					</view>
				</view>
				
				<view class="record-list">
					<scroll-view scroll-y class="record-scroll">
						<view class="record-item" v-for="(record, index) in recordList" :key="index">
							<view class="record-left">
								<view class="record-date">{{ formatDate(record.createTime) }}</view>
								<view class="record-task">{{ record.taskName || '每日签到' }}</view>
							</view>
							<view class="record-right">
								<text class="record-reward">+{{ record.num || 1 }}推荐票</text>
								<text class="record-status success">已签到</text>
							</view>
						</view>
						<view class="no-record" v-if="recordList.length === 0 && !loading">暂无签到记录</view>
						<view class="loading" v-if="loading">加载中...</view>
					</scroll-view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import themeMixin from '@/mixins/themeMode.js'
	
	export default {
		name: 'signRecordPopup',
		mixins: [themeMixin],
		data() {
			return {
				recordList: [],
				loading: false,
				pageNo: 1,
				pageSize: 20
			}
		},
		computed: {
			popupStyle() {
				return {
					'background': this.isDarkMode ? '#232323' : '#fff',
					'border-radius': '24rpx',
					'width': '600rpx',
					'max-height': '700rpx'
				}
			}
		},
		methods: {
			// 打开弹窗
			open() {
				this.$refs.popup.open();
				this.getRecordList();
			},
			
			// 关闭弹窗
			close() {
				this.$refs.popup.close();
			},
			
			// 获取签到记录列表
			getRecordList() {
				this.loading = true;
				this.$fetch('getSignTaskRecordPage', {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					this.recordList = res.records || [];
					this.loading = false;
				}).catch(err => {
					console.error('获取签到记录失败:', err);
					this.loading = false;
				});
			},
			
			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign-record-popup {
		.content {
			padding: 0;
			
			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 32rpx 24rpx;
				border-bottom: 1rpx solid #f5f5f5;
				
				.popup-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #222;
				}
				
				.close-btn {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			.record-list {
				.record-scroll {
					max-height: 560rpx;
					
					.record-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 32rpx;
						border-bottom: 1rpx solid #f8f8f8;
						
						.record-left {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							
							.record-date {
								font-size: 28rpx;
								color: #333;
								font-weight: 500;
								margin-bottom: 8rpx;
							}
							
							.record-task {
								font-size: 24rpx;
								color: #999;
							}
						}
						
						.record-right {
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							
							.record-reward {
								font-size: 26rpx;
								color: #ff6b35;
								margin-bottom: 4rpx;
								font-weight: 500;
							}
							
							.record-status {
								font-size: 22rpx;
								
								&.success {
									color: #4caf50;
								}
							}
						}
					}
					
					.no-record, .loading {
						text-align: center;
						padding: 80rpx 32rpx;
						color: #999;
						font-size: 26rpx;
					}
				}
			}
		}
		
		&.dark-mode {
			.content {
				.popup-header {
					border-bottom-color: #333;
					
					.popup-title {
						color: #eee;
					}
				}
				
				.record-list {
					.record-scroll {
						.record-item {
							border-bottom-color: #333;
							
							.record-left {
								.record-date {
									color: #ccc;
								}
								
								.record-task {
									color: #888;
								}
							}
						}
						
						.no-record, .loading {
							color: #666;
						}
					}
				}
			}
		}
	}
</style>