nml_mobile/src/pages/stxk/jz/index.vue

<script setup>
import { getTimestamp } from '~/utils/day';
import { paddingLeft } from '~/utils/string';

function handleNavLeftClick() {
  router.back()
}

function handleNavRightClick() {
  router.push('/stxk/jz/wd')
}

let list = $ref(Array.from({ length: 8 }).map((_, i) => ({ id: i, title: '15天学习英语基础词汇基础词汇基础词汇', desc: '讲师：张春丽', price: '18.00', thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', num: 10, enddate: '2022-8-23' })))
let loading = $ref(false)
let finished = $ref(false)

function onLoad() {
  loading = true
  // finished = false
  setTimeout(() => {
    for (let i = 0; i < 4; i++) {
      list.push({ title: '15天学习英语基础词汇基础词汇基础词汇', desc: '讲师：张春丽', price: '18.00', thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', num: 10, enddate: '2022-8-23 01:00:00' });
    }

    // 加载状态结束
    loading = false;

    // 数据全部加载完成
    if (list.length >= 20) {
      finished = true;
    }
  }, 1000);
}

function getCountDownTime(target) {
  return getTimestamp(target) - getTimestamp()
}

const router = useRouter()
function handleClickCard(item) {
  console.log(item)
  router.push(`/stxk/jz/kcxq/${item.id}`)
}
</script>

<template>

  <van-sticky>
    <van-nav-bar title="社团选课" right-text="我的社团课程" @click-right="handleNavRightClick" left-arrow
      @click-left="handleNavLeftClick">
    </van-nav-bar>
  </van-sticky>

  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" @click.stop>
    <template v-for="item in list">
      <van-card :price="item.price" :desc="item.desc" :title="item.title" :thumb="item.thumb"
        @click="handleClickCard(item)">
        <template #tag>
          <van-count-down :time="getCountDownTime(item.enddate)">
            <template #default="timeData">
              <span class="bg-opacity-50 text-light-900 bg-dark-900 px-1">
                {{ paddingLeft(timeData.days * 24 + timeData.hours) }}:{{ paddingLeft(timeData.minutes)
                }}:{{ paddingLeft(timeData.seconds) }}
              </span>
            </template>
          </van-count-down>
        </template>
        <template #num>
          <span>{{ item.num }}人报名</span>
        </template>
      </van-card>
    </template>
  </van-list>

</template>