Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b4e5bc5d 1 parent ac8ec950

feat(家庭创建): 完善创建家庭页面功能并优化样式 

添加家训口令输入框和头像上传功能
实现图片预览和删除功能
优化表单验证和错误提示
更新页面导航标题和样式
移除无用代码并添加环境配置
Expand all
Inline Side-by-side
Showing 8 changed files with 69 additions and 174 deletions
...@@ -11,6 +11,10 @@ declare module 'vue' { ...@@ -11,6 +11,10 @@ declare module 'vue' {
11 BottomNav: typeof import('./src/components/BottomNav.vue')['default'] 11 BottomNav: typeof import('./src/components/BottomNav.vue')['default']
12 GlassCard: typeof import('./src/components/GlassCard.vue')['default'] 12 GlassCard: typeof import('./src/components/GlassCard.vue')['default']
13 NavBar: typeof import('./src/components/navBar.vue')['default'] 13 NavBar: typeof import('./src/components/navBar.vue')['default']
14 + NutImage: typeof import('@nutui/nutui-taro')['Image']
15 + NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
16 + NutInput: typeof import('@nutui/nutui-taro')['Input']
17 + NutToast: typeof import('@nutui/nutui-taro')['Toast']
14 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default'] 18 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
15 PointsCollector: typeof import('./src/components/PointsCollector.vue')['default'] 19 PointsCollector: typeof import('./src/components/PointsCollector.vue')['default']
16 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default'] 20 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
......
1 <template> 1 <template>
2 - <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2"> 2 + <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 z-50">
3 <view 3 <view
4 v-for="item in navItems" 4 v-for="item in navItems"
5 :key="item.path" 5 :key="item.path"
......
1 +/*
2 + * @Date: 2025-08-27 18:25:10
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-08-27 20:02:27
5 + * @FilePath: /lls_program/src/pages/CreateFamily/index.config.js
6 + * @Description: 文件描述
7 + */
1 export default { 8 export default {
2 - navigationBarTitleText: '首页' 9 + navigationBarTitleText: '创建家庭'
3 } 10 }
......
This diff is collapsed. Click to expand it.
1 +/*
2 + * @Date: 2025-08-27 18:25:54
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-08-27 19:58:26
5 + * @FilePath: /lls_program/src/pages/Welcome/index.config.js
6 + * @Description: 文件描述
7 + */
1 export default { 8 export default {
2 - navigationBarTitleText: '首页' 9 + navigationBarTitleText: '老来赛',
10 + navigationBarBackgroundColor: '#fff',
11 + navigationBarTextStyle: 'black'
3 } 12 }
......
1 <!-- 1 <!--
2 * @Date: 2025-08-27 17:43:45 2 * @Date: 2025-08-27 17:43:45
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-08-27 18:21:32 4 + * @LastEditTime: 2025-08-27 19:58:08
5 * @FilePath: /lls_program/src/pages/Welcome/index.vue 5 * @FilePath: /lls_program/src/pages/Welcome/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <view class="min-h-screen flex flex-col bg-white"> 9 <view class="min-h-screen flex flex-col bg-white">
10 <!-- Header --> 10 <!-- Header -->
11 - <header class="py-5 text-center"> 11 + <!-- <header class="py-5 text-center">
12 <h1 class="text-xl font-bold">老来赛</h1> 12 <h1 class="text-xl font-bold">老来赛</h1>
13 - </header> 13 + </header> -->
14 <!-- Main content --> 14 <!-- Main content -->
15 <view class="flex-1 flex flex-col px-4 pb-20"> 15 <view class="flex-1 flex flex-col px-4 pb-20">
16 <!-- Hero Image --> 16 <!-- Hero Image -->
...@@ -61,12 +61,12 @@ ...@@ -61,12 +61,12 @@
61 </view> 61 </view>
62 <!-- Action Buttons --> 62 <!-- Action Buttons -->
63 <view class="space-y-4 mt-auto"> 63 <view class="space-y-4 mt-auto">
64 - <button @click="navigateTo('/pages/CreateFamily/index')" class="w-full py-3.5 bg-blue-500 text-white text-lg font-medium rounded-full"> 64 + <view @click="navigateTo('/pages/CreateFamily/index')" class="w-full py-3.5 bg-blue-500 text-white text-lg font-medium rounded-full text-center">
65 创建家庭 65 创建家庭
66 - </button> 66 + </view>
67 - <button @click="navigateTo('/pages/JoinFamily/index')" class="w-full py-3.5 bg-white text-gray-800 text-lg font-medium rounded-full border border-gray-300"> 67 + <view @click="navigateTo('/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">
68 加入家庭 68 加入家庭
69 - </button> 69 + </view>
70 </view> 70 </view>
71 </view> 71 </view>
72 <!-- Bottom Navigation --> 72 <!-- Bottom Navigation -->
......
1 -<template>
2 - <view class="min-h-screen flex flex-col bg-white">
3 - <AppHeader title="创建家庭" />
4 - <view class="flex-1 px-4 py-6 overflow-auto">
5 - <view class="mb-6">
6 - <p class="text-gray-600 mb-6">
7 - 请填写家庭信息，创建您的专属家庭空间
8 - </p>
9 - <!-- Family Name -->
10 - <view class="mb-6">
11 - <view class="bg-white rounded-lg border border-gray-200 p-4">
12 - <label class="block text-lg font-medium mb-2">家庭名称</label>
13 - <input
14 - type="text"
15 - v-model="familyName"
16 - class="w-full text-gray-600 focus:outline-none"
17 - placeholder="请输入家庭名称"
18 - />
19 - </view>
20 - </view>
21 - <!-- Family Introduction -->
22 - <view class="mb-6">
23 - <view class="bg-white rounded-lg border border-gray-200 p-4">
24 - <label class="block text-lg font-medium mb-2">家庭介绍</label>
25 - <textarea
26 - v-model="familyIntro"
27 - class="w-full text-gray-600 focus:outline-none resize-none"
28 - placeholder="请输入您家庭的特色、成员特点等家庭标签"
29 - :rows="2"
30 - />
31 - </view>
32 - </view>
33 - <!-- Family Size -->
34 - <view class="mb-6">
35 - <view class="bg-white rounded-lg border border-gray-200 p-4">
36 - <label class="block text-lg font-medium mb-4">家庭规模</label>
37 - <view class="flex gap-2">
38 - <button
39 - v-for="size in familySizes"
40 - :key="size"
41 - @click="familySize = size"
42 - :class="[
43 - 'flex-1 py-3 rounded-lg border',
44 - familySize === size
45 - ? 'border-blue-500 bg-blue-50 text-blue-500'
46 - : 'border-gray-200 text-gray-700'
47 - ]"
48 - >
49 - {{ size }}
50 - </button>
51 - </view>
52 - </view>
53 - </view>
54 - <!-- Family Motto -->
55 - <view class="mb-6">
56 - <view class="bg-white rounded-lg border border-gray-200 p-4">
57 - <view class="flex justify-between items-center mb-4">
58 - <label class="block text-lg font-medium">家训口令</label>
59 - <button
60 - @click="generateRandomMotto"
61 - class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"
62 - >
63 - 随机生成
64 - </button>
65 - </view>
66 - <view class="flex gap-2 mb-4">
67 - <view v-for="(char, index) in familyMotto" :key="index" class="flex-1">
68 - <input
69 - type="text"
70 - v-model="familyMotto[index]"
71 - maxlength="1"
72 - class="w-full aspect-square flex items-center justify-center text-center text-xl bg-gray-100 rounded-lg"
73 - />
74 - </view>
75 - <view class="flex-1 flex items-center justify-center">
76 - <button class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-lg text-blue-500">
77 - <Edit size="20" />
78 - </button>
79 - </view>
80 - </view>
81 - <view class="flex items-center text-sm text-gray-600">
82 - <Bulb size="16" class="text-yellow-500 mr-2" />
83 - <p>设置有意义的家训口令，便于家人记忆和加入</p>
84 - </view>
85 - </view>
86 - </view>
87 - <!-- Family Avatar -->
88 - <view class="mb-10">
89 - <view class="bg-white rounded-lg border border-gray-200 p-4">
90 - <label class="block text-lg font-medium mb-2">
91 - 家庭头像（选填）
92 - </label>
93 - <view
94 - class="border border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center"
95 - @click="chooseImage"
96 - >
97 - <view class="text-gray-400 mb-2">
98 - <Image size="24" />
99 - </view>
100 - <p class="text-center text-gray-400">点击上传图片</p>
101 - <p class="text-center text-gray-400 text-xs mt-1">
102 - 支持jpg、png格式，大小不超过2MB
103 - </p>
104 - </view>
105 - </view>
106 - </view>
107 - </view>
108 - <!-- Submit Button -->
109 - <button
110 - @click="handleCreateFamily"
111 - class="w-full py-4 bg-blue-500 text-white text-lg font-medium rounded-lg"
112 - >
113 - 创建家庭
114 - </button>
115 - </view>
116 - </view>
117 -</template>
118 -
119 -<script setup>
120 -import { ref } from 'vue';
121 -import Taro from '@tarojs/taro';
122 -import { Edit, Bulb, Image } from '@nutui/icons-vue-taro';
123 -import AppHeader from '../../components/AppHeader.vue';
124 -
125 -const familyName = ref('');
126 -const familyIntro = ref('');
127 -const familySize = ref('3-5人');
128 -const familyMotto = ref(['孝', '敬', '和', '睦']);
129 -const familySizes = ['2人', '3-5人', '6人+'];
130 -
131 -const generateRandomMotto = () => {
132 - // 在实际应用中，这里会生成随机家训
133 - // 目前仅作为演示使用预设值
134 - familyMotto.value = ['爱', '和', '勤', '俭'];
135 -};
136 -
137 -const chooseImage = () => {
138 - Taro.chooseImage({
139 - count: 1,
140 - sizeType: ['compressed'],
141 - sourceType: ['album', 'camera'],
142 - success: (res) => {
143 - const tempFilePaths = res.tempFilePaths;
144 - // 在实际应用中，这里会上传图片到服务器
145 - console.log('选择的图片路径：', tempFilePaths);
146 - }
147 - });
148 -};
149 -
150 -const handleCreateFamily = () => {
151 - // 在实际应用中，这里会调用API创建家庭
152 - // 目前仅作为演示跳转到仪表盘页面
153 - Taro.navigateTo({
154 - url: '/pages/demo/Dashboard'
155 - });
156 -};
157 -</script>
1 /* 1 /*
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-15 17:07:14 4 + * @LastEditTime: 2025-08-27 20:41:05
5 - * @FilePath: /meihuaApp/src/utils/config.js 5 + * @FilePath: /lls_program/src/utils/config.js
6 - * @Description: 文件描述 6 + * @Description: 环境配置文件 - 根据小程序运行环境自动切换API地址
7 */ 7 */
8 -// TAG：服务器环境配置
9 -// const BASE_URL = "https://oa-dev.onwall.cn"; // 测试服务器
10 -const BASE_URL = "https://oa.onwall.cn"; // 正式服务器
11 8
12 -export default BASE_URL 9 +/**
10 + * 获取当前小程序运行环境对应的API地址
11 + * @returns {string} 对应环境的API基础地址
12 + */
13 +function getBaseUrl() {
14 + // 获取当前小程序的运行环境
15 + const accountInfo = wx.getAccountInfoSync();
16 + const envVersion = accountInfo.miniProgram.envVersion;
17 +
18 + // 定义不同环境的服务器地址
19 + let baseUrl = '';
20 + switch (envVersion) {
21 + case 'develop': // 开发版
22 + baseUrl = 'https://oa-dev.onwall.cn';
23 + break;
24 + case 'trial': // 体验版
25 + baseUrl = 'https://oa-dev.onwall.cn'; // 体验版暂时使用开发环境
26 + break;
27 + case 'release': // 正式版
28 + baseUrl = 'https://jiangedianlv.onwall.cn';
29 + break;
30 + default: // 未知环境，默认使用正式版地址
31 + baseUrl = 'https://jiangedianlv.onwall.cn';
32 + }
33 +
34 + // eslint-disable-next-line no-console
35 + console.log(`当前小程序环境: ${envVersion}, 使用API地址: ${baseUrl}`);
36 + return baseUrl;
37 +}
38 +
39 +// 导出API基础地址
40 +const BASE_URL = getBaseUrl();
41 +export default BASE_URL;
42 +
43 +// 默认封面图片地址
44 +export const DEFAULT_COVER_IMG = 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
......