talk_appAmin/pages/mine/index.vue

<template>
	<view class="container">
		<view>
			<!-- 顶部导航栏 -->
			<u-navbar :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor"
				style="background-color: #6aa2ff;">
				<template #left>
					<view class="text1">个人信息</view>
				</template>

				<template #right>
					<image src="@/static/settingIcon.png" class="icon" @click="gotoSetting"></image>
				</template>
			</u-navbar>

		</view>

		<view class="cardss">
			<!-- 圆形头像 -->
			<up-avatar :src="avatar" size="150rpx"></up-avatar>
			<view class="userinfo">
				<view class="utext1 move-down">{{ nickInfo(nickName) }}</view>
				<view class="utext2 move-up2">账号：{{ name }}</view>
				<view class="utext2 move-up">管理地区：{{ deptManageName }}</view>
			</view>
		</view>
		<image :src="wave" class="wave"></image>
	</view>

	<view class="btn " @click="handleLogout">
		<view class="textbtn">退出登录</view>
	</view>
</template>

<script setup>
	import {
		useStore
	} from 'vuex'
	import {
		useRouter
	} from 'vue-router'
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import image from 'uview-plus/libs/config/props/image';
	const {
		proxy
	} = getCurrentInstance();
	const QNDomain = proxy.$store.state.user.QNDomain
	const bgColor = ref('rgba(170, 0, 0, 0)');
	const isOfficial = ref(true)
	const kfopen = ref(false)
	const iconConfig = proxy.iconConfig;
	const wave = iconConfig.wave;
	const settingIcon = iconConfig.settingIcon


	const auditInfo = ref(proxy.$store.state.userInfo.auditInfo) //审核状态
	const name = ref(proxy.$store.state.user.name)
	const deptManage = ref(proxy.$store.state.user.deptManage)
	const deptManageName = ref(proxy.$store.state.user.deptManageName)
	const nickName = ref(proxy.$store.state.user.nickName)
	const sex = ref(uni.getStorageSync("SET_SEX"))

	const infoSchool = ref(proxy.$store.state.userInfo.infoSchool) //学校
	const area = ref(proxy.$store.state.userInfo.area) //学校
	const backgroundImage = ref(proxy.$store.state.userInfo.backgroundImage) //背景
	const infoRank = ref(proxy.$store.state.userInfo.infoRank)
	const remark = ref(proxy.$store.state.userInfo.remark) //签名
	const infoAssist = ref(proxy.$store.state.userInfo.infoAssist) //获赞
	const followCount = ref(proxy.$store.state.userInfo.followCount) //关注
	const fanCount = ref(proxy.$store.state.userInfo.fanCount) //粉丝
	const qm = (e) => {
		if (e === "" | e === null) {
			return "这个人很懒什么都没有留下……"
		} else {
			return e
		}
	}
	const dictSexInfo = ref('')
	const nickInfo = (nickName) => {
		if (nickName.length > 10) {
			return nickName.substring(0, 10) + "...";
		} else {
			return nickName;
		}
	}
	onLoad((options) => {
		proxy.$store.dispatch('GetUserInfo');
		console.log("xinxi1:", deptManageName);
		getDicts('sys_user_sex').then(e => {
			dictSexInfo.value = e.data
		})

	})
	onShow(() => {
		deptManageName.value = proxy.$store.state.user.deptManageName
	})
	const dictSex = (state) => {
		const dict = dictSexInfo.value.find((dict) => dict.dictValue == state);
		return dict ? dict.dictLabel : '未知状态';
	}

	const version = ref(getApp().globalData.config.appInfo.version)
	const avatar = ref(proxy.$store.state.user.avatar)

	function handleLogout() {
		proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
			proxy.$store.dispatch('LogOut').then(() => {
				proxy.$tab.reLaunch('/pages/index')
			})
		})
	}

	onPullDownRefresh((options) => {
		proxy.$router.go(0)
	})


	const gotoSetting = () => {
		proxy.$tab.navigateTo('/pages/mine/setting/index')
	}






	const imageInfo = () => {
		let info = QNDomain + backgroundImage.value
		return info
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.text1 {
		font-weight: 00;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.container {
		position: relative;
	}



	.cardss {
		padding-left: 32rpx;
		padding-top: 64rpx;
		display: flex;
		align-items: center;
		background-color: #6aa2ff;

		.userinfo {
			margin-left: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.utext1 {

				font-weight: 400;
				font-size: 16px;
				color: #FFFFFF;
				font-weight: 580;
				margin-bottom: 14rpx;
				/* 添加底部间距 */
			}

			.move-down {
				position: relative;
				top: 11rpx;
				/* 根据需要调整数值 */
			}

			.utext2 {
				margin-top: 30rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.move-up {
				position: relative;
				top: -14rpx;
				/* 根据需要调整数值 */
			}

			.move-up2 {
				position: relative;
				top: -9rpx;
				/* 根据需要调整数值 */
			}

		}
	}

	.wave {
		width: 750rpx;
		height: 200rpx;
	}

	.btn {
		margin: 110rpx auto;
		width: 686rpx;
		height: 88rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background: #6aa2ff;
		display: flex;
		justify-content: center;
		align-items: center;

		.textbtn {
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			font-weight: 580;
		}
	}

	.text1 {
		/* 根据需要调整文本样式 */
		font-size: 18px;
		font-weight: 600;
		color: #FFFFFF;
		padding-left: 20rpx;
		padding-top: 16px;
	}

	.icon {
		width: 36px;
		/* 图标宽度 */
		height: 44px;
		/* 图标高度 */
		padding-right: 8px;
		padding-top: 16px;
	}
</style>