nongxiaoyu/pages/privacy/privacy-agreement.vue

<template>
  <view class="privacy-page">
    <view class="privacy-mask">
      <view class="privacy-dialog">
        <view class="dialog-header">
          <text class="dialog-title">农小禹用户协议和隐私政策</text>
        </view>
        
        <view class="dialog-content">
          <text class="content-text">
            请你务必审慎阅读、充分理解"用户协议"和"隐私政策"各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、位置信息等信息用于农事管理、设备监控等功能。
          </text>
          
          <view class="links-container">
            <text class="content-text">你可阅读</text>
            <text class="link-text" @click="viewTerms">《用户协议》</text>
            <text class="content-text">和</text>
            <text class="link-text" @click="viewPrivacy">《隐私政策》</text>
            <text class="content-text">了解详细信息。</text>
          </view>
          
          <text class="content-text">
            如果你同意，请点击"同意"开始使用我们的服务。
          </text>
        </view>
        
        <view class="dialog-footer">
          <view class="btn btn-cancel" @click="handleDisagree">
            <text class="btn-text">不同意</text>
          </view>
          <view class="btn btn-confirm" @click="handleAgree">
            <text class="btn-text btn-text-white">同意</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onBackPress } from '@dcloudio/uni-app'
import privacyUtil from "@/utils/privacy.js"

// 禁用返回按钮
onBackPress(() => {
  return true // 返回true表示阻止返回
})

// 页面加载
onLoad(() => {
  console.log('隐私协议页面加载')
})

// 同意协议
const handleAgree = () => {
  privacyUtil.setAgreement(true)
  console.log('用户同意隐私协议')
  
  // 发送全局事件通知应用初始化
  uni.$emit('privacyAgreed')
  
  // 返回首页
  uni.reLaunch({
    url: '/pages/dashboard/index'
  })
}

// 不同意协议
const handleDisagree = () => {
  uni.showModal({
    title: '确认提示',
    content: '进入应用前，你需先同意《用户协议》和《隐私政策》，否则将无法使用应用服务。',
    confirmText: '同意',
    cancelText: '退出应用',
    showCancel: true,
    success: (res) => {
      if (res.confirm) {
        privacyUtil.setAgreement(true)
        console.log('用户同意隐私协议')
        
        // 发送全局事件通知应用初始化
        uni.$emit('privacyAgreed')
        
        // 返回首页
        uni.reLaunch({
          url: '/pages/dashboard/index'
        })
      } else {
        // #ifdef APP-PLUS
        plus.runtime.quit()
        // #endif
        
        // #ifdef H5
        // H5环境无法直接退出，显示提示
        uni.showToast({
          title: '请关闭浏览器标签页',
          icon: 'none',
          duration: 3000
        })
        // #endif
      }
    }
  })
}

// 查看用户协议
const viewTerms = () => {
  uni.navigateTo({
    url: '/pages/login/terms'
  })
}

// 查看隐私政策
const viewPrivacy = () => {
  uni.navigateTo({
    url: '/pages/login/privacy'
  })
}
</script>

<style scoped>
.privacy-page {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.privacy-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.privacy-dialog {
  width: 620rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.dialog-header {
  padding: 40rpx 30rpx 20rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.dialog-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.dialog-content {
  padding: 30rpx;
  max-height: 500rpx;
  overflow-y: auto;
}

.content-text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.8;
}

.links-container {
  margin: 20rpx 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.link-text {
  font-size: 28rpx;
  color: #4CAF50;
  font-weight: bold;
  margin: 0 4rpx;
  text-decoration: underline;
}

.dialog-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.btn {
  flex: 1;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-cancel {
  background-color: #f5f5f5;
  border-right: 1rpx solid #e0e0e0;
}

.btn-confirm {
  background-color: #4CAF50;
}

.btn-text {
  font-size: 32rpx;
  color: #666666;
}

.btn-text-white {
  color: #ffffff;
  font-weight: bold;
}

.btn:active {
  opacity: 0.8;
}
</style>