uniProject/pages/my/index.vue

<template>
	<view class="mobile-my-page">
		<view class="user-info-box">
		    <view class="user-img-box">
		        <img class="head-img" :src="myInfoData.userImg" v-if="myInfoData.userImg">
		        <icon class="phone-default-userImg" v-else></icon>
		    </view>
		    <view class="user-content-box">
		        <view class="user-name">{{myInfoData.userName}}</view>
		        <view class="user-info">
		            <view>{{myInfoData.realName}}</view><text v-if="myInfoData.realName && mineInfo.orgName"></text>
		            <view>{{myInfoData.orgName}}</view><text v-if="myInfoData.orgName && mineInfo.positionName"></text>
		            <view>{{myInfoData.positionName}}</view>
		        </view>
		    </view>
		</view>
		
		<view class="my-list-box">
			<view class="list-row" @click="goToPage('xuefen')">
				<icon class="list-icon xuefen-icon"></icon>
				<text>学分</text>
				<text class="row-content">{{myInfoData.credit}}分</text>
			</view>
			<view class="list-row" @click="goToPage('xiaoxi')">
				<icon class="list-icon xiaoxi-icon"></icon>
				<text>消息</text>
				<text class="row-content">{{myInfoData.countNotice}}条</text>
			</view>
			<view class="list-row" @click="goToPage('zhengshu')">
				<icon class="list-icon zhengshu-icon"></icon>
				<text>证书</text>
				<text class="row-content">{{myInfoData.countCert}}个</text>
			</view>
		</view>
		<view class="my-list-box">
			<view class="list-row" @click="goToPage('cuoti')">
				<icon class="list-icon cuoti-icon"></icon>
				<text>错题</text>
			</view>
			<view class="list-row" @click="goToPage('baoming')">
				<icon class="list-icon baoming-icon"></icon>
				<text>报名</text>
			</view>
			<view class="list-row" @click="goToPage('sxtcs')">
				<icon class="list-icon sxtcs-icon"></icon>
				<text>摄像头测试</text>
			</view>
			<view class="list-row" @click="goToPage('sxtsm')">
				<icon class="list-icon sxtsm-icon"></icon>
				<text>摄像头说明</text>
			</view>
			<view class="list-row" @click="goToPage('shezhi')">
				<icon class="list-icon shezhi-icon"></icon>
				<text>设置</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive,ref} from "vue";
	import {toast} from "@/utils/common";
	import {getMineInfo} from '@/api/my.js'
	import {onLoad,onShow} from '@dcloudio/uni-app';
	
	let myInfoData = reactive({
		userImg: '',
		realName: '',
		orgName: '',
		userName: '',
		positionName:'',
		credit:'',
		countCert:'',
		countNotice:'',

	});
	
	onLoad(() => {})
	
	onShow(() => {getMyInit()})
	
	function getMyInit() {
		getUserInfo();
	}
	
	function getUserInfo(){
		getMineInfo({}).then(res => {
			myInfoData.userImg= res.data.icon;
			myInfoData.realName = res.data.realName;
			myInfoData.orgName = res.data.orgName;
			myInfoData.userName = res.data.userName;
			myInfoData.positionName = res.data.positionName;
			myInfoData.credit = res.data.credit;
			myInfoData.countCert = res.data.countCert;
			myInfoData.countNotice = res.data.countNotice;
		})
	}
	
	function goToPage(data){
		switch (data) {
			// 学分
			case 'xuefen':
			    uni.navigateTo({
			    	url:'/pages/admin/my/myInfo?from=my'
			    })
			break;
			
			// 消息
			case 'xiaoxi':
			    uni.navigateTo({
			    	url:'/pages/admin/my/myInfo?from=my'
			    })
			break;
			
			// 证书
			case 'zhengshu':
			    uni.navigateTo({
			    	url:'/pages/admin/my/myInfo?from=my'
			    })
			break;
			
			// 错题
			case 'cuoti':
			    uni.navigateTo({
			    	url:'/pages/admin/my/myInfo?from=my'
			    })
			break;
			
			// 报名
			case 'baoming':
			    uni.navigateTo({
			    	url:'/pages/admin/my/myInfo?from=my'
			    })
			break;
			
			// 摄像头测试
			case 'sxtcs':
			    uni.navigateTo({
			    	url:'/pages/admin/my/myInfo?from=my'
			    })
			break;
			
			// 摄像头说明
			case 'sxtsm':
			    uni.navigateTo({
			    	url:'/pages/admin/my/myInfo?from=my'
			    })
			break;
			
			// 设置
			case 'shezhi':
			    uni.navigateTo({
			    	url:'/pages/my/setting'
			    })
			break;
		}
	}
</script>

<style>

</style>