classroom-app/src/views/co-ai/index.tsx

import {
  TransitionGroup,
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch
} from 'vue';
import styles from './index.module.less';
import MSearch from '@/components/m-search';
import icon_play from '@/common/images/icon_play.svg';
import {
  Empty,
  Icon,
  List,
  Loading,
  NoticeBar,
  Popover,
  Popup,
  showLoadingToast,
  showToast
} from 'vant';
import icon_back from './image/icon_back.svg';
import icon_down from '@/common/images/icon_down.svg';
import icon_jianpu from '@/common/images/icon_jianpu.svg';
import icon_jianpuActive from '@/common/images/icon_jianpuActive.svg';
import icons from '@/common/images/index.json';
import {
  listenerMessage,
  postMessage,
  promisefiyPostMessage
} from '@/helpers/native-message';
import html2canvas from 'html2canvas';
import { api_musicSheetCategoriesPage, api_musicSheetPage } from './api';
import { state } from '@/state';
import MEmpty from '@/components/m-empty';
import Coaiguide from '@/custom-plugins/guide-page/coai-guide';
import { usePageVisibility } from '@vant/use';
import TheVip from '@/components/the-vip';
import request from '@/helpers/request';
import { useRoute } from 'vue-router';
import { addWatermark, convasToImg, imgToCanvas } from './imageFunction';
import { browser } from '@/helpers/utils';
export default defineComponent({
  name: 'co-ai',
  setup() {
    const route = useRoute();
    const categorForms = reactive({
      page: 1,
      rows: 999,
      subjectId: state.user.data?.subjectId || '',
      musicTagIds: route.query.musicTagId ? [route.query.musicTagId] : []
    });
    const musicForms = reactive({
      page: 1,
      rows: 20,
      status: 1,
      keyword: '', // 关键词
      musicSheetCategoriesId: route.query.id as any
    });
    const data = reactive({
      musicSheetCategoriesName: route.query.name as any,
      /** 教材Index */
      typeIndex: 0,
      /** 音乐Index */
      musicIndex: 0,
      /** 显示哪种曲谱 */
      showMusicImg: 'first' as 'staff' | 'first' | 'fixed',
      popoverShow: false,
      popoverMusicShow: false,
      /** 教材列表 */
      types: [] as any[],
      /** 音乐列表 */
      musics: [] as any[],
      loading: true,
      finshed: false,

      searchNoticeShow: false,
      searchNotice: {
        left: '',
        top: '',
        width: '',
        height: ''
      },
      showVip: false,
      vipMember: state.user.data?.vipMember
    });
    const downRef = ref();
    const showGuide = ref(false);

    const _actions = computed(() => {
      return [
        {
          value: 'staff',
          text: '五线谱'
        },
        {
          value: 'first',
          text: '首调'
        },
        {
          value: 'fixed',
          text: '固定调'
        }
      ].map((item, index) => {
        return {
          ...item,
          color:
            data.showMusicImg === item.value ? 'var(--van-primary-color)' : '',
          className: data.showMusicImg === item.value ? 'fontBlod' : ''
        };
      });
    });

    const _types = computed(() => {
      return data.types.map((item: any) => {
        return {
          ...item,
          color:
            musicForms.musicSheetCategoriesId == item.value
              ? 'var(--van-primary-color)'
              : '',
          className:
            musicForms.musicSheetCategoriesId == item.value ? 'fontBlod' : ''
        };
      });
    });

    // 返回
    const goback = () => {
      postMessage({ api: 'goBack' });
    };
    /** 去云教练 */
    const handleGoto = () => {
      if (!data.vipMember) {
        data.showVip = true;
        return;
      }
      // 默认进页面显示对应的曲谱
      let lineType = 'staff';
      if (data.showMusicImg === 'first') {
        lineType = 'firstTone';
      } else if (data.showMusicImg === 'fixed') {
        lineType = 'fixedTone';
      } else if (data.showMusicImg === 'staff') {
        lineType = 'staff';
      }
      let src = `${location.origin}/instrument?id=${
        data.musics[data.musicIndex]?.id
      }&musicRenderType=${lineType}&showGuide=true`;
      postMessage({
        api: 'openAccompanyWebView',
        content: {
          url: src,
          orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true,
          c_orientation: 0 // 0 横屏 1 竖屏
        }
      });
    };
    /** 保存图片 */
    const handleSave = async () => {
      showLoadingToast({ message: '正在保存', duration: 0 });
      try {
        html2canvas(downRef.value, {
          backgroundColor: '#fff',
          allowTaint: true,
          useCORS: true
        })
          .then(async canvas => {
            // 添加水印
            const waterCanvasImg = await addWatermark(canvas);
            // canvas转图片
            const dataURL = await convasToImg(waterCanvasImg);
            setTimeout(() => {
              showToast('已保存到相册');
            }, 500);
            await promisefiyPostMessage({
              api: 'savePicture',
              content: {
                base64: dataURL
              }
            });
          })
          .catch(() => {
            setTimeout(() => {
              showToast('保存失败');
            }, 500);
          });
      } catch (error) {
        setTimeout(() => {
          showToast('保存失败');
        }, 500);
      }
    };

    /** 获取音乐教材列表 */
    const getMusicSheetCategories = async () => {
      try {
        const res = await api_musicSheetCategoriesPage({
          ...categorForms
        });
        if (res.code === 200 && Array.isArray(res?.data?.rows)) {
          const temp: any = [];
          res.data.rows.forEach((item: any) => {
            temp.push({
              value: item.id,
              text: item.name
            });
          });
          data.types = temp;
        }
      } catch (error) {
        console.log('🚀 ~ error:', error);
      }
    };

    /** 获取曲谱列表 */
    const getMusicList = async () => {
      data.loading = true;
      try {
        const res = await api_musicSheetPage({
          ...musicForms
        });
        if (res.code === 200 && Array.isArray(res?.data?.rows)) {
          data.musics = [...data.musics, ...res.data.rows];
          data.finshed = !res.data.next;
        }
        showGuide.value = true;
      } catch (error) {
        console.log('🚀 ~ error:', error);
      }
      data.loading = false;
    };
    const handleReset = () => {
      musicForms.page = 1;
      data.musics = [];
      getMusicList();
    };

    const spinRef = ref();
    const handleResh = () => {
      if (data.loading || data.finshed) return;
      musicForms.page = musicForms.page + 1;
      getMusicList();
    };

    const setSearchBox = () => {
      const el = document.querySelector('.searchNotice .van-field__control');
      if (el) {
        const rect = el.getBoundingClientRect();
        data.searchNotice.left = rect.x + 'px';
        data.searchNotice.top = rect.y + 'px';
        data.searchNotice.width = rect.width + 'px';
        data.searchNotice.height = rect.height + 'px';
      }
    };
    onMounted(async () => {
      // 安卓的状态栏
      postMessage({
        api: 'setStatusBarVisibility',
        content: {
          isVisibility: 0
        }
      });

      await getMusicSheetCategories();
      getMusicList();

      const obv = new IntersectionObserver(entries => {
        if (entries[0].intersectionRatio > 0) {
          handleResh();
        }
      });
      nextTick(() => {
        obv.observe(spinRef.value);
      });

      const getUserInfo = async () => {
        const res = await request.get('/edu-app/user/getUserInfo', {
          initRequest: true, // 初始化接口
          requestType: 'form',
          hideLoading: true
        });
        if (res?.code === 200) {
          data.vipMember = res.data.vipMember;
        }
      };
      listenerMessage('webViewOnResume', () => {
        console.log('页面显示');
        getUserInfo();
        data.typeIndex = 0;
        data.musicIndex = 0;
        handleReset();
      });
      setSearchBox();
    });

    return () => (
      <div class={styles.container}>
        <div class={styles.back} onClick={goback}>
          <img src={icon_back} />
        </div>

        <div class={styles.musicCFixed}>
          <Popover
            v-model:show={data.popoverMusicShow}
            class={styles.popoverMusic}
            actions={_types.value}
            placement="bottom"
            showArrow={false}
            onSelect={(item: any) => {
              // data.showMusicImg = item.value;
              if (item.value == musicForms.musicSheetCategoriesId) {
                return;
              }
              data.musics = [];
              musicForms.musicSheetCategoriesId = item.value;
              data.musicSheetCategoriesName = item.text;
              data.popoverMusicShow = false;
              getMusicList();
            }}>
            {{
              reference: () => (
                <span class={styles.musicName}>
                  {data.musicSheetCategoriesName}
                  <Icon name="arrow-down"></Icon>
                </span>
              )
            }}
          </Popover>
        </div>
        <div class={styles.content}>
          <div class={[styles.leftContent]}>
            <div class={styles.leftBg2}></div>
            {/* <div class={styles.leftBg}></div> */}
            {/* <div class={styles.types}>
              {data.types.map((item, index) => {
                return (
                  <div
                    class={[
                      styles.type,
                      musicForms.musicSheetCategoriesId === item.id &&
                        styles.typeActive
                    ]}
                    onClick={() => {
                      musicForms.musicSheetCategoriesId = item.id;
                      handleReset();
                    }}>
                    <div class={styles.typeImg}>
                      <img
                        class={styles.typeIcon}
                        src={item.coverImg}
                        onLoad={(e: Event) => {
                          const el = e.target as HTMLImageElement;
                          el.setAttribute('loaded', 'true');
                        }}
                      />
                    </div>
                  </div>
                );
              })}
            </div> */}
            <div class={styles.center}>
              <div class={styles.centerSearch}>
                <div id="coai-0">
                  <MSearch
                    class={[
                      'searchNotice',
                      data.searchNoticeShow ? styles.searchNoticeShow : ''
                    ]}
                    shape="round"
                    background="transparent"
                    clearable={false}
                    placeholder="请输入关键字"
                    modelValue={musicForms.keyword}
                    onFocus={() => (data.searchNoticeShow = false)}
                    onBlur={val => {
                      musicForms.keyword = val?.trim() || '';
                      requestAnimationFrame(() => {
                        requestAnimationFrame(() => {
                          if (musicForms.keyword) {
                            data.searchNoticeShow = true;
                          }
                        });
                      });
                    }}
                    onSearch={val => {
                      musicForms.keyword = val;
                      handleReset();
                    }}
                  />
                </div>
              </div>
              <div class={styles.musicContent}>
                {data.musics.map((item: any, index: number) => {
                  return (
                    <div
                      class={[
                        styles.musicItem,
                        data.musicIndex === index
                          ? styles.musicActive
                          : styles.disableNotic
                      ]}
                      onClick={() => (data.musicIndex = index)}>
                      <img
                        class={styles.musicAvtor}
                        src={item.titleImg}
                        onLoad={(e: Event) => {
                          const el = e.target as HTMLImageElement;
                          el.setAttribute('loaded', 'true');
                        }}
                      />
                      <div class={styles.musicInfo}>
                        <div class={styles.musicName}>
                          <NoticeBar
                            text={item.musicSheetName}
                            class={styles.noticeBar}
                            background="none"
                          />
                        </div>
                        <div class={styles.musicDes}>
                          <div class={styles.musicFavitor}>{item.usedNum}</div>
                          <div class={[styles.musicAuthor, 'van-ellipsis']}>
                            {item.composer || '佚名'}
                          </div>
                        </div>
                      </div>
                      {/* <img class={[styles.musicIcon]} src={icon_play} /> */}
                    </div>
                  );
                })}
                {!data.finshed && (
                  <div ref={spinRef} class={styles.loadingWrap}>
                    <Loading color="#259CFE" />
                  </div>
                )}
                {!data.loading && data.musics.length === 0 && (
                  <div class={styles.empty}>
                    <MEmpty description="暂无曲谱" />
                  </div>
                )}
              </div>
            </div>
          </div>
          <div class={[styles.opacityBg, styles.right]}>
            <div class={styles.rightBox}>
              <div ref={downRef}>
                <div class={styles['right-musicName']}>
                  {data.musics[data.musicIndex]?.musicSheetName}
                </div>
                {data.showMusicImg === 'first' ? (
                  <>
                    {data.musics[data.musicIndex]?.musicSvg
                      ?.split(',')
                      .map((item: any, index: number) => {
                        return (
                          <img
                            class={styles.staff}
                            src={item + '?v=' + Date.now()}
                            key={item}
                            crossorigin="anonymous"
                          />
                        );
                      })}
                  </>
                ) : data.showMusicImg === 'fixed' ? (
                  <>
                    <TransitionGroup name="van-fade">
                      {data.musics[data.musicIndex]?.musicJianSvg
                        ?.split(',')
                        .map((item: any, index: number) => {
                          return (
                            <img
                              class={styles.staff}
                              src={item + '?v=' + Date.now()}
                              key={item}
                              crossorigin="anonymous"
                            />
                          );
                        })}
                    </TransitionGroup>
                  </>
                ) : (
                  <>
                    {data.musics[data.musicIndex]?.musicImg
                      ?.split(',')
                      .map((item: any, index: number) => {
                        return (
                          <img
                            class={styles.staff}
                            src={item + '?v=' + Date.now()}
                            key={item}
                            crossorigin="anonymous"
                          />
                        );
                      })}
                  </>
                )}
              </div>
            </div>

            <div class={styles.rightBtns}>
              <Popover
                v-model:show={data.popoverShow}
                class={styles.popover}
                actions={_actions.value}
                placement="top-start"
                onSelect={(item: any) => {
                  data.showMusicImg = item.value;
                  data.popoverShow = false;
                }}
                // onSelect={onSelect}
              >
                {{
                  reference: () => <img id="coai-1" src={icon_jianpuActive} />
                }}
              </Popover>

              <img id="coai-2" src={icon_down} onClick={handleSave} />
              <div class={styles.rightBtnsRight} id="coai-3">
                <img src={icons.icon_start} onClick={() => handleGoto()} />
              </div>
            </div>
          </div>
        </div>

        {data.searchNotice.width && data.searchNoticeShow && (
          <div class={styles.searchNotice} style={{ ...data.searchNotice }}>
            <NoticeBar
              text={musicForms.keyword}
              color="#333"
              background="none"
            />
          </div>
        )}
        {showGuide.value && <Coaiguide></Coaiguide>}

        <Popup
          class="popup-custom van-scale"
          transition="van-scale"
          closeOnClickOverlay={false}
          v-model:show={data.showVip}>
          <TheVip
            onClose={val => {
              if (val) {
                postMessage({
                  api: 'openWebView',
                  content: {
                    url: `${location.origin}${location.pathname}#/member-center`,
                    orientation: 1
                  }
                });
              }
              data.showVip = false;
            }}
          />
        </Popup>
      </div>
    );
  }
});