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">
        <image
          class="inviter-avatar"
          :src="(inviteInfo.inviterAvatar || '/static/default-avatar.png')"
          mode="aspectFill"
        ></image>
        <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 && !requestSubmitted">
        <!-- 已有家庭时显示合并选项 -->
        <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="handleSubmitRequest" :disabled="acceptLoading">
          <text v-if="!acceptLoading">提交申请</text>
          <text v-else>提交中...</text>
        </button>
      </view>

      <!-- 已提交申请，等待审批 -->
      <view class="pending-card" v-if="requestSubmitted && !accepted">
        <view class="pending-icon">🕐</view>
        <text class="pending-title">申请已提交</text>
        <text class="pending-text">等待邀请人确认</text>
        <text class="pending-hint">通常几分钟内会有回复</text>
        <button class="btn btn-outline btn-cancel-request" @tap="onCancelRequest">取消申请</button>
      </view>

      <!-- 申请被拒绝 -->
      <view class="error-area" v-if="requestSubmitted && requestStatus === 'rejected'">
        <view class="error-icon">❌</view>
        <text class="error-text-main">申请已被拒绝</text>
        <text class="error-text-sub" v-if="rejectMessage">{{ rejectMessage }}</text>
        <button class="btn btn-outline" @tap="goHome">返回首页</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="invite-card" v-if="!loading && refCode && !bindDone">
      <view class="invite-header">
        <view class="invite-icon">🤝</view>
        <text class="invite-title">推广绑定</text>
      </view>
      <view class="invite-body">
        <text class="member-count">推荐人推广码：{{ refCode }}</text>
      </view>
      <view class="action-area" v-if="isLoggedIn">
        <button class="btn btn-primary" @tap="bindRef" :disabled="bindLoading">
          <text v-if="!bindLoading">绑定推荐人</text>
          <text v-else>绑定中...</text>
        </button>
        <text class="tip-text">绑定后该推荐人后续消费时记入其家庭公共账户</text>
      </view>
      <view class="action-area" v-else>
        <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>

    <!-- 推广码绑定成功 -->
    <view class="invite-card" v-if="!loading && refCode && bindDone">
      <view class="success-area">
        <view class="success-icon">✅</view>
        <text class="success-text">绑定成功</text>
        <text class="success-sub">已绑定推荐人，可进入首页探索</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, checkUserFamily, bindReferral, requestJoinByCode, getMyPendingRequest, cancelMyJoinRequest } from '@/utils/api.js'

