deepChartVueApp/pages/setting/account.vue

<template>
	<view class="main">
		<view :style="{height:iSMT+'px'}"></view>

		<view style="height:1.5vh;"></view>

		<view class="setting-list">
			<view class="setting-item">
				<text class="item-label">头像</text>
				<view class="item-right">
					<image src="/static/avatar.png" class="avatar" mode="aspectFill"></image>
					<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
				</view>
			</view>
			<view class="setting-item">
				<text class="item-label">昵称</text>
				<view class="item-right">
					<text class="item-text">DeepChart</text>
					<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
				</view>
			</view>
			<view class="setting-item">
				<text class="item-label">ID</text>
				<view class="item-right">
					<text class="item-text">{{ jwcode }}</text>
					<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
				</view>
			</view>
			<view class="setting-item">
				<text class="item-label">密码</text>
				<view class="item-right">
					<text class="item-text">qwertyuiop</text>
					<uni-icons type="eye" size="16" class="eye-icon"></uni-icons>
				</view>
			</view>
			<view class="setting-item" @click="goToPassword">
				<text class="item-label">修改密码</text>
				<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
			</view>
			<view class="setting-item">
				<text class="item-label">注销账号</text>
				<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
			</view>
			<view class="setting-item" @click="goToBind">
				<text class="item-label">绑定账号</text>
				<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
			</view>
		</view>

		<view style="height:1.5vh;"></view>

		<view class="logout" @click="showLogout = true">
			<text>退出登录</text>
		</view>

		<view class="logout-confirm" v-if="showLogout">
			<view class="logoutDialog">
				<view class="tips">是否退出登录</view>
				<view class="tips-button">
					<button class="confirm-btn" @click="handleConfirmLogout">确认</button>
					<button class="cancel-btn" @click="showLogout = false">取消</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	import {useUserStore} from "../../stores/modules/userInfo"
	const iSMT = ref(0)
	const jwcode = ref('90047681')
	const showLogout = ref(false)
	const userStore = useUserStore()
	
	const handleConfirmLogout = () => {

		userStore.clearUserInfo()
		showLogout.value = false
		uni.showToast({
			title: '退出登录成功',
			icon: 'none',
		})
	}
	
	const goToBind = () =>{
		uni.navigateTo({
			url:'../setting/bind'
		})
	}
	
	const goToPassword = () =>{
		uni.navigateTo({
			url:'../setting/password'
		})
	}

	onMounted(() => {
		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
	})
</script>

<style scoped>
	.setting-list {
		height: 49vh;
		background-color: #fff;
	}

	.setting-item {
		display: flex;
		align-items: center;
		height: 7vh;
		padding: 0 40rpx;
		border-bottom: 1rpx solid #eee;
	}

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

	.item-label {
		font-size: 28rpx;
		flex: 1;
	}

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

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #999;
	}

	.item-text {
		margin-right: 20rpx;
		font-size: 28rpx;
	}

	.arrow,
	.eye-icon {
		color: #999;
	}

	.logout {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 7vh;
		font-size: 28rpx;
		color: #f56c6c;
		background-color: white;
	}

	.logout-confirm {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.logoutDialog {
		width: 500rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tips {
		font-size: 32rpx;
		margin-bottom: 40rpx;
	}

	.tips-button {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.confirm-btn,
	.cancel-btn {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
	}

	.confirm-btn {
		background-color: #fff;
		color: #000;
		border: 1rpx solid #ddd;
	}

	.cancel-btn {
		background-color: #000;
		color: #fff;
		border: none;
	}
</style>