classroom-instruments/src/views/home/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NImage, NModal } from 'naive-ui';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import teacherMan from './img/teacher-man.png';
import teacherWoman from './img/teacher-woman.png';
import iconEchats from './img/icon-echats.png';
import t1 from './img/t1.png';
import t11 from './img/t1-1.png';
import t12 from './img/t1-4.png';

import t2 from './img/t2.png';
import t21 from './img/t2-1.png';
import t22 from './img/t2-4.png';

import f1 from './img/f1.png';
import f11 from './img/f1-1.png';

import f2 from './img/f2.png';
import f21 from './img/f2-1.png';

import f3 from './img/f3.png';
import f31 from './img/f3-1.png';

import f4 from './img/f4.png';
import f41 from './img/f4-1.png';

import { useRouter } from 'vue-router';
import { useUserStore } from '/src/store/modules/users';
// import SelectClass from './modals/selectClass';
import dayjs from 'dayjs';
import UpdatePassword from '/src/components/layout/modals/update-password';
import AttendClass from '../prepare-lessons/model/attend-class';
import { useResizeObserver } from '@vueuse/core';
import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
import PreviewWindow from '../preview-window';
import { state } from '/src/state';
// import { state } from '/src/state';
export const formatDateToDay = () => {
  const hours = dayjs().hour();
  if (hours < 12) {
    return '早上好'; //如果小时数小于12则输出“早上好！”
  } else if (hours > 12 && hours < 18) {
    return '下午好'; //如果小时数大于12并且小于18，输入“下午好！”
  } else {
    return '晚上好'; //如果上面两个条件都不符合，则输出“晚上好！”
  }
};