export default {
  data() {
    return {
      token: '',
      refCode: '',
      bindLoading: false,
      bindDone: false,
      loading: true,
      loginLoading: false,
      acceptLoading: false,
      isLoggedIn: false,
      inviteInfo: null,
      familyStatus: null,
      familyRoleIndex: 0,
      mergeFamily: false,
      accepted: false,
      requestSubmitted: false,
      requestStatus: '',
      requestId: null,
      requestTimer: null,
      rejectMessage: '',
      error: '',
      familyRoleOptions: ['爸爸', '妈妈', '爷爷', '奶奶', '姥爷', '姥姥', '其他']
    }
  },
  onLoad(query) {
    // token：优先从 query 参数，其次从场景值
    var token = query.token || query.inviteToken || ''
    if (!token) {
      var scene = query.scene
      if (scene) {
        var sceneDecoded = decodeURIComponent(scene)
        // 新格式：JSON 场景值 {"t":"TOKEN"}
        if (sceneDecoded.indexOf('{') === 0) {
          try {
            var sceneObj = JSON.parse(sceneDecoded)
            token = sceneObj.t || sceneObj.token || ''
          } catch (e) {
            token = ''
          }
        } else if (sceneDecoded.indexOf('invite=') === 0) {
          // 旧格式兼容
          token = sceneDecoded.substring(7)
        } else {
          token = sceneDecoded
        }
      }
    }

    // refCode：query.refCode 或场景值（ref=xxx）— 推广码注册绑定
    var refCode = query.refCode || ''
    if (!refCode && query.scene) {
      var refScene = decodeURIComponent(query.scene)
      if (refScene.indexOf('ref=') === 0) {
        refCode = refScene.substring(4)
      }
    }
    if (!token && !refCode) {
      this.error = '邀请链接无效'
      this.loading = false
      return
    }
    if (refCode) {
      // 推广码模式：仅存储 refCode，无需校验邀请
      this.refCode = refCode
      this.loading = false
      this.checkLoginStatus()
      return
    }
    this.token = token
    this.checkLoginStatus()
    this.validateToken()
  },
  onShow() {
    // 从登录页返回时重新检查登录状态
    if (this.token) {
      this.checkLoginStatus()
      if (!this.inviteInfo) {
        this.validateToken()
      }
    }
  },
  onUnload() {
    if (this.requestTimer) {
      clearInterval(this.requestTimer)
      this.requestTimer = null
    }
  },
  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
          // 已登录用户进入落地页：回显已有的待确认申请（避免重复显示提交表单）
          if (this.isLoggedIn) {
            this.checkExistingRequest()
          }
        } 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
          // 已在家庭内：同步 familyId 到 store（hasFamily getter 依赖）
          if (res.data.inFamily && res.data.familyId) {
            this.$store && this.$store.commit('setFamilyId', res.data.familyId)
            uni.setStorageSync('familyId', res.data.familyId)
          }
          // 如果已经在目标家庭，直接显示成功
          if (this.inviteInfo && this.familyStatus.inFamily && this.familyStatus.familyId === this.inviteInfo.familyId) {
            this.accepted = true
          } else if (!this.familyStatus.inFamily && this.inviteInfo) {
            // 已登录且不在目标家庭：回显已有申请状态，避免重复显示提交表单
            this.checkExistingRequest()
          }
        }
      } 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('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)
          that.$store && that.$store.commit('setFamilyId', data.familyId)

          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 handleSubmitRequest() {
      var familyRole = this.familyRoleOptions[this.familyRoleIndex] || ''
      if (!familyRole) {
        uni.showToast({ title: '请选择您在家庭中的身份', icon: 'none' })
        return
      }

      this.acceptLoading = true
      try {
        var res = await requestJoinByCode(this.token, familyRole)
        if (res && res.code === 200) {
          this.requestSubmitted = true
          this.requestStatus = 'pending'
          this.requestId = (res.data && res.data.id) || null
          this.acceptLoading = false
          uni.showToast({ title: '申请已提交，等待邀请人确认', icon: 'success' })
          this.startPolling()
        } else {
          this.acceptLoading = false
          uni.showToast({ title: res.message || '提交失败', icon: 'none' })
        }
      } catch (e) {
        this.acceptLoading = false
        uni.showToast({ title: e.message || '提交失败', icon: 'none' })
      }
    },
    startPolling() {
      var self = this
      if (this.requestTimer) {
        clearInterval(this.requestTimer)
      }
      this.requestTimer = setInterval(function() {
        if (self.accepted || self.requestStatus === 'rejected') {
          clearInterval(self.requestTimer)
          self.requestTimer = null
          return
        }
        self.checkRequestStatus()
      }, 5000)
    },
    async checkRequestStatus() {
      try {
        var res = await getMyPendingRequest()
        if (res && res.code === 200 && res.data) {
          var requestData = res.data
          this.requestId = requestData.id || this.requestId
          this.requestStatus = requestData.status || 'pending'
          if (this.requestStatus === 'approved') {
            clearInterval(this.requestTimer)
            this.requestTimer = null
            this.accepted = true
            uni.setStorageSync('familyId', this.inviteInfo.familyId)
            uni.setStorageSync('currentFamilyId', this.inviteInfo.familyId)
            // 审批通过后同步 familyId 到 store（hasFamily getter 依赖）
            this.$store && this.$store.commit('setFamilyId', this.inviteInfo.familyId)
            uni.showToast({ title: '加入家庭成功', icon: 'success' })
          } else if (this.requestStatus === 'rejected') {
            clearInterval(this.requestTimer)
            this.requestTimer = null
            this.rejectMessage = requestData.adminComment || ''
            uni.showToast({ title: '申请已被拒绝', icon: 'none' })
          }
        }
      } catch (e) {
        console.log('轮询请求状态失败', e)
      }
    },
    async checkExistingRequest() {
      // 回显守卫：仅在已登录、未提交、未成功且不在目标家庭时查询
      if (!this.inviteInfo || this.requestSubmitted || this.accepted) return
      if (this.familyStatus && this.familyStatus.inFamily && this.familyStatus.familyId === this.inviteInfo.familyId) return
      try {
        var res = await getMyPendingRequest()
        if (res && res.code === 200 && res.data && res.data.status === 'pending') {
          var requestData = res.data
          if (requestData.targetFamilyId && requestData.targetFamilyId !== this.inviteInfo.familyId) return
          this.requestId = requestData.id || null
          this.requestSubmitted = true
          this.requestStatus = 'pending'
          this.startPolling()
        }
      } catch (e) {
        console.log('回显加入申请状态失败', e)
      }
    },
    onCancelRequest() {
      var self = this
      uni.showModal({
        title: '取消申请',
        content: '确定取消本次加入申请吗？',
        success: function(mr) {
          if (mr.confirm) {
            self.doCancelRequest()
          }
        }
      })
    },
    async doCancelRequest() {
      if (!this.requestId) {
        uni.showToast({ title: '未找到申请记录', icon: 'none' })
        return
      }
      try {
        var res = await cancelMyJoinRequest(this.requestId)
        if (res && res.code === 200) {
          if (this.requestTimer) {
            clearInterval(this.requestTimer)
            this.requestTimer = null
          }
          this.requestSubmitted = false
          this.requestStatus = ''
          this.requestId = null
          uni.showToast({ title: '已取消申请', icon: 'success' })
        } else {
          uni.showToast({ title: (res && res.message) || '取消失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: e.message || '取消失败', icon: 'none' })
      }
    },
    goHome() {
      uni.reLaunch({ url: '/pages/index-home/index' })
    },
    async bindRef() {
      if (!this.refCode) {
        uni.showToast({ title: '推广码为空', icon: 'none' })
        return
      }
      this.bindLoading = true
      try {
        var res = await bindReferral(this.refCode)
        if (res && res.code === 200) {
          this.bindDone = true
          uni.showToast({ title: '绑定成功', icon: 'success' })
        } else {
          uni.showToast({ title: (res && res.message) || '绑定失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: e.message || '绑定失败', icon: 'none' })
      }
      this.bindLoading = false
    }
  }
}
</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;
}

.inviter-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 12rpx;
  background: #F1F5F9;
}

.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;
}

.pending-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 40rpx;
  background: #FEF3C7;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.pending-icon {
  font-size: 72rpx;
}

.pending-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #92400E;
}

.pending-text {
  font-size: 28rpx;
  color: #78350F;
}

.pending-hint {
  font-size: 24rpx;
  color: #A16207;
}

.error-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 40rpx;
  background: #FEF2F2;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.error-text-main {
  font-size: 32rpx;
  font-weight: 700;
  color: #DC2626;
}

.error-text-sub {
  font-size: 26rpx;
  color: #991B1B;
  margin-bottom: 20rpx;
}
</style>