Uni-app 课程详情页 获取课程详情 + 收藏 + 加入购物车

class-detail.vue >

<template>
  <view class="class-detail">
    <!-- 导航 -->
    <u-navbar title="">
      <view class="header-right" slot="right">
        <u-icon @tap="goCollected" v-if="isCollected" name="star-fill" color="#f00" size="50"></u-icon>
        <u-icon @tap="goCollected" v-else name="star" size="50"></u-icon>
        <u-icon name="search" size="50" class="search"></u-icon>
        <u-icon name="shopping-cart" size="50" class="cart" @tap="topCart"></u-icon>
      </view>
    </u-navbar>
    <!-- 课程详情展示 -->
    <CourseItem :item="classDetail">
      <view slot="right" class="course-right" v-if="classDetail.discountPrice">
        <view>会员免费</view>
        <image src="/static/list/crownq.png"></image>
      </view>
    </CourseItem>
    <!-- 全屏选项卡 -->
    <view>
      <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
        swiperWidth="750"></u-tabs-swiper>
    </view>
    <swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 800rpx;width: 100%;">
          <Catalogue :catalogueList="catalogueList"></Catalogue>
          目录
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 800rpx;width: 100%;">
          <Download :downloadList="downloadList"></Download>
        </scroll-view>
      </swiper-item>
    </swiper>
    <view class="detail-footer">
      <view class="shopcart btn" @tap="addCart">加入购物车</view>
      <view class="buy btn">立即购买</view>
    </view>
    {{classId}}
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import api from '@/service/coursedetail.js'
  import tokenApi from '@/service/token.js'
  import {
    mapState
  } from 'vuex';
  import CourseItem from '@/common/course/course-item.vue'
  import Catalogue from '@/common/course-detail/catalogue/index.vue'
  import Download from '@/common/course-detail/download/index.vue'
  export default {
    components: {
      CourseItem,
      Catalogue,
      Download
    },
    data() {
      return {
        classId: null, //详情页课程id
        isCollected: false, //是否收藏
        classDetail: {},
        list: [{
            id: 456,
            name: '目录'
          },
          {
            id: 123,
            name: '下载笔记代码'
          }
        ],
        current: 0,
        swiperCurrent: 0,
        catalogueList: [], //目录 父传子
        downloadList: [], //下载 父传子
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    onLoad(params) {
      this.classId = params.classId //上页接收到的
      this.__init()
    },
    methods: {
      __init() {
        //获取课程详情
        api.getClassDetail({
          classId: this.classId
        }).then(res => {
          if (res.meta.code === '200') {
            //当前课程信息
            this.classDetail = res.data.data
            //当前课程的目录
            this.catalogueList = res.data.data.bizCourseChapters
            //笔记代码
            this.downloadList = res.data.data.bizCourseAttachments
          }
        })
        //收藏做法
        //页面加载，获取收藏状态数据。判断vuex中的this.userInfo为true，代表已经登录，则去获取收藏的数据，如果data有值，给isCollected赋值为true也就是变为收藏状态
        //点击收藏图标时，判断vuex中的this.userInfo为false，代表未登录，跳转至登录页面；判断this.userInfo为true，代表已经登录，进入判断——若为收藏状态，请求取消收藏接口；若为非收藏状态，请求收藏接口，同时改变isCollected值
        //判断是否登录 再请求是否收藏的数据
        if (this.userInfo || this.userInfo.id) { //首先判断是否登录
          api.getFavorite({
            memberId: this.userInfo.id,
            courseId: this.classId
          }).then(res => {
            if (res.meta.code === '200') {
              //如果res.data.data中有值，代表已经收藏过了；res.data.data是null代表未收藏
              if (res.data.data) {
                this.isCollected = true
              } else {
                this.isCollected = false
              }
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },
      //点击星星 取消或者收藏
      goCollected() {
        if (this.userInfo) { //已登录状态
          if (this.isCollected) { //为收藏状态 取消收藏
            tokenApi.createToken().then(res => {
              api.removeFavorite({
                memberId: this.userInfo.id,
                courseId: this.classId,
                token: res.data.token
              }).then(ress => {
                if (res.meta.code === '200') {
                  this.isCollected = false
                  console.log('qu')
                }
              }).catch(ress => {
                console.log(ress)
              })
            })
          } else {
            tokenApi.createToken().then(res => { //非收藏状态 添加收藏
              api.addFavorite({
                courseId: this.classId,
                token: res.data.token
              }).then(ress => {
                if (res.meta.code === '200') {
                  this.isCollected = true
                  console.log('shou')
                }
              })
            })
          }
        } else {
          this.$refs.uToast.show({
            title: '请先登录',
            type: 'error',
            icon: false,
            url: '/pages/login/login'
          })
        }
      },
      //tabs通知swiper切换
      tabsChange(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx;
        this.$refs.uTabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current;
        this.$refs.uTabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },
      //头部购物车按钮
      topCart() {
        if (uni.getStorageSync('token')) {
          uni.navigateTo({
            url: '../shopCart/shopCart'
          })
        }
      },
      //点击加入购物车
      addCart() {
        if (this.userInfo) {
          tokenApi.createToken().then(res => {
            api.addShopCart({
              token: res.data.token,
              courseId: this.classId,
              memberId: this.userInfo.id
            }).then(ress => {
              if (res.meta.code === '200') {
                uni.showModal({
                  title: '提示',
                  content: '添加成功',
                  confirmText: '去购物车',
                  success: function(res) {
                    if (res.confirm) {
                      uni.navigateTo({
                        url: '../shopCart/shopCart'
                      })
                    }
                  }
                });
              } else {
                this.$refs.uToast.show({
                  title: ress.meta.msg,
                  type: 'error',
                  icon: false
                })
              }
            }).catch(err => {
              this.$refs.uToast.show({
                title: err.meta.msg,
                type: 'error',
                icon: false
              })
            })
          })
        } else {
          this.$refs.uToast.show({
            title: '请先登录',
            type: 'error',
            icon: false,
            url: '/pages/login/login'
          })
        }
      }
    }
  }
</script>

coursedetail.js 接口

import $http from './request.js'
import {Decrypt} from'@/utils/aes/aes.js'

export default{
  //课程详情
  getClassDetail({classId}){//解构值
    return $http.request({
      url:'/course/getDetail?courseId='+classId,
      method:'get'
    })
  },
  //获取收藏
  getFavorite({memberId,courseId}){//解构值
    return $http.request({
      url:'/favorite/getFavorite?memberId='+memberId+'&courseId='+courseId,
      method:'get',
      header:{
         "Authorization":Decrypt(uni.getStorageSync('token'))
      }
    })
  },
  //添加收藏
  addFavorite({courseId,token}){//解构值
    return $http.request({
      url:'/favorite/addFavorite',
      method:'post',
      data:{
        courseId:courseId
      },
      header:{
         "Authorization":Decrypt(uni.getStorageSync('token')),
         'token':token
      }
    })
  },
  //取消收藏
  removeFavorite({memberId,courseId,token}){//解构值
    return $http.request({
      url:'/favorite/deleteFavorite',
      method:'get',
      data:{
        memberId:memberId,
        courseId:courseId
      },
      header:{
         "Authorization":Decrypt(uni.getStorageSync('token')),
         'token':token
      }
    })
  },
  //加入购物车
  addShopCart({memberId,courseId,token}){//解构值
    return $http.request({
      url:'/shopcar/addShopCar',
      method:'post',
      data:{
        memberId:memberId,
        courseId:courseId
      },
      header:{
         "Authorization":Decrypt(uni.getStorageSync('token')),
         'token':token
      }
    })
  }
}