ygoa_miniapp/pages/mine/index.vue

<template>
	<view class="content">
		<!-- 用户信息部分 -->
		<view class="user-info">
			<image :src="headImg" class="avatar"></image>
			<view class="info-detail">
				<view>
					<text>{{ userInfo.name}}</text>
				</view>
				<view>
					<text>ID: {{ userInfo.id }}</text>
				</view>
				<view>部门：
					<uni-data-select v-model="value" :localdata="userInfo.department" @change="changeS1" :clear="false"
						class="select1"></uni-data-select>
				</view>
				<view>
					<text> 职务： {{ userInfo.department[value].position }}</text>
				</view>

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

		</view>

		<!-- 功能按钮区 -->
		<view class="function-list">
			<view class="function-item" @click="handleButtonClick1">
				<image :src="messageEdit" class="icon"></image>
				<text class="title">编辑资料</text>
				<text class="desc">></text>
			</view>
			<view class="function-item" @click="handleButtonClick2">
				<image :src="waitWork" class="icon"></image>
				<text class="title">待办事项</text>
				<text class="desc">></text>
			</view>
			<view class="function-item" @click="handleButtonClick3">
				<image :src="checkIn" class="icon"></image>
				<text class="title">我的考勤</text>
				<text class="desc">></text>
			</view>
			<view class="function-item" @click="handleButtonClick4">
				<image :src="setting" class="icon"></image>
				<text class="title">应用设置</text>
				<text class="desc">></text>
			</view>
		</view>


	</view>
</template>

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

	import headImg from "/static/images/mine/headImg.jpg"
	import setting from "/static/images/mine/setting.png"
	import checkIn from "/static/images/mine/checkIn.png"
	import waitWork from "/static/images/mine/waitWork.png"
	import messageEdit from "/static/images/mine/edit.png"
	import $tab from "../../plugins/tab.js"
	const userInfo = reactive({
		id: '123',
		name: '张三',
		department: [{
				value: 0,
				text: "研发部",
				position: '软件开发工程师'
			},
			{
				value: 1,
				text: "业务部",
				position: '销售经理'
			},
		],
	});
	const value = ref(0);

	function changeS1(e) {
		//部门切换事件
		console.log(e)
	};

	function lookMsg() {
		$tab.navigateTo('/pages/mine/personal_message/personal_message')
	};

	function handleButtonClick1() {
		$tab.navigateTo('/pages/mine/edit/edit')
	};
	function handleButtonClick2(){
		$tab.navigateTo('/pages/mine/test/test')
	}
	function handleButtonClick3(){
		$tab.navigateTo('/pages/mine/checkIn/checkIn')
	}

	function handleButtonClick4() {
		$tab.navigateTo('/pages/mine/setting/setting')
	};
</script>


<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
	}
//样式穿透
	::v-deep .uni-select__selector-item text,.uni-select__input-text {
		font-size: larger;
	}

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

	.avatar {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.info-detail {
		flex-grow: 1;
	}

	.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;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

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

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

	.select1 {
		display: inline-block;
		width: 50%;
	}
</style>