我的收藏前端实现

一 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

            <section class="c-attr-mt of">
              <span v-if="isCollect" class="ml10 vam sc-end">
                <em class="icon18 scIcon"/>
                <a
                  style="cursor:pointer"
                  class="c-fff vam"
                  title="取消收藏"
                  @click="removeCollect(course.id)">已收藏</a>
              </span>
              <span v-else class="ml10 vam">
                <em class="icon18 scIcon"/>
                <span
                  style="cursor:pointer"
                  class="c-fff vam"
                  title="收藏"
                  @click="addCollect(course.id)" >收藏</span>
              </span>
            </section>

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">&nbsp;</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>