CourseDetail基础模块开发

CourseDetail模块开发,拆分组件

  • CourseDetail.vue

    • Header.vue
    • Course.vue
    • Tab.vue
      • Summary.vue
      • Calalog

创建文件夹

CourseDetail开发

  1. <template>
  2. <div>
  3. <!--视频顶部组件-->
  4. <detail-header :videoInfo="videoInfo"></detail-header>
  5. <!-- 视频详情组件 -->
  6. <detail-course :videoInfo="videoInfo"></detail-course>
  7. <!--视频tab简介组件-->
  8. <detail-tab :videoInfo="videoInfo" :chapterList="chapterList"></detail-tab>
  9. <!--底部立即购买-->
  10. <footer>
  11. <router-link :to="{path:'/pay',query:{video_id:this.$route.query.video_id}}" class="user_buy">
  12. <button>立刻购买</button>
  13. </router-link>
  14. </footer>
  15. </div>
  16. </template>
  17. <script>
  18. //引入组件
  19. import DetailHeader from "./Components/Header";
  20. import DetailCourse from "./Components/Course";
  21. import DetailTab from "./Components/Tab";
  22. import { getVideoDetail } from "@/api/getData.js";
  23. export default {
  24. //注册组件
  25. components: {
  26. DetailHeader,
  27. DetailCourse,
  28. DetailTab
  29. },
  30. data() {
  31. return {
  32. //视频信息
  33. videoInfo: {},
  34. chapterList: []
  35. };
  36. },
  37. methods: {
  38. //获取视频详情
  39. async getDetail(vid) {
  40. try {
  41. const result = await getVideoDetail(vid);
  42. if (result.data.code == 0) {
  43. this.videoInfo = result.data.data;
  44. this.chapterList = result.data.data.chapter_list;
  45. }
  46. } catch (error) {
  47. console.log(error);
  48. }
  49. }
  50. },
  51. mounted() {
  52. //渲染之后拿到数据
  53. this.getDetail(this.$route.query.video_id);
  54. console.log(this.$route.query.video_id);
  55. }
  56. };
  57. </script>
  58. <style lang="scss" scoped>
  59. //底部
  60. footer {
  61. // fixed固定在底部
  62. position: fixed;
  63. bottom: 0;
  64. width: 100%;
  65. padding: 8px 0;
  66. background-color: #fff;
  67. z-index: 999;
  68. box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.05);
  69. }
  70. //设置购买按钮样式
  71. button {
  72. display: block;
  73. color: #fff;
  74. margin: 0 auto;
  75. background-color: #d93f30;
  76. height: 34px;
  77. line-height: 34px;
  78. border-radius: 17px;
  79. width: 80%;
  80. border: none;
  81. font-size: 15px;
  82. text-align: center;
  83. }
  84. </style>

Header开发

  1. <template>
  2. <div>
  3. <header>
  4. <div class="header">
  5. <span @click="$router.back(-1)"><i class="cubeic-back"/></span>
  6. <div class="title">
  7. {{videoInfo.title}}
  8. </div>
  9. </div>
  10. </header>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. videoInfo: {
  17. type: Object,
  18. required: true
  19. }
  20. }
  21. };
  22. </script>
  23. <style lang="scss" scoped>
  24. .header {
  25. display: flex; //flex左右布局
  26. background-color: #07111b;
  27. padding: 10px 20px;
  28. color: #fff;
  29. }
  30. // 返回箭头
  31. .cubeic-back {
  32. color: #fff;
  33. margin-right: 5px;
  34. }
  35. //视频标题
  36. .title {
  37. font-size: 16px;
  38. width: 80%;
  39. //超出省略
  40. text-overflow: ellipsis;
  41. overflow: hidden;
  42. white-space: nowrap;
  43. }
  44. </style>

Summary开发

  1. <template>
  2. <div>
  3. <img class="summary" :src="videoInfo.summary" />
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. videoInfo: {
  10. type: Object,
  11. required: true
  12. }
  13. }
  14. };
  15. </script>
  16. <style lang="scss" scoped>
  17. .summary {
  18. width: 100%;
  19. padding-bottom: 50px;
  20. margin: 15px 0;
  21. }
  22. </style>

