novelAD/pages/tools/shengBoChuChen.vue

<template>
	<view class="content p-rel pdt-100">
		<view class="p-rel h-200 flex ai_center fd_c">
			<ourLoading active translateY="50" background-color="transparent" color="#ea9f8a" />
		</view>
		<view class="p-rel flex ai_center fd_c">
			<view class="text-62 mgt-10">{{ statusNum }}%</view>
			<view class="text-36 text-500 mgy-30">正在声波初尘中...</view>
			<view class="text-24 text-555 mgb-80">手机音量调到最大，可以获得最后的除尘效果</view>
			<view class="btn_s w-300" @click="handleClick">{{ open? '结束除尘':'开始除尘' }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import ourLoading from '@/components/our-loading/our-loading.vue'
const open = ref(false)
const statusNum = ref(0)
var timer = null
const handleClick = () =>{
	if(!open.value){
		open.value = true
	}else{
		return
	}
	if(open.value){
		timer = setInterval(() => {
			if(statusNum.value < 100){
				let num = Math.ceil(Math.random()*3) 
				statusNum.value += statusNum.value + num > 100 ? 1 : num
			}else{
				clearInterval(timer)
				open.value = false
				statusNum.value = 0
				timer = null
				uni.showToast({
					title:'除尘结束'
				})
			}
		}, 30)
	}
}
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
	}
</style>