You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
4.6 KiB
218 lines
4.6 KiB
<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>
|