music-score/src/view/abnormal-pop/index.tsx

import { defineComponent } from "vue";
import styles from "./index.module.less";
import state from "/src/state";
import { popImgs } from "/src/view/evaluating";
import { evaluatingData } from "/src/view/evaluating";
import { Vue3Lottie } from "vue3-lottie";
import loading from "./loading.json";
import animBg from "../audio-list/img/refresh_anim.json";

export default defineComponent({
  name: "abnormal-pop",
  emits: ["close", "confirm"],
  setup(props, { emit }) {
    return () => (
      <>
        {evaluatingData.socketErrorStatus === 0 && (
          <div class={styles.fraction}>
            <img class={styles.close} src={popImgs.icon_close} onClick={() => emit("close")} />
            <div class={styles.content}>
              <div class={styles.title}>网络连接失败</div>
              <div class={styles.desc}>请确保网络正常后重新连接</div>
            </div>
            <div>
              <img src={popImgs.icon_btn} class={styles.btn} onClick={() => emit("confirm", true)} />
            </div>
          </div>
        )}
        {evaluatingData.socketErrorStatus === 1 && (
          // <div class={styles.loadColumn}>
          // 	<Vue3Lottie class={styles.loadIcon} animationData={loading} loop={true}></Vue3Lottie>
          // 	<img class={styles.close} src={popImgs.icon_close} onClick={() => emit("close")} />
          // 	<p>正在连接服务器，请稍后…</p>
          // </div>
          <div class={styles.loadingPop}>
            <Vue3Lottie animationData={animBg} class={styles.loadingIcon}></Vue3Lottie>
            <div class={styles.loadingTip}>正在连接中，请稍等…</div>
            <div class={styles.loadingClose} onClick={() => emit("close")}>
              取消连接
            </div>
          </div>
        )}
        {evaluatingData.socketErrorStatus === 2 && (
          <div class={styles.loadColumn}>
            <img class={styles.successIcon} src={popImgs.icon_success} />
            <p>网络连接成功</p>
          </div>
        )}
      </>
    );
  },
});