index.vue
4.33 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
<!--
* @Date: 2025-08-27 17:43:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-02 11:52:57
* @FilePath: /lls_program/src/pages/Welcome/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen flex flex-col bg-white">
<!-- Header -->
<!-- <header class="py-5 text-center">
<h1 class="text-xl font-bold">老来赛</h1>
</header> -->
<!-- Main content -->
<view class="flex-1 flex flex-col px-4 pb-20">
<!-- Hero Image -->
<view class="w-full mb-6">
<view class="w-full h-48 rounded-2xl overflow-hidden">
<image :src="welcomeHomeImg" alt="家庭在上海外滩散步" class="w-full h-full object-cover" />
</view>
</view>
<!-- Steps Section -->
<view class="mb-8">
<h2 class="text-xl font-bold mb-6">简单三步，开启健康生活</h2>
<view class="space-y-6">
<!-- Step 1 -->
<view class="flex items-center">
<view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
1
</view>
<view>
<h3 class="font-bold">创建家庭</h3>
<p class="text-gray-600 text-sm">
家长创建家庭，设置专属口令
</p>
</view>
</view>
<!-- Step 2 -->
<view class="flex items-center">
<view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
2
</view>
<view>
<h3 class="font-bold">邀请家人</h3>
<p class="text-gray-600 text-sm">分享口令，邀请家人加入</p>
</view>
</view>
<!-- Step 3 -->
<view class="flex items-center">
<view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
3
</view>
<view>
<h3 class="font-bold">同步步数，兑换好礼</h3>
<p class="text-gray-600 text-sm">
每日同步微信步数，兑换抵用券
</p>
</view>
</view>
</view>
</view>
<!-- Action Buttons -->
<view class="space-y-4 mt-auto">
<view v-if="canCreateFamily" @tap="handleNavigate('/pages/CreateFamily/index')" class="w-full py-3.5 bg-blue-500 text-white text-lg font-medium rounded-full text-center">
创建家庭
</view>
<view @tap="handleNavigate('/pages/JoinFamily/index')" class="w-full py-3.5 bg-white text-gray-800 text-lg font-medium rounded-full border border-gray-300 text-center" style="margin-bottom: 1rem;">
加入家庭
</view>
</view>
</view>
<!-- Bottom Navigation -->
<BottomNav />
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import BottomNav from '../../components/BottomNav.vue'; // 假设BottomNav组件已转换
import welcomeHomeImg from '../../assets/images/welcome_home.png';
// TODO: 等待真实接口获取用户年龄
const userAge = ref(null);
const userInfo = ref({
age: null,
name: null,
phone: null,
});
const canCreateFamily = computed(() => userAge.value >= 60);
const navigateTo = (url) => {
Taro.navigateTo({ url });
};
onMounted(() => {
// 模拟获取用户的个人信息
const userInfo = {
age: '1890-01-01',
name: '张三',
phone: '13800000000',
};
userInfo.value = userInfo;
// userInfo.age 是年月日的形式需要转成年龄
userInfo.value.age = new Date().getFullYear() - new Date(userInfo.value.age).getFullYear();
userAge.value = userInfo.value.age;
console.warn(userAge.value);
});
const handleNavigate = (url) => {
// TODO: 模拟检查个人信息是否完善
const hasProfile = true; // 假设未完善
if (!hasProfile) {
Taro.showModal({
title: '提示',
content: '参加活动需要完善个人信息',
cancelText: '关闭',
confirmText: '完善信息',
success: (res) => {
if (res.confirm) {
Taro.navigateTo({ url: '/pages/AddProfile/index' });
}
},
});
} else {
navigateTo(url);
}
};
</script>