|
|
@@ -0,0 +1,171 @@
|
|
|
+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() {
|
|
|
+ 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.userId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 唤醒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>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
