cfc/cfc-frontend/components/family-guard.vue

<template>
	<view v-if="visible" class="family-guard-mask" @click="close">
		<view class="family-guard-panel" @click.stop>
			<text class="family-guard-title">创建家庭后即可使用</text>
			<text class="family-guard-desc">家庭是任务、测评、成长档案等功能的基础，创建后邀请家人加入</text>
			<view class="family-guard-input-wrap">
				<input class="family-guard-input" v-model="familyName" placeholder="请输入家庭名称（默认：我的家庭）" maxlength="20" />
			</view>
			<view class="family-guard-actions">
				<button class="family-guard-btn family-guard-btn-primary" @click="doCreate" :loading="loading">去创建家庭</button>
				<button class="family-guard-btn family-guard-btn-plain" @click="close">暂不创建</button>
			</view>
		</view>
	</view>
</template>

<script>
import { createFamily } from '../utils/api.js'

export default {
	name: 'FamilyGuard',
	data() {
		return {
			visible: false,
			loading: false,
			familyName: ''
		}
	},
	methods: {
		show() {
			this.familyName = ''
			this.visible = true
		},
		close() {
			this.visible = false
		},
		doCreate() {
			var self = this
			var name = (this.familyName || '').trim() || '我的家庭'
			this.loading = true
			createFamily(name).then(function(res) {
				self.loading = false
				if (res && res.code === 200 && res.data) {
					// 同步 userInfo 缓存（familyId 由后端 JWT 属性注入，无需单独存储）
					var userInfo = uni.getStorageSync('userInfo') || {}
					userInfo.familyId = res.data
					uni.setStorageSync('userInfo', userInfo)
					self.visible = false
					uni.showToast({ title: '家庭创建成功', icon: 'success' })
					if (self.$listeners && self.$listeners.created) {
						self.$emit('created', res.data)
					}
				} else {
					uni.showToast({ title: (res && res.message) || '创建失败', icon: 'none' })
				}
			}).catch(function() {
				self.loading = false
				uni.showToast({ title: '网络异常', icon: 'none' })
			})
		}
	}
}
</script>

<style scoped>
.family-guard-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.family-guard-panel {
	width: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 40rpx 36rpx;
	display: flex;
	flex-direction: column;
}
.family-guard-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
}
.family-guard-desc {
	font-size: 26rpx;
	color: #999;
	margin-top: 16rpx;
	line-height: 1.6;
	text-align: center;
}
.family-guard-input-wrap {
	margin-top: 30rpx;
}
.family-guard-input {
	height: 80rpx;
	background: #f5f7fa;
	border-radius: 12rpx;
	padding: 0 24rpx;
	font-size: 28rpx;
}
.family-guard-actions {
	margin-top: 36rpx;
	display: flex;
	flex-direction: column;
}
.family-guard-btn {
	height: 84rpx;
	border-radius: 42rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 16rpx;
}
.family-guard-btn-primary {
	background: #F97316;
	color: #fff;
}
.family-guard-btn-plain {
	background: #f5f7fa;
	color: #666;
}
</style>