pet-system-merchant-app/pages/my/settings/index.vue

<template>
	<view class="settings-page">
		<nav-bar title="设置"></nav-bar>
		<view class="menu-list">
			<view class="cell-group">
				<view class="cell-item" @click="goTo('/pages/my/settings/profile/index')">
					<text class="cell-title">个人信息</text>
					<text class="arrow">›</text>
				</view>
				<view class="cell-item" @click="goTo('/pages/my/settings/change-password/index')">
					<text class="cell-title">修改密码</text>
					<text class="arrow">›</text>
				</view>
				<view class="cell-item" @click="onClearCache">
					<text class="cell-title">清除缓存</text>
					<text class="cell-value">{{ cacheSize }}</text>
					<text class="arrow">›</text>
				</view>
				<view class="cell-item">
					<text class="cell-title">版本号</text>
					<text class="cell-value">v{{ appVersion }}</text>
				</view>
			</view>

			<view class="cell-group danger-group">
				<view class="cell-item" @click="goTo('/pages/my/settings/account-delete/index')">
					<text class="cell-title danger">账号注销</text>
					<text class="arrow">›</text>
				</view>
			</view>
		</view>

		<view class="logout-btn-wrapper">
			<button class="logout-btn" @click="onLogout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import navBar from '@/components/nav-bar/index.vue'

const cacheSize = ref('0 KB')

const appVersion = ref('1.0.0')
// #ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
	appVersion.value = widgetInfo.version || '1.0.0'
})
// #endif
// #ifndef APP-PLUS
const systemInfo = uni.getSystemInfoSync()
appVersion.value = systemInfo.appVersion || '1.0.0'
// #endif

const calculateCacheSize = () => {
	try {
		const res = uni.getStorageInfoSync()
		const size = res.currentSize
		if (size < 1024) {
			cacheSize.value = size + ' KB'
		} else {
			cacheSize.value = (size / 1024).toFixed(2) + ' MB'
		}
	} catch (e) {
		cacheSize.value = '0 KB'
	}
}

onShow(() => {
	calculateCacheSize()
})

const goTo = (url) => uni.navigateTo({ url })
const onTodo = () => uni.showToast({ title: '演示功能，暂未开放', icon: 'none' })

const onClearCache = () => {
	uni.showModal({
		title: '清理缓存',
		content: '确定要清理本地缓存吗？',
		success: (res) => {
			if (res.confirm) {
				try {
					// 清理前保留 token 等可能需要的核心认证信息
					const token = uni.getStorageSync('token')
					uni.clearStorageSync()
					if (token) {
						uni.setStorageSync('token', token)
					}

					calculateCacheSize()
					uni.showToast({ title: '清理成功', icon: 'success' })
				} catch (e) {
					uni.showToast({ title: '清理失败', icon: 'none' })
				}
			}
		}
	})
}

const onLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出当前账号吗？',
		success: (res) => {
			if (res.confirm) {
				// 清空 token
				uni.removeStorageSync('token')
				uni.showToast({ title: '已安全退出', icon: 'success' })
				setTimeout(() => uni.reLaunch({ url: '/pages/login/index' }), 1000)
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.settings-page {
	min-height: 100vh;
	background: #f7f8fa;
}

.menu-list {
	padding-top: 24rpx;
}

.cell-group {
	background: #fff;
	margin: 0 24rpx 24rpx;
	border-radius: 24rpx;
	overflow: hidden;
}

.cell-item {
	display: flex;
	align-items: center;
	padding: 32rpx;
	border-bottom: 2rpx solid #eee;
}

.cell-item:last-child {
	border-bottom: none;
}

.cell-title {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.cell-title.danger {
	color: #ee0a24;
}

.cell-value {
	font-size: 26rpx;
	color: #999;
	margin-right: 8rpx;
}

.arrow {
	font-size: 36rpx;
	color: #ccc;
	line-height: 1;
}

.danger-group {
	margin-top: 40rpx;
}

.logout-btn-wrapper {
	padding: 80rpx 32rpx;
}

.logout-btn {
	width: 100%;
	height: 88rpx;
	background: #fff;
	color: #ee0a24;
	border: 2rpx solid #ee0a24;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	line-height: 84rpx;

	&::after {
		border: none;
	}
}
</style>