nongxiaoyu/pages/settings/index.vue

<template>
  <view class="settings-container">
    <!-- 消息通知设置 -->
    <view class="settings-section">
      <view class="section-title">消息通知</view>
      <view class="settings-list">
        <view class="settings-item">
          <text>系统通知</text>
          <switch :checked="notifications.system" @change="handleSystemNotification" color="#4CAF50" />
        </view>
        <view class="settings-item">
          <text>作物提醒</text>
          <switch :checked="notifications.crop" @change="handleCropNotification" color="#4CAF50" />
        </view>
        <view class="settings-item">
          <text>天气预警</text>
          <switch :checked="notifications.weather" @change="handleWeatherNotification" color="#4CAF50" />
        </view>
      </view>
    </view>

    <!-- 通用设置 -->
    <view class="settings-section">
      <view class="section-title">通用设置</view>
      <view class="settings-list">
        <view class="settings-item" @click="handleClearCache">
          <view class="item-left">
            <text>清除缓存</text>
            <text class="sub-text">{{ cacheSize }}</text>
          </view>
          <text class="arrow">></text>
        </view>
        <view class="settings-item" @click="checkUpdate">
          <view class="item-left">
            <text>检查更新</text>
            <text class="sub-text">当前版本 {{ version }}</text>
          </view>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 关于 -->
    <view class="settings-section">
      <view class="section-title">关于</view>
      <view class="settings-list">
        <view class="settings-item" @click="navigateToAboutUs">
          <text>关于我们</text>
          <text class="arrow">></text>
        </view>
        <view class="settings-item" @click="handleContact">
          <text>联系客服</text>
          <text class="arrow">></text>
        </view>
        <view class="settings-item" @click="navigateToPrivacy">
          <text>隐私政策</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 通知设置状态
const notifications = ref({
  system: true,
  crop: true,
  weather: true
})

// 缓存大小
const cacheSize = ref('0.00MB')

// 版本号
const version = ref('1.0.0')

// 获取缓存大小
const getCacheSize = () => {
  // 实际项目中需要调用相关API获取缓存大小
  uni.getStorageInfo({
    success: (res) => {
      const size = (res.currentSize / 1024).toFixed(2)
      cacheSize.value = size + 'MB'
    }
  })
}

// 清除缓存
const handleClearCache = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清除缓存吗？',
    success: (res) => {
      if (res.confirm) {
        uni.clearStorage({
          success: () => {
            uni.showToast({
              title: '清除成功',
              icon: 'success'
            })
            getCacheSize()
          }
        })
      }
    }
  })
}

// 检查更新
const checkUpdate = () => {
  // 实际项目中需要调用后端API检查更新
  uni.showLoading({ title: '检查更新中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '已是最新版本',
      icon: 'none'
    })
  }, 1500)
}

// 通知设置处理函数
const handleSystemNotification = (e) => {
  notifications.value.system = e.detail.value
  saveNotificationSettings()
}

const handleCropNotification = (e) => {
  notifications.value.crop = e.detail.value
  saveNotificationSettings()
}

const handleWeatherNotification = (e) => {
  notifications.value.weather = e.detail.value
  saveNotificationSettings()
}

// 保存通知设置
const saveNotificationSettings = () => {
  uni.setStorageSync('notifications', notifications.value)
}

// 加载通知设置
const loadNotificationSettings = () => {
  const savedSettings = uni.getStorageSync('notifications')
  if (savedSettings) {
    notifications.value = savedSettings
  }
}

// 页面跳转
const navigateToAboutUs = () => {
  uni.navigateTo({ url: '/pages/about/index' })
}

const navigateToPrivacy = () => {
  uni.navigateTo({ url: '/pages/privacy/index' })
}

const handleContact = () => {
  uni.makePhoneCall({
    phoneNumber: '400-xxx-xxxx' // 替换为实际的客服电话
  })
}

// 页面显示时加载数据
onShow(() => {
  getCacheSize()
  loadNotificationSettings()
})
</script>

<style lang="scss">
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.settings-section {
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.section-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #999;
  background-color: #f8f8f8;
}

.settings-list {
  .settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;

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

    text {
      font-size: 28rpx;
      color: #333;
    }

    .item-left {
      display: flex;
      flex-direction: column;

      .sub-text {
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
      }
    }

    .arrow {
      color: #999;
      font-size: 24rpx;
    }

    switch {
      transform: scale(0.8);
      transform-origin: right center;
    }
  }
}
</style>