582 lines
12 KiB
Vue
582 lines
12 KiB
Vue
<template>
|
||
<view class="checkin-page">
|
||
<!-- 积分规则按钮 -->
|
||
<view class="rules-btn-top" @tap="showRules">
|
||
<text>积分规则</text>
|
||
</view>
|
||
|
||
<!-- 打卡状态卡片 -->
|
||
<view class="checkin-card">
|
||
<!-- 积分显示 -->
|
||
<view class="points-header">
|
||
<text class="star-icon">⭐</text>
|
||
<text class="points-text">{{ currentPoints }} 积分</text>
|
||
</view>
|
||
|
||
<!-- 连续打卡天数 -->
|
||
<view class="streak-container">
|
||
<view
|
||
class="streak-item"
|
||
v-for="(item, index) in streakDays"
|
||
:key="index"
|
||
>
|
||
<view
|
||
class="streak-circle"
|
||
:class="{
|
||
completed: item.completed,
|
||
pending: !item.completed && !item.special,
|
||
special: item.special
|
||
}"
|
||
>
|
||
<text v-if="item.completed" class="check-icon">✓</text>
|
||
<text v-else-if="item.special" class="crown-icon">👑</text>
|
||
<text v-else class="circle-icon">○</text>
|
||
</view>
|
||
<text class="day-number">{{ item.day }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 立即打卡按钮 -->
|
||
<view class="checkin-btn" @click="handleCheckin">
|
||
<text>立即打卡</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 打卡任务 -->
|
||
<view class="section">
|
||
<view class="section-title">打卡任务</view>
|
||
<view class="task-list">
|
||
<view
|
||
class="task-item"
|
||
v-for="(task, index) in taskList"
|
||
:key="index"
|
||
>
|
||
<view class="task-icon" :style="{ background: task.iconBg }">
|
||
<text>{{ task.icon }}</text>
|
||
</view>
|
||
<view class="task-content">
|
||
<view class="task-header">
|
||
<text class="task-name">{{ task.name }}</text>
|
||
<view class="points-badge">
|
||
<text>+{{ task.points }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="task-desc">{{ task.desc }}</text>
|
||
</view>
|
||
<view class="task-action-btn" @click="handleTask(task)">
|
||
<text>去完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 积分兑换 -->
|
||
<view class="section">
|
||
<view class="section-title">积分兑换</view>
|
||
<view class="exchange-list">
|
||
<view
|
||
class="exchange-item"
|
||
v-for="(item, index) in exchangeList"
|
||
:key="index"
|
||
>
|
||
<view class="exchange-icon" :style="{ background: item.iconBg }">
|
||
<text>{{ item.icon }}</text>
|
||
</view>
|
||
<view class="exchange-content">
|
||
<text class="exchange-name">{{ item.name }}</text>
|
||
<text class="exchange-desc">{{ item.desc }}</text>
|
||
</view>
|
||
<view class="exchange-btn" @click="handleExchange(item)">
|
||
<text>立即兑换</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提示信息 -->
|
||
<view class="tip-banner">
|
||
<text class="tip-icon">💡</text>
|
||
<text class="tip-text">连续打卡7天可获得额外奖励，完成每日任务还能获得更多积分哦！</text>
|
||
</view>
|
||
|
||
<!-- 底部安全距离 -->
|
||
<view class="safe-bottom"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentPoints: 522,
|
||
streakDays: [
|
||
{ day: 1, completed: false, special: false },
|
||
{ day: 2, completed: false, special: false },
|
||
{ day: 3, completed: false, special: false },
|
||
{ day: 4, completed: false, special: false },
|
||
{ day: 5, completed: false, special: false },
|
||
{ day: 6, completed: false, special: false },
|
||
{ day: 7, completed: false, special: true }
|
||
],
|
||
taskList: [
|
||
{
|
||
id: 1,
|
||
name: '饮食记录上传',
|
||
desc: '上传饮食照片赚取积分',
|
||
points: 20,
|
||
icon: '📸',
|
||
iconBg: 'linear-gradient(135deg, #fff4f0 0%, #ffe8e0 100%)'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '打卡视频制作',
|
||
desc: '制作打卡视频分享动态',
|
||
points: 50,
|
||
icon: '🎬',
|
||
iconBg: 'linear-gradient(135deg, #fff4f0 0%, #ffe8e0 100%)'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '内容分享',
|
||
desc: '分享内容至社交平台',
|
||
points: 30,
|
||
icon: '📤',
|
||
iconBg: 'linear-gradient(135deg, #fff4f0 0%, #ffe8e0 100%)'
|
||
}
|
||
],
|
||
exchangeList: [
|
||
{
|
||
id: 1,
|
||
name: '微信红包兑换',
|
||
desc: '100积分 = 5元红包',
|
||
icon: '💰',
|
||
iconBg: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '米面油',
|
||
desc: '300积分 = 10斤大米/5升油',
|
||
icon: '🌾',
|
||
iconBg: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '零食礼盒',
|
||
desc: '200积分 = 1箱零食',
|
||
icon: '🎁',
|
||
iconBg: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadCheckinData();
|
||
},
|
||
onShow() {
|
||
// 页面显示时刷新数据
|
||
this.loadCheckinData();
|
||
},
|
||
methods: {
|
||
async loadCheckinData() {
|
||
try {
|
||
const { getUserPoints, getCheckinStreak, getCheckinTasks } = await import('@/api/tool.js');
|
||
|
||
// 并行加载数据
|
||
const [pointsRes, streakRes, tasksRes] = await Promise.all([
|
||
getUserPoints().catch(() => ({ data: { points: 0 } })),
|
||
getCheckinStreak().catch(() => ({ data: { streakDays: 7, currentStreak: 0 } })),
|
||
getCheckinTasks().catch(() => ({ data: { tasks: [] } }))
|
||
]);
|
||
|
||
// 更新积分
|
||
if (pointsRes.data) {
|
||
this.currentPoints = pointsRes.data.points || 0;
|
||
}
|
||
|
||
// 更新连续打卡天数
|
||
if (streakRes.data) {
|
||
const streak = streakRes.data.currentStreak || 0;
|
||
// 生成连续打卡天数数组
|
||
this.streakDays = Array.from({ length: 7 }, (_, i) => ({
|
||
day: i + 1,
|
||
completed: i < streak,
|
||
special: i === 6 // 第7天特殊标记
|
||
}));
|
||
}
|
||
|
||
// 更新任务列表
|
||
if (tasksRes.data && tasksRes.data.tasks && tasksRes.data.tasks.length > 0) {
|
||
this.taskList = tasksRes.data.tasks.map(task => ({
|
||
id: task.id || task.taskId,
|
||
title: task.title || task.name,
|
||
desc: task.desc || task.description || '',
|
||
points: task.points || task.reward || 0,
|
||
completed: task.completed || task.status === 'done',
|
||
icon: task.icon || '📝'
|
||
}));
|
||
}
|
||
} catch (error) {
|
||
console.error('加载打卡数据失败:', error);
|
||
}
|
||
},
|
||
showRules() {
|
||
uni.navigateTo({
|
||
url: '/pages/tool/points-rules'
|
||
})
|
||
},
|
||
handleCheckin() {
|
||
uni.navigateTo({
|
||
url: '/pages/tool/checkin-publish'
|
||
})
|
||
// 更新打卡状态
|
||
const todayIndex = this.getTodayIndex()
|
||
if (todayIndex >= 0 && todayIndex < this.streakDays.length) {
|
||
// this.streakDays[todayIndex].completed = true
|
||
this.currentPoints += 30 // 每日打卡获得30积分
|
||
}
|
||
},
|
||
getTodayIndex() {
|
||
// 根据连续打卡数据计算当前是第几天
|
||
// streakDays 中已有 completed 状态，找第一个未完成的位置即为今天
|
||
const index = this.streakDays.findIndex(day => !day.completed)
|
||
return index >= 0 ? index : this.streakDays.length - 1
|
||
},
|
||
handleTask(task) {
|
||
switch (task.id) {
|
||
case 1: // 饮食记录上传
|
||
uni.navigateTo({
|
||
url: '/pages/tool/checkin-publish'
|
||
})
|
||
break
|
||
case 2: // 打卡视频制作
|
||
uni.navigateTo({
|
||
url: '/pages/tool/checkin-publish?type=video'
|
||
})
|
||
break
|
||
case 3: // 内容分享
|
||
uni.navigateTo({
|
||
url: '/pages/tool/invite-rewards'
|
||
})
|
||
break
|
||
default:
|
||
uni.showToast({
|
||
title: '功能开发中',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
handleExchange(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/tool/welcome-gift'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.checkin-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
/* 积分规则按钮 */
|
||
.rules-btn-top {
|
||
position: fixed;
|
||
top: calc(var(--status-bar-height, 0) + 8rpx);
|
||
right: 60rpx;
|
||
z-index: 100;
|
||
background: rgba(255, 255, 255, 0.75);
|
||
border-radius: 20rpx;
|
||
padding: 12rpx 24rpx;
|
||
box-shadow: 2rpx 4rpx 2rpx rgba(33, 33, 33, 0.3);
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #ff6b35;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
/* 打卡状态卡片 */
|
||
.checkin-card {
|
||
background: #ffffff;
|
||
border-radius: 48rpx;
|
||
padding: 40rpx;
|
||
margin: 32rpx 32rpx 0;
|
||
box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.points-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
.star-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.points-text {
|
||
font-size: 28rpx;
|
||
color: #b45309;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.streak-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
padding: 0 8rpx;
|
||
}
|
||
|
||
.streak-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.streak-circle {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.1);
|
||
|
||
&.completed {
|
||
background: linear-gradient(135deg, #ff6b35 0%, #e85a2a 100%);
|
||
|
||
.check-icon {
|
||
font-size: 36rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
&.pending {
|
||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||
|
||
.circle-icon {
|
||
font-size: 36rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
|
||
&.special {
|
||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||
|
||
.crown-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.day-number {
|
||
font-size: 24rpx;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.checkin-btn {
|
||
background: linear-gradient(135deg, #ff6b35 0%, #ff7a4a 50%, #ff6b35 100%);
|
||
border-radius: 32rpx;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
box-shadow: 0 16rpx 48rpx rgba(255, 107, 53, 0.35);
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
/* 通用区块样式 */
|
||
.section {
|
||
margin: 48rpx 32rpx 0;
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
color: #6b7280;
|
||
margin-bottom: 32rpx;
|
||
padding-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
/* 打卡任务列表 */
|
||
.task-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.task-item {
|
||
background: #ffffff;
|
||
border-radius: 32rpx;
|
||
padding: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.task-icon {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
box-shadow: inset 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
|
||
text {
|
||
font-size: 48rpx;
|
||
}
|
||
}
|
||
|
||
.task-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.task-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.task-name {
|
||
font-size: 30rpx;
|
||
color: #2e3e5c;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.points-badge {
|
||
background: #fff4f0;
|
||
border-radius: 40rpx;
|
||
padding: 4rpx 16rpx;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #ff6b35;
|
||
}
|
||
}
|
||
}
|
||
|
||
.task-desc {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
|
||
.task-action-btn {
|
||
background: linear-gradient(135deg, #ff6b35 0%, #e85a2a 100%);
|
||
border-radius: 24rpx;
|
||
padding: 16rpx 32rpx;
|
||
box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.1);
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
/* 积分兑换列表 */
|
||
.exchange-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.exchange-item {
|
||
background: #ffffff;
|
||
border-radius: 32rpx;
|
||
padding: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.exchange-icon {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
box-shadow: inset 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
|
||
text {
|
||
font-size: 48rpx;
|
||
}
|
||
}
|
||
|
||
.exchange-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
|
||
.exchange-name {
|
||
font-size: 30rpx;
|
||
color: #2e3e5c;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.exchange-desc {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
.exchange-btn {
|
||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||
border-radius: 24rpx;
|
||
padding: 16rpx 32rpx;
|
||
box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.1);
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
/* 提示信息 */
|
||
.tip-banner {
|
||
background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 50%, #fef3c7 100%);
|
||
border: 1rpx solid rgba(253, 230, 138, 0.5);
|
||
border-radius: 32rpx;
|
||
padding: 32rpx;
|
||
margin: 48rpx 32rpx 0;
|
||
display: flex;
|
||
gap: 24rpx;
|
||
align-items: flex-start;
|
||
|
||
.tip-icon {
|
||
font-size: 36rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tip-text {
|
||
font-size: 24rpx;
|
||
color: #92400e;
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
/* 底部安全距离 */
|
||
.safe-bottom {
|
||
height: 40rpx;
|
||
}
|
||
</style>
|