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>
				<text>ID: {{ userInfo.id }}</text>
				<view>
					<text>{{ userInfo.department}} | {{ userInfo.position }}</text>
				</view>

			</view>
			<button @click="navigateTo('personal_message/personal_message')">查看资料</button>
		</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 class="function_btns">
			


			<button type="primary" @click="schedule">
					<uni-icons type="contact" size="30"></uni-icons>
					待办事项</button>
				<button type="primary" @click="clockingIn" style="background-color: cornflowerblue;">我的考勤</button>
			
			<button type="default" @click="modifyPassword">密码修改</button>
			<button type="warn" @click="logout">退出登录</button>
		</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"
	//    onMounted()=>{
	// 	console.log(functionBtns)
	// }
	const userInfo = ref({
		id: '123',
		name: '张三',
		department: '研发部',
		position: '软件开发工程师'
	});


	// function modifyPassword() {
	// 	navigateTo('edit/edit')
	// };

	// function logout() {
	// 	console.log('点击了退出登录');

	// };
	import $tab from "@/plugins/tab.js"
	
	function handleButtonClick1() {
		$tab.navigateTo('edit/edit')
	};

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


<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
	}



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