ygoa_miniapp/pages/mine/index.vue

<template>
	<view class="content">
		<!-- 用户信息部分 -->
		<uni-card margin="0" spacing="0">
			<view class="headImg">
				<image
					:src="userStore.user.photo==''?config.baseUrlPre+config.defaultAvatarPath:config.baseUrlPre+userStore.user.photo"
					class="avatar" @click="toEditAvatar"></image>
			</view>
			<view class="user-info">
				<view class="info-detail">
					<view class="name">
						<text>姓名: {{ userStore.user.name}}</text>
					</view>
					<view>
						<text>ID: {{ userStore.user.useId }}</text>
					</view>
					<!-- 部门切换框 -->
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							部门:
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="deptNameArray">
								<view class="uni-input">{{deptNameArray[index]}}</view>
							</picker>
						</view>
					</view>
					<view>
						<text> 职务: {{ userStore.user.groupXUsers[index].posName ||'暂无'}}</text>
					</view>

				</view>
				<uni-icons @click="lookMsg()" type="forward" size="16" margin-left="10px"></uni-icons>
			</view>
		</uni-card>

		<uni-card margin="0" spacing="0" is-shadow="false">
			<!-- 功能按钮区 -->
			<view class="function-list">
				<view class="function-item" @click="editData">
					<text class="ygoa-icon icon-edit"></text>
					<text class="title">编辑资料</text>
					<text class="desc">></text>
				</view>

				<view class="function-item" @click="checkIn">
					<text class="ygoa-icon icon-checkIn"></text>
					<text class="title">我的考勤</text>
					<text class="desc">></text>
				</view>

				<view class="function-item" @click="clockIn">
					<text class="ygoa-icon icon-clockIn"></text>
					<text class="title">我的打卡</text>
					<text class="desc">></text>
				</view>
				<view class="function-item" @click="setting">
					<text class="ygoa-icon icon-setting"></text>
					<text class="title">应用设置</text>
					<text class="desc">></text>
				</view>
			</view>
		</uni-card>


	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import $tab from "@/plugins/tab.js"
	import { useUserStore } from '@/store/user.js'
	import config from '@/config';
	import { onShow } from '@dcloudio/uni-app'
	const userStore = useUserStore()

	onShow(() => {
		uni.$emit('showTabBarBadge')
	})

	// 部门数组
	const deptNameArray = ref(['研发部', '业务部', '法务部']);
	const index = ref(0);
	onMounted(() => {
		initDeptArray();
	})

	//部门初始化
	function initDeptArray() {
		const groupXUsers = userStore.user.groupXUsers;
		// 使用map方法提取groupName
		deptNameArray.value = groupXUsers.map(groupXUser => groupXUser.groupName);
	}

	// 部门切换事件
	function bindPickerChange(e) {
		index.value = e.detail.value; // 更新选择的部门索引
	};

	// 查看个人信息的函数
	function lookMsg() {
		$tab.navigateTo('/pages/mine/personal_message/personal_message?id=' + userStore.user.useId + '&name=' + userStore.user.name);
	};

	// 编辑资料的函数
	function editData() {
		$tab.navigateTo('/pages/mine/edit/edit')
	};

	// 我的考勤的函数
	function checkIn() {
		$tab.navigateTo('/pages/mine/checkIn/checkIn')
	}

	// 应用设置的函数
	function setting() {
		$tab.navigateTo('/pages/mine/setting/setting')
	};

	// 打卡的函数
	function clockIn() {
		$tab.navigateTo('/pages/mine/clockIn/clockIn')
	};
	//头像修改页
	function toEditAvatar() {
		// $tab.navigateTo('/pages/mine/avatar/avatarTest/avatarTest')
		$tab.navigateTo('/pages/mine/avatar/avatar')
	}
</script>


<style lang="scss">
	@import "@/static/font/ygoa/iconfont.css";

	.ygoa-icon {
		margin-right: 0.625rem;
		font-size: 1.6rem;
	}

	.content {
		display: flex;
		flex-direction: column;
	}


	.user-info {
		display: flex;
		align-items: center;
		padding: 1rem 3rem;
		border-bottom: 1rpx solid #666;
		color: #777;
	}


	.avatar {
		width: 6.25rem;
		height: 6.25rem;
		border-radius: 50%;
	}

	.info-detail {
		flex-grow: 1;
		// text-align: center;
	}

	.name {
		padding: 0.5rem 0;
		color: #333;
		font-size: 1.1rem;
	}



	.function-list {
		margin-bottom: 2rem;
	}

	.function-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.75rem;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-bottom: 0.75rem;
		border-bottom: 1px solid gainsboro;
	}


	.title {
		flex-grow: 1;
		font-size: 1rem;
	}

	.desc {
		color: #777;
		margin-right: 0.5rem;
	}

	.select1 {
		display: inline-block;
		width: 50%;
		margin-top: 0.3rem;
	}

	.headImg {
		text-align: center;
	}


	//样式穿透
	::v-deep .uni-list-cell {
		justify-content: left;
	}

	::v-deep .uni-list-cell-left {
		padding: 0 0;
		font-size: 1.1rem;
		color: #333;
		flex: none;
	}

	::v-deep .uni-list-cell::after {
		background-color: #f5f5f5;
	}

	::v-deep .uni-input {
		padding: 0.5rem 0.25rem;
		text-decoration: underline;
		/* 给文字添加下划线 */
		color: blue;
		font-size: 1.1rem;
		background-color: #f5f5f5;
		overflow: hidden;
		/* 隐藏超出部分 */
		white-space: nowrap;
		/* 不换行 */
		text-overflow: ellipsis;
		/* 省略号 */
		max-width: 30vh;
	}


	::v-deep .uni-list-cell-db,
	.uni-list-cell-right {
		flex: none;
	}

	::v-deep .uni-card {
		background-color: #f5f5f5 !important;
	}

	::v-deep .uni-card--shadow {
		box-shadow: none !important;
	}

	::v-deep .uni-card--border {
		border: none !important;
	}
</style>