|
|
@@ -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>
|