export default defineComponent({
  name: 'home-page',
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const showUpdatePassword = ref(false);
    const showModalTone = ref(false);
    const forms = reactive({
      previewModal: false,
      previewParams: {} as any,
      showAttendClass: false,
      loading: false,
      message: '',
      list: [] as any,
      unit: null,
      classLoading: false,
      showGuide: false,
      homeLeftHeight: 'auto'
    });

    onMounted(async () => {
      useResizeObserver(
        document.querySelector('#homeInfoLeft-home') as any,
        (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          forms.homeLeftHeight = height + 'px';
        }
      );

      forms.classLoading = true;

      if (!userStore.getUserInfo.account.updatePasswordFlag) {
        showUpdatePassword.value = true;
      } else {
        forms.showGuide = true;
      }

      forms.classLoading = false;
    });
    return () => (
      <div class={styles.homeWrap}>
        <div class={styles.homeSection}>
          <div class={styles.homeLeft}>
            <i class={styles.homeWindow}></i>
            <div class={styles.homeUserInfo}>
              <i class={styles.homeTag}></i>
              <div class={styles.homeUsers}>
                <NImage
                  src={userStore.getUserInfo?.avatar || defultHeade}
                  class={styles.userImg}
                />
                <p class={styles.userName}>
                  Hi，{userStore.getUserInfo?.nickname} {formatDateToDay()}～
                </p>
              </div>
              <p class={styles.desc}>
                点击下方按钮，您可以根据声部进行备课或是直接选择班级开始上课，更好的规划教学哦！
              </p>

              <div class={styles.homeBtnGroup}>
                <div
                  class={styles.btnBk}
                  onClick={() => {
                    // 备课
                    router.push({
                      path: '/prepare-lessons'
                    });
                  }}></div>
                <div
                  class={styles.btnClass}
                  onClick={() => {
                    forms.showAttendClass = true;
                  }}></div>
              </div>

              <img src={iconEchats} class={styles.homeEchats} />
            </div>

            {userStore.getUserInfo.gender === 1 ? (
              <img src={teacherMan} class={styles.teacherMan} />
            ) : (
              <img src={teacherWoman} class={styles.teacherWoman} />
            )}
          </div>

          <div class={styles.homeRight}>
            <div class={styles.rightTop}>
              <div
                class={[styles.topSection, styles.topSection1]}
                onClick={() => {
                  forms.message = '听音练习功能暂未开放，敬请期待！';
                  showModalTone.value = true;

                  // const origin = /(localhost|192)/.test(location.host)
                  //   ? 'https://test.lexiaoya.cn'
                  //   : location.origin;
                  // const src = `${origin}/instrument/#/view-figner-listen?Authorization=${userStore.getToken}`;
                  // if (window.matchMedia('(display-mode: standalone)').matches) {
                  //   state.application = window.matchMedia(
                  //     '(display-mode: standalone)'
                  //   ).matches;
                  //   forms.previewModal = true;
                  //   forms.previewParams.src = src;
                  // } else {
                  //   window.open(src);
                  // }
                }}>
                <img src={t1} class={styles.tFun} />
                <img src={t11} class={styles.tTxt} />
                <img src={t12} class={styles.tTitle} />
              </div>
              <div
                class={[styles.topSection, styles.topSection2]}
                onClick={() => {
                  // forms.message = '节奏练习功能暂未开放，敬请期待！';
                  // showModalTone.value = true;
                  const origin = /(localhost|192)/.test(location.host)
                    ? 'https://test.lexiaoya.cn'
                    : location.origin;
                  const src = `${origin}/classroom-app/#/tempo-practice?Authorization=${userStore.getToken}&win=pc`;
                  if (window.matchMedia('(display-mode: standalone)').matches) {
                    state.application = window.matchMedia(
                      '(display-mode: standalone)'
                    ).matches;
                    forms.previewModal = true;
                    forms.previewParams.src = src + '&platform=microapp';
                  } else {
                    window.open(src);
                  }
                }}>
                <img src={t2} class={styles.tFun} />
                <img src={t21} class={styles.tTxt} />
                <img src={t22} class={styles.tTitle} />
              </div>
            </div>

            <div class={styles.rightBottom}>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-instruments');
                }}>
                <img src={f1} class={styles.bFun} />
                <img src={f11} class={styles.bTxt} />
              </div>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-music');
                }}>
                <img src={f2} class={styles.bFun} />
                <img src={f21} class={styles.bTxt} />
              </div>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-musician');
                }}>
                <img src={f3} class={styles.bFun} />
                <img src={f31} class={[styles.bTxt, styles.bTxt2]} />
              </div>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-knowledge');
                }}>
                <img src={f4} class={styles.bFun} />
                <img src={f41} class={[styles.bTxt, styles.bTxt3]} />
              </div>
            </div>
          </div>
        </div>

        {/* {forms.showGuide ? <HomeGuide></HomeGuide> : null} */}

        <NModal class={['background']} v-model:show={showModalTone.value}>
          <div>
            <PlaceholderTone
              message={forms.message}
              onClose={() => {
                showModalTone.value = false;
              }}></PlaceholderTone>
          </div>
        </NModal>

        <NModal
          v-model:show={showUpdatePassword.value}
          class={['modalTitle', styles.showUpdatePassword]}
          style="--n-title-font-weight: 600;"
          preset="card"
          title={'修改密码'}
          closable={false}
          maskClosable={false}
          closeOnEsc={false}>
          <UpdatePassword
            onSubmit={() => {
              // 密码更新成功
              showUpdatePassword.value = true;
              forms.showGuide = true;
              userStore.logout().then(() => {
                // 移除标签页
                router
                  .replace({
                    name: 'login'
                  })
                  .finally(() => location.reload());
              });
            }}
          />
        </NModal>

        <NModal
          v-model:show={forms.showAttendClass}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassModal]}
          title={'选择班级'}
          blockScroll={false}>
          <AttendClass
            onClose={() => (forms.showAttendClass = false)}
            type="change"
            onConfirm={(item: any) => {
              router.push({
                path: '/prepare-lessons',
                query: {
                  ...item
                }
              });
            }}
          />
        </NModal>

        <PreviewWindow
          v-model:show={forms.previewModal}
          type="music"
          params={forms.previewParams}
        />
      </div>
    );
  }
});