property-resident-side/property-uniapp-project/pageSubPack/my/settingIndex.vue

<template>
	<view class="contentStyle">
		<view class="status-bar"></view>
		<uni-nav-bar title="设置" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>

		<scroll-view class="page" scroll-y>
			<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="onItemClick(item)">
				<text class="item-title">{{ item.title }}</text>

				<view class="item-right" v-if="item.type === 'text'">
					<text :class="item.valueClass || 'item-value'">{{ item.value }}</text>
					<view class="item-arrow"></view>
				</view>

				<switch class="no-cross-switch" v-else-if="item.type === 'switch'" :checked="item.checked"
					@change="onSwitchChange(item, $event)" />

				<view class="item-arrow" v-else></view>
			</view>
		</scroll-view>

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

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onReachBottom,
		onLoad,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		authLogout, getUserProfile, getUserNotify, changeUserNotify
	} from '/pageSubPack/api/apiSub.js'

	// 
	const statusBarHeight = ref(20)
	const cacheSize = ref(0)
	const settingList = ref([{
			title: '更改手机号码',
			type: 'text',
			value: ''
		},
		{
			title: '修改密码',
			type: 'arrow'
		},
		{
			title: '消息通知',
			type: 'switch',
			checked: false
		},
		{
			title: '清除缓存',
			type: 'text',
			value: '9.2M'
		},
		{
			title: '升级版本',
			type: 'text',
			value: '当前版本 2.9.8',
			valueClass: 'item-version'
		}
	])

	// 
	const onItemClick = (item) => {
		if (item.title == '更改手机号码') {
			uni.redirectTo({
				url: '/pageSubPack/my/changePhone'
			});
		} else if (item.title == '修改密码') {
			uni.redirectTo({
				url: '/pageSubPack/my/changePwd'
			});
		} else if (item.title == '清除缓存') {
			uni.clearStorageSync();
			settingList.value[3].value = '0M'
			uni.showLoading({
				title: '清除中...',
				mask: true
			});
			setTimeout(() => {
				uni.showToast({
					title: '清除成功',
					icon: 'success'
				});
			}, 1000);
			setTimeout(() => {
				uni.hideLoading();
			}, 2500);
		}
	}

	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出当前账号吗?',
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '退出中...',
						mask: true
					});
					authLogout().then(res => {
						if (res.code === 200) {
							uni.hideLoading();
							uni.showToast({
								title: '退出成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.hideLoading();
								uni.redirectTo({
									url: '/pageSubPack/loginSub/pwd-login'
								});
							}, 1500);
						} else {
							uni.showToast({
								title: `${res.msg}`,
								icon: 'error'
							});
						}

					}).catch(err => {
						console.log(err);
						uni.showToast({
							title: `${err}`,
							icon: 'error'
						});
					})

				}
			}
		})
	}

	const onSwitchChange = (item, e) => {
		const checked = e.detail.value
		const notifyEnabled = checked ? '1' : '0'
		changeUserNotify({ notifyEnabled }).then(res => {
			if (res.code === 200) {
				item.checked = checked
			} else {
				uni.showToast({ title: res.msg || '更新失败', icon: 'none' })
				item.checked = !checked
			}
		}).catch(() => {
			uni.showToast({ title: '更新失败', icon: 'none' })
			item.checked = !checked
		})
	}

	const goBack = () => {
		uni.switchTab({
			url: '/pages/myIndex/myIndex'
		});
	}

	onMounted(() => {
		getUserProfile().then(res => {
			if (res.code === 200 && res.data) {
				const phone = res.data.phone || ''
				settingList.value[0].value = phone
			}
		})
		getUserNotify().then(res => {
			if (res.code === 200 && res.data) {
				settingList.value[2].checked = res.data.notifyEnabled === '1'
			}
		})
	})
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style lang="scss" scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0 40rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.bottom-btn {
		padding: 20rpx 30rpx 40rpx;
		background-color: #fff;
	}
</style>

<style scoped>
	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.item-title {
		font-size: 32rpx;
		color: #333;
		line-height: 1.4;
	}

	.item-right {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.item-value {
		font-size: 28rpx;
		color: #333;
	}

	.item-version {
		font-size: 28rpx;
		color: #999;
	}

	.item-arrow {
		width: 10rpx;
		height: 10rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.logout-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 36rpx;
		border-radius: 12rpx;
		color: #666;
		background-color: #F3F3F3;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.logout-btn:active {
		background-color: #f5f5f5;
		opacity: 0.8;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>

<style>
	::v-deep .uni-switch-input:before {
		background-color: #cccccd !important;
	}

	.no-cross-switch::before {
		display: none !important;
	}

	.no-cross-switch {
		transform: scale(0.85);
		border-radius: 50rpx !important;
	}

	.no-cross-switch>>>.uni-switch-input-checked {
		background-color: #007aff !important;
	}
</style>