orchestra-music-score/src/pages/detail/CheckDelayPopup/index.tsx

import { PropType, defineComponent, onMounted, watch } from "vue";
import { Vue3Lottie } from 'vue3-lottie'
import { browser } from '/src/helpers/utils'
import styles from "./index.module.less";
import delay_bg from "./image/bg.json"
import left_adorn from "./image/left_ adorn.json"
import right_adorn from "./image/right_ adorn.json"
import step1 from "./image/step1_icon.json"
import step2 from "./image/step2_icon.json"
import step3 from "./image/step3_icon.json"
import step4 from "./image/step4_icon.json"
import step5 from "./image/step5_icon.json"
import step_tips_1 from "./image/step_tips_icon1.png"
import step_tips_2 from "./image/step_tips_icon2.png"
import step_tips_3 from "./image/step_tips_icon3.png"
import step_tips_4 from "./image/step_tips_icon4.png"
import step_tips_5 from "./image/step_tips_icon5.png"
import step_tips_5_1 from "./image/step_tips_icon5_1.png"
import step_tips_5_2 from "./image/step_tips_icon5_2.png"
import step_top_icon from "./image/step_top_icon.png"
import step_top_icon_1 from "./image/step_top_icon_1.png"
import step_top_icon_2 from "./image/step_top_icon_2.png"
import step_top_icon_3 from "./image/step_top_icon_3.png"
import step_top_icon_4 from "./image/step_top_icon_4.png"
import step_top_icon_5 from "./image/step_top_icon_5.png"
import step_btn_1 from "./image/delay_btn_icon1.png"
import step_btn_2 from "./image/delay_btn_icon2.png"
import setp_dot_1 from './image/step_state_icon1.png'
import setp_dot_2 from './image/step_state_icon2.png'
import setp_dot_3 from './image/step_state_icon3.png'
import iconBack from './image/icon-back.png'

interface IDelayData {
	/** 延迟时间 */
	time: number;
	/** 检测次数 */
	count: number;
	/** 耳机状态 */
	erji: boolean;
	checkStatus: "init" | "ing" | "error";
	step: number;
	earPhoneType: string;
}

const browserInfo = browser()

/** 延迟检测组件 */
export default defineComponent({
	name: "CheckDelayPopup",
	emits: ["close", "startCheckDelay", "load", "back"],
	props: {
		delayData: {
			type: Object as PropType<IDelayData>,
			default: () => ({ time: 0, count: 0 }),
		},
	},
	setup(props, { emit }) {
		return () => (
			<div class={styles.delayContainer}>
				<Vue3Lottie class={[styles.delayBg, browserInfo.iPad ? styles.delayPadBg : '']} animationData={delay_bg}></Vue3Lottie>
				<Vue3Lottie class={styles.leftAdorn} animationData={left_adorn}></Vue3Lottie>
				<Vue3Lottie class={styles.rightAdorn} animationData={right_adorn}></Vue3Lottie>
				{/*返回按钮*/}
				<img class={styles.delayBackBtn} src={iconBack} onClick={() => emit("back")} />
				<Vue3Lottie class={styles.delayAdorn} animationData={step1} style={{ display: props.delayData.step <= 2 ? '' : 'none' }}></Vue3Lottie>
				<Vue3Lottie class={styles.delayAdorn} animationData={step2} style={{ display: props.delayData.step === 3 ? '' : 'none' }}></Vue3Lottie>
				<Vue3Lottie class={styles.delayAdorn} animationData={step3} style={{ display: props.delayData.step === 4 ? '' : 'none' }}></Vue3Lottie>
				<Vue3Lottie class={styles.delayAdorn} animationData={step4} style={{ display: props.delayData.step === 5 ? '' : 'none' }}></Vue3Lottie>
				<Vue3Lottie class={styles.delayAdorn} animationData={step5} style={{ display: props.delayData.step >= 6 ? '' : 'none' }}></Vue3Lottie>
				<div class={styles.delayBody} >
					<div class={styles.delayBox}>
						<div class={styles.dbTop}>
							<img class={styles.topIcon} src={props.delayData.step <= 3 ? step_top_icon_1 : props.delayData.step === 4 ? step_top_icon_2 : props.delayData.step === 5 ? step_top_icon_3 : 
								props.delayData.step >= 6 && props.delayData.earPhoneType !== "有线耳机" ? step_top_icon_4 : props.delayData.step >= 6 && props.delayData.earPhoneType === "有线耳机" ? step_top_icon_5 : '' } />
							{
								props.delayData.step <= 2 ? 
								<div class={styles.topDots}>
									<img src={setp_dot_1} />
									<img src={setp_dot_1} />
									<img src={setp_dot_1} />
									<img src={setp_dot_1} />
								</div>
								: props.delayData.step === 3 ? 
								<div class={styles.topDots}>
									<span class={styles.aniDot3} ></span>
									<img src={setp_dot_1} />
									<img src={setp_dot_1} />
									<img src={setp_dot_1} />
								</div>		
								: props.delayData.step === 4 ? 
								<div class={styles.topDots}>
									<img src={setp_dot_2} />
									<span class={styles.aniDot3} ></span>
									<img src={setp_dot_1} />
									<img src={setp_dot_1} />
								</div>	
								: props.delayData.step === 5 ? 
								<div class={styles.topDots}>
									<img src={setp_dot_2} />
									<img src={setp_dot_2} />
									<span class={styles.aniDot3} ></span>
									<img src={setp_dot_1} />
								</div>	
								: 
								<div class={styles.topDots}>
									<img src={setp_dot_2} />
									<img src={setp_dot_2} />
									<img src={setp_dot_2} />
									<span class={styles.aniDot3} ></span>
								</div>																															
							}

						</div>
						<img class={styles.dbContext} src={step_tips_1} style={{ display: props.delayData.step <= 2 ? '' : 'none' }} />
						<img class={styles.dbContext} src={step_tips_2} style={{ display: props.delayData.step === 3 ? '' : 'none' }} />
						<img class={styles.dbContext} src={step_tips_3} style={{ display: props.delayData.step === 4 ? '' : 'none' }} />
						<img class={styles.dbContext} src={step_tips_4} style={{ display: props.delayData.step === 5 ? '' : 'none' }} />
						<img class={styles.dbContext} src={step_tips_5} style={{ display: props.delayData.step >= 6 && !props.delayData.erji ? '' : 'none' }} />
						<img class={styles.dbContext} src={step_tips_5_1} style={{ display: props.delayData.step >= 6 && props.delayData.erji && props.delayData.earPhoneType !== "有线耳机" ? '' : 'none' }} />
						<img class={styles.dbContext} src={step_tips_5_2} style={{ display: props.delayData.step >= 6 && props.delayData.erji && props.delayData.earPhoneType === "有线耳机" ? '' : 'none' }} />
						<img class={[styles.dbBtn, styles.heartbeat]} src={step_btn_1} style={{ display: props.delayData.step <= 2 ? '' : 'none' }} onClick={() => emit("startCheckDelay")} />
						<img class={[styles.dbBtn, styles.heartbeat]} src={step_btn_2} style={{ display: props.delayData.step >= 6 ? '' : 'none' }} onClick={() => {emit("close")}} />
					</div>
				</div>
			</div>
		);
	},
});