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">
				<icon class="list-icon tel-icon"></icon>
				<text>手机号码</text>
			</view>
			<view class="list-row">
				<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" @click="quitClick">
				<icon class="list-icon login-out-icon"></icon>
				<text>退出登录</text>
			</view>
		</view>
		<CustomTabBar></CustomTabBar>
	</view>
</template>

<script setup>
	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 {getAuth} from '@/utils/auth.js';
	import {reactive,ref} from "vue";
	import { toast } from "../../utils/common";
	
	let loginFlag = ref(false);
	let myInfoData = reactive({
		userImg: 'static/images/my/head-unlogin-img.png',
		userName: '',
		credit: '',
		vipFlag: '',
	});
	
	const quitClick = () => {
		uni.showModal({
			title: '提示',
			content: '你确定要执行这个操作吗？',
			success: (res) => {
				if (res.confirm) {
					quit();
				} else if (res.cancel) {
					console.log('用户点击了取消');
				}
			}
		});

	}

	const quit = () => {
		uni.removeStorage({
			key: 'Mta-Auth',
			success: function(res) {
				console.log('success');
				uni.navigateTo({
					url: '/pages/login/index'
				});
			}
		});

	}
	
	// 订单
	function orderClick(){
		uni.navigateTo({
			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(){
		if (getAuth()) {
			// 已登录
			loginFlag.value = true;
			console.log(loginFlag.value,'已登录');
			getMyInfo();
		} else {
			loginFlag.value = false;
			myInfoData.userName = '游客';
			myInfoData.userImg = 'static/images/my/head-unlogin-img.png'
			console.log(loginFlag.value,'未登录');
		}
	}
	
	onLoad((options) => {
		myGetAuth();
		const instance = getCurrentInstance();
		// console.log(instance.appContext.config.globalProperties,'instance.appContext.config.globalProperties')
	})
</script>