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';

/**
 * @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;
  buyNum?: number;
  lessonPrice: number;
  lessonNum?: number;
  lessonDesc?: string;
  lessonCoverUrl: string;
  lessonName: 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"
    }
  },
  render() {
    return (
      <div class={styles.userDetail}>
        <Image class={[styles.banner]} src={this.userInfo.lessonCoverUrl} fit="cover" />
        <CellGroup class={styles.userInfo}>
          <Cell title={this.userInfo.lessonName} titleClass={styles.userTitle} />
          <Cell v-slots={{
            icon: () => <Image class={styles.avatar} src={this.userInfo.headUrl} />,
            title: () => (<div class={styles.name}>{this.userInfo.username}
              {this.showType === "TIME" ? <Tag style={{ marginLeft: '8px' }} color="#FFF1DE" textColor="#FF9300">{this.userInfo.lessonNum}课时</Tag> : <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}>￥{this.userInfo.lessonPrice}/{this.userInfo.lessonNum}课时</div>
            ),
          }}></Cell>
        </CellGroup>
      </div>
    )
  }
})