【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 课程

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

前言

大家好，上一篇文章活动中，我们实现了从发现首页跳转到活动列表页，并实现了活动列表页的布局及数据渲染，后面还将活动列表进行了单独封装实现列表代码的复用。至此关于发现页相关的内容就全部分享到这里了，从本次分享开始，我们将进入下一个主题 - 课程的分享。

布局分析

如上图所示，课程列表的整体布局也是非常简单的，同样也是由标题栏和内容区组成。其中标题栏只显示一个“课程”标题和“我的课程”链接，点击“我的课程”跳转到我的课程列表中。而内容区域包括到内容就稍微多一些了，我们可以把具体的美个课程分为从左到右三部分：

• 左侧部分展示的是课程封面图
• 中间部分包括课程的标题，作者，章节数和购买人数
• 右侧是课程的价格 我们可以采用flex布局实现，左右两边宽度固定，中间自适应，下面我们来把布局设计一下。

代码实现

• 标题栏 标题栏还是用van-nav-bar来实现，我们这里只留一个“课程”标题就可以了，我的课程链接就不放了，跟其它几个页面的标题栏一样也返回功能。

<van-nav-bar title="课程" left-arrow @click-left="toBack" />

const router = useRouter();
const toBack = () => {
  router.back();
};

• 课程列表 课程列表同样需要支持下拉刷新和上拉加载更多内容，因此还是需要借助van-pull-refresh和van-list两个组件来实现，在van-list中添加一个course-item盒子，并设置flex布局。然后再在该盒子下添加3个相应的子盒子分别放置课程封面，课程标题和课程价格等信息。

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in courseList" :key="item.booklet_id">
        <div class="course-item">
          <van-image class="image" :src="item.base_info.cover_img" />
          <div class="course-content">
            <div class="course-title">{{ item.base_info.title }}</div>
            <div class="course-author">{{ item.user_info.user_name }}</div>
            <div class="course-info">
              {{ item.base_info.section_count }}小节
              {{ item.base_info.buy_count }}人阅读
            </div>
          </div>
          <div class="course-price">
            <div>¥{{ item.base_info.price / 100 }}</div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>

setup() {
    const state = reactive({
      refreshing: false,
      loading: false,
      finished: false,
      courseList: [],
      cursor: "0",
    });
    const router = useRouter();

    const toBack = () => {
      router.back();
    };
    const onRefresh = () => {
      state.finished = false; //清空列表数据，重新加载
      state.loading = true;
      state.refreshing = true;
      onLoad();
    };

    const onLoad = () => {
      api.courseList(state.cursor).then((res) => {
        if (state.refreshing) {
          state.courseList = [];
          state.refreshing = false;
        }
        console.log(res);
        state.cursor = res.cursor;
        state.courseList.push(...res.data);
        state.loading = false;
      });
    };
    return {
      ...toRefs(state),
      toBack,
      onRefresh,
      onLoad,
    };

总结

本次分享我们又实现了课程列表的分享，那么关于课程相关的内容并不多，我们用这一个篇幅就够了，下一节我们见进入到本次实战的最后一个主题 - “个人中心”的分享。今天的分享就到这里了。小伙伴们给个赞呗！