Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
lls_program
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-09-04 21:39:42 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
2008b4c23c8c36c87edbe93bfaad8694ad82b93c
2008b4c2
1 parent
f5f9484b
feat(Rewards): 添加积分攻略模块及展开收起功能
添加积分攻略模块,包含三种积分获取方式的卡片展示 实现查看全部和展开收起功能,提升用户体验
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
89 additions
and
2 deletions
src/pages/Rewards/index.vue
src/pages/Rewards/index.vue
View file @
2008b4c
<!--
* @Date: 2025-08-27 17:47:26
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-04
12:38:3
6
* @LastEditTime: 2025-09-04
21:38:5
6
* @FilePath: /lls_program/src/pages/Rewards/index.vue
* @Description: 文件描述
-->
...
...
@@ -19,6 +19,57 @@
</view>
<!-- Main content -->
<view class="bg-white rounded-t-3xl px-4 pt-5">
<!-- Points strategy section -->
<view v-if="!isCreator" class="mb-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-5 shadow-sm border border-blue-100">
<view class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">积分攻略</h3>
<view @tap="handleViewAll" class="text-blue-500 text-sm flex items-center hover:text-blue-600">
查看全部
<!-- <Right size="16" /> -->
</view>
</view>
<!-- Strategy cards -->
<view v-if="isStrategyExpanded" class="space-y-3 mb-4 transition-all duration-300">
<view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<My size="20" class="text-blue-500" />
</view>
<view>
<h4 class="font-medium">每日同步步数可获得积分</h4>
<p class="text-sm text-gray-600">
每100步可兑换1积分,每日上限200积分
</p>
</view>
</view>
<view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<My size="20" class="text-blue-500" />
</view>
<view>
<h4 class="font-medium">家人陪伴健步有奖励积分</h4>
<p class="text-sm text-gray-600">
一起健步晒合影每天可获得额外100积分
</p>
</view>
</view>
<view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
<view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<My size="20" class="text-blue-500" />
</view>
<view>
<h4 class="font-medium">邀请家人加入家庭,人数达标奖励</h4>
<p class="text-sm text-gray-600">
邀请的家人达到5位,获得500奖励积分
</p>
</view>
</view>
</view>
<!-- Expand/Collapse button at bottom -->
<view @tap="toggleStrategyExpand" class="flex justify-center items-center py-2 cursor-pointer hover:bg-blue-100 rounded-lg transition-colors">
<ArrowUp v-if="isStrategyExpanded" size="16" class="text-gray-500" />
<ArrowDown v-else size="16" class="text-gray-500" />
</view>
</view>
<!-- Quick exchange options -->
<!-- Search bar -->
<view class="mb-6">
...
...
@@ -76,7 +127,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import { ScreenLittle, Search2 } from '@nutui/icons-vue-taro';
import { ScreenLittle, Search2
, My, ArrowUp, ArrowDown
} from '@nutui/icons-vue-taro';
import { getUserProfileAPI } from '@/api/user';
import { getFamilyDashboardAPI } from '@/api/family';
...
...
@@ -86,6 +137,7 @@ const sortOrder = ref('desc'); // 'asc' or 'desc'
const totalPoints = ref(0);
const isCreator = ref(false);
const isStrategyExpanded = ref(false); // 积分攻略展开状态,默认收起
const sortedRewardItems = computed(() => {
let items = [...rewardItems.value];
...
...
@@ -161,6 +213,22 @@ const goToRewardDetail = (reward) => {
});
};
/**
* 处理查看全部积分攻略
*/
const handleViewAll = () => {
Taro.navigateTo({
url: '/pages/PointsList/index'
});
};
/**
* 切换积分攻略展开收起状态
*/
const toggleStrategyExpand = () => {
isStrategyExpanded.value = !isStrategyExpanded.value;
};
const initData = async () => {
// 获取用户信息,判断是否为创建者
try {
...
...
@@ -189,3 +257,22 @@ useDidShow(() => {
initData();
})
</script>
<style scoped>
/* 过渡动画 */
.transition-all {
transition: all 0.3s ease-in-out;
}
.duration-300 {
transition-duration: 300ms;
}
.cursor-pointer {
cursor: pointer;
}
.gap-3 {
gap: 0.75rem;
}
</style>
...
...
Please
register
or
login
to post a comment