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 class="avatar" :src="avatarUrl || 'https://d31zlh4on95l9h.cloudfront.net/default/1961d9d2e31e78e47e885231e7514a35.png'" mode="aspectFill" />
					<!-- <uni-icons type="arrowright" size="16"></uni-icons> -->
				</view>
			</view>
			<view class="setting-item">
				<text class="item-label">昵称</text>
				<view class="item-right">
					<text class="item-text">{{ userInfoRes.dcname }}</text>
					<!-- <uni-icons type="arrowright" size="16"></uni-icons> -->
				</view>
			</view>
			<view class="setting-item">
				<text class="item-label">ID</text>
				<view class="item-right">
					<text class="item-text">{{ userInfoRes.dccode }}</text>
				</view>
			</view>
			<view class="setting-item" @click="goToPassword">
				<text class="item-label">
					{{ userInfoRes.hasPwd === 0 ? '创建密码' : '修改密码' }}
				</text>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
			<view class="setting-item">
				<text class="item-label">注销账号</text>
				<!-- <uni-icons type="arrowright" size="16"></uni-icons> -->
			</view>
			<view class="setting-item" @click="goToBind">
				<text class="item-label">绑定账号</text>
				<uni-icons type="arrowright" size="16"></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 {
		getUserInfo
	} from "@/api/member"
	import {
		useUserStore
	} from "../../stores/modules/userInfo"

	const userStore = useUserStore()
	const iSMT = ref(0)
	// const dccode = ref('')
	const userInfoRes = ref({})
	const showLogout = ref(false)
	const avatarUrl = ref('')

	const userInfoPromise = getUserInfo()
	userInfoPromise.then(res => {
		if (res.code === 200) {
			userInfoRes.value.dccode = res.data.dccode
			userInfoRes.value.dcname = res.data.dcname
			userInfoRes.value.hasPwd = res.data.hasPassword
		avatarUrl.value = res.data.avatar
			console.log('用户信息', userInfoRes.value)
		} else {
			uni.showToast({
				title: '用户信息请求失败',
				icon: 'none',
			})
		}
	})
	const handleConfirmLogout = () => {
		userStore.clearUserInfo()
		showLogout.value = false
		uni.showToast({
			title: '退出登录成功',
			icon: 'none',
		})

		uni.navigateTo({
			url: '/pages/start/login/login'
		})
	}

	const goToBind = () => {
		uni.navigateTo({
			url: '../setting/bind'
		})
	}

	const goToPassword = () => {
		if (userInfoRes.value.hasPwd === 0) {
			uni.navigateTo({
				url: '../setting/createPwd'
			})
		} else {
			uni.navigateTo({
				url: '../setting/password'
			})
		}
	}

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

<style scoped>
	.setting-list {
		height: 42vh;
		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>