Course开发

  1. <template>
  2. <div class="c_wapper">
  3. <div class="course">
  4. <div class="l_img">
  5. <img :src="videoInfo.cover_img" :title="videoInfo.title"/>
  6. </div>
  7. <div class="r_txt">
  8. <div class="txt">
  9. <span>综合评分:</span>
  10. <p>{{videoInfo.point}}</p>
  11. </div>
  12. <div class="txt">
  13. <span>价格:</span>
  14. <p>¥{{videoInfo.price/100}}</p>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. //从父组件传值
  23. props: {
  24. videoInfo: {
  25. type: Object,
  26. required: true
  27. }
  28. }
  29. };
  30. </script>
  31. <style lang="scss" scoped>
  32. //包裹层
  33. .c_wrapper {
  34. padding: 0 14px;
  35. }
  36. //视频信息包裹层
  37. .course {
  38. margin: 14px 0;
  39. display: flex; //设置flex,左右布局
  40. }
  41. //视频左边图⽚层
  42. .l_img {
  43. height: 88px;
  44. margin-right: 14px;
  45. & img {
  46. height: 100%;
  47. border-radius: 15px;
  48. }
  49. }
  50. // 视频右边⽂字包裹层
  51. .r_txt {
  52. padding: 6px 0;
  53. font-size: 12px;
  54. flex: 1; //设置1可⾃动伸缩占⽤剩余空间
  55. }
  56. //每⾏⽂字层(综合评分、价格)
  57. .txt {
  58. // 设置flex让⽂字两端对⻬
  59. display: flex;
  60. justify-content: space-between;
  61. line-height: 16px;
  62. & p {
  63. text-align: center;
  64. width: 40%;
  65. color: #3bb149;
  66. }
  67. & i {
  68. color: #666;
  69. font-weight: bolder;
  70. width: 60%;
  71. & span {
  72. color: #2b333b;
  73. font-size: 12px;
  74. }
  75. }
  76. }
  77. </style>

tab动态组件开发

不同组件之间的动态切换:https://cn.vuejs.org/v2/guide/components-dynamic-async.html

组件的过渡:https://cn.vuejs.org/v2/guide/transitions.html#ad

Tab开发

  1. <template>
  2. <div>
  3. <cube-tab-bar v-model="selectedLabel" show-slider>
  4. <cube-tab v-for="item in tabs" :label="item.label" :key="item.label">
  5.  
  6. </cube-tab>
  7. </cube-tab-bar>
  8. <component :videoInfo="videoInfo" :chapterList="chapterList" :is='selectedLabel==="简介"?"Summary":"Catalog"'>
  9.  
  10. </component>
  11. </div>
  12. </template>
  13. <script>
  14. import Summary from "./Summary";
  15. import Catalog from "./Catalog";
  16. export default {
  17. components: {
  18. Summary,
  19. Catalog
  20. },
  21. props: {
  22. videoInfo: {
  23. type: Object,
  24. required: true
  25. },
  26. chapterList: {
  27. type: Array,
  28. required: true
  29. }
  30. },
  31. data() {
  32. return {
  33. selectedLabel: "简介",
  34. tabs: [
  35. {
  36. label: "简介"
  37. },
  38. {
  39. label: "目录"
  40. }
  41. ]
  42. };
  43. }
  44. };
  45. </script>

Catalog开发

  1. <template>
  2. <div class="cate_box">
  3. <div>
  4. <ul class="content" v-for="(item,index) in chapterList" :key="item.id">
  5. <h1>第{{index+1}}章 &nbsp;{{item.title}}</h1>
  6. <li class="sub_cate" v-for="(subitem,subindex) in chapterList[index].episode_List" :key="subitem.id">
  7. <span class="sub_title">{{index+1}}-{{subindex+1}} {{subitem.title}}</span>
  8. </li>
  9. </ul>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. chapterList: {
  17. type: Array,
  18. required: true
  19. }
  20. }
  21. };
  22. </script>
  23. <style lang="scss" scoped>
  24. // ⽬录包裹层设置边距
  25. .cate_box {
  26. padding: 0 15px 50px;
  27. background-color: #fff;
  28. margin: 15px 0;
  29. }
  30. //每⼀章包裹层
  31. .content {
  32. padding: 10px;
  33. // 章标题
  34. & h1 {
  35. font-size: 16px;
  36. width: 100%;
  37. margin-bottom: 15px;
  38. font-weight: bolder;
  39. // 设置章标题过⻓,超过⾏宽度省略隐藏
  40. text-overflow: ellipsis;
  41. overflow: hidden;
  42. white-space: nowrap;
  43. }
  44. }
  45. //集包裹层
  46. .sub_cate {
  47. font-size: 12px;
  48. padding: 10px 0;
  49. //集标题
  50. .sub_title {
  51. // 设置集标题过⻓,超过⾏宽度省略隐藏
  52. display: block;
  53. text-overflow: ellipsis;
  54. overflow: hidden;
  55. white-space: nowrap;
  56. }
  57. }
  58. </style>

