Hooke / lls_program

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

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

添加家训口令输入框和头像上传功能
实现图片预览和删除功能
优化表单验证和错误提示
更新页面导航标题和样式
移除无用代码并添加环境配置
Inline Side-by-side
Showing 8 changed files with 292 additions and 214 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: '创建家庭'
}
......
<!--
* @Date: 2025-08-27 17:44:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-27 18:05:54
* @LastEditTime: 2025-08-27 20:51:19
* @FilePath: /lls_program/src/pages/CreateFamily/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen flex flex-col bg-white">
<AppHeader title="创建家庭" />
<!-- <AppHeader title="创建家庭" /> -->
<view class="flex-1 px-4 py-6 overflow-auto">
<view class="mb-6">
<p class="text-gray-600 mb-6">
<view class="text-gray-600 mb-6">
请填写家庭信息，创建您的专属家庭空间
</p>
</view>
<!-- 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>
<view class="block text-lg font-medium mb-2">家庭名称</view>
<input
type="text"
v-model="familyName"
......@@ -28,7 +28,7 @@
<!-- 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>
<view class="block text-lg font-medium mb-2">家庭介绍</view>
<textarea
v-model="familyIntro"
class="w-full text-gray-600 focus:outline-none resize-none"
......@@ -40,21 +40,21 @@
<!-- 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="block text-lg font-medium mb-4">家庭规模</view>
<view class="flex gap-2">
<button
<view
v-for="size in familySizes"
:key="size"
@click="familySize = size"
:class="[
'flex-1 py-3 rounded-lg border',
'flex-1 py-3 rounded-lg border text-center',
familySize === size
? 'border-blue-500 bg-blue-50 text-blue-500'
: 'border-gray-200 text-gray-700'
]"
>
{{ size }}
</button>
</view>
</view>
</view>
</view>
......@@ -62,103 +62,286 @@
<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
<view class="block text-lg font-medium">家训口令</view>
<!-- <view
@click="generateRandomMotto"
class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"
>
随机生成
</button>
</view> -->
</view>
<view class="flex gap-2 mb-4">
<view v-for="(char, index) in familyMotto" :key="index" class="flex-1">
<view class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-lg">
<input
type="text"
v-model="familyMotto[index]"
:placeholder="familyMottoPlaceholder[index]"
maxlength="1"
class="w-full aspect-square flex items-center justify-center text-center text-xl bg-gray-100 rounded-lg"
class="w-full h-full bg-transparent text-center"
style="font-size: 38rpx;"
/>
</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">
</view>
<!-- <view class="flex-1 flex items-center justify-center">
<view 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>
<view class="flex items-center text-sm text-gray-600">
<Bulb size="16" class="text-yellow-500 mr-2" />
<p>设置有意义的家训口令，便于家人记忆和加入</p>
<Tips size="16" class="text-yellow-500 mr-2" />
<view>设置有意义的家训口令，便于家人记忆和加入</view>
</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">
<view class="block text-lg font-medium mb-2">
家庭头像（选填）
</label>
</view>
<!-- 已上传头像显示 -->
<view v-if="familyAvatar" class="mb-4">
<view class="relative inline-block">
<image
:src="familyAvatar"
class="w-24 h-24 rounded-lg object-cover"
mode="aspectFill"
@tap="previewAvatar"
/>
<view
@click="deleteAvatar"
class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center"
>
<view class="text-white text-xs">×</view>
</view>
</view>
</view>
<!-- 上传区域 -->
<view
v-if="!familyAvatar"
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" />
<Photograph size="24" />
</view>
<view class="text-center text-gray-400">点击上传图片</view>
<view class="text-center text-gray-400 text-xs mt-1">
支持jpg、png格式，大小不超过10MB
</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
<view
@click="handleCreateFamily"
class="w-full py-4 bg-blue-500 text-white text-lg font-medium rounded-lg"
class="w-full py-4 bg-blue-500 text-white text-lg font-medium rounded-lg flex items-center justify-center"
>
创建家庭
</button>
</view>
</view>
<!-- 图片预览 -->
<nut-image-preview
v-model:show="previewVisible"
:images="previewImages"
:init-no="previewIndex"
@close="closePreview"
/>
</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';
import { Edit, Tips, Photograph } from '@nutui/icons-vue-taro';
// import AppHeader from '../../components/AppHeader.vue';
import BASE_URL from '@/utils/config';
const familyName = ref('');
const familyIntro = ref('');
const familySize = ref('3-5人');
const familyMotto = ref(['孝', '敬', '和', '睦']);
const familyMotto = ref(['', '', '', '']);
const familyMottoPlaceholder = ref(['孝', '敬', '和', '睦']);
const familySizes = ['2人', '3-5人', '6人+'];
const familyAvatar = ref('');
// 图片预览相关
const previewVisible = ref(false);
const previewImages = ref([]);
const previewIndex = ref(0);
// const generateRandomMotto = () => {
// // 在实际应用中，这里会生成随机家训
// // 目前仅作为演示使用预设值
// familyMotto.value = ['爱', '和', '勤', '俭'];
// };
const generateRandomMotto = () => {
// 在实际应用中，这里会生成随机家训
// 目前仅作为演示使用预设值
familyMotto.value = ['爱', '和', '勤', '俭'];
/**
* 显示提示信息
*/
const showToast = (message, type = 'success') => {
const icon = type === 'error' ? 'error' : 'success';
Taro.showToast({
title: message,
icon: icon,
duration: 2000
});
};
/**
* 选择图片
*/
const chooseImage = () => {
Taro.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePaths = res.tempFilePaths;
// 在实际应用中，这里会上传图片到服务器
console.log('选择的图片路径：', tempFilePaths);
success: function (res) {
const tempFilePath = res.tempFilePaths[0];
// 检查文件大小（10MB = 10 * 1024 * 1024 bytes）
Taro.getFileInfo({
filePath: tempFilePath,
success: function (fileInfo) {
if (fileInfo.size > 10 * 1024 * 1024) {
showToast('图片大小不能超过10MB', 'error');
return;
}
uploadImage(tempFilePath);
},
fail: function () {
// 如果获取文件信息失败，直接上传
uploadImage(tempFilePath);
}
});
},
fail: function () {
showToast('选择图片失败', 'error');
}
});
};
/**
* 上传图片到服务器
*/
const uploadImage = (filePath) => {
// 显示上传中提示
Taro.showLoading({
title: '上传中',
mask: true
});
wx.uploadFile({
url: BASE_URL + '/admin/?m=srv&a=upload',
filePath,
name: 'file',
header: {
'content-type': 'multipart/form-data',
},
success: function (res) {
let upload_data = JSON.parse(res.data);
Taro.hideLoading({
success: () => {
if (res.statusCode === 200) {
familyAvatar.value = upload_data.data.src;
showToast('上传成功', 'success');
} else {
showToast('服务器错误,稍后重试！', 'error');
}
},
});
},
fail: function (res) {
Taro.hideLoading({
success: () => {
showToast('上传失败,稍后重试！', 'error');
}
});
}
});
};
/**
* 预览头像
*/
const previewAvatar = () => {
if (!familyAvatar.value) {
showToast('暂无图片可预览', 'error');
return;
}
previewImages.value = [{ src: familyAvatar.value }];
previewIndex.value = 0;
previewVisible.value = true;
};
/**
* 删除头像
*/
const deleteAvatar = () => {
familyAvatar.value = '';
showToast('头像已删除', 'success');
};
/**
* 关闭预览
*/
const closePreview = () => {
previewVisible.value = false;
};
/**
* 表单验证
*/
const validateForm = () => {
if (!familyName.value.trim()) {
showToast('请输入家庭名称', 'error');
return false;
}
if (!familyIntro.value.trim()) {
showToast('请输入家庭介绍', 'error');
return false;
}
if (!familySize.value) {
showToast('请选择家庭规模', 'error');
return false;
}
// 检查家训口令是否完整填写
const mottoComplete = familyMotto.value.every(char => char.trim() !== '');
if (!mottoComplete) {
showToast('请完整填写家训口令', 'error');
return false;
}
return true;
};
/**
* 创建家庭
*/
const handleCreateFamily = () => {
if (!validateForm()) {
return;
}
// 在实际应用中，这里会调用API创建家庭
// 目前仅作为演示跳转到仪表盘页面
showToast('家庭创建成功', 'success');
setTimeout(() => {
Taro.navigateTo({
url: '/pages/Dashboard/index'
});
}, 1500);
};
</script>
......
/*
* @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'
......