deepChartVueApp/pages/setting/general.vue

<template>
  <view class="main">
    <view :style="{height:iSMT+'px'}"></view>
    <view class="top">
      <view class="top-list">
        <text class="label">语言</text>
        <text class="language">{{settingRes.language}}</text>
        <uni-icons type="arrowright" size="16" />
      </view>
      <view class="top-list" @click="goToFont">
        <text class="label">字体大小</text>
        <uni-icons type="arrowright" size="16" />
      </view>
      <view class="top-list" @click="goToTheme">
        <text class="label">主题切换</text>
        <uni-icons type="arrowright" size="16" />
      </view>
    </view>


    <view class="center">
      <view class="center-list" @click="goToMessage">
        <text class="label">消息推送</text>
        <uni-icons type="arrowright" size="16" />
      </view>
    </view>

    <view class="bottom">
      <view class="bottom-list" @click="goToServer">
        <text class="label">切换服务器</text>
        <uni-icons type="arrowright" size="16" />
      </view>
      <view class="bottom-list" @click="clearCache">
        <text class="label">清理缓存</text>
        <text class="cache">{{ cache }}M</text>
        <uni-icons type="arrowright" size="16" />
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted
} from 'vue'
import {getUserInfo} from "@/api/member";
const iSMT = ref(0)
const cache = ref('45.5')

const  settingRes = ref({})

const settingPromise = getUserInfo()
settingPromise.then(res => {
  if (res.code === 200){
    settingRes.value.language = res.data.language;
    settingRes.value.fontSize = res.data.fontSize;
    settingRes.value.theme = res.data.theme;
    settingRes.value.serverSelection = res.data.serverSelection;
    console.log('用户信息', res.data)
  }else {
    console.log('用户信息请求失败：', res.message);
  }

})

const goToFont = () => {
  uni.navigateTo({
    url: '/pages/setting/font'
  })
}

const goToTheme = () => {
  uni.navigateTo({
    url: '/pages/setting/theme'
  })
}

const goToMessage = () => {
  uni.navigateTo({
    url: '/pages/setting/message'
  })
}

const goToServer = () => {
  uni.navigateTo({
    url: '/pages/setting/server'
  })
}

const clearCache = () => {
  cache.value = 0
  uni.showToast({
    title: '清理成功',
    icon: 'success',
    duration: 1500
  })
}

onMounted(() => {
  // 状态栏高度
  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
  console.log('看看高度', iSMT.value)
})
</script>

<style>
.top {
  margin-top: 1.5vh;
  height: 21vh;
  background-color: white;
}

.top-list {
  width: 630rpx;
  height: 7vh;
  display: flex;
  align-items: center;
  margin: 0 40rpx;
  padding: 0 10rpx;
  border-bottom: 1rpx solid #eee;
}

.top-list:last-child {
  border-bottom: none;
}

.language {
  margin-left: 70%;
  font-size: 14px;
  color: rgb(203, 203, 203);
}

.arrow {
  margin-left: auto;
}

.center {
  background-color: white;
  height: 7vh;
  display: flex;
  align-items: center;
  margin-top: 1vh;
}

.center-list {
  width: 630rpx;
  margin: 0rpx 40rpx;
  display: flex;
  padding: 0 10rpx;
}

.center-list > .arrow {
  margin-right: 0;
}

.bottom {
  height: 13.5vh;
  background-color: white;
  margin-top: 1vh;
}

.bottom-list {
  width: 630rpx;
  height: 7vh;
  display: flex;
  align-items: center;
  margin: 0 40rpx;
  padding: 0 10rpx;
  border-bottom: 1rpx solid #eee;
}

.cache {
  font-size: 14px;
  color: rgb(203, 203, 203);
}

.bottom-list:last-child {
  border-bottom: none;
}

.label{
	flex:1;
	font-size:28rpx;
}
</style>