bigDataApp/pages/privacy/privacy.vue

<template>
  <view class="privacy-container">
    <!-- 遮罩层 -->
    <view class="privacy-mask"></view>
    <!-- 弹窗卡片 -->
    <view class="privacy-content">
      <view class="privacy-title">{{ titleText }}</view>
      <view class="privacy-body">
        <view class="privacy-intro">
          {{ introText }}
          <text class="privacy-highlight">《用户服务与隐私协议》</text>
          。我们将遵循"最小必要"原则，仅收集实现服务所必需的信息。
        </view>
        <view class="privacy-list">
          <view class="privacy-item">
            <text class="privacy-dot">•</text>
            <text>微信昵称、头像 —— 用于展示您的身份</text>
          </view>
          <view class="privacy-item">
            <text class="privacy-dot">•</text>
            <text>手机号 —— 用于售后联系与账号安全</text>
          </view>
          <view class="privacy-item">
            <text class="privacy-dot">•</text>
            <text>位置信息 —— 用于推荐附近服务（需授权）</text>
          </view>
          <view class="privacy-item">
            <text class="privacy-dot">•</text>
            <text>设备信息 —— 用于保障服务稳定运行</text>
          </view>
        </view>
        <view class="privacy-note">
          我们不会主动向第三方共享您的个人信息，除非获得您的明确同意或法律法规要求。
        </view>
        <text class="privacy-link" @click="goAgreement"
          >查看完整协议详情 ></text
        >
      </view>
      <view class="privacy-footer">
        <view class="privacy-btn privacy-btn-cancel" @click="onDisagree">
          不同意
        </view>
        <view class="privacy-btn privacy-btn-confirm" @click="onAgree">
          同意并继续
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  markPrivacyAgreed,
  PRIVACY_STORAGE_KEY,
} from '@/util/privacyConfig.js';

export default {
  name: 'PrivacyPage',
  data() {
    return {
      // 是否为协议更新（老用户之前同意过旧版本）
      isUpdate: false,
    };
  },
  computed: {
    // 标题：首次显示"用户服务与隐私协议"，更新时显示"隐私协议已更新"
    titleText() {
      return this.isUpdate ? '隐私协议已更新' : '用户服务与隐私协议';
    },
    // 介绍文案
    introText() {
      return this.isUpdate
        ? '我们更新了隐私协议，请您认真阅读'
        : '欢迎使用本应用！在您首次使用前，请认真阅读';
    },
  },
  created() {
    // 判断是首次还是协议更新：
    // 有老数据 privacy_agreed: true（旧方案） 或 有旧版本号（新方案但版本不同）→ 视为更新
    const oldFlag = uni.getStorageSync('privacy_agreed');
    const oldVersion = uni.getStorageSync(PRIVACY_STORAGE_KEY);
    this.isUpdate = !!(oldFlag || (oldVersion && oldVersion.length > 0));
  },
  methods: {
    // 同意隐私协议
    onAgree() {
      // 存版本号（替换老数据）
      markPrivacyAgreed();
      // 清理老的 boolean 标志（如果存在）
      uni.removeStorageSync('privacy_agreed');

      uni.showToast({
        title: '已同意隐私协议',
        icon: 'none',
        duration: 1200,
      });
      setTimeout(() => {
        // #ifdef APP-PLUS
        // 通知 App.vue 执行全局初始化
        var app = getApp();
        if (app && app.doAfterPrivacy) {
          app.doAfterPrivacy();
        }
        // #endif
        // 跳回首页
        uni.reLaunch({
          url: '/pages/index/index',
        });
      }, 800);
    },
    // 不同意
    onDisagree() {
      uni.showModal({
        title: '提示',
        content: '您需要同意隐私协议才能使用本应用',
        confirmText: '再次查看',
        cancelText: '退出应用',
        success: (res) => {
          if (!res.confirm) {
            // 退出应用：App 端和小程序端分别处理
            // #ifdef APP-PLUS
            plus.runtime.quit();
            // #endif
            // #ifdef MP
            uni.showToast({
              title: '请同意隐私协议后重试',
              icon: 'none',
            });
            // #endif
          }
          // "再次查看"则什么也不做，弹窗仍在
        },
      });
    },
    // 查看完整协议
    goAgreement() {
      uni.navigateTo({
        url: '/pages/login/agreement',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.privacy-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.privacy-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
}

.privacy-content {
  position: relative;
  width: 80%;
  max-width: 620rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
}

.privacy-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  padding: 40rpx 40rpx 0;
}

.privacy-body {
  padding: 28rpx 40rpx 0;
}

.privacy-intro {
  font-size: 26rpx;
  color: #555555;
  line-height: 1.7;

  .privacy-highlight {
    color: #24b35d;
  }
}

.privacy-list {
  margin-top: 20rpx;

  .privacy-item {
    font-size: 24rpx;
    color: #666666;
    line-height: 2;

    .privacy-dot {
      color: #24b35d;
      margin-right: 6rpx;
    }
  }
}

.privacy-note {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #999999;
  line-height: 1.6;
}

.privacy-link {
  display: block;
  margin-top: 28rpx;
  font-size: 26rpx;
  color: #24b35d;
  text-align: center;
  padding: 10rpx 0;
}

.privacy-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 32rpx;

  .privacy-btn {
    flex: 1;
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 28rpx;

    &.privacy-btn-cancel {
      color: #999999;
      border-right: 1rpx solid #f0f0f0;
    }

    &.privacy-btn-confirm {
      color: #24b35d;
      font-weight: 500;
    }

    &:active {
      opacity: 0.7;
    }
  }
}
</style>