uniProject/pages/my/index.vue

<template>
	<view class="ezy-my-page">
		<view class="my-head-box">
			<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.userImg + ')'}"></icon>
			<view class="head-content-box">
				<text>{{myInfoData.userName}}</text>
				<view class="ezy-jf-box" v-if="loginFlag">
					<icon class="jf-icon"></icon>
					<text class="jf-text" >{{myInfoData.credit}}</text>
				</view>
			</view>
		</view>
		<swiper class="my-hyqy-swiper" circular :indicator-dots="hyqyData.indicatorDots" :autoplay="hyqyData.autoplay"
		:interval="hyqyData.interval" :duration="hyqyData.duration" indicator-color="#5195d3" indicator-active-color="#83d9ff">
			<!-- 1.数学 2.英语-->
			<swiper-item v-for="(item, index) in 2" :key="index" class="hyqy-box" :class="getHyqyClass(index)">
					<view class="hyqy-btn" @click="hyqyBtn(index)" v-if="getHyqyBtn(index)"></view>
			</swiper-item>
		</swiper>
		<view class="my-list-box">
			<view class="list-row" @click="telClick">
				<icon class="list-icon tel-icon"></icon>
				<text>手机号码</text>
			</view>
			<view class="list-row" @click="checkWrong">
				<icon class="list-icon error-icon"></icon>
				<text>我的错题</text>
			</view>
			<view class="list-row" @click="orderClick">
				<icon class="list-icon order-icon"></icon>
				<text>我的订单</text>
			</view>
			<view class="list-row no-jt" @click="aboutClick">
				<icon class="list-icon about-icon"></icon>
				<text>关于我们</text>
			</view>
			<view  v-if="loginFlag" class="list-row no-jt" @click="yonghuzhuxiao">
				<icon class="list-icon zhuxiao-icon"></icon>
				<text>用户注销</text>
			</view>
			<view class="list-row no-jt" @click="exitLogin">
				<icon class="list-icon login-out-icon"></icon>
				<text>退出登录</text>
			</view>
		</view>
		<CustomTabBar :cardId="cardId" :currentTabNumber="2" :nianji="nianji" :zhangId="zhangId" :tipFlag="tipFlag"></CustomTabBar>
		<tip-small-dialog ref="exitDialogRef" @confirm-btn="exitBtn" :content="tipContent"></tip-small-dialog>
		<tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :content="MESSAGE_VISITER_TO_LOGIN"></tip-middle-dialog>
		<tip-small-dialog ref="zhuxiaoDialogRef" @confirm-btn="zhuxiaoBtn" :content="zhuxiaoContent"></tip-small-dialog>
		<tel-dialog @telClose="telClose" @bindBtn="bindBtn" v-if="telDialogFlag"></tel-dialog>
	</view>
</template>

