novelAD/pages/tools/shengBoChuChen.vue

<template>
	<view class="content p-rel pdt-100" :style="{ paddingTop: statusBarHeight + 'px' }">
		<view class="p-rel h-200 flex ai_center fd_c">
			<image v-if="!open" style="width: 130rpx;height: 130rpx;margin-top: 40rpx;" src="/static/image/source/ql_icon.png"></image>
			<ourLoading v-else active translateY="50" background-color="transparent" color="#ea9f8a" />
		</view>
		<view class="p-rel flex ai_center fd_c">
			<template v-if="open">
				<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>
			</template>
			<view class="h-100" v-else>
				<view v-if="!firstClick" class="mgt-10 text-48">除尘结束</view>
			</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'
var statusBarHeight = uni.getStorageSync('statusBarHeight')
const open = ref(false)
const statusNum = ref(0)
const firstClick = ref(true)
var timer = null
const handleClick = () =>{
	if(!open.value){
		open.value = true
		firstClick.value = false
		// uni.vibrateLong({
		// 	success: function () {
		// 		console.log('success');
		// 	}
		// });
		uni.vibrateShort({
			type: 'heavy',
			success: function () {
				console.log('success');
			}
		});
	}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:'除尘结束'
				})
			}
		}, 100)
	}
}
</script>

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