index.vue
5.57 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
153
154
155
156
157
<template>
<view class="min-h-screen flex flex-col bg-white">
<AppHeader title="创建家庭" />
<view class="flex-1 px-4 py-6 overflow-auto">
<view class="mb-6">
<p class="text-gray-600 mb-6">
请填写家庭信息，创建您的专属家庭空间
</p>
<!-- Family Name -->
<view class="mb-6">
<view class="bg-white rounded-lg border border-gray-200 p-4">
<label class="block text-lg font-medium mb-2">家庭名称</label>
<input
type="text"
v-model="familyName"
class="w-full text-gray-600 focus:outline-none"
placeholder="请输入家庭名称"
/>
</view>
</view>
<!-- Family Introduction -->
<view class="mb-6">
<view class="bg-white rounded-lg border border-gray-200 p-4">
<label class="block text-lg font-medium mb-2">家庭介绍</label>
<textarea
v-model="familyIntro"
class="w-full text-gray-600 focus:outline-none resize-none"
placeholder="请输入您家庭的特色、成员特点等家庭标签"
:rows="2"
/>
</view>
</view>
<!-- Family Size -->
<view class="mb-6">
<view class="bg-white rounded-lg border border-gray-200 p-4">
<label class="block text-lg font-medium mb-4">家庭规模</label>
<view class="flex gap-2">
<button
v-for="size in familySizes"
:key="size"
@click="familySize = size"
:class="[
'flex-1 py-3 rounded-lg border',
familySize === size
? 'border-blue-500 bg-blue-50 text-blue-500'
: 'border-gray-200 text-gray-700'
]"
>
{{ size }}
</button>
</view>
</view>
</view>
<!-- Family Motto -->
<view class="mb-6">
<view class="bg-white rounded-lg border border-gray-200 p-4">
<view class="flex justify-between items-center mb-4">
<label class="block text-lg font-medium">家训口令</label>
<button
@click="generateRandomMotto"
class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"
>
随机生成
</button>
</view>
<view class="flex gap-2 mb-4">
<view v-for="(char, index) in familyMotto" :key="index" class="flex-1">
<input
type="text"
v-model="familyMotto[index]"
maxlength="1"
class="w-full aspect-square flex items-center justify-center text-center text-xl bg-gray-100 rounded-lg"
/>
</view>
<view class="flex-1 flex items-center justify-center">
<button class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-lg text-blue-500">
<Edit size="20" />
</button>
</view>
</view>
<view class="flex items-center text-sm text-gray-600">
<Bulb size="16" class="text-yellow-500 mr-2" />
<p>设置有意义的家训口令，便于家人记忆和加入</p>
</view>
</view>
</view>
<!-- Family Avatar -->
<view class="mb-10">
<view class="bg-white rounded-lg border border-gray-200 p-4">
<label class="block text-lg font-medium mb-2">
家庭头像（选填）
</label>
<view
class="border border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center"
@click="chooseImage"
>
<view class="text-gray-400 mb-2">
<Image size="24" />
</view>
<p class="text-center text-gray-400">点击上传图片</p>
<p class="text-center text-gray-400 text-xs mt-1">
支持jpg、png格式，大小不超过2MB
</p>
</view>
</view>
</view>
</view>
<!-- Submit Button -->
<button
@click="handleCreateFamily"
class="w-full py-4 bg-blue-500 text-white text-lg font-medium rounded-lg"
>
创建家庭
</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { Edit, Bulb, Image } from '@nutui/icons-vue-taro';
import AppHeader from '../../components/AppHeader.vue';
const familyName = ref('');
const familyIntro = ref('');
const familySize = ref('3-5人');
const familyMotto = ref(['孝', '敬', '和', '睦']);
const familySizes = ['2人', '3-5人', '6人+'];
const generateRandomMotto = () => {
// 在实际应用中，这里会生成随机家训
// 目前仅作为演示使用预设值
familyMotto.value = ['爱', '和', '勤', '俭'];
};
const chooseImage = () => {
Taro.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePaths = res.tempFilePaths;
// 在实际应用中，这里会上传图片到服务器
console.log('选择的图片路径：', tempFilePaths);
}
});
};
const handleCreateFamily = () => {
// 在实际应用中，这里会调用API创建家庭
// 目前仅作为演示跳转到仪表盘页面
Taro.navigateTo({
url: '/pages/demo/Dashboard'
});
};
</script>