aslan-h5/src/views/BDSettingView.vue

<template>
  <div class="bd-setting gradient-background-circles">
    <MobileHeader title="BD Setting" />

    <div class="content">
      <!-- 设置选项列表 -->
      <div class="settings-list">
        <!-- 通知设置 -->
        <div class="setting-item" @click="goToNotifications">
          <div class="setting-icon">🔔</div>
          <div class="setting-content">
            <h3>Notifications</h3>
            <p>Manage your notification preferences</p>
          </div>
          <div class="setting-arrow">></div>
        </div>

        <!-- 团队管理 -->
        <div class="setting-item" @click="goToTeamManagement">
          <div class="setting-icon">👥</div>
          <div class="setting-content">
            <h3>Team Management</h3>
            <p>Manage your team members and permissions</p>
          </div>
          <div class="setting-arrow">></div>
        </div>

        <!-- 数据统计 -->
        <div class="setting-item" @click="goToStatistics">
          <div class="setting-icon">📊</div>
          <div class="setting-content">
            <h3>Statistics</h3>
            <p>View team performance and analytics</p>
          </div>
          <div class="setting-arrow">></div>
        </div>

        <!-- 账户设置 -->
        <div class="setting-item" @click="goToAccountSettings">
          <div class="setting-icon">⚙️</div>
          <div class="setting-content">
            <h3>Account Settings</h3>
            <p>Manage your account information</p>
          </div>
          <div class="setting-arrow">></div>
        </div>

        <!-- 帮助与支持 -->
        <div class="setting-item" @click="goToHelp">
          <div class="setting-icon">❓</div>
          <div class="setting-content">
            <h3>Help & Support</h3>
            <p>Get help and contact support</p>
          </div>
          <div class="setting-arrow">></div>
        </div>
      </div>

      <!-- 退出登录按钮 -->
      <div class="logout-section">
        <button class="logout-btn" @click="logout">
          <span class="logout-icon">🚪</span>
          <span>Logout</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import MobileHeader from '../components/MobileHeader.vue'

const router = useRouter()

const goToNotifications = () => {
  router.push('/message')
}

const goToTeamManagement = () => {
  router.push('/team-member')
}

const goToStatistics = () => {
  router.push('/platform-policy')
}

const goToAccountSettings = () => {
  router.push('/host-setting')
}

const goToHelp = () => {
  router.push('/platform-policy')
}

const logout = () => {
  // 确认退出
  if (confirm('Are you sure you want to logout?')) {
    // 清除用户数据
    localStorage.clear()
    // 跳转到登录页面或首页
    router.push('/')
  }
}
</script>

<style scoped>
.bd-setting {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
}

.content {
  padding: 16px;
  position: relative;
  z-index: 2;
}

/* 设置列表 */
.settings-list {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item:hover {
  background-color: #f8f9fa;
}

.setting-item:active {
  background-color: #e9ecef;
}

.setting-icon {
  font-size: 24px;
  margin-right: 12px;
  width: 40px;
  text-align: center;
}

.setting-content {
  flex: 1;
}

.setting-content h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.setting-content p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.setting-arrow {
  font-size: 18px;
  color: #8B5CF6;
  font-weight: bold;
}

/* 退出登录区域 */
.logout-section {
  display: flex;
  justify-content: center;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover {
  background-color: #fecaca;
  border-color: #f87171;
}

.logout-btn:active {
  background-color: #fca5a5;
  transform: scale(0.98);
}

.logout-icon {
  font-size: 18px;
}
</style>