orchestra-app/src/student/my-instrument/index.tsx

import OEmpty from '@/components/o-empty'
import { List, Image, Cell } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'
import request from '@/helpers/request'
import i1 from './images/1.png'
import i2 from './images/2.png'
import i3 from './images/3.png'

export default defineComponent({
  name: 'my-instrument',
  setup() {
    const state = reactive({
      isLoading: false,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      params: {
        page: 1,
        rows: 20
      }
    })

    // 班级列表
    const getList = async () => {
      try {
        if (state.isLoading) return
        state.isLoading = true
        const res = await request.post('/api-student/userPaymentOrder/instrumentPage', {
          data: {
            ...state.params
          }
        })
        state.listState.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return
        }
        const rows = result.rows || []
        state.list = state.list.concat(rows)
        state.listState.finished = result.current >= result.pages
        state.params.page = result.current + 1
        state.listState.dataShow = state.list.length > 0
        state.isLoading = false
      } catch {
        state.listState.dataShow = false
        state.listState.finished = true
        state.isLoading = false
      }
    }

    onMounted(async () => {
      await getList()
    })
    return () => (
      <div class={styles.myInstrument}>
        {state.listState.dataShow ? (
          <List
            // v-model:loading={state.listState.loading}
            finished={state.listState.finished}
            finishedText=" "
            onLoad={getList}
            immediateCheck={false}
          >
            {state.list.map((item: any) => (
              <Cell>
                {{
                  icon: () => <img src={item.instrumentUrl} class={styles.goodsImg} />,
                  title: () => (
                    <div class={styles.goodsInfo}>
                      <h2>{item.instrumentName}</h2>
                      <p class={styles.times}>购买时间：{item.buyTime}</p>
                      {/* NOT_OPEN:未开通 NOT_ACTIVATED:未激活 ACTIVATED:已激活 INVALID:已失效 */}
                      {item.instrumentStatus === 'ACTIVATED' && (
                        <div class={[styles.type, styles[item.instrumentStatus]]}>
                          {item.instrumentStatus === 'ACTIVATED' && <img src={i2} />}
                          乐器保障服务中
                        </div>
                      )}
                      {item.instrumentStatus === 'INVALID' && (
                        <div class={[styles.type, styles[item.instrumentStatus]]}>
                          {item.instrumentStatus === 'INVALID' && <img src={i3} />}
                          乐器保障服务已失效
                        </div>
                      )}
                      {item.instrumentStatus === 'NOT_OPEN' && (
                        <div class={[styles.type, styles[item.instrumentStatus]]}>
                          {item.instrumentStatus === 'NOT_OPEN' && <img src={i3} />}
                          该乐器未开通乐器保障服务
                        </div>
                      )}
                      {item.instrumentStatus === 'NOT_ACTIVATED' && (
                        <div class={[styles.type, styles[item.instrumentStatus]]}>
                          {item.instrumentStatus === 'NOT_ACTIVATED' && <img src={i1} />}
                          乐器保障服务尚未激活
                        </div>
                      )}
                    </div>
                  )
                }}
              </Cell>
            ))}
          </List>
        ) : (
          <OEmpty btnStatus={false} tips="暂无乐器检查" />
        )}
      </div>
    )
  }
})