我的页面学科card增加

common/styles/global/pages.scss

@@ -587,15 +587,25 @@
 		.jf-text{min-width: 60rpx;
 		text-align: center;}
 	}
-	.hyqy-box,.hyqy-disabled-box{
+	
+	// hyqy
+	.my-hyqy-swiper{
+		height: 385rpx;
+		.uni-swiper-dots-horizontal{bottom: 24rpx;}
+	}
+	.hyqy-box{
 		width: 731rpx;height: 385rpx;margin: 0 auto;position: relative;
 		@include ezy-no-repeat-cover;
 		.hyqy-btn{width: 154rpx;height: 54rpx;position: absolute;top: 46rpx;right: 46rpx;
 		@include ezy-no-repeat-cover;background-image: url("@/static/images/my/hyqy-btn.png");}
 	}
-	.hyqy-box{background-image: url("@/static/images/my/hyqy-img.png");}
-	// 未登录的值----待修改
-	.hyqy-disabled-box{background-image: url("@/static/images/my/hyqy-img-disabled.png");}
+	// 1数学 2英语
+	.hyqy-box1{background-image: url("@/static/images/my/hyqy-img1.png");}
+	.hyqy-disabled-box1{background-image: url("@/static/images/my/hyqy-img-disabled1.png");}
+	.hyqy-box2{background-image: url("@/static/images/my/hyqy-img2.png");}
+	.hyqy-disabled-box2{background-image: url("@/static/images/my/hyqy-img-disabled2.png");}
+	
+	// list
 	.my-list-box{
 		width:700rpx;margin: 36rpx auto 0;
 		.list-row{border-bottom: 2rpx solid #5bcdfb;color: #fff;box-sizing: border-box;padding: 30rpx 20rpx;

pages/my/index.vue

@@ -10,19 +10,23 @@
 				</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>
+		<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" v-if="loginFlag">
+			<view class="list-row" @click="telClick">
 				<icon class="list-icon tel-icon"></icon>
 				<text>手机号码</text>
 			</view>
-			<view class="list-row" @click="checkWrong" v-if="loginFlag">
+			<view class="list-row" @click="checkWrong">
 				<icon class="list-icon error-icon"></icon>
 				<text>我的错题</text>
 			</view>
-			<view class="list-row" @click="orderClick" v-if="loginFlag">
+			<view class="list-row" @click="orderClick">
 				<icon class="list-icon order-icon"></icon>
 				<text>我的订单</text>
 			</view>
@@ -37,6 +41,7 @@
 		</view>
 		<CustomTabBar :cardId="cardId" :nianji="nianji" :zhangId="zhangId"></CustomTabBar>
 		<tip-small-dialog ref="exitDialogRef" @confirm-btn="exitBtn" :content="tipContent"></tip-small-dialog>
+		<tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :content="YouKeContent"></tip-middle-dialog>
 		<tel-dialog @telClose="telClose" @bindBtn="bindBtn" v-if="telDialogFlag"></tel-dialog>
 	</view>
 </template>
@@ -51,13 +56,20 @@
 	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"
 	const zhangId = ref(null);
 	const nianji = ref(null);
 	const cardId = ref(null);
 	const tipContent = '你确定要执行这个操作吗？'; 
-
+	const YouKeContent = '您当前是游客身份，登录后才能浏览内容，现在去登录？';
+	let hyqyData = reactive({
+			indicatorDots: true,
+			autoplay: true,
+			interval: 2000,
+			duration: 500
+	});
 	let loginFlag = ref(false);
 	let telDialogFlag = ref(false);
 	let myInfoData = reactive({
@@ -68,11 +80,13 @@
 	});
 	let routerOpt  = ref(false);
 	const exitDialogRef = ref(null);
+	const youkeDialogRef = ref(null);
 	
 	const exitLogin = () => {
 		exitDialogRef.value.handleShow();
 	}
 
+	// 退出按钮
 	const exitBtn = () => {
 		logout().then(res => {
 			cacheManager.clearAll();
@@ -85,9 +99,21 @@
 		
 	}
 	
+	// 游客弹窗---确定
+	function ykConfirm(){
+		uni.redirectTo({
+			url: '/pages/login/index'
+		});
+	}
+	
 	// 手机号码
 	function telClick(){
-		telDialogFlag.value = true;
+		if(loginFlag.value){
+			telDialogFlag.value = true;
+		}else{
+			youkeDialogRef.value.handleShow();
+		}
+		
 	}
 	
 	// 手机号码绑定
@@ -109,9 +135,13 @@
 	
 	// 订单
 	function orderClick(){
-		uni.redirectTo({
-			url: '/pages/pay/order'
-		});
+		if(loginFlag.value){
+			uni.redirectTo({
+				url: '/pages/pay/order'
+			});
+		}else{
+			youkeDialogRef.value.handleShow();
+		}
 	}
 	
 	// 获取用户数据
@@ -120,7 +150,6 @@
 			getUserImg(res.data.growth)
 			myInfoData.userName = res.data.userName;
 			myInfoData.credit = res.data.credit;
-			myInfoData.vipFlag = res.data.vipFlag;
 		})
 	}
 	
@@ -146,16 +175,16 @@
 		}
 	}
 	// 会员权益按钮
-	function hyqyBtn(){
+	function hyqyBtn(index){
+		/* index为学科 1数学 2英语 */
 		if(loginFlag.value){
+			// 非游客
 			uni.redirectTo({
 				url: '/pages/pay/svip'
 			})
 		}else{
-			toast("当前为游客模式请登录！")
-			uni.redirectTo({
-				url: '/pages/login/index'
-			})
+			// 游客
+			youkeDialogRef.value.handleShow();
 		}
 	}
 	
@@ -187,6 +216,40 @@
 		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')){
 			// 游客
@@ -199,17 +262,20 @@
 	})
 
   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'
-    })
+	if(loginFlag.value){
+		const AuthCode = getUserIdentity();
+		if (AuthCode == 'Visitor') {
+			toast(MESSAGE_VISITER_TO_LOGIN);
+			uni.navigateTo({
+				url: '/pages/login/index'
+			});
+			return;
+		}  
+		uni.redirectTo({
+		  url: '/pages/wrong/index'
+		})
+	}else{
+		youkeDialogRef.value.handleShow();
+	}
   }
 </script>