colexiu-project/src/components/col-steps/index.tsx

import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'col-steps',
  props: {
    type: {
      type: String,
      default: 'small' as 'small' | 'medium' | 'large'
    },
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: {
        small: [
          {
            title: '课程信息',
            iconActive: getAssetsHomeFile('6.png')
          },
          {
            title: '课程安排',
            icon: getAssetsHomeFile('4.png'),
            iconActive: getAssetsHomeFile('4_active.png')
          },
          {
            title: '教学计划',
            icon: getAssetsHomeFile('2.png'),
            iconActive: getAssetsHomeFile('2_active.png')
          },
          {
            title: '开课条件',
            icon: getAssetsHomeFile('3.png'),
            iconActive: getAssetsHomeFile('3_active.png')
          }
        ],
        medium: [
          {
            title: '实名认证',
            iconActive: getAssetsHomeFile('7.png')
          },
          {
            title: '基本信息',
            icon: getAssetsHomeFile('1.png'),
            iconActive: getAssetsHomeFile('1_active.png')
          },
          {
            title: '学历信息',
            icon: getAssetsHomeFile('8.png'),
            iconActive: getAssetsHomeFile('8_active.png')
          }
        ],
        large: [
          {
            title: '课程信息',
            iconActive: getAssetsHomeFile('6.png')
          },
          {
            title: '课程内容',
            icon: getAssetsHomeFile('5.png'),
            iconActive: getAssetsHomeFile('5_active.png')
          }
        ]
      }
    }
  },
  render() {
    return (
      <div class={[styles.steps, 'flex items-center bg-white']}>
        {this.list[this.type].map((item: any, index: number) => (
          <div
            class={[
              styles.step,
              styles[this.type],
              this.active >= index && styles.active
            ]}
          >
            <div class="w-[30px] h-[30px] rounded-full overflow-hidden bg-slate-600 mr-3">
              {index === 0 || this.active >= index ? (
                <img src={item.iconActive} />
              ) : (
                <img src={item.icon} />
              )}
            </div>
            {item.title}
          </div>
        ))}
      </div>
    )
  }
})