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'
import item from '@/views/coupons/item'
/**
 * @description: 视频详情
 * @param {type} headUrl 头像
 * @param {type} username 姓名
 * @param {type} startTime 开始时间
 * @param {type} buyNum 购买用户数
 * @param {type} payType 收费方式
 * @param {type} type 课程类型
 * @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
  payType?: string
  type?: string
  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
    },
    onUserDetail: {
      // 点击用户头像等信息
      type: Function,
      default: (item: any) => {}
    }
  },
  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
                  onClick={() => {
                    this.onUserDetail(this.userInfo)
                  }}
                  class={styles.avatar}
                  src={this.userInfo.headUrl || defaultIcon}
                  fit="cover"
                />
              ),
              title: () => (
                <div
                  class={styles.name}
                  onClick={() => {
                    this.onUserDetail(this.userInfo)
                  }}
                >
                  <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.payType === 'VIP' ? (
                    <span style={{ color: '#C76E21' }}>会员</span>
                  ) : (
                    <>
                      {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: '#20BEA0' }}>免费</span>
                        )}
                    </>
                  )}
                  <span
                    style={{ color: '#999', fontSize: '14px', fontWeight: 400 }}
                  >
                    /{this.userInfo.lessonNum}课时
                  </span>
                  {this.showBuy && (
                    <div class={styles.buyNum}>
                      {this.userInfo.type === 'live' ? (
                        <>
                          {this.userInfo.buyNum}人已
                          {this.userInfo.lessonPrice <= 0 &&
                          this.userInfo.auditVersion === 0
                            ? '领取'
                            : '购买'}
                        </>
                      ) : (
                        <>{this.userInfo.buyNum}人学习</>
                      )}
                    </div>
                  )}
                </div>
              )
            }}
          ></Cell>
          {this.userInfo.relationType === 'GIFT' && (
            <Cell
              class={styles.buyTips}
              value={'注：购买本课程即可赠送相关曲目或专辑终生使用权限～'}
            ></Cell>
          )}
        </CellGroup>
      </div>
    )
  }
})