deepChartVueApp/pages/home/member.vue

<template>
	<LoginPrompt ref="loginPrompt"></LoginPrompt>
	<view class="main">
		<view class="top">
			<view class="bell">
				<!-- <image class="image-bell" src="/static/my/bell.png" /> -->
			</view>
			<view class="msg">
				<view class="msg-left">
					<image class="avatar"
						:src="avatarUrl || 'https://d31zlh4on95l9h.cloudfront.net/default/1961d9d2e31e78e47e885231e7514a35.png'"
						mode="aspectFill" />
				</view>
				<view class=" msg-center">
					<view style="display: flex;">
						<template v-if="!isEditingName">
							<view class="userInfo">{{ username }}</view>
							<image class="image-editName" src="/static/my/editName.png" @click="startEditName" />
						</template>
						<template v-else>
							<input v-model="editingName" class="edit-input" @blur="finishEditName"
								@keyup.enter="finishEditName" autofocus placeholder="请输入用户名" />
						</template>
					</view>
					<view class="userId">ID:{{ dccode }}</view>
				</view>
				<!--        <view class="msg-right">
          <image class="image-attendance" src="/static/my/Check-in.png"/>
          <span style="font-size:10px;">签到</span>
        </view> -->
			</view>

			<view class="settings-buttons">
				<view class="setting-btn" @click="goToMarket">
					<image src="/static/my/MarketSettings.png" class="setting-icon" />
					<text>行情设置</text>
				</view>
				<view class="setting-btn" @click="goToGeneral">
					<image src="/static/my/Settings.png" class="setting-icon" />
					<text>通用设置</text>
				</view>
			</view>

			<view class="share" @click="goToShare">
				<image class="img-share" src="/static/my/share.png" mode="widthFix" />
			</view>
		</view>
		<view class="bottom">
			<view class="list-item" @click="goToAccount">
				<image src="/static/my/security.png" class="list-icon" />
				<text>账号与安全</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
			<!-- <view class="list-item">
				<image src="/static/my/connection.png" class="list-icon" />
				<text>联系我们</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
			<view class="list-item" @click="goToNewVersion">
				<image src="/static/my/update.png" class="list-icon" />
				<text>新版本更新</text>
				<view class="update-tip">有新版本可更新
					<view class="circle"></view>
				</view>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
			<view class="list-item">
				<image src="/static/my/opinion.png" class="list-icon" />
				<text>意见反馈</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view> -->
			<view class="list-item" @click="goToAbout">
				<image src="/static/my/about.png" class="list-icon" />
				<text>关于DeepChart</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
		</view>
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ArrowRight
	} from '@element-plus/icons-vue'
	import footerBar from '../../components/footerBar.vue'
	import {
		getUserInfo,
		updateUserInfo
	} from "@/api/member"
	import {
		useUserStore
	} from "../../stores/modules/userInfo"
	const userStore = useUserStore()

	const type = ref('member')
	const iSMT = ref(0)
	const username = ref('')
	const dccode = ref('')
	const avatarUrl = ref('')
	const isEditingName = ref(false)
	const editingName = ref('')

	const userInfoRes = ref() // 用户身份信息
	userInfoRes.value = getUserInfo()
	userInfoRes.value.then(res => {
		username.value = res.data.dcname
		dccode.value = res.data.dccode
		avatarUrl.value = res.data.avatar
		console.log('用户信息', userInfoRes.value)
	})

	const startEditName = () => {
		isEditingName.value = true
		editingName.value = username.value
	}

	const finishEditName = async () => {
		if (editingName.value.trim() === '' || editingName.value === username.value) {
			isEditingName.value = false
			return
		}
		try {
			await updateUserInfo({
				dcname: editingName.value
			})
			uni.showToast({
				title: '昵称修改成功',
				icon: 'none'
			})
		} catch (err) {
			uni.showToast({
				title: '修改失败，请重试',
				icon: 'none'
			})
		} finally {
			isEditingName.value = false
		}
	}


	const goToGeneral = () => {
		uni.navigateTo({
			url: '/pages/setting/general'
		})
	}

	const goToMarket = () => {
		uni.navigateTo({
			url: '../setting/market'
		})
	}

	const goToAccount = () => {
		uni.navigateTo({
			url: '../setting/account'
		})
	}

	const goToNewVersion = () => {
		uni.navigateTo({
			url: '../setting/newVersion'
		})
	}

	const goToAbout = () => {
		uni.navigateTo({
			url: '../setting/about'
		})
	}

	const goToShare = () => {
		uni.navigateTo({
			url: '../setting/share'
		})
	}

	onMounted(() => {
		// 状态栏高度
		iSMT.value = uni.getSystemInfoSync().statusBarHeight
		console.log('??????????????', iSMT.value)
		console.log('通信来的用户身份', userStore.userInfo)
	})
</script>

<style scoped>
	.static-footer {
		position: fixed;
		bottom: 0;
	}

	.top {
		height: 50vh;
		background-color: white;
	}

	.bell {
		height: 9.6vh;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding-right: 50rpx;
	}

	.image-bell {
		width: 26rpx;
		height: 32rpx;
	}

	.msg {
		height: 10.7vh;
		display: flex;
		margin-top: 3vh;
		margin-bottom: 3vh;
	}

	.msg-left {
		width: 252rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 175rpx;
		height: 175rpx;
		border-radius: 50%;
		background-color: black;
	}

	.msg-center {
		width: 388rpx;
		padding-left: 2.5vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.userInfo {
		font-size: 30rpx;
		font-weight: bold;
	}

	.userId {
		font-size: 14px;
		margin-top: 1vh;
	}

	.image-editName {
		width: 40rpx;
		height: 40rpx;
		margin-left: 15rpx;
	}

	.msg-right {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.image-attendance {
		width: 43rpx;
		height: 43rpx;
	}

	.settings-buttons {
		display: flex;
		justify-content: space-around;
	}

	.setting-btn {
		width: 349rpx;
		height: 135rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(243, 243, 243);
		border-radius: 8%;
		margin-bottom: 1vh;
	}

	.setting-icon {
		width: 64.7rpx;
		height: 64.7rpx;
		margin-right: 25rpx;
	}

	.setting-btn text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.share {
		height: 12.6vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img-share {
		width: 720rpx;
		height: 160rpx;
	}

	.bottom {
		height: 44.5vh;
		margin-top: 1vh;
		background-color: rgb(255, 255, 255);
	}

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

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

	.list-icon {
		width: 42rpx;
		height: 42rpx;
		margin-right: 18rpx;
	}

	.arrow {
		margin-left: auto;
	}

	.update-tip {
		display: flex;
		color: #999;
		font-size: 24rpx;
		align-items: center;
		margin-left: 200rpx;
		justify-content: center;
	}

	.circle {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: red;
		margin-left: 10rpx;
	}

	.edit-input {
		background-color: #999;
	}
</style>