cfc/cfc-frontend/components/login-sheet.vue

<template>
  <view class="login-sheet-overlay" :class="{ 'login-sheet-overlay--visible': visible }" @click="handleOverlayClick">
    <view class="login-sheet-panel" :class="{ 'login-sheet-panel--show': panelShow }" @click.stop>
      <view class="login-sheet-header">
        <view class="login-sheet-title">欢迎回来</view>
      </view>
      <scroll-view scroll-y class="login-sheet-scroll" :show-scrollbar="false">
        <view class="login-sheet-content">
          <!-- 品牌区（左上角锁定版式，与首页一致） -->
          <view class="brand-bar">
            <image class="brand-logo" src="/static/logo.png" mode="aspectFit" @error="handleImageError"></image>
            <view class="brand-texts">
              <text class="brand-name">浠艾福</text>
              <text class="brand-tagline">您的专属家庭主动健康陪跑</text>
            </view>
          </view>

          <!-- 理念卡 -->
          <view class="concept-card">
            <view class="loop-row">
              <view class="loop-pill loop-pill-indigo"><text>🔍</text><text class="loop-pill-text">提前识别</text></view>
              <text class="loop-arrow">→</text>
              <view class="loop-pill loop-pill-green"><text>🛡️</text><text class="loop-pill-text">风险管控</text></view>
              <text class="loop-arrow">→</text>
              <view class="loop-pill loop-pill-amber"><text>⚡</text><text class="loop-pill-text">主动干预</text></view>
              <text class="loop-arrow">→</text>
              <view class="loop-pill loop-pill-red"><text>📊</text><text class="loop-pill-text">效果评估</text></view>
            </view>
          </view>

          <!-- 登录表单 -->
          <view class="login-form">
            <view class="phone-section">
              <button
                class="phone-btn"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber"
                @tap="onPhoneBtnTap"
                :loading="loading"
                :disabled="!agreed || loading || tapLock"
              >
                <text class="phone-btn-icon">📱</text>
                <text class="phone-btn-text">手机号快捷登录</text>
                <text class="phone-arrows">›››</text>
              </button>
            </view>

            <view class="agreement">
              <checkbox-group @change="onAgreementChange">
                <label>
                  <checkbox value="agree" :checked="agreed" />
                  <text class="agreement-text">我已阅读并同意</text>
                </label>
              </checkbox-group>
              <text class="link" @click="showAgreement">《用户协议》</text>
              <text class="agreement-text">和</text>
              <text class="link" @click="showPrivacy">《隐私政策》</text>
            </view>

            <view class="skip-section">
              <view class="skip-btn" @click="handleSkipLogin">暂不登录，先逛逛</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { wechatPhoneLogin } from '../utils/api.js'

