h5-colexiu/src/business-components/user-detail/index.tsx

import { Cell, CellGroup, Icon, Image, Tag } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

import iconUserNum from '@common/images/icon_user_num.png'
import defaultIcon from '@common/images/icon_teacher.png'
import iconTimer from '@common/images/icon_timer2.png'

/**
 * @description: 视频详情
 * @param {type} headUrl 头像
 * @param {type} username 姓名
 * @param {type} startTime 开始时间
 * @param {type} buyNum 购买用户数
 * @param {type} lessonPrice 价格
 * @param {type} lessonCoverUrl 视频封面
 * @param {type} lessonDesc 课程描述
 * @param {type} lessonNum 课程数
 * @param {type} lessonName 课程名称
 */
interface UserType {
  headUrl: string
  username: string
  startTime?: string
  id?: number
  buyNum?: number
  lessonPrice: number
  lessonNum?: number
  lessonDesc?: string
  lessonCoverUrl: string
  lessonName: string
  auditVersion: number
}

export default defineComponent({
  name: 'user-detail',
  props: {
    userInfo: {
      type: Object as PropType<UserType>,
      required: true
    },
    showType: {
      type: String as PropType<'BUY' | 'TIME'>,
      default: 'BUY'
    },
    showBuy: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  render() {
    return (
      <div class={styles.userDetail}>
        <Image
          class={[styles.banner]}
          src={this.userInfo.lessonCoverUrl}
          fit="cover"
        />
        <CellGroup class={styles.userInfo} border={this.border}>
          <Cell
            title={this.userInfo.lessonName}
            titleClass={styles.userTitle}
            v-slots={{
              label: () =>
                this.userInfo.startTime && (
                  <span
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      fontSize: '13px',
                      paddingTop: 'var(--van-cell-label-margin-top)'
                    }}
                  >
                    <Icon
                      name={iconTimer}
                      size="16"
                      style={{ marginRight: '5px' }}
                    />
                    开课时间：
                    {this.userInfo.startTime}
                  </span>
                )
            }}
          />
          <Cell
            v-slots={{
              icon: () => (
                <Image
                  class={styles.avatar}
                  src={this.userInfo.headUrl || defaultIcon}
                  fit="cover"
                />
              ),
              title: () => (
                <div class={styles.name}>
                  <div class={styles.username}>
                    {this.userInfo.username || `游客${this.userInfo.id || ''}`}
                  </div>
                  {this.showType === 'TIME' ? (
                    <Tag
                      style={{ marginLeft: '8px' }}
                      color="#FFF1DE"
                      textColor="#FF9300"
                    >
                      {this.userInfo.lessonNum}课时
                    </Tag>
                  ) : (
                    this.showBuy && (
                      <div class={styles.buyNum}>
                        {this.userInfo.buyNum}人已购买
                      </div>
                    )
                  )}
                </div>
              ),
              value: () =>
                this.showType === 'TIME' ? (
                  <div class={styles.buyNumInfo}>
                    <Icon name={iconUserNum} size={14} class={styles.iconBuy} />{' '}
                    已购 {this.userInfo.buyNum} 人
                  </div>
                ) : (
                  <div class={styles.info}>
                    {/* 0元不显示，为了处理ios审核问题 */}
                    {this.userInfo.lessonPrice > 0 && (
                      <>￥{this.userInfo.lessonPrice}/</>
                    )}
                    {this.userInfo.lessonPrice <= 0 &&
                      this.userInfo.auditVersion && <>￥{0}/</>}
                    {this.userInfo.lessonPrice <= 0 &&
                      !this.userInfo.auditVersion && <>免费/</>}
                    {this.userInfo.lessonNum}课时
                  </div>
                )
            }}
          ></Cell>
        </CellGroup>
      </div>
    )
  }
})