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 v-if="loginFlag" 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="duihuamaDuihuan">
				<icon class="list-icon duihuanma-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 v-if="loginFlag" class="list-row no-jt" @click="yinsizhengce">
				<icon class="list-icon yszc-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-big-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :imgShow="false"></tip-big-dialog>
		<tip-small-dialog ref="zhuxiaoDialogRef" @confirm-btn="zhuxiaoBtn" :content="zhuxiaoContent"></tip-small-dialog>
		<duihuanmaDialog ref="duihuanmaDialogRef" @confirm-btn="duihuanmaBtn" title="兑换"></duihuanmaDialog>
		<tel-dialog @telClose="telClose" @bindBtn="bindBtn" v-if="telDialogFlag"></tel-dialog>
		<agree-content-dialog ref="agreeContentDialogRef" :agreeType="agreeType"></agree-content-dialog>
	</view>
</template>

<script setup>
	import agreeContentDialog from '@/pages/login/agreeContentDialog.vue';
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import cacheManager from '@/utils/cacheManager.js';
	import {
		logout
	} from '@/api/login.js'
	import {
		myInfo,
		zhuxiao,
		duihuanmaCode
	} 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 duihuanmaDialog from '@/components/dialog/duihuanmaDialog.vue';
	import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
	import tipBigDialog from '@/components/dialog/tipBigDialog.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 agreeType = ref(null);
	const agreeContentDialogRef = ref(null);
	const zhangId = ref(null); //游客使用
	const nianji = ref(null); //游客使用
	const cardId = ref(null); //游客使用
	const tipFlag = ref(null); //游客使用
	const tipContent = '你确定要执行这个操作吗？';
	const zhuxiaoContent = '你确定要执行这个操作吗？';
	const duihuanmaContent = '你确定要执行这个操作吗？';
	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 duihuanmaDialogRef = ref(null);

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

	// 退出按钮
	const exitBtn = () => {
		if (loginFlag.value) {
			logout().then(res => {
				toast('退出登录成功')
				cacheManager.clearAll();
				uni.reLaunch({
					url: '/pages/login/index'
				});
			}).catch(err => {
				toast('退出登录失败，请稍后重试')
			})
		} else {
			uni.reLaunch({
				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 duihuamaDuihuan() {
		duihuanmaDialogRef.value.handleShow();
	}

	function duihuanmaBtn(data) {
		console.log('data', data);
		let req = {
			code: data
		}
		duihuanmaCode(req).then(res => {
			toast('兑换成功')
			cacheManager.updateVipStatus('auth', res.data)
			uni.redirectTo({
				url: '/pages/my/index'
			})
		}).catch(err => {
			toast('失败，请稍后重试')
		})
	}

	function yinsizhengce() {
		agreeType.value = 'ystk'
		agreeContentDialogRef.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 'yk-disabled-box';
		}

	}

	//获取会员权益按钮是否显示
	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 false;
		}
	}

	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>