cfc/cfc-frontend/pages/invite/join.vue

<template>
  <view class="page">
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <view class="loading-icon">⏳</view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 邀请信息卡片 -->
    <view class="invite-card" v-if="!loading && inviteInfo">
      <view class="invite-header">
        <view class="invite-icon">🏠</view>
        <text class="invite-title">家庭邀请</text>
      </view>

      <view class="invite-body">
        <text class="family-name">{{ inviteInfo.familyName }}</text>
        <text class="inviter" v-if="inviteInfo.inviterName">
          邀请人：{{ inviteInfo.inviterName }}
        </text>
        <text class="member-count">
          已有 {{ inviteInfo.memberCount }} 位家庭成员
        </text>
      </view>

      <!-- 未登录：显示登录按钮 -->
      <view class="action-area" v-if="!isLoggedIn">
        <button class="btn btn-primary" @tap="handleWechatLogin" :disabled="loginLoading">
          <text v-if="!loginLoading">微信一键登录并加入家庭</text>
          <text v-else>登录中...</text>
        </button>
        <text class="tip-text">登录后将自动加入此家庭</text>
      </view>

      <!-- 已登录：显示关系选择 -->
      <view class="action-area" v-if="isLoggedIn && !accepted">
        <!-- 已有家庭时显示合并选项 -->
        <view class="family-warning" v-if="familyStatus && familyStatus.inFamily">
          <text class="warning-icon">⚠️</text>
          <text class="warning-text">
            您当前已加入「{{ familyStatus.familyName }}」家庭，加入新家庭可选择合并（成员将一起迁移）或拒绝
          </text>
        </view>

        <!-- 关系选择 -->
        <view class="form-group">
          <text class="form-label">您在家庭中的身份</text>
          <picker @change="onFamilyRoleChange" :value="familyRoleIndex" :range="familyRoleOptions">
            <view class="picker-select">
              <text>{{ familyRoleOptions[familyRoleIndex] || '请选择您的身份' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>

        <!-- 已有家庭时显示合并勾选框 -->
        <view class="form-group" v-if="familyStatus && familyStatus.inFamily">
          <label class="checkbox-label" @tap="toggleMerge">
            <view class="checkbox" :class="{ checked: mergeFamily }">
              <text v-if="mergeFamily">✓</text>
            </view>
            <text>合并家庭（我的家庭成员将一起迁入新家庭）</text>
          </label>
        </view>

        <button class="btn btn-primary" @tap="handleAccept" :disabled="acceptLoading">
          <text v-if="!acceptLoading">加入家庭</text>
          <text v-else>加入中...</text>
        </button>
      </view>

      <!-- 加入成功 -->
      <view class="success-area" v-if="accepted">
        <view class="success-icon">✅</view>
        <text class="success-text">加入成功！</text>
        <text class="success-sub">欢迎加入「{{ inviteInfo.familyName }}」</text>
        <button class="btn btn-primary" @tap="goHome">进入首页</button>
      </view>
    </view>

    <!-- 邀请无效 -->
    <view class="error-card" v-if="!loading && error">
      <view class="error-icon">❌</view>
      <text class="error-text">{{ error }}</text>
      <button class="btn btn-outline" @tap="goHome">返回首页</button>
    </view>
  </view>
</template>

<script>
import { validateInvitation, acceptInvitation, checkUserFamily } from '@/utils/api.js'

export default {
  data() {
    return {
      token: '',
      loading: true,
      loginLoading: false,
      acceptLoading: false,
      isLoggedIn: false,
      inviteInfo: null,
      familyStatus: null,
      familyRoleIndex: 0,
      mergeFamily: false,
      accepted: false,
      error: '',
      familyRoleOptions: ['爸爸', '妈妈', '爷爷', '奶奶', '姥爷', '姥姥', '其他']
    }
  },
  onLoad(query) {
    // 获取 token：优先从 query 参数，其次从场景值
    var token = query.token || query.inviteToken || ''
    if (!token) {
      // 检查场景值（从小程序码扫码进入）
      var scene = query.scene
      if (scene) {
        var sceneDecoded = decodeURIComponent(scene)
        if (sceneDecoded.indexOf('invite=') === 0) {
          token = sceneDecoded.substring(7)
        }
      }
    }
    if (!token) {
      this.error = '邀请链接无效'
      this.loading = false
      return
    }
    this.token = token
    this.checkLoginStatus()
    this.validateToken()
  },
  onShow() {
    // 从登录页返回时重新检查登录状态
    if (this.token) {
      this.checkLoginStatus()
      if (!this.inviteInfo) {
        this.validateToken()
      }
    }
  },
  methods: {
    checkLoginStatus() {
      var token = uni.getStorageSync('token')
      this.isLoggedIn = !!token
      if (this.isLoggedIn) {
        this.checkFamily()
      }
    },
    async validateToken() {
      this.loading = true
      try {
        var res = await validateInvitation(this.token)
        if (res && res.data) {
          this.inviteInfo = res.data
        } else {
          this.error = '邀请已失效'
        }
      } catch (e) {
        this.error = e.message || '邀请验证失败'
      }
      this.loading = false
    },
    async checkFamily() {
      try {
        var res = await checkUserFamily()
        if (res && res.data) {
          this.familyStatus = res.data
          // 如果已经在目标家庭，直接显示成功
          if (this.familyStatus.inFamily && this.familyStatus.familyId === this.inviteInfo.familyId) {
            this.accepted = true
          }
        }
      } catch (e) {
        console.log('检查家庭状态失败', e)
      }
    },
    async handleWechatLogin() {
      this.loginLoading = true
      try {
        var that = this
        // 微信登录
        var loginRes = await new Promise(function(resolve, reject) {
          uni.login({
            provider: 'weixin',
            success: function(res) {
              resolve(res)
            },
            fail: function(err) {
              reject(err)
            }
          })
        })

        var code = loginRes.code
        if (!code) {
          uni.showToast({ title: '登录失败', icon: 'none' })
          this.loginLoading = false
          return
        }

        // 调起微信登录
        var { wechatLogin } = require('@/utils/api.js')
        var res = await wechatLogin(code, {})
        if (res && res.data) {
          // 保存登录信息
          var data = res.data
          uni.setStorageSync('token', data.token)
          uni.setStorageSync('userId', data.userId)
          uni.setStorageSync('role', data.role)
          uni.setStorageSync('familyId', data.familyId)
          uni.setStorageSync('currentRole', data.role)
          uni.setStorageSync('isSwitchedChild', false)
          uni.setStorageSync('isSwitchedTeacher', false)
          if (data.openid) {
            uni.setStorageSync('openid', data.openid)
          }
          that.$store && that.$store.commit('setToken', data.token)

          this.isLoggedIn = true
          uni.showToast({ title: '登录成功', icon: 'success' })
          // 重新检查家庭状态
          await this.checkFamily()
        }
      } catch (e) {
        uni.showToast({ title: '登录失败', icon: 'none' })
        console.log('微信登录失败', e)
      }
      this.loginLoading = false
    },
    onFamilyRoleChange(e) {
      this.familyRoleIndex = e.detail.value
    },
    toggleMerge() {
      this.mergeFamily = !this.mergeFamily
    },
    async handleAccept() {
      var familyRole = this.familyRoleOptions[this.familyRoleIndex] || ''
      if (!familyRole) {
        uni.showToast({ title: '请选择您在家庭中的身份', icon: 'none' })
        return
      }

      this.acceptLoading = true
      try {
        var res = await acceptInvitation(this.token, familyRole, this.mergeFamily)
        if (res && res.code === 200) {
          this.accepted = true
          // 更新缓存的 familyId
          uni.setStorageSync('familyId', this.inviteInfo.familyId)
          uni.showToast({ title: '加入家庭成功', icon: 'success' })
        } else {
          uni.showToast({ title: res.message || '加入失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: e.message || '加入失败', icon: 'none' })
      }
      this.acceptLoading = false
    },
    goHome() {
      uni.reLaunch({ url: '/pages/index/index' })
    }
  }
}
</script>

<style scoped>
.page {
  padding: 32rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.loading-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.loading-text {
  color: #666;
  font-size: 28rpx;
}

.invite-card {
  width: 100%;
  max-width: 600rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  margin-top: 10vh;
}

.invite-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}

.invite-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}

.invite-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1E293B;
}

.invite-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
  padding: 24rpx;
  background: #FFF7ED;
  border-radius: 16rpx;
}

.family-name {
  font-size: 40rpx;
  font-weight: 700;
  color: #F97316;
  margin-bottom: 12rpx;
}

.inviter {
  font-size: 28rpx;
  color: #64748B;
  margin-bottom: 8rpx;
}

.member-count {
  font-size: 24rpx;
  color: #94A3B8;
}

.action-area {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.family-warning {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  background: #FEF3C7;
  border-radius: 12rpx;
  gap: 12rpx;
}

.warning-icon {
  font-size: 32rpx;
  flex-shrink: 0;
}

.warning-text {
  font-size: 24rpx;
  color: #92400E;
  line-height: 1.5;
}

.form-group {
  margin-bottom: 20rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #374151;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.picker-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 28rpx;
  background: #F9FAFB;
  border: 2rpx solid #E5E7EB;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #1E293B;
}

.picker-arrow {
  font-size: 36rpx;
  color: #9CA3AF;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 26rpx;
  color: #4B5563;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #D1D5DB;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkbox.checked {
  background: #F97316;
  border-color: #F97316;
  color: #FFFFFF;
  font-size: 24rpx;
  font-weight: 700;
}

.btn {
  width: 100%;
  padding: 28rpx;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
  text-align: center;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #FFFFFF;
}

.btn-primary:disabled {
  opacity: 0.6;
}

.btn-outline {
  background: #FFFFFF;
  color: #F97316;
  border: 2rpx solid #F97316;
}

.tip-text {
  font-size: 24rpx;
  color: #94A3B8;
  text-align: center;
}

.success-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.success-icon {
  font-size: 80rpx;
}

.success-text {
  font-size: 36rpx;
  font-weight: 700;
  color: #16A34A;
}

.success-sub {
  font-size: 28rpx;
  color: #6B7280;
  margin-bottom: 24rpx;
}

.error-card {
  width: 100%;
  max-width: 600rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  margin-top: 10vh;
}

.error-icon {
  font-size: 80rpx;
}

.error-text {
  font-size: 30rpx;
  color: #6B7280;
  text-align: center;
}
</style>