下载图片弹窗

pages/creator/imgDetail.vue

@@ -8,7 +8,7 @@
         <uni-icons v-if="detailMsg.isHot ==='0'" class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-hot'" size="24"  ></uni-icons>
         <uni-icons v-else class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-hot'" size="24" :color="likeColor"></uni-icons>
       </view>
-      <view class="toolbar-box" @click="$noMultipleClicks(authDownload,detailMsg.imgUrl)">
+      <view class="toolbar-box" @click="isShowDownLoadBox()">
         <uni-icons v-if="isDownload" class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-xiazai'" size="24" ></uni-icons>
         <uni-icons v-else class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-xiazai'" size="24" ></uni-icons>
         <text>下载</text>
@@ -30,6 +30,11 @@
         </button>
       </view>
     </view>
+	<view v-if="!showDownLoad" class="downLoad-wrap">
+		<view class="ad_button" @click="$noMultipleClicks(authDownload,detailMsg.imgUrl)"></view>
+		<view class="vip_button" @click="goOpenVip()"></view>
+		<view class="close_button" @click="isShowDownLoadBox()"></view>
+	</view>
   </view>
 </template>
 
@@ -51,6 +56,7 @@
 	export default {
 		data() {
 			return {
+				showDownLoad: false,
 				detailMsg: {}, // 图片信息
 				userInfo: undefined, // 登录用户信息
 				isDownload: false, // 是否已下载
@@ -115,6 +121,16 @@
 			}
 		},
 		methods: {
+			isShowDownLoadBox() {
+				console.log('11111111');
+				this.showDownLoad = !this.showDownLoad
+			},
+			goOpenVip() {
+				this.isShowDownLoadBox()
+				uni.navigateTo({
+					url:'/pages/userInfo/vip/vip'
+				})
+			},
 			//加载激励视频广告
 			loadAdvertise(adId){
 				// 在页面中定义激励视频广告
@@ -678,6 +694,48 @@
 </script>
 
 <style lang="scss">
+	.downLoad-wrap {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 80%;
+		height: 1000rpx;
+		background-image: url('https://vediocnd.corpring.com/AIDrawCYYJ/vip_box_bg1.png');
+		background-size: 100% 100%;
+		padding: 40rpx;
+		box-sizing: border-box;
+		border-radius: 20px;
+		.close_button {
+			position: absolute;
+			top: 20rpx;
+			right: 20rpx;
+			width: 60rpx;
+			height: 60rpx;
+			background-image: url('https://vediocnd.corpring.com/AIDrawCYYJ/down_box_close.png');
+			background-size: 100% 100%;
+		}
+		.vip_button {
+			position: absolute;
+			bottom: 20rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 310rpx;
+			height: 100rpx;
+			background-image: url('https://vediocnd.corpring.com/AIDrawCYYJ/down_box_vip.png');
+			background-size: 100% 100%;
+		}
+		.ad_button {
+			position: absolute;
+			top: 360rpx;
+			right: 30rpx;
+			// transform: translateX(-50%);
+			width: 190rpx;
+			height: 80rpx;
+			background-image: url('https://vediocnd.corpring.com/AIDrawCYYJ/ad_button1.png');
+			background-size: 100% 100%;
+		}
+	}
 	.imgDetail {
 		height: 100vh;
 		width: 100vw;
@@ -686,6 +744,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+	
 
 		.main-img {
 			width: 100%;