h5-colexiu/src/teacher/share-page/share-live-room/index.tsx

import ColSticky from '@/components/col-sticky'
import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
import { browser } from '@/helpers/utils'
import { state } from '@/state'
import { Button, Dialog, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconDefault from '@/common/images/icon_teacher.png'
export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}
export default defineComponent({
  name: 'shareLiveRoom',
  data() {
    return {
      query: {
        ...this.$route.query
        // id: 'COOLESHOW-TEMP-416-1663833046284',
        // userId: 416
      },
      liveRoom: {} as any, //直播间信息
      teacher: {} as any,
      student: {} as any, // 分享人信息
      wxStatus: false
    }
  },
  async mounted() {
    await this.getData()
    this.openApp()
  },
  methods: {
    // 获取直播信息和分享人信息
    async getData() {
      try {
        const { data } = await request.get(
          `/api-student/open/liveRoom/detail/${this.query.id}`,
          {
            params: {
              userId: this.query.userId
            }
          }
        )
        this.liveRoom = data
        this.teacher = data.teacher || {}
        this.student = data.student || {}
      } catch {}
    },

    // 分享进入
    openApp() {
      if (browser().weixin) {
        // 微信浏览器
        this.wxStatus = true
        return
      }

      if (!browser().isApp) {
        // 不是APP
        this.onWakeApp()
        return
      }

      if (browser().isApp) {
        if (state.platformType === 'STUDENT') {
          this.onJoinLiveRoom()
        } else if (state.platformType === 'TEACHER') {
          Dialog.alert({
            title: '提示',
            message: '请使用酷乐秀学生端扫码打开',
            confirmButtonColor: '#2dc7aa'
          }).then(() => {
            postMessage({ api: 'back' })
          })
        }
      }
    },

    //进入直播间
    onJoinLiveRoom() {
      postMessage({
        api: 'joinLiveRoom',
        content: {
          roomId: this.liveRoom.roomUid,
          teacherId: this.liveRoom.speakerId
        }
      })
    },

    // 唤醒APP
    onWakeApp() {
      const query = {
        action: 'app', // app, h5
        pageTag: 'liveRoom', // 页面标识
        params: JSON.stringify({ liveRoomId: this.query.id })
      }
      const iosStr = encodeURIComponent(JSON.stringify(query))
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // ColexiuStudent 唤起学生端
        // ColexiuTeacher 唤起老师端
        window.location.href = `ColexiuStudent://linkUrl=${iosStr}`
      } else if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href = `colexiustudent://html:8888/SplashActivity?url=${iosStr}`
      } else {
        Toast('请用手机或移动设备打开')
      }
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div class={styles.wrap}>
          <div class={styles.userWrap}>
            <div class={styles.user}>
              <div class={styles.avator}>
                <img src={this.teacher.avatar || iconDefault} />
              </div>
              <div class={styles.tips}>
                <img src={getAssetsHomeFile('icon-live.png')} />
                <span>直播中</span>
              </div>
            </div>
          </div>
          <div class={styles.titleWrap}>
            <div class={styles.title}>{this.liveRoom.roomTitle}</div>
            <div class={styles.liveUser}>
              主讲人：{this.teacher.realName || this.teacher.username}
            </div>
          </div>

          <div class={styles.content}>
            <div class={styles.top}>直播内容</div>
            <div>{this.liveRoom.liveRemark}</div>
            <div class={styles.comentWrap}>
              <div class={styles.contentAvator}>
                <img src={this.student.avatar || iconDefault} />
              </div>
              <div>
                <div class={styles.comentTitle}>
                  快进入老师的直播间一起围观～
                </div>
                <div class={styles.comentDes}>
                  {this.teacher.realName || this.student.username} 为您推荐
                </div>
              </div>
            </div>
          </div>
        </div>

        <ColSticky position="bottom">
          <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
            <Button
              color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
              block
              round
              type="primary"
              onClick={this.openApp}
            >
              开启酷乐秀进入直播间！
            </Button>
          </div>
        </ColSticky>

        {this.wxStatus && (
          <div
            class={styles.wxpopup}
            onClick={() => {
              this.wxStatus = false
            }}
          >
            <img src={getAssetsHomeFile('wx_bg.png')} alt="" />
          </div>
        )}
      </div>
    )
  }
})