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 @@
@@ -167,6 +167,55 @@
© 2025 柯大鸭潮玩科技
+
+
+
+
+
+
+
+
+
+ 我们将获取以下信息：
+
+
+ 👤
+ 抖音昵称和头像
+
+
+ 🆔
+ 抖音唯一标识（OpenID）
+
+
+
+
+
+ 使用目的：
+ · 创建您的账号并完成登录
+ · 保存您的账户信息和偏好设置
+ · 提供更好的个性化服务体验
+
+
+
+ 点击「同意并继续」即表示您已阅读并同意
+ 《用户协议》
+ 和
+ 《隐私政策》
+
+
+
+
+
+
+
@@ -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);
+ }
+}