h5-colexiu/src/student/teacher-dependent/components/live.tsx

import ColResult from '@/components/col-result'
import { Cell, CellGroup, List, Image, Icon } from 'vant'
import { defineComponent } from 'vue'
import styles from './live.module.less'

import iconTimer from '@common/images/icon_timer2.png'
import iconTeacher from '@common/images/icon_teacher.png'
import iconSuccess from '@common/images/icon_success.png'
import request from '@/helpers/request'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'live',
  data() {
    return {
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        groupStatus: 'APPLY',
        page: 1,
        rows: 20
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    formatTime(time: string) {
      let timeStr = dayjs(time || new Date())
      const weekStr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      // console.log(timeStr.day())

      return timeStr.format('YYYY-MM-DD') + `(${weekStr[timeStr.day()]})`
    },
    async getList() {
      try {
        let params = this.params
        const res = await request.post(
          '/api-student/courseGroup/queryPageCourseGroup',
          {
            data: {
              ...params
            }
          }
        )
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {}
    },
    onDetail(item: any) {
      this.$router.push({
        path: '/liveDetail',
        query: {
          groupId: item.courseGroupId
        }
      })
    }
  },
  render() {
    return (
      <>
        {this.dataShow ? (
          <List
            class={styles.liveList}
            v-model:loading={this.loading}
            immediateCheck={false}
            finished={this.finished}
            finishedText="没有更多了"
          >
            {this.list.map((item: any) => (
              <CellGroup
                class={styles.liveGroup}
                border={false}
                onClick={() => this.onDetail(item)}
              >
                <Cell
                  v-slots={{
                    icon: () => (
                      <div style={{ position: 'relative' }}>
                        <Image
                          class={styles.liCover}
                          src={item.backgroundPic}
                          fit="cover"
                        />
                        <span class={styles.subjectName}>
                          {item?.subjectName}
                        </span>
                      </div>
                    ),
                    title: () => (
                      <div class={styles.liContent}>
                        <div class={[styles.liTitle, 'van-ellipsis']}>
                          {item.courseGroupName}
                        </div>
                        <div class={styles.liUserInfo}>
                          <div class={[styles.userInfo, 'van-hairline--right']}>
                            <Image
                              class={styles.avatar}
                              fit="cover"
                              src={item.avatar || iconTeacher}
                            />
                            <p>
                              老师：
                              {item.teacherName || `游客${item.teacherId}`}
                            </p>
                          </div>
                          {item.existBuy === 1 ? (
                            <span class={styles.buyNum}>
                              <Icon name={iconSuccess} size="15" />
                              已购买
                            </span>
                          ) : (
                            <span class={styles.num}>
                              {item.studentCount}人已购买
                            </span>
                          )}
                        </div>
                      </div>
                    )
                  }}
                />
                <Cell
                  titleStyle={{ color: '#666666', fontSize: '13px' }}
                  v-slots={{
                    title: () => (
                      <span
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          fontSize: '13px'
                        }}
                      >
                        <Icon
                          name={iconTimer}
                          size="16"
                          style={{ marginRight: '5px' }}
                        />
                        {this.formatTime(item.salesStartDate)}
                      </span>
                    ),
                    default: () => (
                      <div class={styles.price}>
                        <span>
                          ¥
                          {(this as any).$filters.moneyFormat(item.coursePrice)}
                        </span>
                        /{item.courseNum}课时
                      </div>
                    )
                  }}
                />
              </CellGroup>
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无直播课" />
        )}
      </>
    )

    {
      /* <List
v-model:loading={this.loading}
finished={this.finished}
finishedText="没有更多了"
onLoad={this.getList}
>
{this.buyUserList.map(item => (
  <UserList class="mb12" users={item} />
))}
</List> */
    }
  }
})