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'

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: {}
    }
  },
  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 (
      <div class={styles.single}>
        <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}
                  onClick={() => {
                    this.videoStatus = true
                    this.videoItem = item
                  }}
                >
                  <Image src={iconUploadPoster} fit="cover" />
                  <Icon
                    class={styles['icon-upload']}
                    name={getAssetsHomeFile('icon_video.png')}
                    size={26}
                  />
                </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}
                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>
    )
  }
})