-----/scoring/pages/my/setting.vue

<template>
  <view class="setting-page">
    <view class="setting-content">
      <!-- 账户设置 -->
      <view class="setting-section">
        <view class="section-title">账户设置</view>
        <view class="setting-list">
          <view class="setting-item" @click="navigateToProfile">
            <view class="item-left">
              <text class="item-title">个人资料</text>
            </view>
            <view class="item-right">
              <text class="item-value">查看</text>
              <uni-icons type="right" size="24" color="#ccc"></uni-icons>
            </view>
          </view>
          
          <view class="setting-item" @click="navigateToSecurity">
            <view class="item-left">
              <text class="item-title">账户安全</text>
            </view>
            <view class="item-right">
              <text class="item-value">设置</text>
              <uni-icons type="right" size="24" color="#ccc"></uni-icons>
            </view>
          </view>
        </view>
      </view>

      <!-- 应用设置 -->
      <view class="setting-section">
        <view class="section-title">应用设置</view>
        <view class="setting-list">
          <view class="setting-item" @click="toggleNotifications">
            <view class="item-left">
              <text class="item-title">消息通知</text>
            </view>
            <view class="item-right">
              <uni-switch 
                :checked="notificationsEnabled" 
                activeColor="#007aff"
                @change="toggleNotifications"
              ></uni-switch>
            </view>
          </view>
          
          <view class="setting-item" @click="toggleDarkMode">
            <view class="item-left">
              <text class="item-title">深色模式</text>
            </view>
            <view class="item-right">
              <uni-switch 
                :checked="darkModeEnabled" 
                activeColor="#007aff"
                @change="toggleDarkMode"
              ></uni-switch>
            </view>
          </view>
          
          <view class="setting-item" @click="clearCache">
            <view class="item-left">
              <text class="item-title">清除缓存</text>
            </view>
            <view class="item-right">
              <text class="item-value">{{cacheSize}}</text>
              <uni-icons type="right" size="24" color="#ccc"></uni-icons>
            </view>
          </view>
        </view>
      </view>

      <!-- 关于 -->
      <view class="setting-section">
        <view class="section-title">关于</view>
        <view class="setting-list">
          <view class="setting-item" @click="navigateToAbout">
            <view class="item-left">
              <text class="item-title">关于我们</text>
            </view>
            <view class="item-right">
              <text class="item-value">{{appVersion}}</text>
              <uni-icons type="right" size="24" color="#ccc"></uni-icons>
            </view>
          </view>
          
          <view class="setting-item" @click="navigateToPrivacy">
            <view class="item-left">
              <text class="item-title">隐私政策</text>
            </view>
            <view class="item-right">
              <uni-icons type="right" size="24" color="#ccc"></uni-icons>
            </view>
          </view>
          
          <view class="setting-item" @click="navigateToTerms">
            <view class="item-left">
              <text class="item-title">用户协议</text>
            </view>
            <view class="item-right">
              <uni-icons type="right" size="24" color="#ccc"></uni-icons>
            </view>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <button class="logout-btn" @click="logout">退出登录</button>
      </view>
    </view>
  </view>
</template>

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

// 响应式数据
const notificationsEnabled = ref(true)
const darkModeEnabled = ref(false)
const cacheSize = ref('12.3MB')
const appVersion = ref('1.0.0')

// 生命周期
onMounted(() => {
  // 初始化时检查缓存大小等信息
  checkCacheSize()
})

// 切换通知开关
const toggleNotifications = (e) => {
  notificationsEnabled.value = e.detail.checked || !notificationsEnabled.value
  uni.showToast({
    title: notificationsEnabled.value ? '通知已开启' : '通知已关闭',
    icon: 'none'
  })
}

// 切换深色模式
const toggleDarkMode = (e) => {
  darkModeEnabled.value = e.detail.checked || !darkModeEnabled.value
  uni.showToast({
    title: darkModeEnabled.value ? '深色模式已开启' : '深色模式已关闭',
    icon: 'none'
  })
  
  // 这里可以添加实际的深色模式切换逻辑
  // 例如：document.body.classList.toggle('dark-mode')
}

// 检查缓存大小
const checkCacheSize = () => {
  // 模拟获取缓存大小
  // 实际项目中可以调用uni.getStorageInfoSync()等API获取
}

// 清除缓存
const clearCache = () => {
  uni.showModal({
    title: '清除缓存',
    content: '确定要清除所有缓存数据吗？',
    success: (res) => {
      if (res.confirm) {
        // 模拟清除缓存
        setTimeout(() => {
          cacheSize.value = '0KB'
          uni.showToast({
            title: '缓存清除成功',
            icon: 'success'
          })
        }, 500)
      }
    }
  })
}

// 导航到个人资料页面
const navigateToProfile = () => {
  // 实际项目中添加导航逻辑
  uni.showToast({
    title: '跳转到个人资料页面',
    icon: 'none'
  })
}

// 导航到账户安全页面
const navigateToSecurity = () => {
  // 实际项目中添加导航逻辑
  uni.showToast({
    title: '跳转到账户安全页面',
    icon: 'none'
  })
}

// 导航到关于页面
const navigateToAbout = () => {
  // 实际项目中添加导航逻辑
  uni.showToast({
    title: '跳转到关于页面',
    icon: 'none'
  })
}

// 导航到隐私政策页面
const navigateToPrivacy = () => {
  // 实际项目中添加导航逻辑
  uni.showToast({
    title: '跳转到隐私政策页面',
    icon: 'none'
  })
}

// 导航到用户协议页面
const navigateToTerms = () => {
  // 实际项目中添加导航逻辑
  uni.showToast({
    title: '跳转到用户协议页面',
    icon: 'none'
  })
}

// 退出登录
const logout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 模拟退出登录
        setTimeout(() => {
          uni.showToast({
            title: '已退出登录',
            icon: 'success'
          })
          // 实际项目中可以添加跳转到登录页面的逻辑
        }, 500)
      }
    }
  })
}
</script>

<style scoped>
.setting-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 页面标题 */
.page-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* 内容区域 */
.setting-content {
  padding: 20rpx 0;
}

/* 设置分组 */
.setting-section {
  margin-bottom: 30rpx;
}

/* 分组标题 */
.section-title {
  font-size: 26rpx;
  color: #999;
  padding: 0 30rpx 10rpx;
}

/* 设置列表 */
.setting-list {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 0 30rpx;
  overflow: hidden;
}

/* 设置项 */
.setting-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  position: relative;
  transition: background-color 0.2s ease;
}

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

.setting-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30rpx;
  right: 30rpx;
  height: 1rpx;
  background-color: #f0f0f0;
}

/* 左侧内容 */
.item-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 图标容器 */
.item-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  background-color: #f0f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

/* 标题文本 */
.item-title {
  font-size: 30rpx;
  color: #333;
}

/* 右侧内容 */
.item-right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 值文本 */
.item-value {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

/* 退出登录区域 */
.logout-section {
  padding: 40rpx 30rpx 0;
}

/* 退出登录按钮 */
.logout-btn {
  background-color: #fff;
  color: #ff3b30;
  border-radius: 80rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.logout-btn:active {
  background-color: #f8f8f8;
}

/* 微信小程序特定样式优化 */
/* #ifdef MP-WEIXIN */
.setting-item {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

.item-icon {
  background-color: #f8f8f8;
}

.setting-list {
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}
/* #endif */
</style>