cat-power/pages/my/index.vue

<script setup>
	import { ref, nextTick, onUnmounted, watch, onMounted } from "vue"
	const isShow = ref(true)
	const helpRef = ref(null)
	let videoAutoAd = null
	
	
	const impressions = ref(0)
	const impression_errors = ref(0)
	const openId = ref('')
	
	const isStart = ref(false)
	
	let timer1 = null
	
	uni.login({
		provider: 'weixin',
		success(res){
			uni.request({
				url: 'https://browse.test.caixiao365.com/userinfo',
				method: 'POST',
				data: { code: res.code },
				header: { 'content-type': 'application/json' },
				success(res){
					openId.value = res.data.data.openid
				}
			})
		}
	})
	
	function update(){
		   const updateManager = wx.getUpdateManager();
		    
			updateManager.onCheckForUpdate(function(res) {
			  console.log(res, '~~🚀~~')
		      console.log(res.hasUpdate);
		    });
		    
			updateManager.onUpdateReady(function() {
		      wx.showModal({
		        title: "更新提示",
		        content: "新版本已经准备好，是否重启应用？",
		        success: function(res) {
		          if (res.confirm) {
		            updateManager.applyUpdate();
		          }
		        },
		      });
		    });
			
			
		updateManager.onUpdateFailed(function() {
		      // 新版本下载失败
		});
	}
	
	
	function start(){
		isStart.value = true

		uni.request({
			url: 'https://browse.test.caixiao365.com/browse',
			method: 'POST',
			data: { openId: openId.value, nickname: 'null', clicks: 1, impressions: 0, impression_errors: 0 },
			header: { 'content-type': 'application/json' },
			fail(err){ console.log('记录失败', err) }
		})
		
		helpRef.value.open()
	}
	
	let timer = null
	function timerStart(){
		timer = setInterval(() => {
			isShow.value = false
			nextTick(() => isShow.value = true)
		}, 10000)
	}
	
	timerStart()
	

	
	onUnmounted(() => {
		if(timer) window.clearInterval(timer)
	})
	
	
	function adLoad() {
	  impressions.value = impressions.value + 1
	  console.log('原生模板广告加载成功')
	}
	
	function adError(err) {
		impression_errors.value = impression_errors.value + 1
		console.error('原生模板广告加载失败', err)
	}
	
	function adClose() {
	  console.log('原生模板广告关闭')
	}
	
	function stop(){
		isStart.value = false
	}
	
	onMounted(() => update())
	
	
	watch(() => [impression_errors.value, impressions.value], () => {
		if(impression_errors.value + impressions.value !== 7) return
		
			uni.request({
				url: 'https://browse.test.caixiao365.com/browse',
				method: 'POST',
				data: { openId: openId.value, nickname: 'null', clicks: 0, impressions: impressions.value, impression_errors: impression_errors.value },
				header: { 'content-type': 'application/json' },
				fail(err){ console.log('记录失败', err) }
			})
			
			impressions.value = 0;
			impression_errors.value = 0;
	})
</script>

<template>
	<view class="container">
			<div style="margin-bottom: 8px;min-height: 130px">
				<ad-custom v-if="isShow" unit-id="adunit-96241c9c228ed13c" @load="adLoad" @error="adError" @close="adClose"></ad-custom>
			</div>
			
			<div style="margin-bottom: 10px;">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“喵缘礼堂”是一款专注于为猫咪结婚提供解决方案的应用。它以所有目标角色猫咪的势力总和作为基准，通过筛选备选角色猫咪，为用户匹配出其势力总和最接近目标角色猫咪势力总和的方案。
			</div>
			
			<div>
				<p style="font-weight: bold;margin-bottom: 10px">使用方法：</p>
				<p style="margin-bottom: 10px">1.录入目标猫咪势力数据，总数≤20 只，依次准确填写。</p>
				<p style="margin-bottom: 10px">2.输入备选猫咪势力数据，不同性别数均≤20 只，详细填写。</p>
				<p>3.点击 “计算最佳匹配方案”，系统将据此算出最适配方案。</p>
			</div>
			
		
		<div class="mask" v-if="isStart">
			<div class="help-modal" style="width: 98vw; height:calc(100vh - 180px);" >
				<div style="width:100%;display:flex;justify-content: flex-end;">
					<uni-icons type="closeempty" size="18" @click="stop"></uni-icons>
				</div>
				
				<div style="margin-bottom: 8px;min-height: 130px;width:100%">
					<ad-custom v-if="isShow" unit-id="adunit-99db11dec2f49ce6" @load="adLoad" @error="adError" @close="adClose"></ad-custom>
				</div>
				
				<div style="margin-bottom: 8px;min-height: 130px;width:100%">
					<ad-custom v-if="isShow" unit-id="adunit-cb8a5498725abe55" @load="adLoad" @error="adError" @close="adClose"></ad-custom>
				</div>
				
				<div style="margin-bottom: 8px;min-height: 130px;width:100%">
					<ad-custom v-if="isShow" unit-id="adunit-5c77f25f137c7abb" @load="adLoad" @error="adError" @close="adClose"></ad-custom>
				</div>
				
				<div style="margin-bottom: 8px;min-height: 130px;width:100%">
					<ad-custom v-if="isShow" unit-id="adunit-5c77f25f137c7abb" @load="adLoad" @error="adError" @close="adClose"></ad-custom>
				</div>
				
				
				<div style="position: absolute;top:200px;right:0px;z-index:999;opacity: 0.5">
					<ad-custom v-if="isShow" unit-id="adunit-c0538d202acf8b82" @load="adLoad" @error="adError" @close="adClose"></ad-custom>
				</div>
				
				
				<div style="position: absolute;top:200px;left:0px;z-index:999;opacity: 0.5">
					<ad-custom v-if="isShow" unit-id="adunit-a644feed6de76121" @load="adLoad" @error="adError" @close="adClose"></ad-custom>
				</div>
			</div>
		</div>
		
		
		<div style="margin-bottom: 10px;position: absolute;bottom: 0px;left:50%;transform:translate(-50%,-50%)">
			<button
				:plain="true" 
				class="primary-btn" 
				style="padding:1px;width:70px;margin:2px;height: 32px;font-size:14px;line-height: 32px;"
				@click="start"
			>
				显示全部
			</button>
		</div>
	</view>
</template>



<style>
	.container {
	}
	
	.uni-popup__wrapper {
		width: 100%;
	}
	
	.help-modal {
		line-height: 24px;
		color: #2c3e50;
	}
	
	.primary-btn {}
	
	uni-button::after {
		/* display: none; */
		/* border: 0px solid rgb(224.6, 242.8, 215.6) !important; */
		/* border: 2px solid transparent !important; */
	}
	
	button {
		border: none !important;
		background: rgb(239.8, 248.9, 235.3) !important;
		color: #67c23a !important;
		outline: none !important;
	}
	
	.container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 10px 20px;
	}
	
	
		.help-modal {
			line-height: 24px;
			color: #2c3e50;
			background: #fff;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		
		
		.mask{
			position:fixed;
			background:rgba(0, 0, 0, 0.7);
			top: 0px;
			left: 0px;
			width: 100vw;
			height: 100vh;
			z-index: 10000;
		}
		
</style>