yb课堂 视频详情页模块开发《三十八》的更多相关文章

  1. NeHe OpenGL教程 第三十八课:资源文件

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  2. Java进阶(三十八)快速排序

    Java进阶(三十八)快速排序 前言 有没有既不浪费空间又可以快一点的排序算法呢?那就是"快速排序"啦!光听这个名字是不是就觉得很高端呢. 假设我们现在对"6 1 2 7 ...

  3. 《手把手教你》系列技巧篇(三十八)-java+ selenium自动化测试-日历时间控件-下篇(详解教程)

    1.简介 理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就 ...

  4. SQL注入之Sqli-labs系列第三十八关、第三十九关,第四十关(堆叠注入)

    0x1 堆叠注入讲解 (1)前言 国内有的称为堆查询注入,也有称之为堆叠注入.个人认为称之为堆叠注入更为准确.堆叠注入为攻击者提供了很多的攻击手段,通过添加一个新 的查询或者终止查询,可以达到修改数据 ...

  5. 微信小程序把玩(三十八)获取设备信息 API

    原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx. ...

  6. 【FastDev4Android框架开发】打造QQ6.X最新版本号側滑界面效果(三十八)

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50253925 本文出自:[江清清的博客] (一).前言: [好消息] ...

  7. Deep learning:三十八(Stacked CNN简单介绍)

    http://www.cnblogs.com/tornadomeet/archive/2013/05/05/3061457.html 前言: 本节主要是来简单介绍下stacked CNN(深度卷积网络 ...

  8. Android UI开发第二十八篇——Fragment中使用左右滑动菜单

    Fragment实现了Android UI的分片管理,尤其在平板开发中,好处多多.这一篇将借助Android UI开发第二十六篇——Fragment间的通信. Android UI开发第二十七篇——实 ...

  9. bp(net core)+easyui+efcore实现仓储管理系统——入库管理之二(三十八)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  10. android音视频点/直播模块开发

      音视频 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能,那么作为开发一个小白, ...

随机推荐

  1. Android开发环境配置 JDK及SDK

    已经搭建过无数次开发环境,今天把搭建环境记录下,下次不用去搜索别人博客,有些博客都是复制粘贴,有些关键信息都缺失了. 1.首先第一步:下载JDK,配置JDK环境变量.JDK可以在Oracle官网下载, ...

  2. Teamviewer 再次涨价,太贵了,有没有平替软件?

    今天打开 Teamviewer 网站,吓一跳,商业版基础款价格直接翻倍. 作为行业龙头,又是德国产品,Teamviewer 一直保持着高价格的特色.这两年 Teamviewer 的价格还逐年上涨,从每 ...

  3. MySQL之横纵表转换

    sql行列转换(纵表和横表间的转换) 纵表 横表 纵转横 需要的知识点: group by,姓名有重复,使用这个按姓名进行分组 case...when...then...else...end 相当于s ...

  4. kubernetes之包管理器Helm

    安装helm 安装helm客户端 [machangwei@mcwk8s-master ~]$ curl https://raw.githubusercontent.com/kubernetes/hel ...

  5. 为什么下载程序的时候会提示win-amd64.exe

  6. Pandas学习之路【1】

    安装pandas: pip install pandas pandas读取数据: 数据类型 读取方式 csv, tsv, txt pd.read_csv Excel pd.read_excel mys ...

  7. 这是一个基于threading可停止线程的有限容量有限并行度的python任务管理器

    这是一个可停止线程的有限容量有限并行度的任务管理器 基于:GitHub - AlitaIcon/StopableThreadJob: 可停止线程任务管理器 Quick Start 基础调用与效果 im ...

  8. WPF使用事件聚合器,实现任意页面跨页通信

    前言:最近几天有好几个小伙伴玩WPF,遇到不同页面,不知道要怎么传递消息.于是,我今天就来演示一个事件聚合器的玩法,采用prism框架来实现.作为福利,内容附带了主页面打开对话框时候直接通过参数传递消 ...

  9. 初步搭建一个自己的对象存储服务---Minio

    docker安装 1.拉取镜像 docker pull minio/minio 2.启动镜像 docker run -p 9000:9000 -p 9001:9001 --name minio -d ...

  10. Visual Studio 2022 community 社区版本离线安装

    下载好 vs_community__115739266.1625310894.exe 的,重命名为:vs_community2022.exe 命令: E:\vs_community2022.exe - ...