ui更新

2026-01-18 19:00:13 +08:00
parent 9259bda54b
commit 7e05f5e76f
34 changed files with 4200 additions and 145 deletions
@@ -0,0 +1,182 @@
+<template>
+	<un-pages
+		:show-nav-bar="true"
+		nav-bar-title="创建家庭"
+		:show-back="true"
+	>
+		<view class="page-content">
+			<view class="form-section">
+				<view class="section-title">家庭名称</view>
+				<view class="input-wrapper">
+					<input
+						v-model="familyName"
+						placeholder="请输入家庭名称"
+						placeholder-style="color: #ccc"
+						maxlength="20"
+					/>
+					<text class="char-count">{{ familyName.length }}/20</text>
+				</view>
+			</view>
+
+			<view class="tips-section">
+				<view class="tip-item">
+					<uni-icons type="info" size="18" color="#667eea"></uni-icons>
+					<text class="tip-text">创建后您将成为家主，可以管理家庭成员</text>
+				</view>
+				<view class="tip-item">
+					<uni-icons type="info" size="18" color="#667eea"></uni-icons>
+					<text class="tip-text">每个用户只能创建或加入一个家庭</text>
+				</view>
+				<view class="tip-item">
+					<uni-icons type="info" size="18" color="#667eea"></uni-icons>
+					<text class="tip-text">创建家庭后，家庭成员可以查看和记录家庭账单</text>
+				</view>
+			</view>
+
+			<view class="submit-section">
+				<button class="submit-btn" @tap="handleCreate" :loading="loading">
+					创建家庭
+				</button>
+			</view>
+		</view>
+	</un-pages>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			familyName: '',
+			loading: false
+		}
+	},
+	methods: {
+		async handleCreate() {
+			if (!this.familyName.trim()) {
+				uni.showToast({
+					title: '请输入家庭名称',
+					icon: 'none'
+				})
+				return
+			}
+
+			this.loading = true
+
+			try {
+				const res = await this.$store.dispatch('family/createFamily', this.familyName.trim())
+				if (res.code === 200) {
+					uni.showToast({
+						title: '创建成功',
+						icon: 'success'
+					})
+					setTimeout(() => {
+						uni.navigateBack()
+					}, 1500)
+				} else {
+					uni.showToast({
+						title: res.message || '创建失败',
+						icon: 'none'
+					})
+				}
+			} catch (error) {
+				console.error('创建家庭失败', error)
+				uni.showToast({
+					title: '创建失败，请重试',
+					icon: 'none'
+				})
+			} finally {
+				this.loading = false
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+	padding: 30rpx;
+}
+
+.form-section {
+	background: #fff;
+	border-radius: 20rpx;
+	padding: 30rpx;
+	margin-bottom: 30rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+
+	.section-title {
+		font-size: 28rpx;
+		color: #666;
+		margin-bottom: 20rpx;
+	}
+
+	.input-wrapper {
+		position: relative;
+
+		input {
+			width: 100%;
+			height: 80rpx;
+			font-size: 28rpx;
+			color: #333;
+			padding: 0;
+		}
+
+		.char-count {
+			position: absolute;
+			right: 0;
+			bottom: -30rpx;
+			font-size: 22rpx;
+			color: #999;
+		}
+	}
+}
+
+.tips-section {
+	background: rgba(102, 126, 234, 0.05);
+	border-radius: 20rpx;
+	padding: 30rpx;
+	margin-bottom: 40rpx;
+
+	.tip-item {
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: 20rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		uni-icons {
+			margin-right: 12rpx;
+			margin-top: 4rpx;
+		}
+
+		.tip-text {
+			flex: 1;
+			font-size: 26rpx;
+			color: #666;
+			line-height: 1.6;
+		}
+	}
+}
+
+.submit-section {
+	margin-top: 60rpx;
+
+	.submit-btn {
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: #fff;
+		border: none;
+		border-radius: 50rpx;
+		height: 90rpx;
+		line-height: 90rpx;
+		font-size: 32rpx;
+		font-weight: bold;
+		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+
+		&::after {
+			border: none;
+		}
+	}
+}
+</style>