You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

108 lines
2.3 KiB

<template>
<view class="main">
<view :style="{height:iSMT+'px'}"></view>
<view class="top">
<view class="top-list">
<text>标准</text>
<radio value="0" class="radio-btn" activeBackgroundColor="red" :checked="selectedIndex === 0"
@click="selectFont('small')" />
</view>
<view class="top-list">
<text>中号</text>
<radio value="1" class="radio-btn" activeBackgroundColor="red" :checked="selectedIndex === 1"
@click="selectFont('medium')" />
</view>
<view class="top-list">
<text>大号</text>
<radio value="2" class="radio-btn" activeBackgroundColor="red" :checked="selectedIndex === 2"
@click="selectFont('large')" />
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue'
import {
getSetting,
updateSetting
} from "@/api/setting/general"
const iSMT = ref(0)
const selectedIndex = ref(0)
const fontTypeMap = {
'small': 0,
'medium': 1,
'large': 2
}
const getFont = async () => {
try {
const res = await getSetting()
if (res.code === 200) {
const fontSize = res.data.fontSize
selectedIndex.value = fontTypeMap[fontSize] ?? 0
}
} catch (err) {
console.error("获取字体设置失败:", err)
}
}
const selectFont = async (fontType) => {
try {
selectedIndex.value = fontTypeMap[fontType]
console.log('字体类型:', fontType, ',looklook索引:', selectedIndex.value)
const updateRes = await updateSetting({
fontSize: fontType
})
if (updateRes.code === 200) {
uni.showToast({
title: '字体大小设置成功',
icon: 'none'
})
}
} catch (err) {
console.error("更新字体设置失败:", err)
uni.showToast({
title: '设置失败,请重试',
icon: 'none'
})
}
}
onMounted(() => {
// 状态栏高度
iSMT.value = uni.getSystemInfoSync().statusBarHeight;
console.log('看看高度', iSMT.value)
getFont()
})
</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;
}
.radio-btn {
margin-left: auto;
transform: scale(0.6);
}
</style>