From 8cfe8a2a0cf4f5f05a1ea703f240f2b6e915d7da Mon Sep 17 00:00:00 2001
From: tsui110 <tsui110@meiyou.email>
Date: Wed, 7 Jan 2026 14:50:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BA=86=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E6=8A=96=E9=9F=B3=E5=AE=A1=E6=A0=B8=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/login/index.vue | 319 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 316 insertions(+), 3 deletions(-)

diff --git a/pages/login/index.vue b/pages/login/index.vue
index 8754cf6..68d3bdd 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -83,7 +83,7 @@
             <button
               class="btn-primary btn-login"
               :disabled="loading"
-              @tap="handleDouyinLogin"
+              @tap="showDouyinPrivacyDialog"
             >
               {{ loading ? '登录中...' : '抖音登录' }}
             </button>
@@ -167,6 +167,55 @@
         <text class="copyright">© 2025 柯大鸭潮玩科技</text>
       </view>
     </view>
+
+    <!-- 抖音隐私说明弹窗 -->
+    <!-- #ifdef MP-TOUTIAO -->
+    <view v-if="showPrivacyModal" class="privacy-modal-overlay" @tap="closePrivacyModal">
+      <view class="privacy-modal-content" @tap.stop>
+        <view class="privacy-modal-header">
+          <view class="privacy-icon-wrap">
+            <text class="privacy-icon">🔒</text>
+          </view>
+          <text class="privacy-modal-title">隐私说明与登录提示</text>
+        </view>
+
+        <view class="privacy-modal-body">
+          <view class="privacy-section">
+            <text class="privacy-section-title">我们将获取以下信息：</text>
+            <view class="privacy-item-list">
+              <view class="privacy-item">
+                <text class="privacy-item-icon">👤</text>
+                <text class="privacy-item-text">抖音昵称和头像</text>
+              </view>
+              <view class="privacy-item">
+                <text class="privacy-item-icon">🆔</text>
+                <text class="privacy-item-text">抖音唯一标识（OpenID）</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="privacy-section">
+            <text class="privacy-section-title">使用目的：</text>
+            <text class="privacy-desc">· 创建您的账号并完成登录</text>
+            <text class="privacy-desc">· 保存您的账户信息和偏好设置</text>
+            <text class="privacy-desc">· 提供更好的个性化服务体验</text>
+          </view>
+
+          <view class="privacy-agreement-notice">
+            <text class="privacy-notice-text">点击「同意并继续」即表示您已阅读并同意</text>
+            <text class="privacy-notice-link" @tap.stop="toUserAgreement">《用户协议》</text>
+            <text class="privacy-notice-text">和</text>
+            <text class="privacy-notice-link" @tap.stop="toPurchaseAgreement">《隐私政策》</text>
+          </view>
+        </view>
+
+        <view class="privacy-modal-footer">
+          <button class="privacy-btn-cancel" @tap="closePrivacyModal">取消</button>
+          <button class="privacy-btn-confirm" @tap="confirmDouyinLogin">同意并继续</button>
+        </view>
+      </view>
+    </view>
+    <!-- #endif -->
   </view>
 </template>
 
@@ -181,6 +230,9 @@ import { vibrateShort } from '@/utils/vibrate.js'
 const loading = ref(false)
 const agreementChecked = ref(false)
 
+// 抖音隐私弹窗相关状态
+const showPrivacyModal = ref(false)
+
 // 登录模式：根据平台设置默认值
 // #ifdef MP-WEIXIN
 const loginMode = ref('wechat')
@@ -295,8 +347,29 @@ function toUserAgreement() {
   uni.navigateTo({ url: '/pages-user/agreement/user' }) 
 }
 
