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-section">
            <image class="logo" src="/static/logo.png" mode="aspectFit" @error="handleImageError"></image>
            <text class="app-name">浠艾福</text>
            <text class="identity">您的专属家庭主动健康管理师</text>
            <text class="slogan">家里每个人的状态，你真的看见了？</text>
          </view>

          <!-- 理念卡 -->
          <view class="concept-card">
            <view class="concept-desc">
              不等问题发生，先一步<text class="concept-highlight">识别风险 · 主动干预 · 持续评估</text>，把全家健康管理融入每一天。
            </view>
            <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="dims-row">
            <view class="dim-tag dim-tag-body"><text>🌏</text><text>身·健康</text></view>
            <view class="dim-tag dim-tag-wisdom"><text>⚡</text><text>智·认知</text></view>
            <view class="dim-tag dim-tag-wealth"><text>💧</text><text>富·创富</text></view>
            <view class="dim-tag dim-tag-action"><text>🌿</text><text>行·和谐</text></view>
            <view class="dim-tag dim-tag-mind"><text>🔥</text><text>心·大爱</text></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>手机号快捷登录</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
      this.$nextTick(() => {
        setTimeout(() => {
          this.panelShow = true
        }, 10)
      })
    },
    close() {
      this.panelShow = false
      setTimeout(() => {
        this.visible = false
      }, 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: 9999;
  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: 85vh;
  max-height: 85vh;
  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-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0 8rpx;
}
.logo {
  width: 128rpx;
  height: 128rpx;
  border-radius: 24rpx;
}
.app-name {
  font-size: calc(44rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $facade-text-strong;
  margin-top: 16rpx;
}
.identity {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $brand-primary;
  margin-top: 8rpx;
}
.slogan {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $facade-text-muted;
  margin-top: 12rpx;
  text-align: center;
}

/* ===== 理念卡 ===== */
.concept-card {
  background: rgba(249, 115, 22, 0.08);
  border-radius: 24rpx;
  padding: 24rpx;
  margin-top: 28rpx;
}
.concept-desc {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $facade-text-deep;
  line-height: 1.6;
}
.concept-highlight {
  color: $brand-primary;
  font-weight: 600;
}
.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;  /* 箭头不被压缩 */
}

/* ===== 五维标签 ===== */
.dims-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;  /* 禁止换行，保持五维维度在一行 */
  margin-top: 24rpx;
  padding: 0 32rpx;  /* 左右留白，避免贴边 */
  box-sizing: border-box;
}
.dim-tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 999rpx;
  padding: 8rpx 14rpx;
  font-size: calc(22rpx * var(--font-scale, 1));
  color: $app-surface;
  margin: 0 8rpx;  /* 使用 margin 替代 gap，微信小程序不支持 gap */
  white-space: nowrap;
}
.dim-tag-body { background: $status-success; }
.dim-tag-wisdom { background: $dim-wisdom; }
.dim-tag-wealth { background: $dim-wealth; }
.dim-tag-action { background: #14b8a6; }
.dim-tag-mind { background: $status-danger; }

/* ===== 登录表单 ===== */
.login-form {
  margin-top: 32rpx;
}
.phone-btn {
  width: 100%;
  height: 96rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  color: $app-surface;
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
}
.phone-btn::after {
  border: none;
}
.phone-btn[disabled] {
  background: #e0d8cc !important;
  color: $text-ghost-soft !important;
}
.phone-btn-icon {
  margin-right: 8rpx;
}

/* ===== 暂不登录 ===== */
.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>