classroom-instruments/src/components/TheAuth/index.tsx

import { defineComponent, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NScrollbar } from 'naive-ui';
import w1 from './images/window/1.png';
import w2 from './images/window/2.png';
import w3 from './images/window/3.png';
import w4 from './images/window/4.png';
import w5 from './images/window/5.png';
import w6 from './images/window/6.png';
import w7 from './images/window/7.png';
import w8 from './images/window/8.png';

import m1 from './images/mac/1.png';
import m2 from './images/mac/2.png';
import m3 from './images/mac/3.png';
import m4 from './images/mac/4.png';
import m5 from './images/mac/5.png';
import m6 from './images/mac/6.png';
import { browser } from '/src/helpers/utils';

export default defineComponent({
  name: 'the-auth',
  emits: ['close'],
  setup(props, { emit }) {
    const scrollbarRef = ref();
    const state = reactive({
      step: 1,
      maxStep: browser().ios ? 5 : 7
    });
    // 下载证书
    const onDownload = () => {
      // const agent = navigator.userAgent.toLowerCase();
      const isMac = (function () {
        return /macintosh|mac os x/i.test(navigator.userAgent);
      })();
      if (isMac) {
        window.open(
          `https://oss.dayaedu.com/https-ssl/安全证书.p12?v=${new Date().getTime()}`
        );
      } else {
        window.open('https://oss.dayaedu.com/https-ssl/安全证书.pfx');
      }
      // emit('close');
    };
    return () => (
      <div class={styles.theAuth}>
        <div class={styles.theTitle}></div>
        {/* <i class={styles.iconClose} onClick={() => emit('close')}></i> */}
        <div class={styles.authContent}>
          <div class={styles.steps}>
            <NScrollbar ref={scrollbarRef}>
              {browser().ios ? (
                <>
                  {state.step === 1 && (
                    <>
                      <div class={styles.step}>
                        <div class={styles.stepNum}>01</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            点击下方【下载证书】按钮，下载数据安全证书安装包
                          </p>

                          <div>
                            <div
                              class={styles.downloadCert}
                              onClick={onDownload}></div>
                          </div>
                        </div>
                      </div>

                      <div class={styles.step}>
                        <div class={styles.stepNum}>02</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            双击<span>《安全证书.p12》</span>
                            ，输入钥匙串密码，点击
                            <span>【修改钥匙串】</span>
                            <span
                              style={{ 'font-weight': 400, color: '#777777' }}>
                              （若无此步骤则忽略）
                            </span>
                          </p>
                          <div class={[styles.imgs, styles.imgs2]}>
                            <img src={m1} class={styles.m1} />
                            <img src={m6} class={styles.m6} />
                          </div>
                        </div>
                      </div>
                    </>
                  )}

                  {state.step === 2 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>03</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          输入证书密码：
                          <span
                            class={styles.red}
                            style={{ 'text-decoration': 'underline' }}>
                            colexiu.com
                          </span>
                          ，点击
                          <span>【好】</span>
                        </p>

                        <div class={styles.imgs}>
                          <img src={m2} class={styles.m2} />
                        </div>
                      </div>
                    </div>
                  )}

                  {state.step === 3 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>04</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          <span class={styles.red}>重启浏览器</span>
                          （在电脑屏幕左上方选择当前浏览器并点击
                          <span>【退出】</span>），再重新打开音乐数字课堂网址
                        </p>
                        <div class={styles.imgs}>
                          <img src={m3} class={styles.m3} />
                        </div>
                      </div>
                    </div>
                  )}

                  {state.step === 4 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>05</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          在【选择证书】弹窗中点击<span>【确定】</span>按钮
                        </p>
                        <div class={styles.imgs}>
                          <img src={m4} class={styles.m4} />
                        </div>
                      </div>
                    </div>
                  )}

                  {state.step === 5 && (
                    <>
                      <div class={styles.step}>
                        <div class={styles.stepNum}>06</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            输入您的电脑密码，点击<span>【始终允许】</span>
                            <span
                              style={{ 'font-weight': 400, color: '#777777' }}>
                              （若无此步骤则忽略）
                            </span>
                          </p>
                          <div class={styles.imgs}>
                            <img src={m5} class={styles.m5} />
                          </div>
                        </div>
                      </div>
                      <div class={styles.step}>
                        <div class={styles.stepNum}>07</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            证书安装完成，开始使用音乐数字课堂吧！
                          </p>
                        </div>
                      </div>
                    </>
                  )}
                </>
              ) : (
                <>
                  {state.step === 1 && (
                    <>
                      <div class={styles.step}>
                        <div class={styles.stepNum}>01</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            点击下方【下载证书】按钮，下载数据安全证书安装包
                          </p>
                          <div>
                            <div
                              class={styles.downloadCert}
                              onClick={onDownload}></div>
                          </div>
                        </div>
                      </div>
                      <div class={styles.step}>
                        <div class={styles.stepNum}>02</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            双击<span>《安全证书.pfx》</span>，出现弹窗后点击
                            <span>【下一步】</span>
                          </p>
                          <div class={[styles.imgs, styles.imgs2]}>
                            <img src={w1} class={styles.w1} />
                            <img src={w2} class={styles.w2} />
                          </div>
                        </div>
                      </div>
                    </>
                  )}

                  {state.step === 2 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>03</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          点击<span>【下一步】</span>
                        </p>
                        <div class={styles.imgs}>
                          <img src={w3} class={styles.w3} />
                        </div>
                      </div>
                    </div>
                  )}

                  {state.step === 3 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>04</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          点击<span>【下一步】</span>
                        </p>
                        <div class={styles.imgs}>
                          <img src={w4} class={styles.w4} />
                        </div>
                      </div>
                    </div>
                  )}
                  {state.step === 4 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>05</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          点击<span>【下一步】</span>
                        </p>
                        <div class={styles.imgs}>
                          <img src={w8} class={styles.w8} />
                        </div>
                      </div>
                    </div>
                  )}
                  {state.step === 5 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>06</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          点击<span>【完成】</span>
                        </p>
                        <div class={styles.imgs}>
                          <img src={w5} class={styles.w5} />
                        </div>
                      </div>
                    </div>
                  )}
                  {state.step === 6 && (
                    <div class={styles.step}>
                      <div class={styles.stepNum}>07</div>
                      <div class={styles.stepContent}>
                        <p class={styles.txt}>
                          点击<span>【确定】</span>
                        </p>
                        <div class={styles.imgs}>
                          <img src={w6} class={styles.w6} />
                        </div>
                      </div>
                    </div>
                  )}
                  {state.step === 7 && (
                    <>
                      <div class={styles.step}>
                        <div class={styles.stepNum}>08</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            <span class={styles.red}>重启浏览器</span>
                            ，打开音乐数字课堂网址
                          </p>
                        </div>
                      </div>

                      <div class={styles.step}>
                        <div class={styles.stepNum}>09</div>
                        <div class={styles.stepContent}>
                          <p class={styles.txt}>
                            在【选择证书】弹窗中点击<span>【确定】</span>
                            按钮，证书安装完成，开始使用音乐数字课堂吧!
                            {/* （若浏览器没有弹出该弹窗请
                        <span class={styles.red}>重启电脑</span>
                        后重试） */}
                          </p>
                          <img src={w7} class={styles.w7} />
                        </div>
                      </div>
                    </>
                  )}

                  {/* <div class={styles.step}>
                    <div class={styles.stepNum}>05</div>
                    <div class={styles.stepContent}>
                      <p class={styles.txt}>
                        证书安装完成，开始使用音乐数字课堂吧。
                      </p>
                    </div>
                  </div> */}
                </>
              )}
            </NScrollbar>
          </div>

          <div class={styles.btnGroup}>
            {/* <NButton round type="primary" onClick={onDownload}>
              下载证书
            </NButton> */}
            <div
              class={[styles.btn, styles.btnUp]}
              style={{
                cursor: state.step <= 1 ? 'not-allowed' : 'pointer'
              }}
              onClick={() => {
                if (state.step <= 1) return;
                state.step -= 1;
                scrollbarRef.value.scrollTo({ top: 0, left: 0 });
              }}></div>
            <div
              class={[
                styles.btn,
                styles.btnDown,
                state.step === state.maxStep && styles.btnDone
              ]}
              onClick={() => {
                if (state.step >= state.maxStep) {
                  emit('close');
                } else {
                  state.step += 1;
                }

                scrollbarRef.value.scrollTo({ top: 0, left: 0 });
              }}></div>
          </div>
        </div>
      </div>
    );
  }
});