-function toPurchaseAgreement() { 
-  uni.navigateTo({ url: '/pages-user/agreement/purchase' }) 
+function toPurchaseAgreement() {
+  uni.navigateTo({ url: '/pages-user/agreement/purchase' })
+}
+
+// 显示抖音隐私说明弹窗（第一步）
+function showDouyinPrivacyDialog() {
+  if (!agreementChecked.value) {
+    uni.showToast({ title: '请先同意用户协议', icon: 'none' })
+    vibrateShort()
+    return
+  }
+  showPrivacyModal.value = true
+}
+
+// 关闭隐私弹窗
+function closePrivacyModal() {
+  showPrivacyModal.value = false
+}
+
+// 确认并开始抖音授权登录（第二步）
+function confirmDouyinLogin() {
+  showPrivacyModal.value = false
+  handleDouyinLogin()
 }
 
 // 发送验证码
@@ -1055,4 +1128,244 @@ function fetchExtraData(userId) {
   font-size: 22rpx;
   color: $text-tertiary;
 }
+
+/* ============================================
+   抖音隐私说明弹窗样式 - 抖音风格
+   ============================================ */
+
+.privacy-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(10rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 32rpx;
+  animation: fadeInDouyin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes fadeInDouyin {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.privacy-modal-content {
+  width: 100%;
+  max-width: 560rpx;
+  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 32rpx 80rpx rgba(0, 0, 0, 0.6);
+  border: 1rpx solid rgba(255, 255, 255, 0.1);
+  animation: scaleInDouyin 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes scaleInDouyin {
+  from {
+    transform: scale(0.9) translateY(40rpx);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+/* 弹窗头部 */
+.privacy-modal-header {
+  padding: 56rpx 40rpx 36rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(180deg, rgba(34, 34, 34, 1) 0%, rgba(26, 26, 26, 0) 100%);
+  position: relative;
+}
+
+.privacy-modal-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 40rpx;
+  right: 40rpx;
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+.privacy-icon-wrap {
+  width: 112rpx;
+  height: 112rpx;
+  background: linear-gradient(135deg, #00f2ea 0%, #ff0050 100%);
+  border-radius: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24rpx;
+  box-shadow: 0 16rpx 48rpx rgba(0, 242, 234, 0.3);
+  animation: pulseDouyin 2s ease-in-out infinite;
+}
+
+@keyframes pulseDouyin {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 16rpx 48rpx rgba(0, 242, 234, 0.3);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 20rpx 56rpx rgba(0, 242, 234, 0.4);
+  }
+}
+
+.privacy-icon {
+  font-size: 56rpx;
+  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
+}
+
+.privacy-modal-title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-align: center;
+  letter-spacing: 1rpx;
+}
+
+/* 弹窗内容 */
+.privacy-modal-body {
+  padding: 32rpx 40rpx 24rpx;
+  max-height: 560rpx;
+  overflow-y: auto;
+}
+
+.privacy-section {
+  margin-bottom: 32rpx;
+}
+
+.privacy-section-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 20rpx;
+  padding-left: 4rpx;
+}
+
+.privacy-item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.privacy-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 20rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.08);
+  transition: all 0.2s ease;
+}
+
+.privacy-item:active {
+  background: rgba(255, 255, 255, 0.08);
+  transform: scale(0.98);
+}
+
+.privacy-item-icon {
+  font-size: 36rpx;
+  margin-right: 16rpx;
+  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+}
+
+.privacy-item-text {
+  flex: 1;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+}
+
+.privacy-desc {
+  display: block;
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 2;
+  margin-bottom: 6rpx;
+  padding-left: 8rpx;
+}
+
+.privacy-agreement-notice {
+  padding: 28rpx 24rpx;
+  background: linear-gradient(135deg, rgba(0, 242, 234, 0.08) 0%, rgba(255, 0, 80, 0.08) 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid rgba(0, 242, 234, 0.15);
+  line-height: 2;
+}
+
+.privacy-notice-text {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.privacy-notice-link {
+  font-size: 24rpx;
+  color: #00f2ea;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 4rpx;
+}
+
+/* 弹窗底部 */
+.privacy-modal-footer {
+  display: flex;
+  gap: 20rpx;
+  padding: 24rpx 40rpx 40rpx;
+}
+
+.privacy-btn-cancel,
+.privacy-btn-confirm {
+  flex: 1;
+  height: 96rpx;
+  border-radius: 48rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  border: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::after {
+    border: none;
+  }
+}
+
+.privacy-btn-cancel {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.7);
+  border: 1rpx solid rgba(255, 255, 255, 0.1);
+
+  &:active {
+    background: rgba(255, 255, 255, 0.12);
+    transform: scale(0.96);
+  }
+}
+
+.privacy-btn-confirm {
+  background: linear-gradient(135deg, #00f2ea 0%, #00c4bd 100%);
+  color: #000000;
+  box-shadow: 0 8rpx 32rpx rgba(0, 242, 234, 0.4);
+
+  &:active {
+    opacity: 0.9;
+    transform: scale(0.96);
+    box-shadow: 0 4rpx 24rpx rgba(0, 242, 234, 0.3);
+  }
+}
 </style>