Bit_Wise_World/src/views/user/DeleteAccount.vue

<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M15 18L9 12L15 6" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <div class="nav-title">注销账号</div>
      <div class="nav-right"></div>
    </div>

    <div class="content">
      <p class="intro-text">注销账户后，您可能需要考虑以下几点：</p>

      <div class="text-block">
        <span class="block-title">数据无法恢复：</span>
        一旦注销账户，您在该账户中的所有数据可能会永久丢失。因此，请务必在注销前做好数据备份。
      </div>

      <div class="text-block">
        <span class="block-title">影响其他服务：</span>
        有些账户可能与其他服务相关联，例如通过社交媒体账户登录的应用。如果您注销了这些账户，可能会影响您使用的其他服务。
      </div>

      <div class="text-block">
        <span class="block-title">等待期：</span>
        一些平台在您申请注销后，可能会设置一个等待期。在此期间，您仍然可以取消注销请求，恢复账户。
      </div>

      <div class="text-block">
        <span class="block-title">隐私设置：</span>
        即使您注销了某些账户，您在其他平台上的信息仍然可能被保留。定期检查您的隐私设置，确保您的信息安全。
      </div>

      <div class="text-block summary-text">
        注销账户是保护个人隐私和安全的重要步骤。在决定注销之前，确保备份所有重要的数据，了解注销的具体步骤和后果。每个平台的注销流程可能有所不同，因此在操作时请务必仔细阅读相关说明。
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer-action">
      <button class="delete-btn" @click="handleDelete">注销</button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
// import { showConfirmDialog, showToast } from 'vant'; // 如果有 Vant

const router = useRouter();

const handleDelete = () => {
  // 模拟确认弹窗
  const isConfirmed = confirm('确定要注销账号吗？此操作无法撤销。');
  if (isConfirmed) {
    console.log('执行注销逻辑...');
    alert('申请已提交');
    router.push('/');
  }
};
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #fff;
  display: flex; flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 44px; padding: 0 16px; background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.nav-title { font-size: 18px; font-weight: 600; color: #333; }
.nav-left, .nav-right { width: 40px; display: flex; align-items: center; }

/* 内容区域 */
.content {
  padding: 16px 20px 100px; /* 底部留出按钮空间 */
  flex: 1;
  overflow-y: auto;
}

.intro-text {
  font-size: 14px; color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.text-block {
  font-size: 14px;
  color: #666;
  line-height: 1.8; /* 较大的行高，增加可读性 */
  margin-bottom: 20px;
  text-align: justify; /* 两端对齐，使大段文字边缘整齐 */
}

/* 重点文字加深颜色 */
.block-title {
  color: #333;
  font-weight: 500;
}

/* 底部总结段落 */
.summary-text {
  margin-top: 30px;
}

/* 底部固定按钮区 */
.footer-action {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 10px 20px 30px; /* 适配 iPhone 底部安全区 */
  background: #fff;
  /* 可选：加个上边框或阴影让层次更分明 */
  /* border-top: 1px solid #eee; */
}

.delete-btn {
  width: 100%;
  height: 48px;
  background: #E02F44; /* 警示红 */
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.delete-btn:active {
  opacity: 0.9;
}
</style>