index.vue
5.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<template>
<view class="min-h-screen flex flex-col bg-white pb-16" style="background-color: #F9FAFB;">
<!-- Hero section with family name and background image -->
<view class="relative h-48">
<image src="https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="Family background" class="w-full h-full object-cover" />
<view class="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-5">
<view class="absolute top-4 right-4 text-white" @click="goToProfile">
<Setting size="24" />
</view>
<h1 class="text-white text-2xl font-bold">张爷爷的家庭</h1>
<p class="text-white opacity-90">每日走万步，全家一起行</p>
</view>
</view>
<!-- Today's steps section -->
<view class="px-5 py-6 bg-white rounded-xl shadow-md mx-4 mt-4">
<view class="flex justify-between items-center mb-1">
<span class="text-gray-500">今日</span>
</view>
<view class="flex justify-between items-center">
<view class="flex items-baseline">
<span class="text-4xl font-bold">
{{ todaySteps.toLocaleString() }}
</span>
<span class="ml-1 text-gray-500">步</span>
</view>
<view class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
一键收取
</view>
</view>
</view>
<!-- Points circles -->
<view class="flex justify-between px-5 py-6 my-4 bg-white rounded-xl shadow-md mx-4">
<PointsCollector ref="pointsCollectorRef" height="30vh" />
</view>
<!-- Family step ranking -->
<view class="p-5 bg-white rounded-xl shadow-md mx-4">
<view class="flex justify-between items-center mb-4">
<h2 class="font-medium text-lg">今日家庭步数排行</h2>
<span class="text-sm text-gray-500">
总计 {{ totalSteps.toLocaleString() }} 步
</span>
</view>
<view class="grid grid-cols-4 gap-2">
<view v-for="member in familyMembers" :key="member.id" class="flex flex-col items-center">
<image :src="member.avatar" :alt="member.name" class="w-16 h-16 rounded-full mb-1" />
<span class="text-sm text-gray-700">
{{ member.steps.toLocaleString() }}步
</span>
</view>
</view>
</view>
<!-- Photo button -->
<view class="px-5 mt-6">
<view class="w-full bg-blue-500 text-white py-3 rounded-lg flex items-center justify-center">
<Photograph size="20" class="mr-2" />
拍照留念，奖励积分
</view>
</view>
<!-- Family album -->
<view class="p-5 mt-6 mb-6 bg-white rounded-xl shadow-md mx-4">
<view class="flex justify-between items-center mb-2">
<h2 class="font-medium text-lg">家庭相册</h2>
<view class="text-blue-500 flex items-center" @click="goToActivities">
打开相册 <Right size="16" />
</view>
</view>
<p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
<view class="grid grid-cols-2 gap-3">
<view class="rounded-lg overflow-hidden">
<image src="https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="家庭活动照片" class="w-full h-32 object-cover" />
</view>
<view class="rounded-lg overflow-hidden">
<image src="https://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto" alt="家庭活动照片" class="w-full h-32 object-cover" />
</view>
</view>
</view>
<BottomNav />
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import Taro from '@tarojs/taro';
import { Setting, Photograph, Right } from '@nutui/icons-vue-taro';
import BottomNav from '../../components/BottomNav.vue';
import PointsCollector from '@/components/PointsCollector.vue'
const todaySteps = ref(2000);
const pointsCollectorRef = ref(null)
/**
* 触发积分收集组件的一键收取
*/
const handleCollectAll = () => {
if (pointsCollectorRef.value) {
pointsCollectorRef.value.collectAll()
}
}
// Mock data for family members
const familyMembers = ref([
{
id: 1,
name: '妈妈',
steps: 7000,
avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
},
{
id: 2,
name: '爸爸',
steps: 6000,
avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
},
{
id: 3,
name: '儿子',
steps: 5000,
avatar: 'https://randomuser.me/api/portraits/men/22.jpg'
},
{
id: 4,
name: '女儿',
steps: 4000,
avatar: 'https://randomuser.me/api/portraits/women/29.jpg'
}
]);
// Calculate total family steps
const totalSteps = computed(() =>
familyMembers.value.reduce((sum, member) => sum + member.steps, 0) + todaySteps.value
);
const handleSyncSteps = () => {
// In a real app, this would sync with a health API
// For demo purposes, we'll just log and do nothing
console.log('Syncing steps...');
};
const goToProfile = () => {
Taro.navigateTo({ url: '/pages/EditFamily/index' });
};
const goToActivities = () => {
};
</script>