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>
export default {
  data() {
    return {
      // 通知设置状态
      notifications: {
        system: true,
        crop: true,
        weather: true
      },
      
      // 缓存大小
      cacheSize: '0.00MB',
      
      // 版本号
      version: '1.0.0'
    };
  },
  
  methods: {
    // 获取缓存大小
    getCacheSize() {
      // 实际项目中需要调用相关API获取缓存大小
      uni.getStorageInfo({
        success: (res) => {
          const size = (res.currentSize / 1024).toFixed(2);
          this.cacheSize = size + 'MB';
        }
      });
    },
    
    // 清除缓存
    handleClearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorage({
              success: () => {
                uni.showToast({
                  title: '清除成功',
                  icon: 'success'
                });
                this.getCacheSize();
              }
            });
          }
        }
      });
    },
    
    // 检查更新
    checkUpdate() {
      // 实际项目中需要调用后端API检查更新
      uni.showLoading({ title: '检查更新中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '已是最新版本',
          icon: 'none'
        });
      }, 1500);
    },
    
    // 通知设置处理函数
    handleSystemNotification(e) {
      this.notifications.system = e.detail.value;
      this.saveNotificationSettings();
    },
    
    handleCropNotification(e) {
      this.notifications.crop = e.detail.value;
      this.saveNotificationSettings();
    },
    
    handleWeatherNotification(e) {
      this.notifications.weather = e.detail.value;
      this.saveNotificationSettings();
    },
    
    // 保存通知设置
    saveNotificationSettings() {
      uni.setStorageSync('notifications', this.notifications);
    },
    
    // 加载通知设置
    loadNotificationSettings() {
      const savedSettings = uni.getStorageSync('notifications');
      if (savedSettings) {
        this.notifications = savedSettings;
      }
    },
    
    // 页面跳转
    navigateToAboutUs() {
      uni.navigateTo({ url: '/pages/about/index' });
    },
    
    navigateToPrivacy() {
      uni.navigateTo({ url: '/pages/privacy/index' });
    },
    
    handleContact() {
      uni.makePhoneCall({
        phoneNumber: '400-xxx-xxxx' // 替换为实际的客服电话
      });
    }
  },
  
  // 页面显示时加载数据
  onShow() {
    this.getCacheSize();
    this.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>