export default {
  name: 'login-sheet',
  data() {
    return {
      visible: false,
      panelShow: false,
      loading: false,
      // tapLock：在「点击」瞬间上锁，用于关闭授权弹窗弹出前的连点窗口（见 onPhoneBtnTap）
      tapLock: false,
      agreed: false,
      nickname: '',
      avatar: '',
      redirectUrl: '',
      _tapLockTimer: null
    }
  },
  beforeDestroy() {
    this.clearTimers()
  },
  methods: {
    clearTimers() {
      if (this._tapLockTimer) {
        clearTimeout(this._tapLockTimer)
        this._tapLockTimer = null
      }
    },
    // 由宿主页面通过 mixin openLoginSheet() 调用，或 pages/login/login.vue 兜底壳调用
    open(options) {
      options = options || {}
      // 处理邀请码
      if (options.inviteCode) {
        uni.setStorageSync('inviteCode', options.inviteCode)
        uni.setStorageSync('inviteType', options.inviteType || 'family')
      }
      // 处理推荐码（refCode）
      if (options.refCode) {
        uni.setStorageSync('refCode', options.refCode)
      }
      // 存储登录后跳转地址
      if (options.redirect) {
        this.redirectUrl = decodeURIComponent(options.redirect)
      }
      this.visible = true
      // 通知宿主页面（页面可借此隐藏可能盖住浮层的原生 canvas 等）
      this.$emit('open')
      this.$nextTick(() => {
        setTimeout(() => {
          this.panelShow = true
        }, 10)
      })
    },
    close() {
      this.panelShow = false
      setTimeout(() => {
        this.visible = false
        // 浮层完全淡出后再通知，避免宿主提前恢复被隐藏的原生 canvas 造成闪烁
        this.$emit('close')
      }, 250)
    },
    handleOverlayClick() {
      this.close()
    },
    handleImageError() {
      console.log('Logo 加载失败，使用默认显示')
    },
    onAgreementChange(e) {
      this.agreed = e.detail.value.length > 0
    },
    showAgreement() {
      uni.navigateTo({
        url: '/pages/policy/agreement'
      })
    },
    showPrivacy() {
      uni.navigateTo({
        url: '/pages/policy/privacy'
      })
    },
    handleSkipLogin() {
      // 不登录直接关闭浮层，停留当前页
      this.close()
    },
    // 点击瞬间上锁，关闭「授权弹窗弹出前」的连点窗口
    onPhoneBtnTap() {
      if (this.loading || this.tapLock) return
      this.tapLock = true
      if (this._tapLockTimer) clearTimeout(this._tapLockTimer)
      this._tapLockTimer = setTimeout(() => {
        this.tapLock = false
        this._tapLockTimer = null
      }, 3000)
    },
    getPhoneNumber(e) {
      // 授权流程已结束，释放 tap 锁与兜底定时器，按钮恢复可点
      if (this._tapLockTimer) {
        clearTimeout(this._tapLockTimer)
        this._tapLockTimer = null
      }
      this.tapLock = false

      if (!this.agreed) {
        uni.showToast({ title: '请先同意用户协议', icon: 'none' })
        return
      }
      if (!e.detail || !e.detail.code) {
        uni.showToast({ title: '授权失败，请重试', icon: 'none' })
        return
      }
      var self = this
      self.loading = true
      // 点击授权时实时获取 login code（微信 code 一次性有效，不能复用旧 code）
      uni.login({
        provider: 'weixin',
        success: function(loginRes) {
          if (!loginRes.code) {
            uni.showToast({ title: '网络异常，请重试', icon: 'none' })
            self.loading = false
            return
          }
          wechatPhoneLogin({ code: loginRes.code, phoneCode: e.detail.code }).then(function(res) {
            self.completeLogin(res.data)
          }).catch(function(err) {
            uni.showToast({ title: err.message || '登录失败', icon: 'none' })
            self.loading = false
          })
        },
        fail: function() {
          uni.showToast({ title: '网络异常，请重试', icon: 'none' })
          self.loading = false
        }
      })
    },
    completeLogin(data) {
      if (!data) return
      // 写入登录态
      if (data.token) uni.setStorageSync('token', data.token)
      if (data.userId) uni.setStorageSync('userId', data.userId)
      if (data.openid) uni.setStorageSync('openid', data.openid)
      if (data.nickname) {
        this.nickname = data.nickname
        uni.setStorageSync('nickname', data.nickname)
      }
      if (data.avatar) {
        this.avatar = data.avatar
        uni.setStorageSync('avatar', data.avatar)
      }
      // 通知宿主页面（页面通过 @success="onSheetLoginSuccess" 刷新数据）
      this.$emit('success', data)
      // 关闭浮层，停留当前页
      this.close()
    }
  }
}
</script>

<style scoped lang="scss">
/* ===== 浮层遮罩 ===== */
.login-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.login-sheet-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* ===== 底部面板 ===== */
.login-sheet-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60vh;
  max-height: 65vh;
  background: linear-gradient(180deg, #fffaf3 0%, #fff3e4 100%);
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.login-sheet-panel--show {
  transform: translateY(0);
}

.login-sheet-header {
  padding: 24rpx 32rpx 8rpx;
  display: flex;
  justify-content: center;
}
.login-sheet-title {
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $facade-text-strong;
}

/* ===== 滚动区域 ===== */
.login-sheet-scroll {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

.login-sheet-content {
  padding: 24rpx 48rpx 60rpx;
  box-sizing: border-box;
}

/* ===== 品牌区（左上角锁定版式，与首页一致） ===== */
.brand-bar {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 4rpx 0;
  box-sizing: border-box;
}
.brand-logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  background: $app-surface;
  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.18);
  flex-shrink: 0;
}
.brand-texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-left: 20rpx;
  border-left: 2rpx solid rgba($brand-primary, 0.28);
}
.brand-name {
  font-size: calc(38rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $facade-text-strong;
  letter-spacing: 3rpx;
  line-height: 1.2;
}
.brand-tagline {
  display: block;
  font-size: calc(22rpx * var(--font-scale, 1));
  font-weight: 500;
  color: $brand-primary-deep;
  margin-top: 6rpx;
  letter-spacing: 1rpx;
  line-height: 1.2;
  white-space: nowrap;
}

/* ===== 理念卡 ===== */
.concept-card {
  background: rgba(249, 115, 22, 0.08);
  border-radius: 24rpx;
  padding: 24rpx;
  margin-top: 28rpx;
}
.loop-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 16rpx;
  flex-wrap: nowrap;  /* 禁止换行，确保四步/五维在一行 */
  margin-bottom: 16rpx;
}
.loop-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 999rpx;
  padding: 6rpx 12rpx;
  font-size: calc(22rpx * var(--font-scale, 1));
  flex-shrink: 0;  /* 防止被压缩导致文本换行 */
  white-space: nowrap;
}
.loop-pill-indigo { background: rgba(99, 102, 241, 0.12); color: $dim-wisdom; }
.loop-pill-green { background: rgba(16, 185, 129, 0.12); color: $status-success; }
.loop-pill-amber { background: rgba(245, 158, 11, 0.12); color: $dim-wealth; }
.loop-pill-red { background: rgba(239, 68, 68, 0.12); color: $status-danger; }
.loop-pill-text {
  margin-left: 4rpx;
  white-space: nowrap;  /* 禁止四字步骤文本换行 */
}
.loop-arrow {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $facade-text-ghost-light;
  padding: 0 2rpx;
  flex-shrink: 0;  /* 箭头不被压缩 */
}

