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' {
BottomNav: typeof import('./src/components/BottomNav.vue')['default']
GlassCard: typeof import('./src/components/GlassCard.vue')['default']
NavBar: typeof import('./src/components/navBar.vue')['default']
NutImage: typeof import('@nutui/nutui-taro')['Image']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutToast: typeof import('@nutui/nutui-taro')['Toast']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PointsCollector: typeof import('./src/components/PointsCollector.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
......
<template>
<view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2">
<view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 z-50">
<view
v-for="item in navItems"
:key="item.path"
......
/*
* @Date: 2025-08-27 18:25:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-27 20:02:27
* @FilePath: /lls_program/src/pages/CreateFamily/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '创建家庭'
}
......
This diff is collapsed. Click to expand it.
/*
* @Date: 2025-08-27 18:25:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-27 19:58:26
* @FilePath: /lls_program/src/pages/Welcome/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '老来赛',
navigationBarBackgroundColor: '#fff',
navigationBarTextStyle: 'black'
}
......
<!--
* @Date: 2025-08-27 17:43:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-27 18:21:32
* @LastEditTime: 2025-08-27 19:58:08
* @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">
<!-- <header class="py-5 text-center">
<h1 class="text-xl font-bold">老来赛</h1>
</header>
</header> -->
<!-- Main content -->
<view class="flex-1 flex flex-col px-4 pb-20">
<!-- Hero Image -->
......@@ -61,12 +61,12 @@
</view>
<!-- Action Buttons -->
<view class="space-y-4 mt-auto">
<button @click="navigateTo('/pages/CreateFamily/index')" class="w-full py-3.5 bg-blue-500 text-white text-lg font-medium rounded-full">
<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">
创建家庭
</button>
<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">
</view>
<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">
加入家庭
</button>
</view>
</view>
</view>
<!-- Bottom Navigation -->
......
<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>
/*
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-15 17:07:14
* @FilePath: /meihuaApp/src/utils/config.js
* @Description: 文件描述
* @LastEditTime: 2025-08-27 20:41:05
* @FilePath: /lls_program/src/utils/config.js
* @Description: 环境配置文件 - 根据小程序运行环境自动切换API地址
*/
// TAG：服务器环境配置
// const BASE_URL = "https://oa-dev.onwall.cn"; // 测试服务器
const BASE_URL = "https://oa.onwall.cn"; // 正式服务器
export default BASE_URL
/**
* 获取当前小程序运行环境对应的API地址
* @returns {string} 对应环境的API基础地址
*/
function getBaseUrl() {
// 获取当前小程序的运行环境
const accountInfo = wx.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
// 定义不同环境的服务器地址
let baseUrl = '';
switch (envVersion) {
case 'develop': // 开发版
baseUrl = 'https://oa-dev.onwall.cn';
break;
case 'trial': // 体验版
baseUrl = 'https://oa-dev.onwall.cn'; // 体验版暂时使用开发环境
break;
case 'release': // 正式版
baseUrl = 'https://jiangedianlv.onwall.cn';
break;
default: // 未知环境，默认使用正式版地址
baseUrl = 'https://jiangedianlv.onwall.cn';
}
// eslint-disable-next-line no-console
console.log(`当前小程序环境: ${envVersion}, 使用API地址: ${baseUrl}`);
return baseUrl;
}
// 导出API基础地址
const BASE_URL = getBaseUrl();
export default BASE_URL;
// 默认封面图片地址
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'
......