同步

pages/index/index.vue

@@ -83,12 +83,39 @@
 				</view>
 			</view>
 		</view>
+		<!-- 弹窗 -->
+		<u-popup :show="showAdImg" mode="center" bgColor="transparent">
+			<view class="ad-lay">
+				<view class="ad-down">
+					<u-count-down
+						ref="adCountDown"
+						:time="showAdTime"
+						:autoStart="false"
+						@change="timeData = $event"
+						@finish="showAdImg = false">
+						<view>
+							自动关闭<text>{{ timeData.seconds }}</text>S
+						</view>
+					</u-count-down>
+				</view>
+				<image class="ad-img" :src="layAdImg" mode="widthFix"></image>
+				<view class="ad-btn">
+					<u-icon
+						class="ad-btn-icon"
+						name="close-circle"
+						color="white"
+						size="36px"
+						@click="onRemoveAd"
+					></u-icon>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
 	import { region } from '@/apis/interfaces/address.js'
-    import { categories,jf,zf,index } from '@/apis/interfaces/index.js'
+    import { categories, jf, zf, index } from '@/apis/interfaces/index.js'
 	export default {
 		data() {
 			return {
@@ -104,6 +131,12 @@
                 jfList:[],
                 defaultViewId:'',
                 zfList:[],
+				// 首次进入弹窗
+				timeData	: {},
+				first		: 1,
+				showAdTime  : 0,
+				showAdImg	: true,
+				layAdImg	: ''
 			}
 		},
         onLoad() {
@@ -163,6 +196,15 @@
                         list.push(params)
                     })
                     this.notice = list
+					let { is_lay_ad, lay_ad_img, times } = res.layad
+					if(is_lay_ad) this.layAdImg = lay_ad_img
+					if(this.first === 1 && is_lay_ad){
+						this.showAdImg  = true
+						this.showAdTime = times * 1000
+						this.$nextTick(() => {
+							this.$refs.adCountDown.start()
+						})
+					}
                 }).catch(err=>{
                     uni.showToast({
                         title:err.message,
@@ -217,7 +259,12 @@
 				}).then(res => {
 					console.log(res)
 				})
-			},
+			},
+			// 关闭弹窗广告
+			onRemoveAd(){
+				this.first = 0;
+				this.showAdImg = false;
+			}
 		}
 	}
 </script>
@@ -227,6 +274,38 @@
 		background-color: white;
 		padding-top: 20rpx;
 	}
+	// ad弹窗广告
+	.ad-lay{
+		width: 70vw;
+		position: relative;
+		.ad-down{
+			position: absolute;
+			top: 20rpx;
+			right: 20rpx;
+			z-index: 1;
+			background: rgba(0, 0, 0, .5);
+			font-size: 20rpx;
+			padding: 10rpx 20rpx;
+			line-height: 30rpx;
+			border-radius: 24rpx;
+			color: white;
+			.ad-down-u{
+				display: inline-block;
+				line-height: 30rpx;
+			}
+		}
+		.ad-img{
+			width: 70vw;
+			border-radius: 20rpx;
+		}
+		.ad-btn{
+			text-align: center;
+			margin-top: 30rpx;
+			.ad-btn-icon{
+				display: inline-block;
+			}
+		}
+	}
 	// 轮播图
 	.banner{
 		position: relative;