Uni-app 课程详情页 获取课程详情 + 收藏 + 加入购物车
2024-06-03 08:22:33
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, //详情页课程idisCollected: 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 = falseconsole.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 = trueconsole.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}})}
}
Uni-app 课程详情页 获取课程详情 + 收藏 + 加入购物车相关推荐
- 爬虫基础：爬取百度贴吧-猫吧标题，详情页url，详情页图片url，下载图片
学习总结: 1.经试验,无需定义请求头headers也能爬取到数据 2.网站编码使用utf-8,试验时要了解清楚网站编码,以免数据乱码,返回数据可以使用response.encoding='网站编码' ...
- 微服务项目实战技术点汇总：“尚硅谷的谷粒在线教育”九、整合阿里云视频播放器、课程评论功能、讲师详情页、课程详情页、检索功能、课程和讲师列表功能
文章目录 一.讲师 1.分页查询接口(后端) 1.controller 2.service 3.测试 2.分页显示讲师(前端) 3.讲师详情页(后端) 1.controller 2.测试 4.讲师详情 ...
- vue中如何实现列表的详情页获取及渲染
一.页面跳转方式 在页面中有两种跳转方式,第一种跳转方式是 使用 a 标签的形式进行跳转,也称之为标签跳转.第二种跳转方式是使用 window.location.href 的形式进行跳转,也称之为编程 ...
- 如何从详情页获取淘宝/天猫商品的分类？
熟悉淘宝/天猫的人应该都知道,在商品的详情页是没有显示商品的所属分类的.而"商品分类"对我们的数据分析又是一个很重要的参数,那如何获取这个信息呢? 通过分析发现有两种方法,下面一一 ...
- 仿淘宝详情页的商品详情
先上效果图 效果就是上面图片的效果 接下来看看如何实现 首先我们来看下布局文件 <LinearLayoutandroid:id="@+id/header"android:la ...
- ebay详情页html,eBay详情页商品的basic Description没有了？
如果刊登模板设计的时候缺少basic Description模块,则最后的eBay商品详情页就显示不了"模板内商品描述01"里面填的东西. 解决办法: 进入修改页面,点左边功能区内 ...
- html鼠标经过图片显示详情页,ecshop商品详情页图片更改为鼠标经过切换大图
近日有客户要求把 ecshop 商品详情页进行美化修改一下,默认的 ecshop 商品详情页主图不能切换,想要看大图的话,需要进行再次点击,然后显示商品大图,对于用户的体验不太好,看来只好在当前页面进 ...
- 微信网页和app内h5页获取当前定位保持一致
Q:微信网页调用jssdk内的getLocation方法和客户端内封装的高德获取定位获取到的当前定位不一致,计算出的远近排序不一致. A:getLocation方法,type用gcj02.isHigh ...
- 商品详情页动态渲染系统：大型网站的多机房4级缓存架构设计
124_大型电商网站的商品详情页的深入分析 之前,咱们也是说在讲解这个商品详情页系统的架构 缓存架构,高可用服务 商品详情页系统,我们只是抽取了其中一部分来讲解,而且还做了很大程度的简化 主要是为了用 ...
最新文章
- 我对浮动的认识（一）
- C语言入门书籍--C语言程序设计
- redis源码客户端和服务端通信过程
- 深度学习之利用TensorFlow实现简单的全连接层网络（MNIST数据集）
- 如何将python项目部署到服务器_部署python项目到linux服务器
- 服务器主机安装esxi虚拟机,服务器主机安装esxi虚拟机
- 人脸扫描建模_iPhone12Pro可以3D建模，逼真还原度达95%以上
- Notepad++ 开启「切分窗口」同时检视、比对两份文件
- 中雅图帕尼尼_凝聚意大利足球50年辉煌 中雅图引进帕尼尼意甲球星贴
- 作为企业创业者的老板，只要把这十八个方面做正确就好
- Tuxedo中间件介绍
- JAVA小功能手机短信发送
- 诊所数字化：患者信息识别方式
- day31-20180720-流利阅读笔记
- 为什么手机信号满格，但网速却还是那么慢？这4点原因是关键
- python for ArcGIS 绘制西安市板块地图
- ArcGIS教程——ArcGIS快速入门
- fpu测试_浮点运算单元FPU能给电机控制带来什么？
- 使用selenium 刷票
- supervisord启动子程序报错Exited too quickly (process log may have details)解决