Przeglądaj źródła

feat: 注册引导-无家庭引导组件接入核心页

Xiaogang Liao 1 miesiąc temu
rodzic
commit
b12ba21cb9

+ 133 - 0
cfc-frontend/components/family-guard.vue

@@ -0,0 +1,133 @@
+<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) {
+					uni.setStorageSync('familyId', res.data)
+					uni.setStorageSync('currentFamilyId', res.data)
+					// 同步 userInfo 缓存
+					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>

+ 7 - 1
cfc-frontend/pages/growth/index.vue

@@ -75,13 +75,19 @@
     <view class="footer-btn" v-if="!selectedChild && children.length > 0">
       <button class="btn-invite-guide" open-type="share" @click="prepareGuideInvite">邀请成长规划师</button>
     </view>
+
+    <family-guard ref="familyGuard" />
   </view>
 </template>
 
 <script>
 import { getChildren, getChildRecords } from '../../utils/api.js'
+import FamilyGuard from '../../components/family-guard.vue'
 
 export default {
+  components: {
+    FamilyGuard
+  },
   data() {
     return {
       loading: false,
@@ -174,7 +180,7 @@ export default {
       try {
         var familyId = uni.getStorageSync('familyId')
         if (!familyId) {
-          uni.showToast({ title: '您暂未加入家庭', icon: 'none' })
+          this.$refs.familyGuard.show()
           return
         }
         var userInfo = uni.getStorageSync('userInfo')

+ 7 - 1
cfc-frontend/pages/profile/components/ProfileMenu.vue

@@ -96,14 +96,20 @@
         </view>
       </view>
     </view>
+
+    <family-guard ref="familyGuard" />
   </view>
 </template>
 
 <script>
 import { setPassword, verifyPassword, updateMemberVisibility, getVisibleFamilyMembers, vendorStatus } from '../../../utils/api.js'
+import FamilyGuard from '../../../components/family-guard.vue'
 
 export default {
   name: 'ProfileMenu',
+  components: {
+    FamilyGuard
+  },
   props: {
     role: {
       type: String,
@@ -192,7 +198,7 @@ export default {
       const familyId = uni.getStorageSync('familyId')
       const userInfo = uni.getStorageSync('userInfo')
       if (!familyId) {
-        uni.showToast({ title: '您暂未加入家庭', icon: 'none' })
+        this.$refs.familyGuard.show()
         return
       }
       const items = ['👨‍👩‍👧‍👦 邀请家人', '👨‍🏫 邀请成长规划师']

+ 11 - 0
cfc-frontend/pages/wealth-sub/insurance-planning.vue

@@ -185,13 +185,18 @@
       <text class="empty-desc">请先加入家庭后再使用此功能</text>
     </view>
 
+    <family-guard ref="familyGuard" @created="loadPlanning" />
   </scroll-view>
 </template>
 
 <script>
 import { getInsurancePlanning } from '../../utils/api'
+import FamilyGuard from '../../components/family-guard.vue'
 
 export default {
+  components: {
+    FamilyGuard
+  },
   data() {
     return {
       loading: true,
@@ -219,6 +224,12 @@ export default {
   },
   methods: {
     async loadPlanning() {
+      var familyId = uni.getStorageSync('familyId')
+      if (!familyId) {
+        this.loading = false
+        this.$refs.familyGuard.show()
+        return
+      }
       this.loading = true
       try {
         const res = await getInsurancePlanning()