h5-colexiu/src/student/teacher-dependent/components/single.tsx

import SectionDetail from '@/business-components/section-detail'
import ColVideo from '@/components/col-video'
import request from '@/helpers/request'
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'
import { browser } from '@/helpers/utils'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../images/${fileName}`
  const modules = import.meta.globEager('../images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'single',
  props: {
    userInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    const query = this.$route.query
    return {
      videoStatus: false,
      chatStatus: false,
      teacherId: query.teacherId,
      fansList: [],
      chatItem: {},
      videoItem: {} as any,
      isAddBrowse: false
    }
  },
  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
          }
        })
      }
    },
    async onPlay() {
      try {
        if (!this.isAddBrowse) {
          return
        }
        await request.get('/api-student/teacher/addVideoBrowse', {
          hideLoading: true,
          params: {
            videoId: this.videoItem.id
          }
        })
        this.isAddBrowse = false
      } catch {}
    }
  },
  render() {
    const userInfo = this.userInfo
    return (
      <div class={styles.single}>
        {userInfo.introduction && (
          <SectionDetail
            icon="personal"
            title="个人介绍"
            size={24}
            border={false}
          >
            <p class={styles.introduction}>{userInfo.introduction}</p>
          </SectionDetail>
        )}

        {userInfo.styleVideo && userInfo.styleVideo.length > 0 && (
          <SectionDetail
            icon="elegant"
            title="老师风采"
            size={24}
            border={false}
          >
            <div class={styles.videoList}>
              {userInfo.styleVideo.map((item: any) => (
                <div class={styles.videoItem}>
                  <div
                    class={styles.itemBg}
                    onClick={() => {
                      this.videoStatus = true
                      this.isAddBrowse = true
                      this.videoItem = item
                    }}
                  ></div>
                  <Icon
                    class={styles['icon-upload']}
                    name={getAssetsHomeFile('icon_video.png')}
                    size={26}
                  />
                  {/* <video width="100%" class={styles.video}>
                    <source src={item.videoUrl} type="video/mp4" />
                  </video> */}
                  <Image src={item.cover || iconUploadPoster} fit="cover" />
                </div>
              ))}
            </div>
          </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}
                border={false}
                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, 'van-ellipsis']}>
                        {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={(id: number) => {
              this.fansList.forEach((item: any) => {
                item.id === id && (item.hasWaitAuditFlag = true)
              })
              this.chatStatus = false
            }}
          />
        </Popup>

        <Popup
          show={this.videoStatus}
          round
          class={styles.videoGroup}
          closeable
          onClose={() => {
            this.videoStatus = false
            this.isAddBrowse = false
          }}
        >
          {this.videoStatus && (
            <ColVideo
              playsinline
              onPlay={this.onPlay}
              src={this.videoItem?.videoUrl + '#t=0.1'}
            />
          )}

          {/* <video
            style={{ height: '210px', width: '100%' }}
            controls
            class={styles.video}
          >
            <source
              src={this.videoItem?.videoUrl + '#t=1,4'}
              type="video/mp4"
            />
          </video> */}
        </Popup>
      </div>
    )
  }
})