ygoa_miniapp/pages/mine/index.vue

<template>
	<view class="content">
		<!-- 用户信息部分 -->
		<uni-card margin="0" spacing="0">
			<view class="headImg">
				<image :src="headImg" class="avatar"></image>
			</view>
			<view class="user-info">
				<view class="info-detail">
					<view class="name">
						<text>姓名: {{ userInfo.name}}</text>
					</view>
					<view>
						<text>ID: {{ userInfo.id }}</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="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
					<view>
						<text> 职务: {{ userInfo.department[index].position }}</text>
					</view>

				</view>
				<uni-icons @click="lookMsg()" type="forward" size="50" style="margin-right: 30rpx;"></uni-icons>
			</view>
		</uni-card>

		<uni-card margin="0" spacing="0">
			<!-- 功能按钮区 -->
			<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="waitWork">
					<text class="ygoa-icon icon-waitWork"></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="setting">
					<text class="ygoa-icon icon-setting"></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>
		</uni-card>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	import headImg from "@/static/images/mine/headImg.jpg"
	import $tab from "@/plugins/tab.js"
	import { useUserStore } from '@/store/user.js'
	const userStore = useUserStore()
	// const userInfo = ref({})
	onMounted(() => {
		console.log('userStore', userStore.user);
	})
	// 用户信息的响应式对象
	const userInfo = reactive({
		id: '123321',
		name: '张三',
		department: [{
				text: "研发部",
				position: '软件开发工程师'
			},
			{
				text: "业务部",
				position: '销售经理'
			},
			{
				text: '法务部',
				position: '法律顾问'
			}
		],
	});
	// 部门数组
	const array = ref(['研发部', '业务部', '法务部']);
	const index = ref(0);

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

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

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

	// 待办事项的函数
	function waitWork() {
		$tab.navigateTo('/pages/mine/waitWork/waitWork')
	}

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

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

	// 打卡的函数
	function clockIn() {
		$tab.navigateTo('/pages/mine/clockIn/clockIn')
	};
</script>


<style lang="scss">
	@import "@/static/font/ygoa/iconfont.css";
	
	.ygoa-icon{
		margin-right: 20rpx;
		font-size: 50rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
	}


	.user-info {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #ddd;
	}


	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.info-detail {
		flex-grow: 1;
		font-size: 28rpx;
	}

	.name {
		padding: 15rpx 0;
	}



	.function-list {
		margin-bottom: 60rpx;
	}

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


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

	.desc {
		color: #999;
		margin-right: 20rpx;
	}

	.select1 {
		display: inline-block;
		width: 50%;
		margin-top: 10rpx;
	}

	.headImg {
		text-align: center;
	}

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

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

	::v-deep .uni-input {
		padding: 15rpx 8rpx;
		text-decoration: underline; /* 给文字添加下划线 */
		text-decoration-color: blue;
	}
	
	::v-deep .uni-list-cell-db picker{
		width: 100px;
	}
</style>