62 lines
3.9 KiB
Vue
62 lines
3.9 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view v-if="records.length" class="record-list">
|
||
<view v-for="item in records" :key="item.id" class="record-card" @click="openDetail(item)">
|
||
<view class="record-head"><text class="record-name">{{ item.taskName }}</text><text class="status" :class="item.statusClassName">{{ item.statusLabel }}</text></view>
|
||
<view class="record-row"><text>{{ item.cycleType === 'DAILY' ? '每日任务 · ' + item.cycleKey : '单次任务' }}</text><text class="reward">+{{ item.rewardPoints }}积分</text></view>
|
||
<view class="record-row muted"><text>提交时间 {{ item.lastSubmitTime }}</text><text>第{{ item.attemptCount }}次提交</text></view>
|
||
<view v-if="item.rejectReason" class="reason">{{ item.status === 3 ? '撤销原因：' : '未通过原因：' }}{{ item.rejectReason }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="!loading" class="empty"><text class="cuIcon-form empty-icon"></text><view>还没有任务记录</view><button class="go-btn" @click="goTasks">去做任务</button></view>
|
||
<view v-if="loadingMore" class="loading-more">加载中...</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { listMyPointTaskSubmissions } from '@/api/app/index.js'
|
||
export default {
|
||
data() { return { records: [], total: 0, loading: false, loadingMore: false, query: { pageNum: 1, pageSize: 10 } } },
|
||
onShow() { this.query.pageNum = 1; this.load(true) },
|
||
onPullDownRefresh() { this.query.pageNum = 1; this.load(true) },
|
||
onReachBottom() { if (this.records.length < this.total && !this.loadingMore) { this.query.pageNum++; this.load(false) } },
|
||
methods: {
|
||
load(reset) {
|
||
if (reset) this.loading = true; else this.loadingMore = true
|
||
listMyPointTaskSubmissions(this.query).then(res => {
|
||
const rows = (res.rows || []).map(item => Object.assign({}, item, {
|
||
statusLabel: this.getStatusText(item.status),
|
||
statusClassName: this.getStatusClass(item.status)
|
||
}))
|
||
this.records = reset ? rows : this.records.concat(rows)
|
||
this.total = res.total || 0
|
||
}).finally(() => { this.loading = false; this.loadingMore = false; uni.stopPullDownRefresh() })
|
||
},
|
||
openDetail(item) { this.$tab.navigateTo('/pages/task/detail?id=' + item.taskId + '&submissionId=' + item.id) },
|
||
goTasks() { this.$tab.navigateTo('/pages/task/index') },
|
||
getStatusText(status) { return { 0: '审核中', 1: '已通过', 2: '未通过', 3: '已撤销' }[status] || '未知' },
|
||
getStatusClass(status) { return { 0: 'pending', 1: 'approved', 2: 'rejected', 3: 'revoked' }[status] || '' }
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { min-height: 100vh; padding: 28rpx; box-sizing: border-box; background: #f5f7fb; }
|
||
.record-card { margin-bottom: 20rpx; padding: 28rpx; border-radius: 20rpx; background: #fff; box-shadow: 0 7rpx 22rpx rgba(30, 48, 82, .05); }
|
||
.record-head, .record-row { display: flex; align-items: center; justify-content: space-between; }
|
||
.record-name { flex: 1; font-size: 31rpx; font-weight: 600; color: #262b35; }
|
||
.status { padding: 6rpx 14rpx; border-radius: 16rpx; font-size: 22rpx; }
|
||
.status.pending { color: #e49320; background: #fff5e5; }
|
||
.status.approved { color: #269761; background: #e9f8f0; }
|
||
.status.rejected { color: #de5555; background: #fff0f0; }
|
||
.status.revoked { color: #7d8490; background: #f0f1f4; }
|
||
.record-row { margin-top: 20rpx; color: #646b76; font-size: 25rpx; }
|
||
.record-row.muted { color: #a0a6b0; font-size: 22rpx; }
|
||
.reward { color: #ff8821; font-weight: 600; }
|
||
.reason { margin-top: 20rpx; padding: 18rpx; border-radius: 12rpx; color: #d65353; background: #fff6f6; font-size: 24rpx; line-height: 35rpx; }
|
||
.empty { padding-top: 220rpx; text-align: center; color: #a7aeba; font-size: 27rpx; }
|
||
.empty-icon { display: block; margin-bottom: 18rpx; font-size: 88rpx; color: #d7dce5; }
|
||
.go-btn { width: 230rpx; margin-top: 30rpx; border: 0; border-radius: 40rpx; color: #fff; background: #5578f4; font-size: 27rpx; }
|
||
.loading-more { padding: 20rpx; text-align: center; color: #aaa; font-size: 24rpx; }
|
||
</style>
|