uniProject/pages/client/my/index.vue

<template>
	<view class="client-my-page">
		<view class="my-head-box">
			<view class="head-img-box">
				<img class="head-img" :src="myInfoData.userImg" v-if="myInfoData.userImg">
				<icon class="head-icon" v-else></icon>
			</view>
			<view class="head-content-box">
				<text>{{myInfoData.realName}}</text>
				<view class="head-content-row-box" v-if="myInfoData.userName">
					<icon class="tel-icon"></icon>
					<text class="content-text" >{{myInfoData.userName}}</text>
				</view>
				<view class="head-content-row-box" v-if="myInfoData.idcard">
					<icon class="idcard-icon"></icon>
					<text class="content-text" >{{myInfoData.idcard}}</text>
				</view>
			</view>
		</view>
		
		<view class="my-num-box">
			<view class="num-item-box" @click="goToPage('ks')">
				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.kaoshiCount"
				:customStyle="{background: '#ff2527'}" :text="myInfoData.kaoshiCount" />
				<icon class="ks-icon"></icon>
				<text class="num-title">考试管理</text>
			</view>
			<view class="num-item-box" @click="goToPage('lx')">
				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.lianxiCount"
				:customStyle="{background: '#ff2527'}" :text="myInfoData.lianxiCount" />
				<icon class="lx-icon"></icon>
				<text class="num-title">练习管理</text>
			</view>
			<view class="num-item-box" @click="goToPage('kc')">
				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.kechengCount"
				:customStyle="{background: '#ff2527'}" :text="myInfoData.kechengCount" />
				<icon class="kc-icon"></icon>
				<text class="num-title">课程管理</text>
			</view>
		</view>
		
		<view class="my-list-box">
			<view class="list-row" @click="goToPage('grcj')">
				<icon class="list-icon user-icon"></icon>
				<text>修改个人信息</text>
			</view>
			<view class="list-row" @click="goToPage('cj')">
				<icon class="list-icon score-icon"></icon>
				<text>我的成绩</text>
			</view>
			<view class="list-row" @click="showZhuaPaiConfirm">
				<icon class="list-icon sxtcs-icon"></icon>
				<text>摄像头测试</text>
			</view>
			<view class="list-row" @click="showMessageDl">
				<icon class="list-icon sxtsm-icon"></icon>
				<text>摄像头说明</text>
			</view>
			<view class="list-row" @click="exitLogin">
				<icon class="list-icon login-out-icon"></icon>
				<text>退出登录</text>
			</view>
		</view>
		<!-- 底部区域 -->
		<customTabbarClient :currentTab="1"></customTabbarClient>
		<common-dialog ref="commonDialogRef" :title="exitTitle" :content="exitContent"@confirm-btn="exitBtn"></common-dialog>
		<shexiangDialogVue ref="shexiangRef" title="摄像头说明"></shexiangDialogVue>
		
		<!-- 摄像头确认 -->
		<zhuapaiConfrimVue ref="zpRef" @error="zpConfirmError" title="摄像头测试"></zhuapaiConfrimVue>
	</view>
</template>

<script setup>
	import {toast} from "@/utils/common";
	import {onLoad,onShow} from '@dcloudio/uni-app';
	import cacheManager from '@/utils/cacheManager.js';
	import {getMineUser,getMineInfo,getMineLogout} from '@/api/my.js'
	import {reactive,ref} from "vue";
	import customTabbarClient from "@/components/custom-tabbar/custom-tabbar-client.vue"
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import shexiangDialogVue from "@/components/dialog/shexiangDialog.vue";
	import zhuapaiConfrimVue from "@/components/zhuapaiConfirm/index.vue";
	
	let myInfoData = reactive({
		userImg: '',
		realName: '',
		idcard: '',
		userName: '',
		kaoshiCount: '',
		kechengCount: '',
		lianxiCount: '',
		from:''
	});
	const commonDialogRef = ref(null);
	const shexiangRef = ref(null);
	const zpRef = ref(null);
	const exitContent = '你确定要执行这个操作吗？';
	const exitTitle = '退出登录';
	function getMyInit() {
		getUserInfo();
		getNumInfo();
	}
	// 获取用户头像
	function goToPage(data){
		switch (data) {
		    case 'ks':
		        uni.navigateTo({
		        	url:'/pages/client/Kaoshi/list?from=my'
		        })
		        break;
		    case 'lx':
		        uni.navigateTo({
		        	url:'/pages/client/Lianxi/list?from=my'
		        })
		        break;
		    case 'kc':
		        uni.navigateTo({
		        	url:'/pages/client/Kecheng/list?from=my'
		        })
		        break;
			case 'cj':
			    uni.navigateTo({
			    	url:'/pages/client/Chengji/list?from=my'
			    })
			    break;
			case 'grcj':
			    uni.navigateTo({
			    	url:'/pages/client/my/myInfo?from=my'
			    })
			    break;
		}
	}
	function getUserInfo(){
		getMineUser({}).then(res => {
			myInfoData.userImg= res.data.icon;
			myInfoData.realName = res.data.realName;
			myInfoData.idcard = res.data.idcard;
			myInfoData.userName = res.data.userName;
		})
	}
	function getNumInfo(){
		getMineInfo({}).then(res => {
			myInfoData.kaoshiCount = res.data.kaoshiCount;
			myInfoData.kechengCount = res.data.kechengCount;
			myInfoData.lianxiCount = res.data.lianxiCount;
		})
	}
	function exitLogin(){
		commonDialogRef.value.handleShow();
		
	}
	function exitBtn(){
		getMineLogout().then(res => {
			toast('退出登录成功')
			cacheManager.clearAll();
			uni.reLaunch({
				url: '/pages/Login/index'
			});
		}).catch(err => {
			toast('退出登录失败，请稍后重试')
		})
	}
	
	function showMessageDl() {
		console.log(shexiangRef.value)
		shexiangRef.value.handleShow()
	}
	
	function showZhuaPaiConfirm() {
		zpRef.value.showDialog()
	}
	
	function zpConfirmSuccess() {
		zpRef.value.showDialog()
	}
	function zpConfirmError() {
		uni.showToast({
			title: '摄像头唤起异常',
			icon: 'none'
		})
	}
	
	onLoad(() => {
    
	})

  onShow(() => {
	getMyInit()
  })
</script>

<style>
</style>