svip弹窗

common/styles/global/pages.scss

@@ -1295,4 +1295,33 @@
 			padding: 120rpx 56rpx 120rpx;
 			.yxsm-close-btn{top: 100rpx;}
 		}
+}
+
+// svip弹窗
+.ezy-svip-dialog{
+	.tip-content-box{
+		width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;
+		@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;
+		background-image: url("@/static/images/common/tip-big-bj.png");
+		position: relative;
+		icon{
+			width: 510rpx;
+			height: 269rpx;@include ezy-no-repeat-cover;
+			position: absolute;top: -20%;left: 50%;transform: translateX(-50%);
+		}
+		.svip-img1{background-image: url("@/static/images/pay/svip-dialog-img1.png");}
+		.svip-img2{background-image: url("@/static/images/pay/svip-dialog-img2.png");}
+	}
+	.tip-content{
+		color: #666;font-size: 32rpx;padding:160rpx 0 80rpx;line-height: 1.6;text-align: center;
+		text-align: center;border-bottom: 1px dashed #70cbf4;
+	}
+	.tip-btn-box{
+		width: 100%;display: flex;justify-content: space-between;
+		.not-confirm-btn,.confirm-btn{
+			width: 208rpx;height: 83rpx;@include ezy-no-repeat-cover;margin: 30rpx 32rpx 0;
+		}
+		.not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");}
+		.confirm-btn{background-image: url("@/static/images/pay/svip-btn.png");}
+	}
 }

pages/study/lookShipin.vue

@@ -33,6 +33,7 @@
 			</view>
 		</uni-popup>
 		<tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :content="YouKeContent"></tip-middle-dialog>
+		<svip-dialog ref="svipDialogRef" @confirm-btn="svipConfirm"></svip-dialog>
 	</view>
 
 </template>
@@ -51,6 +52,7 @@
 		videoWancheng
 	} from "@/api/shipin.js"
 	import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
+	import svipDialog from './svipDialog.vue';
 	import {
 		toast,
 		getUserIdentity
@@ -81,7 +83,7 @@
 			}
 		},
 		components: {
-			tipMiddleDialog
+			tipMiddleDialog,svipDialog
 		},
 		onLoad(options) {
 			if (!cacheManager.get('auth')) {
@@ -236,8 +238,13 @@
 
 					})
 				}
+				
+				// this.$refs.svipDialogRef.handleShow();
 
 			},
+			svipConfirm(){
+				console.log('svip按钮');
+			},
 			ykConfirm() {
 				uni.redirectTo({
 					url: '/pages/login/index'

pages/study/svipDialog.vue

@@ -0,0 +1,53 @@
+<!-- 中弹窗 二行文字 -->
+<template>
+	<uni-popup ref="svipPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 <view class="ezy-svip-dialog">
+		<view class="tip-content-box">
+			<!-- :class="'svip-img'+id" -->
+			<icon class="svip-img svip-img1"></icon>
+			<view class="tip-content">开通SVIP会员解锁学习关卡</view>
+			<view class="tip-btn-box">
+				<view class="not-confirm-btn" @click="handleClose"></view>
+				<view class="confirm-btn" @click="confirmBtn"></view>
+			</view>
+		</view>
+	 </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	const props = defineProps({
+	  title: {
+	    type: String,
+	    default: '提示'
+	  },
+	  content: {
+	    type: String,
+		require: true,
+	    default: ''
+	  },
+	});
+	const svipPopup = ref(null); // 索引
+	const $emit = defineEmits(['confirm-btn'])
+	// 打开弹窗
+	function handleShow() {
+		svipPopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		svipPopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn');
+		svipPopup.value.close();
+	}
+	defineExpose({
+			handleShow
+		})
+</script>
+
+<style>
+</style>