ss_dc_wechat_mini_program/components/agreement/AgreementPopup.vue

<template>
  <view class="agreement-popup" :class="{ 'show': visible }">
    <view class="mask" @tap="handleClose"></view>
    <view class="popup-content">
      <!-- 头部 -->
      <view class="popup-header">
        <text class="title">{{ title }}</text>
        <text class="close-btn" @tap="handleClose">×</text>
      </view>
      
      <!-- 内容区域 -->
      <scroll-view class="content" scroll-y>
        <template v-if="type === 'user'">
          <view class="agreement-text">
            <view class="section">
              <view class="section-title">一、服务说明</view>
              <view class="paragraph">1.1 本平台是面向学生家长的智慧校园服务平台，旨在为家长提供便捷的教育信息服务。</view>
              <view class="paragraph">1.2 通过本平台，家长可以查看学生在校情况、与教师沟通、接收学校通知等。</view>
            </view>
            <view class="section">
              <view class="section-title">二、账号管理</view>
              <view class="paragraph">2.1 家长需要使用真实身份信息进行注册和认证，确保与学生的关系真实有效。</view>
              <view class="paragraph">2.2 每个账号仅限本人使用，请勿将账号信息泄露或转借他人。</view>
            </view>
            <view class="section">
              <view class="section-title">三、使用规范</view>
              <view class="paragraph">3.1 请遵守平台规则，文明发言，不得发布不当言论或有害信息。</view>
              <view class="paragraph">3.2 尊重教师和其他家长的隐私，未经允许不得传播他人信息。</view>
            </view>
            <view class="section">
              <view class="section-title">四、服务变更</view>
              <view class="paragraph">4.1 平台将持续优化服务内容，以提供更好的使用体验。</view>
              <view class="paragraph">4.2 如遇重大更新，平台会及时通知用户。</view>
            </view>
          </view>
        </template>
        
        <template v-else>
          <view class="agreement-text">
            <view class="section">
              <view class="section-title">非繁数智校园 小程序隐私保护指引</view>
              <view class="paragraph">本指引是非繁数智校园小程序开发者 非繁软件(广州)有限公司（以下简称"开发者"）为处理你的个人信息而制定。</view>
            </view>

            <view class="section">
              <view class="section-title">开发者处理的信息</view>
              <view class="paragraph">根据法律规定，开发者仅处理实现小程序功能所必要的信息。</view>
              <view class="paragraph">为了确定用户的真实性，便于用户关联自己的小孩，开发者将在获取你的明示同意后，收集你的微信昵称、头像。</view>
            </view>

            <view class="section">
              <view class="section-title">第三方插件信息/SDK信息</view>
              <view class="paragraph">为实现特定功能，开发者可能会接入由第三方提供的插件/SDK。第三方插件/SDK的个人信息处理规则，请以其公示的官方说明为准。非繁数智校园小程序接入的第三方插件信息/SDK信息如下：</view>
              <view class="paragraph">插件名称：VOIP通话</view>
              <view class="paragraph">插件提供方名称: 深圳市腾讯计算机系统有限公司</view>
              <view class="paragraph">为了音视频通话，开发者将在获得你的明示同意后，访问你的摄像头。</view>
              <view class="paragraph">为了音视频通话，开发者将在获得你的明示同意后，访问你的麦克风。</view>
              <view class="paragraph">为了保存组件截图，开发者将在获得你的明示同意后，使用你的相册（仅写入）权限。</view>
            </view>

            <view class="section">
              <view class="section-title">你的权益</view>
              <view class="paragraph">关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。</view>
              <view class="paragraph">若你在小程序中注册了账号，你可以通过以下方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。</view>
              <view class="paragraph">邮箱:1612356478@qq.com</view>
            </view>

            <view class="section">
              <view class="section-title">开发者对信息的存储</view>
              <view class="paragraph">开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。</view>
            </view>

            <view class="section">
              <view class="section-title">信息的使用规则</view>
              <view class="paragraph">开发者将会在本指引所明示的用途内使用收集的信息</view>
              <view class="paragraph">如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以小程序通知方式告知并征得你的明示同意。</view>
            </view>

            <view class="section">
              <view class="section-title">信息对外提供</view>
              <view class="paragraph">开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。</view>
              <view class="paragraph">开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。</view>
            </view>

            <view class="section">
              <view class="paragraph">你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。</view>
              <view class="paragraph">邮箱 : 1612356478@qq.com</view>
            </view>

            <view class="section">
              <view class="paragraph">更新日期：2025-05-07</view>
              <view class="paragraph">生效日期：2025-05-07</view>
            </view>

           
          </view>
        </template>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'user' // 'user' 或 'privacy'
  }
})

const emit = defineEmits(['update:visible'])

const title = computed(() => {
  return props.type === 'user' ? '用户服务协议' : '隐私政策'
})

const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.agreement-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99999;
  visibility: hidden;
}

.agreement-popup.show {
  visibility: visible;
}

.agreement-popup.show .popup-content {
  transform: translateY(0);
}

.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.popup-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 30rpx;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

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

.close-btn {
  font-size: 48rpx;
  color: #999;
  padding: 20rpx;
  margin: -20rpx;
}

.content {
  flex: 1;
  overflow: auto;
}

.agreement-text {
  padding-bottom: 40rpx;
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.paragraph {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 16rpx;
  text-align: justify;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>