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'
import IconXueli from '@common/images/icon-xueli.png'
import IconJiaozi from '@common/images/icon-jiaozi.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 课程名称
 * @param {type} relationType 赠送类型
 */
interface UserType {
  headUrl: string
  username: string
  startTime?: string
  id?: number
  buyNum?: number
  lessonPrice: number
  lessonNum?: number
  lessonDesc?: string
  lessonCoverUrl: string
  lessonName: string
  auditVersion: number
  relationType?: string
}

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.userInfo as any).isDegree && (
                        <img class={styles.iconTeacher} src={IconXueli} />
                      )}
                      {(this.userInfo as any).isTeacher && (
                        <img class={styles.iconTeacher} src={IconJiaozi} />
                      )}
                    </div>
                  </div>
                </div>
              ),
              value: () => (
                <div class={styles.info}>
                  {/* 0元不显示，为了处理ios审核问题 */}
                  {this.userInfo.lessonPrice > 0 && (
                    <>￥{this.userInfo.lessonPrice}</>
                  )}
                  {this.userInfo.lessonPrice <= 0 &&
                    this.userInfo.auditVersion !== 0 && <>￥{0}</>}
                  {this.userInfo.lessonPrice <= 0 &&
                    this.userInfo.auditVersion === 0 && <>免费</>}
                  <span
                    style={{ color: '#999', fontSize: '14px', fontWeight: 400 }}
                  >
                    /{this.userInfo.lessonNum}课时
                  </span>
                  {this.showBuy && (
                    <div class={styles.buyNum}>
                      {this.userInfo.buyNum}人已
                      {this.userInfo.lessonPrice <= 0 &&
                      this.userInfo.auditVersion === 0
                        ? '领取'
                        : '购买'}
                    </div>
                  )}
                </div>
              )
            }}
          ></Cell>
          {this.userInfo.relationType === 'GIFT' && (
            <Cell
              class={styles.buyTips}
              value={'注：购买本课程即可购买相关曲目或专辑终生使用权限～'}
            ></Cell>
          )}
        </CellGroup>
      </div>
    )
  }
})