bigDataApp/pages/login/agreement.vue

<template>
  <view class="agreement-page">
    <view class="agreement-title">用户服务与隐私协议</view>
    <view class="agreement-meta">
      <view class="meta-version">版本：V2.0</view>
      <view class="meta-date">更新日期：2026-09-14</view>
      <view class="meta-effective">生效日期：2026-09-14</view>
    </view>
    <view class="agreement-intro">
      欢迎使用本小程序！您在使用前需同意本协议。我们致力于为您提供优质服务，同时依法保障您的个人信息权益。您应妥善保管账号信息，并对账号下的一切行为负责。
    </view>

    <view class="agreement-summary">
      <view class="summary-title">一图读懂：信息收集概览</view>
      <view class="summary-content">
        我们深知个人信息对您的重要性，并承诺依法保护您的隐私。我们遵循"最小必要"原则收集信息，以下为核心信息一览表：
      </view>
      <view class="summary-table">
        <view class="table-row table-header">
          <view class="col-type">信息类型</view>
          <view class="col-purpose">使用目的</view>
          <view class="col-auth">授权类型</view>
        </view>
        <view class="table-row" v-for="(item, i) in summary" :key="i">
          <view class="col-type">{{ item.name }}</view>
          <view class="col-purpose">{{ item.desc }}</view>
          <view class="col-auth">
            <view
              class="auth-tag"
              :class="
                item.authType === '必要' ? 'auth-required' : 'auth-optional'
              "
              >{{ item.authType }}</view
            >
          </view>
        </view>
      </view>
      <view class="summary-footer">
        我们不会主动向第三方共享您的个人信息，除非获得您的明确同意或法律法规要求。"可选"授权拒绝后不影响其他功能的正常使用。
      </view>
    </view>

    <view
      class="agreement-section"
      v-for="(item, index) in sections"
      :key="index"
    >
      <view class="section-title">{{ item.title }}</view>
      <view class="section-content">
        <template v-if="Array.isArray(item.content)">
          <view
            class="content-line"
            v-for="(line, i) in item.content"
            :key="i"
            >{{ line }}</view
          >
        </template>
        <text v-else>{{ item.content }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      summary: [
        {
          name: '微信昵称、头像',
          desc: '展示您的身份',
          authType: '必要',
        },
        {
          name: '手机号',
          desc: '售后联系与账号安全',
          authType: '必要',
        },
        {
          name: '位置信息',
          desc: '推荐附近服务',
          authType: '可选',
        },
        {
          name: '设备信息',
          desc: '保障服务稳定运行',
          authType: '必要',
        },
      ],
      sections: [
        {
          title: '一、协议的确认与账号安全',
          content:
            '本协议是您与本小程序运营者之间关于使用本小程序服务的约定。您在开始使用本小程序服务前，请务必仔细阅读并充分理解本协议全部内容，点击"同意"或实际使用本小程序服务即表示您已阅读并同意本协议。您应妥善保管账号信息，不得将账号出借、转让或授权他人使用，并对账号下的一切行为负责。如发现账号被他人盗用或存在其他安全问题，请立即与我们联系。',
        },
        {
          title: '二、我们收集的信息',
          content: [
            '我们遵循"最小必要"与"目的明确"原则，仅收集实现服务所必需的信息。以下为各类信息的收集目的、授权类型及拒绝授权的影响：',
            '1. 微信昵称、头像【必要授权】：在您授权后获取，用于在小程序内展示您的身份；拒绝授权将无法展示您的个性化身份信息，但不影响其他功能使用；',
            '2. 手机号【必要授权】：在您绑定或授权后获取，用于售后服务联系与账号安全验证；拒绝授权将影响售后联系及账号安全相关功能；',
            '3. 位置信息【可选授权】：在您授权后获取，用于为您推荐附近的服务；拒绝授权仅会影响该功能，不影响其他功能的正常使用；',
            '4. 设备信息【必要授权】：如设备型号、操作系统版本、网络状态等，用于保障服务的稳定运行和问题排查；该信息为服务运行自动采集，无法单独拒绝；',
            '除上述信息外，我们不会收集与服务无关的个人信息，不会收集您的微信聊天内容、通讯录、相册等敏感信息。',
          ],
        },
        {
          title: '三、我们如何使用信息',
          content: [
            '我们收集的信息将严格限于以下使用场景：',
            '1. 身份验证与账号安全：验证您的身份，保障账号与数据安全，识别异常登录或风险行为；',
            '2. 核心服务提供：为您提供设备管理、监测数据展示、预警通知等核心服务功能；',
            '3. 售后服务：与您取得联系，处理售后、报修及咨询等事项，提升服务质量；',
            '4. 服务改进：分析服务运行情况，优化性能与使用体验（仅使用去标识化或匿名化后的数据）；',
            '5. 合规义务：履行法律法规规定的义务，配合监管或司法机关的合法要求。',
            '我们不会将您的个人信息用于上述目的之外的任何用途。如需变更使用目的，我们将再次征得您的同意。',
          ],
        },
        {
          title: '四、信息的共享与披露',
          content: [
            '我们不会主动向第三方共享、转让或公开披露您的个人信息。以下情形除外：',
            '1. 事先获得您的明确同意：经您授权后，我们才会共享相应的个人信息；',
            '2. 法定强制要求：根据法律法规、司法机关或行政机关的强制性要求；',
            '3. 委托处理：为提供核心服务所必需，我们可能委托技术合作方进行数据存储或消息推送，仅共享实现服务所必需的最少信息，并要求其签署保密协议、采取足够的安全措施，不得用于其他用途；',
            '4. 合并重组：如我们涉及合并、收购或资产转让，我们将确保接收方继续履行本协议，并在变更用途前再次征得您的同意。',
            '我们承诺：不向任何第三方出售您的个人信息；不与关联方进行未经授权的数据共享。',
          ],
        },
        {
          title: '五、信息的存储与保护',
          content: [
            '1. 存储地点：您的个人信息存储于中华人民共和国境内，不会跨境传输；',
            '2. 存储期限：我们仅在实现本协议所述目的所必需的最短期限内保留您的个人信息：',
            '   - 账号信息：账号存续期间；账号注销后30日内删除或匿名化处理；',
            '   - 交易/服务记录：自服务终止之日起保留3年（法律法规另有要求的除外）；',
            '   - 设备日志信息：保留期限不超过6个月；',
            '3. 安全措施：我们采用加密传输、访问控制、安全审计等技术手段和管理措施，防止您的信息被未经授权地访问、篡改、泄露或丢失；',
            '4. 安全事件响应：如发生个人信息安全事件，我们将及时启动应急预案，并在15个工作日内通过公告或站内信等方式告知您事件情况、处置措施及应对建议。',
          ],
        },
        {
          title: '六、您的权利',
          content: [
            '按照《个人信息保护法》等相关法律法规，您对个人信息享有以下权利。您可通过联系客服行使：',
            '1. 知情权与查阅权：您有权随时查阅我们收集的您的个人信息类型与内容；',
            '2. 更正权：您有权要求更正不准确或不完整的信息，我们将在核实身份后15个工作日内处理；',
            '3. 删除权：您有权要求删除您的部分或全部个人信息（法律法规要求保留的除外），我们将在15个工作日内处理；',
            '4. 账号注销权：您有权随时注销账号，注销后我们将停止使用并删除您的相关信息。您可联系客服发起注销申请；',
            '5. 投诉举报权：如您认为我们处理个人信息的行为损害了您的合法权益，您有权向网信、公安等监管部门投诉举报。',
            '我们将在收到您的请求后核实身份并及时处理，原则上不超过15个工作日。如遇特殊情况，处理时限最长不超过30个工作日，并会向您说明原因。',
          ],
        },
        {
          title: '七、未成年人保护',
          content:
            '我们主要面向成年人提供服务。若您未满18周岁，请在监护人的陪同下阅读本协议，并在征得监护人同意后使用本小程序服务。',
        },
        {
          title: '八、协议的更新',
          content: [
            '1. 版本公示：本协议当前版本号为V2.0，最新更新日期为2026-09-14，生效日期为2026-09-14；',
            '2. 修订情形：我们可能根据法律法规变化、监管要求或服务调整适时修订本协议；',
            '3. 告知机制：',
            '   - 一般变更：修订后的协议将在本页面发布，并通过站内通知告知您；',
            '   - 重大变更（如信息收集范围扩大、使用目的变更、新增第三方共享等）：我们将通过弹窗显著提示，并要求您重新确认是否同意；',
            '4. 查阅建议：请您定期查阅本协议以了解最新内容。如您不同意修订后的协议，您可停止使用本小程序并申请注销账号；',
            '5. 历史版本：如需查阅历史版本，请联系客服获取。',
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.agreement-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 40rpx 40rpx 60rpx;
  box-sizing: border-box;
}

.agreement-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 16rpx;
}

.agreement-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 40rpx;

  .meta-version,
  .meta-date,
  .meta-effective {
    margin: 0 12rpx;
  }

  .meta-version {
    color: #3a8ee6;
    font-weight: bold;
  }
}

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

.agreement-summary {
  padding: 24rpx;
  margin-bottom: 40rpx;
  background-color: #f7f9fc;
  border-radius: 12rpx;
  border-left: 6rpx solid #3a8ee6;

  .summary-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }

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

  .summary-table {
    margin-bottom: 16rpx;
    border: 1rpx solid #e4e7ed;
    border-radius: 8rpx;
    overflow: hidden;
  }

  .table-row {
    display: flex;
    align-items: center;
    padding: 16rpx 12rpx;
    border-bottom: 1rpx solid #e4e7ed;

    &:last-child {
      border-bottom: none;
    }

    &.table-header {
      background-color: #ecf5ff;
      font-weight: bold;
      color: #333;
    }

    .col-type {
      flex: 0 0 30%;
      font-size: 26rpx;
    }

    .col-purpose {
      flex: 1;
      font-size: 26rpx;
    }

    .col-auth {
      flex: 0 0 20%;
      text-align: center;
    }
  }

  .auth-tag {
    display: inline-block;
    padding: 2rpx 12rpx;
    border-radius: 20rpx;
    font-size: 22rpx;

    &.auth-required {
      background-color: #fef0f0;
      color: #f56c6c;
    }

    &.auth-optional {
      background-color: #f0f9eb;
      color: #67c23a;
    }
  }

  .summary-footer {
    font-size: 26rpx;
    color: #666;
    line-height: 1.8;
    text-align: justify;
    margin-top: 16rpx;
  }
}

.agreement-section {
  margin-bottom: 30rpx;

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

  .section-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.8;
    text-align: justify;

    .content-line {
      margin-bottom: 6rpx;
    }
  }
}
</style>