我的收藏前端实现

朴灿烈づ我的快乐病毒、 2021-07-24 23:34 373阅读 0赞

# 一 api #

import request from '@/utils/request'
    
    export default {
      isCollect(courseId) {
        return request({
          url: `/api/edu/course-collect/auth/is-collect/${courseId}`,
          method: 'get'
        })
      },
      addCollect(courseId) {
        return request({
          url: `/api/edu/course-collect/auth/save/${courseId}`,
          method: 'post'
        })
      },
      getCollectList() {
        return request({
          url: '/api/edu/course-collect/auth/list',
          method: 'get'
        })
      },
      removeById(courseId) {
        return request({
          url: `/api/edu/course-collect/auth/remove/${courseId}`,
          method: 'delete'
        })
      }
    }

# 二 课程页面 #

## 1 html ##

## 2 判断是否收藏 ##

// 引入api
    import collectApi from '~/api/collect'
    // data中定义
    isCollect: false // 是否已收藏
    // created中判断是否收藏
      created() {
        // 如果未登录，则isBuy是默认值false
        // 如果已登录，则判断是否已购买
        const token = cookie.get('guli_jwt_token')
        if (token) {
          orderApi.isBuy(this.course.id).then(response => {
            this.isBuy = response.data.isBuy
          })
          // 判断是否收藏
          collectApi.isCollect(this.course.id).then(response => {
            this.isCollect = response.data.isCollect
          })
        }
      },

## 3 定义收藏方法 ##

// 收藏
        addCollect(courseId) {
          collectApi.addCollect(this.course.id).then(response => {
            this.isCollect = true
            this.$message.success(response.message)
          })
        },
        // 取消收藏
        removeCollect(courseId) {
          collectApi.removeById(this.course.id).then(response => {
            this.isCollect = false
            this.$message.success(response.message)
          })
        }

# 三 我的收藏页面 #

<template>
      <article class="col-7 fl">
        <div class="u-r-cont">
          <section>
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a href="javascript: void(0)" title="我的收藏" class="current">
                  收藏列表
                </a>
              </section>
            </div>
            <div class="mt40">
              <section v-if="collectList.length === 0" class="no-data-wrap">
                <em class="icon30 no-data-ico"> </em>
                <span class="c-666 fsize14 ml10 vam">您还没有收藏课程哦！</span>
              </section>
              
              <el-table
                v-if="collectList.length > 0"
                :data="collectList"
                border
                fit
                highlight-current-row>
                <el-table-column label="课程信息" align="center" >
                  <template slot-scope="scope">
                    <div class="info" >
                      <div class="pic">
                        <img :src="scope.row.cover" alt="scope.row.title" width="100px">
                      </div>
                      <div class="title">
                        <a :href="'/course/'+scope.row.courseId">{
       { scope.row.title }}</a>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="讲师名称" align="center">
                  <template slot-scope="scope">
                    {
       { scope.row.teacherName }}
                  </template>
                </el-table-column>
                <el-table-column label="价格" width="100" align="center">
                  <template slot-scope="scope">
                    {
       { scope.row.price }}
                  </template>
                </el-table-column>
                <el-table-column label="收藏时间" align="center">
                  <template slot-scope="scope">
                    {
       { scope.row.gmtCreate }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                  <template slot-scope="scope">
                    <a href="javascript:void(0);" title="取消收藏" @click="removeCollect(scope.row.courseId)">取消收藏</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </section>
        </div>
      </article>
    </template>
    <script>
    import collectApi from '~/api/collect'
    
    export default {
      data() {
        return {
          collectList: []
        }
      },
      created() {
        this.fetchCollectList()
      },
      methods: {
        fetchCollectList() {
          collectApi.getCollectList().then(response => {
            this.collectList = response.data.items
          })
        },
        removeCollect(courseId) {
          collectApi.removeById(courseId).then(response => {
            this.$message.success(response.message)
            this.fetchCollectList()// 刷新列表
          })
        }
      }
    }
    </script>