ygoa_miniapp/pages/mine/index.vue

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

				</view>
				<uni-icons @click="lookMsg()" type="forward" size="16" style="margin-right: 30rpx;"></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="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="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 {
		ref,
		reactive,
		onMounted
	} from 'vue';

	import headImg from "@/static/images/mine/headImg.jpg"
	import $tab from "@/plugins/tab.js"
	import { getUnReadMessageNum } from '@/api/message';
	import { getUnProcessNum } from '@/api/process';
	import {
		useUserStore
	} from '@/store/user.js'
	const userStore = useUserStore()
	const userInfo = ref({})
	onMounted(() => {
		userInfo.value = userStore.user
		showTarBarBadge();
		
	})
	
	function showTarBarBadge(){
		let unReadMsgNum=0;
		let unProcessNum=0;
		getUnProcessNum(userStore.user.useId,"").then(res=>{
			unProcessNum=parseInt(res.returnParams.total, 10);
			// console.log('unProcessNum',res.returnParams.total);
			// if(unProcessNum==0){
			// 	uni.removeTabBarBadge({
			// 		index:1
			// 	})
			// }else{
			// 	uni.setTabBarBadge({
			// 	  index: 1,
			// 	  text: String(unProcessNum)
			// 	})
			// }
			getUnReadMessageNum(userStore.user.useId).then(res=>{
				unReadMsgNum=parseInt(res.returnParams, 10)+unProcessNum;
				if(unReadMsgNum==0){
					uni.removeTabBarBadge({
						index:0
					})
				}else{
					uni.setTabBarBadge({
					  index: 0,
					  text: unReadMsgNum>99?'99+':String(unReadMsgNum)
					})
				}
			})
		})
		
	}
	// 部门数组
	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.useId + '&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')
	};
	function toEditAvatar(){
		$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 4rem;
		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;
		// text-decoration-color: blue;
	}


	::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>