|
@@ -1,9 +1,13 @@
|
|
|
import SectionDetail from '@/business-components/section-detail'
|
|
|
import ColVideo from '@/components/col-video'
|
|
|
import request from '@/helpers/request'
|
|
|
-import { Button, Cell, Icon, Image } from 'vant'
|
|
|
+import { Button, Cell, Icon, Image, Popup } from 'vant'
|
|
|
import { defineComponent } from 'vue'
|
|
|
import styles from './single.module.less'
|
|
|
+import { postMessage } from '@/helpers/native-message'
|
|
|
+import JoinChat from '../model/join-chat'
|
|
|
+
|
|
|
+import iconUploadPoster from '@common/images/icon_upload_poster.png'
|
|
|
|
|
|
export const getAssetsHomeFile = (fileName: string) => {
|
|
|
const path = `../images/${fileName}`
|
|
@@ -19,6 +23,49 @@ export default defineComponent({
|
|
|
default: {}
|
|
|
}
|
|
|
},
|
|
|
+ data() {
|
|
|
+ const query = this.$route.query
|
|
|
+ return {
|
|
|
+ videoStatus: false,
|
|
|
+ chatStatus: false,
|
|
|
+ teacherId: query.teacherId,
|
|
|
+ fansList: [],
|
|
|
+ chatItem: {},
|
|
|
+ videoItem: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ try {
|
|
|
+ const res = await request.post('/api-student/imGroup/queryTeacherGroup', {
|
|
|
+ data: {
|
|
|
+ type: 'FAN',
|
|
|
+ createUserId: this.teacherId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.fansList = res.data || []
|
|
|
+ } catch {}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async onDetail(item: any) {
|
|
|
+ // 申请入群
|
|
|
+ if (!item.hasWaitAuditFlag && !item.existFlag) {
|
|
|
+ this.chatStatus = true
|
|
|
+ this.chatItem = item
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 进入群聊天
|
|
|
+ if (item.existFlag) {
|
|
|
+ postMessage({
|
|
|
+ api: 'joinChatGroup',
|
|
|
+ content: {
|
|
|
+ type: 'multi', // single 单人 multi 多人
|
|
|
+ id: item.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
render() {
|
|
|
const userInfo = this.userInfo
|
|
|
return (
|
|
@@ -41,11 +88,14 @@ export default defineComponent({
|
|
|
>
|
|
|
<div class={styles.videoList}>
|
|
|
{userInfo.styleVideo.map((item: any) => (
|
|
|
- <div class={styles.videoItem}>
|
|
|
- <Image
|
|
|
- src="https://daya.ks3-cn-beijing.ksyun.com/202204/T3JggS0.png"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
+ <div
|
|
|
+ class={styles.videoItem}
|
|
|
+ onClick={() => {
|
|
|
+ this.videoStatus = true
|
|
|
+ this.videoItem = item
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Image src={iconUploadPoster} fit="cover" />
|
|
|
<Icon
|
|
|
class={styles['icon-upload']}
|
|
|
name={getAssetsHomeFile('icon_video.png')}
|
|
@@ -57,34 +107,70 @@ export default defineComponent({
|
|
|
</SectionDetail>
|
|
|
)}
|
|
|
|
|
|
- <SectionDetail icon="fans" title="粉丝群" size={24} border={false}>
|
|
|
- {[1, 2, 3].map(item => (
|
|
|
- <Cell
|
|
|
- center
|
|
|
- class={styles.fansGroup}
|
|
|
- v-slots={{
|
|
|
- icon: () => (
|
|
|
- <Image
|
|
|
- src="https://daya.ks3-cn-beijing.ksyun.com/202204/T3JggS0.png"
|
|
|
- fit="cover"
|
|
|
- class={styles.fansImage}
|
|
|
- />
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={styles.fansTitle}>
|
|
|
- <div class={styles.title}>竖笛学习</div>
|
|
|
- <p class="van-ellipsis">李老师竖笛交流群李老师竖笛交流群</p>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- default: () => (
|
|
|
- <Button type="primary" size="small" round>
|
|
|
- 申请入群
|
|
|
- </Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- ))}
|
|
|
- </SectionDetail>
|
|
|
+ {this.fansList && this.fansList.length > 0 && (
|
|
|
+ <SectionDetail icon="fans" title="粉丝群" size={24} border={false}>
|
|
|
+ {this.fansList.map((item: any) => (
|
|
|
+ <Cell
|
|
|
+ center
|
|
|
+ class={styles.fansGroup}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => (
|
|
|
+ <Image
|
|
|
+ src={item.img || getAssetsHomeFile('icon_fans.png')}
|
|
|
+ fit="cover"
|
|
|
+ class={styles.fansImage}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.fansTitle}>
|
|
|
+ <div class={styles.title}>{item.name}</div>
|
|
|
+ <p class="van-ellipsis">{item.introduce}</p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ default: () => (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ round
|
|
|
+ disabled={item.hasWaitAuditFlag}
|
|
|
+ onClick={() => this.onDetail(item)}
|
|
|
+ >
|
|
|
+ {item.existFlag ? '去聊天' : ''}
|
|
|
+ {item.hasWaitAuditFlag ? '审核中' : ''}
|
|
|
+ {!item.hasWaitAuditFlag && !item.existFlag
|
|
|
+ ? '申请入群'
|
|
|
+ : ''}
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </SectionDetail>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ show={this.chatStatus}
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ closeable
|
|
|
+ safe-area-inset-bottom
|
|
|
+ onClose={() => (this.chatStatus = false)}
|
|
|
+ >
|
|
|
+ <JoinChat
|
|
|
+ item={this.chatItem}
|
|
|
+ onClose={() => (this.chatStatus = false)}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ show={this.videoStatus}
|
|
|
+ round
|
|
|
+ class={styles.videoGroup}
|
|
|
+ closeable
|
|
|
+ onClose={() => (this.videoStatus = false)}
|
|
|
+ >
|
|
|
+ <ColVideo />
|
|
|
+ </Popup>
|
|
|
</div>
|
|
|
)
|
|
|
}
|