h5-colexiu/src/student/member-center/member-record.tsx

import ColHeader from '@/components/col-header'
import { defineComponent } from 'vue'
import styles from './member-record.module.less'
import {
  Cell,
  CellGroup,
  DatetimePicker,
  Grid,
  GridItem,
  Icon,
  Image,
  List,
  Popup,
  Sticky
} from 'vant'
import { levelMember } from '@/constant'
import request from '@/helpers/request'
import { formatterDate } from '@/helpers/utils'
import dayjs from 'dayjs'
import ColResult from '@/components/col-result'
import { postMessage } from '@/helpers/native-message'
import { useEventTracking } from '@/helpers/hooks'

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

export default defineComponent({
  name: 'memberRecord',
  data() {
    return {
      userTrainOverView: {
        trainDays: 0,
        trainNum: 0,
        trainTime: 0
      },
      timeStatus: false,
      currentDate: new Date(),
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 20
      }
    }
  },
  async mounted() {
    this.getList()
    useEventTracking('评测记录')
  },
  methods: {
    onSearch() {
      this.timeStatus = false
      this.dataShow = true
      this.loading = false
      this.finished = false
      this.list = []
      this.params.page = 1
      this.getList()
    },
    async getList() {
      try {
        const params = this.params
        const res = await request.get(
          '/api-student/sysMusicRecord/studentTrainData',
          {
            params: {
              ...params,
              startTime: dayjs(this.currentDate).format('YYYY-MM')
            }
          }
        )
        this.loading = false
        const result = res.data || {}
        // 在第一页的时候才处理数据显示
        if (result.detail.pageNo === 1) {
          this.userTrainOverView = result.userTrainOverView
        }
        // 处理重复请求数据
        if (this.list.length > 0 && result.detail.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.detail.rows || [])
        this.finished = result.detail.pageNo >= result.detail.totalPage
        this.params.page = result.detail.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    }
  },
  render() {
    return (
      <div class={styles['member-record']}>
        {/* <Sticky position="top" offsetTop={0}> */}
        <ColHeader
          class={styles.memberHeader}
          background="#00d1a1"
          backIconColor="white"
          border={false}
          color="#fff"
          // isFixed={false}
          v-slots={{
            default: () => (
              <div class={styles.headerContent}>
                <Image
                  class={styles.headerImg}
                  src={getAssetsHomeFile('record_bg.png')}
                />

                <div class={styles.headerCount}>
                  <div class={styles.headerItem}>
                    <span class={styles.num}>
                      {this.userTrainOverView.trainDays}天
                    </span>
                    <span>累计训练天数</span>
                  </div>
                  <div class={styles.headerItem}>
                    <span class={styles.num}>
                      {this.userTrainOverView.trainTime}分钟
                    </span>
                    <span>累计训练时长</span>
                  </div>
                  <div class={styles.headerItem}>
                    <span class={styles.num}>
                      {this.userTrainOverView.trainNum}次
                    </span>
                    <span>累计训练次数</span>
                  </div>
                </div>
              </div>
              //   <div class={[styles.certHeader, this.headStatus ? styles.certWhite : null]}>
              //     老师认证
              //   </div>
            )
          }}
        />
        {/* </Sticky> */}

        <div style={{ overflow: 'hidden', paddingBottom: '12px' }}>
          <Cell
            class={styles.memberCell}
            v-slots={{
              title: () => (
                <div class={styles.rTitle}>
                  <span>评测记录</span>
                </div>
              ),
              default: () => (
                <div
                  class={styles.dataItem}
                  onClick={() => (this.timeStatus = true)}
                >
                  {dayjs(this.currentDate).format('YYYY年MM月')}
                  <Icon
                    classPrefix="iconfont"
                    name="down"
                    size={14}
                    color="var(--van-primary)"
                  />
                </div>
              )
            }}
          ></Cell>

          <Popup
            v-model:show={this.timeStatus}
            position="bottom"
            round
            closeOnPopstate
          >
            <DatetimePicker
              type="year-month"
              v-model={this.currentDate}
              formatter={formatterDate}
              onCancel={() => {
                this.timeStatus = false
              }}
              onConfirm={this.onSearch}
            />
          </Popup>
          {this.dataShow ? (
            <List
              v-model:loading={this.loading}
              finished={this.finished}
              finishedText=" "
              immediateCheck={false}
              class={[styles.liveList, 'mb12']}
              onLoad={this.getList}
            >
              {this.list.map((item: any) => (
                <CellGroup
                  class={styles['data-content']}
                  border={false}
                  onClick={() => {
                    const behaviorId = +new Date()
                    //dev.colexiu.com/accompany/colexiu-report.html?id=817&behaviorId=165699355934918269&Authorization=bearer%20aea0b4c1-423c-4466-902a-17dc7ac8938a#/
                    postMessage({
                      api: 'openAccompanyWebView',
                      content: {
                        url:
                          location.origin +
                          '/accompany/colexiu-report.html?id=' +
                          item.id +
                          '&behaviorId=' +
                          behaviorId,
                        orientation: 0,
                        isHideTitle: true,
                        statusBarTextColor: false,
                        isOpenLight: true
                      }
                    })
                    return
                  }}
                >
                  <Cell
                    center
                    v-slots={{
                      title: () => (
                        <div class={styles.dataTitle}>
                          <span>{item.sysMusicScoreName}</span>
                          {item.videoFilePath && (
                            <Icon
                              name={getAssetsHomeFile('icon_video.png')}
                              size={20}
                            />
                          )}
                        </div>
                      ),
                      default: () => (
                        <div class={styles.dataItem}>
                          {dayjs(item.createTime).format('YYYY/MM/DD HH:mm')}
                        </div>
                      )
                    }}
                  ></Cell>
                  <Cell
                    center
                    style={{ paddingLeft: '5px', paddingRight: '5px' }}
                    v-slots={{
                      title: () => (
                        <Grid border={false} columnNum={5}>
                          <GridItem
                            text="评测难度"
                            v-slots={{
                              icon: () => (
                                <span style={{ color: '#000000' }}>
                                  {levelMember[item.heardLevel]}
                                </span>
                              )
                            }}
                          ></GridItem>
                          <GridItem
                            text="评测分数"
                            v-slots={{
                              icon: () => (
                                <span style={{ color: '#000000' }}>
                                  {item.score}分
                                </span>
                              )
                            }}
                          ></GridItem>
                          <GridItem
                            text="音准"
                            v-slots={{
                              icon: () => (
                                <span style={{ color: '#01C1B5' }}>
                                  {item.intonation}分
                                </span>
                              )
                            }}
                          ></GridItem>
                          <GridItem
                            text="节奏"
                            v-slots={{
                              icon: () => (
                                <span style={{ color: '#FF802C' }}>
                                  {item.cadence}分
                                </span>
                              )
                            }}
                          ></GridItem>
                          <GridItem
                            text="完成度"
                            v-slots={{
                              icon: () => (
                                <span style={{ color: '#F79C00' }}>
                                  {item.integrity}分
                                </span>
                              )
                            }}
                          ></GridItem>
                        </Grid>
                      )
                    }}
                  ></Cell>
                </CellGroup>
              ))}
            </List>
          ) : (
            <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无记录" />
          )}
        </div>
      </div>
    )
  }
})