colexiu-project/src/views/user-info/music-class/index.tsx

import { state } from '@/state'
import { ElBadge, ElButton, ElMessage, ElTabPane, ElTabs } from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import List from './list'

export default defineComponent({
  name: 'music-class',
  data() {
    const musicActiveName = sessionStorage.getItem('musicActiveName')
    sessionStorage.removeItem('musicActiveName')
    return {
      activeName: musicActiveName || 'PASS',
      num: {
        doing: 0,
        pass: 0,
        unPass: 0
      }
    }
  },

  render() {
    return (
      <div class={[styles.liveClass, 'relative pb-5']}>
        <ElButton
          round
          type="primary"
          class="absolute right-11 top-4 z-10"
          onClick={() => {
            if (state.user.data?.musicianFlag) {
              this.$router.push({
                path: '/userInfo/musicOperation'
              })
            } else {
              ElMessage.error('您还未完成音乐人认证，认证后才可创建曲谱')
              return
            }
          }}
        >
          新建乐谱
        </ElButton>
        <ElTabs v-model={this.activeName}>
          <ElTabPane label="已上架" name="PASS">
            {this.activeName === 'PASS' && (
              <List
                auditStatus="PASS"
                onNumber={(data: any) => {
                  this.num = data
                }}
              />
            )}
          </ElTabPane>
          <ElTabPane label="审核中" name="DOING">
            {this.activeName === 'DOING' && (
              <List
                auditStatus="DOING"
                onNumber={(data: any) => {
                  this.num = data
                }}
              />
            )}
          </ElTabPane>
          <ElTabPane
            // label="审核失败"
            name="UNPASS"
            v-slots={{
              label: () => (
                <ElBadge
                  class={styles.badge}
                  value={this.num.unPass}
                  hidden={this.num.unPass === 0}
                >
                  审核失败
                </ElBadge>
              )
            }}
          >
            {this.activeName === 'UNPASS' && (
              <List
                auditStatus="UNPASS"
                onNumber={(data: any) => {
                  this.num = data
                }}
              />
            )}
          </ElTabPane>
        </ElTabs>
      </div>
    )
  }
})