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="jf-box" v-if="loginFlag">
					<icon class="jf-icon"></icon>
					<text class="jf-text" >{{myInfoData.credit}}</text>
				</view>
			</view>
		</view>
		<view :class="loginFlag && myInfoData.vipFlag?'hyqy-box':'hyqy-disabled-box'">
			<view class="hyqy-btn" @click="hyqyBtn" v-if="!myInfoData.vipFlag"></view>
		</view>
		<view class="my-list-box">
			<view class="list-row" @click="telClick" v-if="loginFlag">
				<icon class="list-icon tel-icon"></icon>
				<text>手机号码</text>
			</view>
			<view class="list-row" @click="checkWrong" v-if="loginFlag">
				<icon class="list-icon error-icon"></icon>
				<text>我的错题</text>
			</view>
			<view class="list-row" @click="orderClick" v-if="loginFlag">
				<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 class="list-row no-jt" @click="exitLogin">
				<icon class="list-icon login-out-icon"></icon>
				<text>退出登录</text>
			</view>
		</view>
		<CustomTabBar :cardId="cardId" :nianji="nianji" :zhangId="zhangId"></CustomTabBar>
		<tip-small-dialog ref="exitDialogRef" @confirm-btn="exitBtn" :content="tipContent"></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} 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 telDialog from './telDialog.vue'
	import {MESSAGE_VISITER_TO_LOGIN} from "@/utils/constant.js"
	const zhangId = ref(null);
	const nianji = ref(null);
	const cardId = ref(null);
	const tipContent = '你确定要执行这个操作吗？'; 

	let loginFlag = ref(false);
	let telDialogFlag = ref(false);
	let myInfoData = reactive({
		userImg: 'static/images/my/head-unlogin-img.png',
		userName: '',
		credit: '',
		vipFlag: '',
	});
	let routerOpt  = ref(false);
	const exitDialogRef = ref(null);
	
	const exitLogin = () => {
		exitDialogRef.value.handleShow();
	}

	const exitBtn = () => {
		logout().then(res => {
			cacheManager.clearAll();
			uni.redirectTo({
				url: '/pages/login/index'
			});
		}).catch(err => {
			toast('退出登录失败，请稍后重试')
		})
		
	}
	
	// 手机号码
	function telClick(){
		telDialogFlag.value = true;
	}
	
	// 手机号码绑定
	function bindBtn(){
		myGetAuth()
	}
	
	// 关闭手机号码弹窗
	function telClose(){
		telDialogFlag.value = false;
	}
	
	// 关于我们
	function aboutClick(){
		uni.redirectTo({
			url: '/pages/my/aboutPage'
		});
	}
	
	// 订单
	function orderClick(){
		uni.redirectTo({
			url: '/pages/pay/order'
		});
	}
	
	// 获取用户数据
	function getMyInfo(){
		myInfo({}).then(res => {
			getUserImg(res.data.growth)
			myInfoData.userName = res.data.userName;
			myInfoData.credit = res.data.credit;
			myInfoData.vipFlag = res.data.vipFlag;
		})
	}
	
	// 获取用户头像
	function getUserImg(data){
		 switch (data) {
		    case 0:
		        myInfoData.userImg = 'static/images/my/head-img0.png'
		        break;
		    case 10:
		        myInfoData.userImg = 'static/images/my/head-img1.png'
		        break;
		    case 20:
		        myInfoData.userImg = 'static/images/my/head-img2.png'
		        break;
		    case 50:
		        myInfoData.userImg = 'static/images/my/head-img30.png'
		        break;
		    default:
		        myInfoData.userImg = 'static/images/my/head-unlogin-img.png'
		        break;

		}
	}
	// 会员权益按钮
	function hyqyBtn(){
		if(loginFlag.value){
			uni.redirectTo({
				url: '/pages/pay/svip'
			})
		}else{
			toast("当前为游客模式请登录！")
			uni.redirectTo({
				url: '/pages/login/index'
			})
		}
	}
	
	// 判断是否是游客
	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
		// my游客
		loginFlag.value = false;
		myInfoData.userName = '游客';
		myInfoData.userImg = 'static/images/my/head-unlogin-img.png'
	}
	
	// 非游客
	function noYoukeFun(){
		loginFlag.value = true;
		getMyInfo();
	}
	
	onLoad((options) => {
		if(!cacheManager.get('auth')){
			// 游客
			routerOpt = options;
			youkeFun();
		}else{
			// 非游客
			noYoukeFun();
		}
	})

  function checkWrong() {
	
	const AuthCode = getUserIdentity();  
	if (AuthCode == 'Visitor') {
		toast(MESSAGE_VISITER_TO_LOGIN);
		uni.navigateTo({
			url: '/pages/login/index'
		});
		return;
	}  
    uni.redirectTo({
      url: '/pages/wrong/index'
    })
  }
</script>