<script setup>
	import {toast,getUserIdentity} from "@/utils/common";
	import cacheManager from '@/utils/cacheManager.js';
	import {logout} from '@/api/login.js'
	import {myInfo,zhuxiao} from '@/api/my.js'
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import {getCurrentInstance} from 'vue';
	import {onLoad} from '@dcloudio/uni-app';
	import {reactive,ref} from "vue";
	import tipSmallDialog from '@/components/dialog/tipSmallDialog.vue';
	import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
	import telDialog from './telDialog.vue'
	import {MESSAGE_VISITER_TO_LOGIN} from "@/utils/constant.js"
	import {
		onShow
	} from '@dcloudio/uni-app';
	onShow(() => {
		if(!cacheManager.get('auth')){
			youkeFun();
		}else{
			// 非游客
			noYoukeFun();
		}
	})
	
	
	const zhangId = ref(null); //游客使用
	const nianji = ref(null); //游客使用
	const cardId = ref(null); //游客使用
	const tipFlag = ref(null); //游客使用
	const tipContent = '你确定要执行这个操作吗？';
	const zhuxiaoContent = '你确定要执行这个操作吗？';
	let hyqyData = reactive({
			indicatorDots: true,
			autoplay: true,
			interval: 10000,
			duration: 500
	});
	let loginFlag = ref(false);
	let telDialogFlag = ref(false);
	let myInfoData = reactive({
		userImg: '',
		userName: '',
		credit: '',
		vipFlag: '',
	});
	let routerOpt  = ref(false);
	const exitDialogRef = ref(null);
	const youkeDialogRef = ref(null);
	const zhuxiaoDialogRef = ref(null);

	const exitLogin = () => {
		exitDialogRef.value.handleShow();
	}

	// 退出按钮
	const exitBtn = () => {
		if(loginFlag.value){
			logout().then(res => {
					toast('退出登录成功')
				cacheManager.clearAll();
				uni.redirectTo({
					url: '/pages/login/index'
				});
			}).catch(err => {
				toast('退出登录失败，请稍后重试')
			})
		}else{
			uni.redirectTo({
				url: '/pages/login/index'
			});
		}

	}
	
	const zhuxiaoBtn = () => {
		let req = {
		
		}
		zhuxiao().then(res=>{
			cacheManager.clearAll();
				toast('用户注销成功')
			uni.redirectTo({
				url: '/pages/login/index'
			});
		}).catch(err=>{
				toast('失败，请稍后重试')
		})
	}
	
	function yonghuzhuxiao(){
			zhuxiaoDialogRef.value.handleShow();
	}
	// 游客弹窗---确定

	function ykConfirm(){
		uni.redirectTo({
			url: '/pages/login/index'
		});
	}

	// 手机号码
	function telClick(){
		if(loginFlag.value){
			telDialogFlag.value = true;
		}else{
			youkeDialogRef.value.handleShow();
		}

	}

	// 手机号码绑定
	function bindBtn(){
		telDialogFlag.value = false;
		myGetAuth()
	}

	// 关闭手机号码弹窗
	function telClose(){
		telDialogFlag.value = false;
	}

	// 关于我们
	function aboutClick(){
		if(loginFlag.value){
			uni.redirectTo({
				url: '/pages/my/aboutPage'
			});
		}else{
			uni.redirectTo({
				url: `/pages/my/aboutPage?nianji=${routerOpt.nianji}&cardId=${routerOpt.cardId}&zhangId=${routerOpt.zhangId}&tipFlag=${routerOpt.tipFlag}`
			});
		}
	}

	// 订单
	function orderClick(){
		if(loginFlag.value){
			uni.redirectTo({
				url: '/pages/pay/order'
			});
		}else{
			youkeDialogRef.value.handleShow();
		}
	}

	// 获取用户数据
	function getMyInfo(){
		myInfo({}).then(res => {
			getUserImg(res.data.growthType)
			myInfoData.userName = res.data.userName;
			myInfoData.credit = res.data.credit;
		})
	}

	// 获取用户头像
	function getUserImg(data){
		 switch (data) {
		    case 0:
		        myInfoData.userImg = 'static/images/my/head-img0.png'
		        break;
		    case 1:
		        myInfoData.userImg = 'static/images/my/head-img1.png'
		        break;
		    case 2:
		        myInfoData.userImg = 'static/images/my/head-img2.png'
		        break;
		    case 3:
		        myInfoData.userImg = 'static/images/my/head-img3.png'
		        break;
		    default:
		        myInfoData.userImg = 'static/images/my/head-unlogin-img.png'
		        break;

		}
	}
	// 会员权益按钮
	function hyqyBtn(index){
		let cardId = index+1;
		/* index为学科 1数学 2英语 */
		if(loginFlag.value){
			// 非游客
			uni.redirectTo({
				url: `/pages/pay/svip?cardId=${cardId}&formPage=my`
			})
		}else{
			// 游客
			youkeDialogRef.value.handleShow();
		}
	}

	// 判断是否是游客
	function myGetAuth(){
		let LocalStorage = cacheManager.get('auth');
		if (LocalStorage) {
			// 非游客
			noYoukeFun()
		}else{
			youkeFun();
		}
	}

	// 游客
	function youkeFun(){
		zhangId.value = routerOpt.zhangId
		nianji.value = routerOpt.nianji
		cardId.value = routerOpt.cardId
		tipFlag.value = routerOpt.tipFlag
		// my游客
		loginFlag.value = false;
		myInfoData.userName = '游客';
		myInfoData.userImg = 'static/images/my/head-unlogin-img.png'
	}

	// 非游客
	function noYoukeFun(){
		loginFlag.value = true;
		getMyInfo();
	}

	// 获取会员权益card class
	function getHyqyClass(index){
		let VipIndex =index +1;
		if(cacheManager.get('auth')){
			// 非游客
			let VipArr = cacheManager.get('auth').cardList;
			if (VipArr.includes(VipIndex)) {
			        return 'hyqy-box' + VipIndex;
			    } else {
			        return 'hyqy-disabled-box' + VipIndex;
			}
		}else{
			// 游客
			return 'hyqy-disabled-box' + VipIndex;
		}

	}

	//获取会员权益按钮是否显示
	function getHyqyBtn(index){
		let VipIndex =index +1;
		if(cacheManager.get('auth')){
			let VipArr = cacheManager.get('auth').cardList;
			if (VipArr.includes(VipIndex)) {
					return false;
				} else {
					return true;
				}
		}else{
			// 游客
			return 'hyqy-disabled-box' + VipIndex;
		}
	}

	onLoad((options) => {
		if(!cacheManager.get('auth')){
			// 游客
			routerOpt = options;
		}else{
		}
	})

  function checkWrong() {
	if(loginFlag.value){
		const AuthCode = getUserIdentity();
		if (AuthCode == 'Visitor') {
			youkeDialogRef.value.handleShow();
			return;
		}
		uni.redirectTo({
		  url: '/pages/wrong/index'
		})
	}else{
		youkeDialogRef.value.handleShow();
	}
  }
</script>