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

<template>
  <view class="page" :style="{ '--font-scale': fontScale }">
    <!-- 通用登录浮层 -->
    <login-sheet ref="loginSheet" @success="onSheetLoginSuccess" />
    <!-- 加载中 -->
    <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'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  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.checkLoginStatus()
      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.loading = false
          this.redirecting = true
          this.goJoinForm()
          return
        } 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
      }

      // 已登录但不在目标家庭：跳加入家庭表单页。
      // join-form 填真实姓名 + 家庭身份后提交加入申请（requestJoinByCode）
      this.goJoinForm()
    },

    // 已登录用户跳转加入家庭表单页（接受家庭邀请流程）
    goJoinForm() {
      var inviteCode = this.familyInviteCode || uni.getStorageSync('pendingFamilyInviteCode') || ''
      uni.navigateTo({
        url: '/pages/invite/join-form?familyInviteCode=' + encodeURIComponent(inviteCode)
      })
    },

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

    // 打开登录浮层（家庭邀请码已存 pendingFamilyInviteCode，登录成功后走家庭邀请流程）
    goLogin() {
      this.openLoginSheet()
    },

    // 推广码场景：打开登录浮层（refCode 交给登录浮层静默绑定）
    goLoginWithRef() {
      this.openLoginSheet({ refCode: this.refCode })
    },

    // 登录成功：刷新登录态并重新校验邀请
    onLoginSuccess() {
      this.checkLoginStatus()
      if (this.familyInviteCode) {
        this.validateFamilyInvite(this.familyInviteCode)
      }
    },

    // 推广码绑定
    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 lang="scss">
.page {
  padding: 32rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, $uni-primary-pale 0%, $status-warning-soft 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: calc(80rpx * var(--font-scale, 1));
  margin-bottom: 20rpx;
}

.loading-text {
  color: $facade-text-body;
  font-size: calc(28rpx * var(--font-scale, 1));
}

.invite-card {
  width: 100%;
  max-width: 600rpx;
  background: $app-surface;
  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: calc(80rpx * var(--font-scale, 1));
  margin-bottom: 16rpx;
}

.invite-title {
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: 700;
  color: $uni-text-color;
}

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

.family-name {
  font-size: calc(40rpx * var(--font-scale, 1));
  font-weight: 700;
  color: $brand-primary;
  margin-bottom: 12rpx;
}

.inviter {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $uni-text-color-secondary;
  margin-bottom: 8rpx;
}

.inviter-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 12rpx;
  background: $facade-fill-slate;
}

.member-count {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $app-text-subtle;
}

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

.tip-text {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $app-text-subtle;
  text-align: center;
}

.btn {
  width: 100%;
  padding: 28rpx;
  border-radius: 16rpx;
  font-size: calc(30rpx * var(--font-scale, 1));
  font-weight: 600;
  text-align: center;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
  color: $app-surface;
}

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

.btn-outline {
  background: $app-surface;
  color: $brand-primary;
  border: 2rpx solid $brand-primary;
}

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

.success-icon {
  font-size: calc(80rpx * var(--font-scale, 1));
}

.success-text {
  font-size: calc(36rpx * var(--font-scale, 1));
  font-weight: 700;
  color: $status-success-strong-2;
}

.success-sub {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-slate;
  margin-bottom: 24rpx;
}

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

.error-icon {
  font-size: calc(80rpx * var(--font-scale, 1));
}

.error-text {
  font-size: calc(30rpx * var(--font-scale, 1));
  color: $facade-text-slate;
  text-align: center;
}
</style>