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="navigateToPrivacy">
          <text>隐私政策</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>

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

// 响应式数据
const notifications = reactive({
	system: true,
	crop: true,
	weather: true
})

const cacheSize = ref('0.00MB')
const version = ref('1.0.0')

// 获取缓存大小
const getCacheSize = () => {
	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 = () => {
	uni.showLoading({ title: '检查更新中...' })
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '已是最新版本',
			icon: 'none'
		})
	}, 1500)
}

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

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

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

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

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

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

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

// uni-app 页面生命周期
const onShow = () => {
	getCacheSize()
	loadNotificationSettings()
}

// 导出页面生命周期方法供 uni-app 调用
defineExpose({
	onShow
})
</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>