uniProject/pages/client/my/index.vue

<template>
	<view class="client-my-page">
		<view class="my-head-box" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.myHeadBj + ')' }">
			<view class="head-img-box">
				<image class="head-img" :src="myInfoData.userImg" v-if="myInfoData.userImg"></image>
				<icon class="phone-default-userImg" v-else
					:style="{ backgroundImage: 'url(' + myInfoData.imgsArr.defaultUserImg + ')' }"></icon>
			</view>
			<view class="head-content-box">
				<text>{{myInfoData.realName}}</text>
				<view class="head-content-row-box" v-if="myInfoData.userName">
					<icon :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.telIcon + ')' }"></icon>
					<text class="content-text">{{myInfoData.userName}}</text>
				</view>
				<view class="head-content-row-box" v-if="myInfoData.idcard">
					<icon :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.idcardIcon + ')' }"></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 :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.ksIcon + ')' }"></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 :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.lxIcon + ')' }"></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 :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.kcIcon + ')' }"></icon>
				<text class="num-title">课程管理</text>
			</view>
		</view>

		<view class="my-list-box">
			<view class="list-row">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.userListIcon + ')' }">
				</icon>
				<text>修改状态</text>
				<picker :range="myInfoData.StatusList" mode='selector' range-key="name" :value="myInfoData.status"
					@change="onSelectStatusChange" class="select-picker-box">
					<view v-if="myInfoData.StatusList[myInfoData.status]" class="list-status-item">
						{{myInfoData.StatusList[myInfoData.status].name}}</view>
				</picker>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>

			</view>
			<view class="list-row" @click="goToPage('grcj')">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.userListIcon + ')' }">
				</icon>
				<text>修改个人信息</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
			<view class="list-row" @click="goToPage('ht')">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.htListIcon + ')' }">
				</icon>
				<text>我的合同</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
			<view class="list-row" @click="goToPage('cj')">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.scoreListIcon + ')' }">
				</icon>
				<text>我的成绩</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
			<view class="list-row" @click="goToPage('zc')">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.zhengce + ')' }"></icon>
				<text>隐私政策</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
			<view class="list-row" @click="goToPage('xy')">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.xieyi + ')' }"></icon>
				<text>用户服务协议</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
			<view class="list-row" @click="showZhuaPaiConfirm">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.sxtcsListIcon + ')' }">
				</icon>
				<text>摄像头测试</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
			<!-- <view class="list-row" @click="showMessageDl">
				<icon class="list-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.sxtsmListIcon + ')' }"></icon>
				<text>摄像头说明</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view> -->
			<view class="list-row" @click="zhuxiaoLogin">
				<icon class="list-icon"
					:style="{ backgroundImage: 'url(' + myInfoData.imgsArr.loginOutListIcon + ')' }"></icon>
				<text>用户注销</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
			<view class="list-row" @click="exitLogin">
				<icon class="list-icon"
					:style="{ backgroundImage: 'url(' + myInfoData.imgsArr.loginOutListIcon + ')' }"></icon>
				<text>退出登录</text>
				<icon class="jt-icon" :style="{ backgroundImage: 'url(' + myInfoData.imgsArr.jtIcon + ')' }"></icon>
			</view>
		
		</view>
		<!-- 底部区域 -->
		<customTabbarClient :currentTab="1"></customTabbarClient>
		<common-dialog ref="commonDialogRef" :title="exitTitle" :content="exitContent"
			@confirm-btn="exitBtn"></common-dialog>

		<common-dialog ref="zhuxiaoDialogRef" :title="zhuxiaoTitle" :content="zhuxiaoContent"
			@confirm-btn="zhuxiaoBtn"></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,
		getZhuangtaiInfo,
		updateZhuangtai,
		getMyOpsZhuangtai,
		yonghuzhuxiao
	} 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: '',
		imgsArr: {
			myHeadBj: '',
			defaultUserImg: '',
			telIcon: '',
			idcardIcon: '',
			ksIcon: '',
			lxIcon: '',
			kcIcon: '',
			userListIcon: '',
			htListIcon: '',
			scoreListIcon: '',
			sxtcsListIcon: '',
			sxtsmListIcon: '',
			loginOutListIcon: '',
			zhengce: '',
			xieyi: ''
		},
		status: 0,
		StatusList: []
	});
	const commonDialogRef = ref(null);
	const zhuxiaoDialogRef = ref(null);
	const shexiangRef = ref(null);
	const zpRef = ref(null);
	const exitContent = '你确定要执行这个操作吗？';
	const zhuxiaoContent = '你确定要执行这个操作吗？';
	const exitTitle = '退出登录';
	const zhuxiaoTitle = '用户注销';



	function onSelectStatusChange(dd) {
		myInfoData.status = dd.detail.value;
		const targetId = myInfoData.StatusList[myInfoData.status].id;
		updateZhuangtai({
			zhuangtai: targetId
		}).then(res => {
			if (res.data) {
				toast('更新成功')
			}
		})
	}

	function getMyOpsZhuangtaidata() {
		Promise.all([getMyOpsZhuangtai(), getZhuangtaiInfo()]).then(([res, res2]) => {
			myInfoData.StatusList = res.data;
			myInfoData.status = myInfoData.StatusList.findIndex(item => item.id == (res2.data || 1))
		})
	}


	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;
			case 'ht':
				uni.navigateTo({
					url: '/pages/client/hetong/hetongList'
				})
				break;
			case 'zc':
				uni.navigateTo({
					url: '/pages/client/my/zhengce?from=my'
				})
				break;
			case 'xy':
				uni.navigateTo({
					url: '/pages/client/my/xieyi?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/clientIndex'
			});
		}).catch(err => {
			toast('退出登录失败，请稍后重试')
		})
	}

	function zhuxiaoLogin() {
		zhuxiaoDialogRef.value.handleShow();

	}
	function zhuxiaoBtn() {
		yonghuzhuxiao().then(res => {
			toast('用户注销成功')
			cacheManager.clearAll();
			uni.reLaunch({
				url: '/pages/Login/clientIndex'
			});
		}).catch(err => {
			toast('用户注销失败，请稍后重试')
		})
	}

	function showMessageDl() {
		console.log(shexiangRef.value)
		shexiangRef.value.handleShow()
	}

	function showZhuaPaiConfirm() {
		// zpRef.value.showDialog()
		uni.navigateTo({
			url: "/pages/client/my/cameraTest"
		})
	}

	function zpConfirmSuccess() {
		zpRef.value.showDialog()
	}

	function zpConfirmError() {
		uni.showToast({
			title: '摄像头唤起异常',
			icon: 'none'
		})
	}

	onLoad(() => {
		myInfoData.imgsArr.myHeadBj = cacheManager.get('projectImg').client_my_bj;
		myInfoData.imgsArr.defaultUserImg = cacheManager.get('projectImg').user_default_img;
		myInfoData.imgsArr.telIcon = cacheManager.get('projectImg').my_tel_icon;
		myInfoData.imgsArr.idcardIcon = cacheManager.get('projectImg').my_idcard_icon;
		myInfoData.imgsArr.ksIcon = cacheManager.get('projectImg').my_ks_icon;
		myInfoData.imgsArr.lxIcon = cacheManager.get('projectImg').my_lx_icon;
		myInfoData.imgsArr.kcIcon = cacheManager.get('projectImg').my_kc_icon;
		myInfoData.imgsArr.userListIcon = cacheManager.get('projectImg').my_editor_icon;
		myInfoData.imgsArr.htListIcon = cacheManager.get('projectImg').zjht_icon;
		myInfoData.imgsArr.scoreListIcon = cacheManager.get('projectImg').my_score_icon;
		myInfoData.imgsArr.sxtcsListIcon = cacheManager.get('projectImg').my_sxtcs_icon;
		myInfoData.imgsArr.sxtsmListIcon = cacheManager.get('projectImg').my_sxtsm_icon;
		myInfoData.imgsArr.loginOutListIcon = cacheManager.get('projectImg').login_out_icon;
		myInfoData.imgsArr.jtIcon = cacheManager.get('projectImg').nav_bar_jt_bottom;
		myInfoData.imgsArr.zhengce = cacheManager.get('projectImg').zhengce;
		myInfoData.imgsArr.xieyi = cacheManager.get('projectImg').xieyi;

	})

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

<style>
</style>