music-score/src/page-instrument/evaluat-model/delay-check/index.tsx

import { Button, Popup } from "vant";
import styles from "./index.module.less";
import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
import { api_toggleTune, removeResult, sendResult } from "/src/helpers/communication";
import { Vue3Lottie } from "vue3-lottie";
import bg from "./json/bg.json";
import bg1 from "./json/bg1.json";
import f1 from "./json/f1.json";
import f2 from "./json/f2.json";
import f3 from "./json/f3.json";
import f4 from "./json/f4.json";
import f5 from "./json/f5.json";
import f6 from "./json/f6.json";
import f7 from "./json/f7.json";

export default defineComponent({
	name: "delay-check",
	setup() {
		const anim = ref();
		const data = reactive({
			show: false,
			/** 检测状态 */
			checkStatus: "init" as "init" | "ing" | "error",
			count: 0,
			step: 1,
		});
		const listenerResult = () => {
			if (data.checkStatus !== "ing") return;
			data.count++;
			if (data.count >= 2) {
				toggleTune("finishTune");
				return;
			}
			setTimeout(() => {
				toggleTune("start");
			}, 100);
		};
		onMounted(() => {
			data.show = true;
			sendResult(listenerResult);
			console.log(anim.value);
		});
		onUnmounted(() => {
			removeResult(listenerResult);
		});

		const toggleTune = async (state: "start" | "stop" | "finishTune") => {
			if (state === "start") {
				api_toggleTune("start", data.count);
				setTimeout(() => {
					api_toggleTune("stop");
				}, 1500);
			} else if (state === "finishTune") {
				api_toggleTune("finishTune");
			}
		};
		const list = [
			{
				id: 1,
				json: f1,
			},
			{
				id: 2,
				json: f2,
			},
			{
				id: 3,
				json: f3,
			},
			{
				id: 4,
				json: f4,
			},
			{
				id: 5,
				json: f5,
			},
			{
				id: 6,
				json: f6,
			},
			{
				id: 7,
				json: f7,
			},
		];
		return () => (
			<Popup
				teleport="body"
				overlay={false}
				class={["popup-custom", styles.popup]}
				transition="van-fade"
				v-model:show={data.show}
			>
				<div class={styles.delayBox}>
					<div class={[styles.item, data.step !== 7 && styles.show]}>
						<Vue3Lottie animationData={bg}></Vue3Lottie>
					</div>
					<div class={[styles.item, data.step === 7 && styles.show]}>
						<Vue3Lottie animationData={bg1}></Vue3Lottie>
					</div>
					<div class={[styles.item, data.step === 7 && styles.show]}>
						<Vue3Lottie
							ref={anim}
							animationData={bg1}
							onOnComplete={() => {
								console.log(123, anim.value);
							}}
						></Vue3Lottie>
					</div>
					{list.map((item, index) => {
						return (
							<div class={[styles.item, data.step === item.id && styles.show]}>
								<Vue3Lottie animationData={item.json} loop={false}></Vue3Lottie>
							</div>
						);
					})}
					<Button
						class={styles.btn}
						disabled={data.checkStatus !== "init"}
						onClick={() => {
							data.checkStatus = "ing";
							toggleTune("start");
						}}
					>
						开始检测
					</Button>
				</div>
			</Popup>
		);
	},
});