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',
		})
		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)
		})
	} 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 = () => {
	console.log('用户信息==========', userStore.userInfo.isVisitor)
	if (userStore.userInfo.visitor) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		return
	}
	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>