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">
        <text class="tip-text">{{ tipText }}</text>
        <button class="btn btn-primary" @tap="goNext" :disabled="redirecting">
          <text v-if="!redirecting">{{ btnText }}</text>
          <text v-else>跳转中...</text>
        </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="goLoginWithRef" :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, validateFamilyCode, checkUserFamily, bindReferral } from '@/utils/api.js'

export default {
  data() {
    return {
      // 家庭邀请码（单一参数）
      familyInviteCode: '',
      // 推广码（兼容）
      refCode: '',
      bindLoading: false,
      bindDone: false,
      loading: true,
      loginLoading: false,
      redirecting: false,
      isLoggedIn: false,
      inviteInfo: null,
      familyStatus: null,
      error: '',
      // 动态文案
      tipText: '',
      btnText: ''
    }
  },
  onLoad(query) {
    this._onLoadFired = true
    query = query || {}

    // 0. 防御：若 URL 直接带 familyInviteCode（未经过本页分享链路的直达场景），
    //    确保本地 pendingFamilyInviteCode 已写入，供 user-edit 识别家庭邀请流程
    if (query.familyInviteCode) {
      uni.setStorageSync('pendingFamilyInviteCode', query.familyInviteCode)
    }
    
    // 1. 解析家庭邀请码（单一参数，兼容 inviteCode/familyInviteCode/token）
    //    token 为家庭成员管理页（family-members.vue）分享卡片/小程序码传入的邀请令牌，值与邀请码一致
    var familyInviteCode = query.familyInviteCode || query.inviteCode || query.token || ''
    if (!familyInviteCode && query.scene) {
      var sceneDecoded = decodeURIComponent(query.scene)
      // 支持 scene=invite=xxx（小程序码）、fam_xxx 或 ref=xxx 格式
      if (sceneDecoded.indexOf('invite=') === 0) {
        familyInviteCode = sceneDecoded.substring(7)
      } else if (sceneDecoded.indexOf('fam_') === 0) {
        familyInviteCode = sceneDecoded
      } else if (sceneDecoded.indexOf('ref=') === 0) {
        // ref=xxx 归为推广码
      } else if (sceneDecoded.length >= 6) {
        // 兜底：长度>=6 视为家庭邀请码
        familyInviteCode = familyInviteCode || sceneDecoded
      }
    }

    // 2. 解析推广码（兼容旧链接）
    var refCode = query.refCode || ''
    if (!refCode && query.scene) {
      var sceneDecoded = decodeURIComponent(query.scene)
      if (sceneDecoded.indexOf('ref=') === 0) {
        refCode = sceneDecoded.substring(4)
      }
    }

    // 3. 无任何有效参数 -> 首页
    if (!familyInviteCode && !refCode) {
      uni.reLaunch({ url: '/pages/index-home/index' })
      return
    }

    // 4. 有家庭邀请码 -> 存储并校验
    if (familyInviteCode) {
      this.familyInviteCode = familyInviteCode
      // 存入本地，供登录页/个人信息页使用
      uni.setStorageSync('pendingFamilyInviteCode', familyInviteCode)
      this.validateFamilyInvite(familyInviteCode)
      return
    }

    // 5. 仅有推广码 -> 走原有推广绑定流程
    this.refCode = refCode
    this.loading = false
    this.checkLoginStatus()
  },
  onShow() {
    // 首次进入：onLoad 已处理，跳过避免双发；从登录页返回时重新检查
    if (this._onLoadFired) {
      this._onLoadFired = false
      return
    }
    // 从登录页返回，重新检查
    if (this.familyInviteCode) {
      this.checkLoginStatus()
      if (!this.inviteInfo) {
        this.validateFamilyInvite(this.familyInviteCode)
      }
    } else if (this.refCode) {
      this.checkLoginStatus()
    }
  },
  methods: {
    checkLoginStatus() {
      var token = uni.getStorageSync('token')
      this.isLoggedIn = !!token
    },

    // 校验家庭邀请码有效性（仅获取家庭信息用于展示）
    // 兼容两种格式：32位hex为邀请令牌token（走 validateInvitation），否则为家庭短邀请码（走 validateFamilyCode）
    async validateFamilyInvite(code) {
      this.loading = true
      try {
        var isToken = /^[0-9a-fA-F]{32}$/.test(code)
        var res = isToken ? await validateInvitation(code) : await validateFamilyCode(code)
        if (res && res.code === 200) {
          this.inviteInfo = res.data
          // 已登录用户：检查是否已在目标家庭
          if (this.isLoggedIn) {
            await this.checkFamilyAndRedirect()
          } else {
            // 未登录：设置文案引导去登录
            this.setRedirectInfo(false)
            this.loading = false
          }
        } else {
          this.error = '邀请已失效'
          this.loading = false
        }
      } catch (e) {
        this.error = e.message || '邀请验证失败'
        this.loading = false
      }
    },

    // 检查家庭状态并决定跳转
    async checkFamilyAndRedirect() {
      try {
        var res = await checkUserFamily()
        if (res && res.data) {
          this.familyStatus = res.data
          // 同步 familyId
          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.setRedirectInfo(true)
            this.loading = false
            // 延迟跳转，让用户看到成功提示
            setTimeout(() => this.goHome(), 1000)
            return
          }
          // 不在目标家庭 -> 去完善个人信息页提交申请
          this.setRedirectInfo(false)
          this.loading = false
        } else {
          this.setRedirectInfo(false)
          this.loading = false
        }
      } catch (e) {
        console.log('检查家庭状态失败', e)
        this.setRedirectInfo(false)
        this.loading = false
      }
    },

    setRedirectInfo(isInTargetFamily) {
      if (isInTargetFamily) {
        this.tipText = '您已是该家庭成员'
        this.btnText = '进入首页'
      } else {
        this.tipText = '完善个人信息后将自动提交加入申请'
        this.btnText = '去完善信息'
      }
    },

    // 统一跳转逻辑
    goNext() {
      if (this.redirecting) return
      this.redirecting = true

      // 已在目标家庭 -> 直接进首页
      if (this.inviteInfo && this.familyStatus && this.familyStatus.inFamily &&
          this.familyStatus.familyId === this.inviteInfo.familyId) {
        this.redirecting = false
        this.goHome()
        return
      }

      // 未登录：先去登录（pendingFamilyInviteCode 已存本地，登录后新用户流程会提交加入申请）
      if (!this.isLoggedIn) {
        this.redirecting = false
        this.goLogin()
        return
      }

      // 已登录但不在目标家庭：跳个人信息完善页。
      // 需带 token+userId+autoParent=true，让 user-edit 进入 isNewUserFlow 模式，
      // 才会显示「家庭身份」下拉并在保存时提交加入申请（requestJoinByCode）
      this.goUserEdit()
    },

    // 已登录用户跳转个人信息完善页（新用户家庭邀请流程）
    goUserEdit() {
      var token = uni.getStorageSync('token') || ''
      var userId = uni.getStorageSync('userId') || ''
      uni.navigateTo({
        url: '/pages/user-edit/user-edit?token=' + encodeURIComponent(token) +
          '&userId=' + userId +
          '&autoParent=true' +
          '&familyInviteCode=' + encodeURIComponent(this.familyInviteCode || '')
      })
    },

    goHome() {
      uni.reLaunch({ url: '/pages/index-home/index' })
    },

    // 登录页跳转（带上邀请码）
    goLogin() {
      uni.navigateTo({ 
        url: '/pages/login/login?familyInviteCode=' + this.familyInviteCode 
      })
    },

    // 推广码场景：去登录
    goLoginWithRef() {
      uni.navigateTo({ 
        url: '/pages/login/login?refCode=' + this.refCode 
      })
    },

    // 推广码绑定
    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, 008);
  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;
  width: 100%;
}

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

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

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

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