/* 轨道环：缓慢旋转，呼应 Web 端虚线轨道 */
.orbit-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 240rpx; height: 240rpx;
  margin-left: -120rpx; margin-top: -120rpx;
  border: 2rpx dashed rgba(194, 112, 61, 0.35);
  border-radius: 50%;
  box-sizing: border-box;
  animation: orbitRingSpin 24s linear infinite;
}
@keyframes orbitRingSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 中心"家"徽章：金色脉冲，呼应 Web 端中心节点 */
.orbit-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 84rpx; height: 84rpx;
  margin-left: -42rpx; margin-top: -42rpx;
  border-radius: 50%;
  background: #F59E0B;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: calc(36rpx * var(--font-scale, 1)); font-weight: 700;
  box-shadow: 0 0 20rpx rgba(245, 158, 11, 0.4);
  animation: orbitCenterPulse 3s ease-in-out infinite;
  z-index: 3;
}
@keyframes orbitCenterPulse {
  0%, 100% { box-shadow: 0 0 20rpx rgba(245, 158, 11, 0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 36rpx rgba(245, 158, 11, 0.6); transform: scale(1.06); }
}
/* 五维公转节点：绕中心旋转，文字保持正立 */
.orbit-node {
  position: absolute;
  left: 50%; top: 50%;
  width: 76rpx; height: 76rpx;
  margin-left: -38rpx; margin-top: -38rpx;
  border-radius: 50%;
  background: var(--node-color);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  z-index: 2;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.orbit-node-char { line-height: 1; }
/* 五节点：颜色 + 起始角度 + 错峰延迟，与 Web 端一致 */
.node-0 { --node-color: #FF8C42; animation-name: orbitNode0; animation-delay: 0s; }    /* 身 */
.node-1 { --node-color: #1677FF; animation-name: orbitNode1; animation-delay: -3s; }   /* 智 */
.node-2 { --node-color: #F59E0B; animation-name: orbitNode2; animation-delay: -6s; }   /* 富 */
.node-3 { --node-color: #10B981; animation-name: orbitNode3; animation-delay: -9s; }   /* 行 */
.node-4 { --node-color: #FF6B9D; animation-name: orbitNode4; animation-delay: -12s; }  /* 心 */

@keyframes orbitNode0 {
  0%   { transform: rotate(0deg)   translateX(120rpx) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120rpx) rotate(-360deg); }
}
@keyframes orbitNode1 {
  0%   { transform: rotate(72deg)   translateX(120rpx) rotate(-72deg); }
  100% { transform: rotate(432deg)  translateX(120rpx) rotate(-432deg); }
}
@keyframes orbitNode2 {
  0%   { transform: rotate(144deg)  translateX(120rpx) rotate(-144deg); }
  100% { transform: rotate(504deg)  translateX(120rpx) rotate(-504deg); }
}
@keyframes orbitNode3 {
  0%   { transform: rotate(216deg)  translateX(120rpx) rotate(-216deg); }
  100% { transform: rotate(576deg)  translateX(120rpx) rotate(-576deg); }
}
@keyframes orbitNode4 {
  0%   { transform: rotate(288deg)  translateX(120rpx) rotate(-288deg); }
  100% { transform: rotate(648deg)  translateX(120rpx) rotate(-648deg); }
}

/* ===== 登录表单 ===== */
.login-form {
  margin-top: 32rpx;
}
.phone-btn {
  width: 100%;
  height: 82rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, #FFC24A 0%, #FFA726 100%);
  color: #14458F;
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 8rpx 20rpx rgba(255, 167, 38, 0.32);
}
.phone-btn::after {
  border: none;
}
.phone-btn[disabled] {
  background: #FFEFD0 !important;
  color: #B57E2A !important;
}
.phone-btn-icon {
  margin-right: 8rpx;
}
.phone-btn-text {
  color: #000000;
}
.phone-arrows {
  margin-left: 10rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  color: #000000;
  animation: arrowBlink 1s ease-in-out infinite;
}
@keyframes arrowBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

/* ===== 暂不登录 ===== */
.skip-section {
  display: flex;
  justify-content: center;
  margin-top: 24rpx;
}
.skip-btn {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $facade-text-muted;
  text-decoration: underline;
}

/* ===== 协议 ===== */
.agreement {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24rpx;
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $facade-text-muted;
}
.link {
  color: $brand-primary;
}
</style>