yb课堂 视频详情页模块开发《三十八》
CourseDetail基础模块开发
CourseDetail模块开发,拆分组件
- CourseDetail.vue
- Header.vue
- Course.vue
- Tab.vue
- Summary.vue
- Calalog
创建文件夹
CourseDetail开发
- <template>
- <div>
- <!--视频顶部组件-->
- <detail-header :videoInfo="videoInfo"></detail-header>
- <!-- 视频详情组件 -->
- <detail-course :videoInfo="videoInfo"></detail-course>
- <!--视频tab简介组件-->
- <detail-tab :videoInfo="videoInfo" :chapterList="chapterList"></detail-tab>
- <!--底部立即购买-->
- <footer>
- <router-link :to="{path:'/pay',query:{video_id:this.$route.query.video_id}}" class="user_buy">
- <button>立刻购买</button>
- </router-link>
- </footer>
- </div>
- </template>
- <script>
- //引入组件
- import DetailHeader from "./Components/Header";
- import DetailCourse from "./Components/Course";
- import DetailTab from "./Components/Tab";
- import { getVideoDetail } from "@/api/getData.js";
- export default {
- //注册组件
- components: {
- DetailHeader,
- DetailCourse,
- DetailTab
- },
- data() {
- return {
- //视频信息
- videoInfo: {},
- chapterList: []
- };
- },
- methods: {
- //获取视频详情
- async getDetail(vid) {
- try {
- const result = await getVideoDetail(vid);
- if (result.data.code == 0) {
- this.videoInfo = result.data.data;
- this.chapterList = result.data.data.chapter_list;
- }
- } catch (error) {
- console.log(error);
- }
- }
- },
- mounted() {
- //渲染之后拿到数据
- this.getDetail(this.$route.query.video_id);
- console.log(this.$route.query.video_id);
- }
- };
- </script>
- <style lang="scss" scoped>
- //底部
- footer {
- // fixed固定在底部
- position: fixed;
- bottom: 0;
- width: 100%;
- padding: 8px 0;
- background-color: #fff;
- z-index: 999;
- box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.05);
- }
- //设置购买按钮样式
- button {
- display: block;
- color: #fff;
- margin: 0 auto;
- background-color: #d93f30;
- height: 34px;
- line-height: 34px;
- border-radius: 17px;
- width: 80%;
- border: none;
- font-size: 15px;
- text-align: center;
- }
- </style>
Header开发
- <template>
- <div>
- <header>
- <div class="header">
- <span @click="$router.back(-1)"><i class="cubeic-back"/></span>
- <div class="title">
- {{videoInfo.title}}
- </div>
- </div>
- </header>
- </div>
- </template>
- <script>
- export default {
- props: {
- videoInfo: {
- type: Object,
- required: true
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .header {
- display: flex; //flex左右布局
- background-color: #07111b;
- padding: 10px 20px;
- color: #fff;
- }
- // 返回箭头
- .cubeic-back {
- color: #fff;
- margin-right: 5px;
- }
- //视频标题
- .title {
- font-size: 16px;
- width: 80%;
- //超出省略
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- </style>
Summary开发
- <template>
- <div>
- <img class="summary" :src="videoInfo.summary" />
- </div>
- </template>
- <script>
- export default {
- props: {
- videoInfo: {
- type: Object,
- required: true
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .summary {
- width: 100%;
- padding-bottom: 50px;
- margin: 15px 0;
- }
- </style>
Course开发
- <template>
- <div class="c_wapper">
- <div class="course">
- <div class="l_img">
- <img :src="videoInfo.cover_img" :title="videoInfo.title"/>
- </div>
- <div class="r_txt">
- <div class="txt">
- <span>综合评分:</span>
- <p>{{videoInfo.point}}</p>
- </div>
- <div class="txt">
- <span>价格:</span>
- <p>¥{{videoInfo.price/100}}</p>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- //从父组件传值
- props: {
- videoInfo: {
- type: Object,
- required: true
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- //包裹层
- .c_wrapper {
- padding: 0 14px;
- }
- //视频信息包裹层
- .course {
- margin: 14px 0;
- display: flex; //设置flex,左右布局
- }
- //视频左边图⽚层
- .l_img {
- height: 88px;
- margin-right: 14px;
- & img {
- height: 100%;
- border-radius: 15px;
- }
- }
- // 视频右边⽂字包裹层
- .r_txt {
- padding: 6px 0;
- font-size: 12px;
- flex: 1; //设置1可⾃动伸缩占⽤剩余空间
- }
- //每⾏⽂字层(综合评分、价格)
- .txt {
- // 设置flex让⽂字两端对⻬
- display: flex;
- justify-content: space-between;
- line-height: 16px;
- & p {
- text-align: center;
- width: 40%;
- color: #3bb149;
- }
- & i {
- color: #666;
- font-weight: bolder;
- width: 60%;
- & span {
- color: #2b333b;
- font-size: 12px;
- }
- }
- }
- </style>
tab动态组件开发
不同组件之间的动态切换:https://cn.vuejs.org/v2/guide/components-dynamic-async.html
组件的过渡:https://cn.vuejs.org/v2/guide/transitions.html#ad
Tab开发
- <template>
- <div>
- <cube-tab-bar v-model="selectedLabel" show-slider>
- <cube-tab v-for="item in tabs" :label="item.label" :key="item.label">
- </cube-tab>
- </cube-tab-bar>
- <component :videoInfo="videoInfo" :chapterList="chapterList" :is='selectedLabel==="简介"?"Summary":"Catalog"'>
- </component>
- </div>
- </template>
- <script>
- import Summary from "./Summary";
- import Catalog from "./Catalog";
- export default {
- components: {
- Summary,
- Catalog
- },
- props: {
- videoInfo: {
- type: Object,
- required: true
- },
- chapterList: {
- type: Array,
- required: true
- }
- },
- data() {
- return {
- selectedLabel: "简介",
- tabs: [
- {
- label: "简介"
- },
- {
- label: "目录"
- }
- ]
- };
- }
- };
- </script>
Catalog开发
- <template>
- <div class="cate_box">
- <div>
- <ul class="content" v-for="(item,index) in chapterList" :key="item.id">
- <h1>第{{index+1}}章 {{item.title}}</h1>
- <li class="sub_cate" v-for="(subitem,subindex) in chapterList[index].episode_List" :key="subitem.id">
- <span class="sub_title">{{index+1}}-{{subindex+1}} {{subitem.title}}</span>
- </li>
- </ul>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: {
- chapterList: {
- type: Array,
- required: true
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- // ⽬录包裹层设置边距
- .cate_box {
- padding: 0 15px 50px;
- background-color: #fff;
- margin: 15px 0;
- }
- //每⼀章包裹层
- .content {
- padding: 10px;
- // 章标题
- & h1 {
- font-size: 16px;
- width: 100%;
- margin-bottom: 15px;
- font-weight: bolder;
- // 设置章标题过⻓,超过⾏宽度省略隐藏
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- }
- //集包裹层
- .sub_cate {
- font-size: 12px;
- padding: 10px 0;
- //集标题
- .sub_title {
- // 设置集标题过⻓,超过⾏宽度省略隐藏
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- }
- </style>
yb课堂 视频详情页模块开发《三十八》的更多相关文章
- NeHe OpenGL教程 第三十八课:资源文件
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Java进阶(三十八)快速排序
Java进阶(三十八)快速排序 前言 有没有既不浪费空间又可以快一点的排序算法呢?那就是"快速排序"啦!光听这个名字是不是就觉得很高端呢. 假设我们现在对"6 1 2 7 ...
- 《手把手教你》系列技巧篇(三十八)-java+ selenium自动化测试-日历时间控件-下篇(详解教程)
1.简介 理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就 ...
- SQL注入之Sqli-labs系列第三十八关、第三十九关,第四十关(堆叠注入)
0x1 堆叠注入讲解 (1)前言 国内有的称为堆查询注入,也有称之为堆叠注入.个人认为称之为堆叠注入更为准确.堆叠注入为攻击者提供了很多的攻击手段,通过添加一个新 的查询或者终止查询,可以达到修改数据 ...
- 微信小程序把玩(三十八)获取设备信息 API
原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx. ...
- 【FastDev4Android框架开发】打造QQ6.X最新版本号側滑界面效果(三十八)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50253925 本文出自:[江清清的博客] (一).前言: [好消息] ...
- Deep learning:三十八(Stacked CNN简单介绍)
http://www.cnblogs.com/tornadomeet/archive/2013/05/05/3061457.html 前言: 本节主要是来简单介绍下stacked CNN(深度卷积网络 ...
- Android UI开发第二十八篇——Fragment中使用左右滑动菜单
Fragment实现了Android UI的分片管理,尤其在平板开发中,好处多多.这一篇将借助Android UI开发第二十六篇——Fragment间的通信. Android UI开发第二十七篇——实 ...
- bp(net core)+easyui+efcore实现仓储管理系统——入库管理之二(三十八)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- android音视频点/直播模块开发
音视频 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能,那么作为开发一个小白, ...
随机推荐
- Android开发环境配置 JDK及SDK
已经搭建过无数次开发环境,今天把搭建环境记录下,下次不用去搜索别人博客,有些博客都是复制粘贴,有些关键信息都缺失了. 1.首先第一步:下载JDK,配置JDK环境变量.JDK可以在Oracle官网下载, ...
- Teamviewer 再次涨价,太贵了,有没有平替软件?
今天打开 Teamviewer 网站,吓一跳,商业版基础款价格直接翻倍. 作为行业龙头,又是德国产品,Teamviewer 一直保持着高价格的特色.这两年 Teamviewer 的价格还逐年上涨,从每 ...
- MySQL之横纵表转换
sql行列转换(纵表和横表间的转换) 纵表 横表 纵转横 需要的知识点: group by,姓名有重复,使用这个按姓名进行分组 case...when...then...else...end 相当于s ...
- kubernetes之包管理器Helm
安装helm 安装helm客户端 [machangwei@mcwk8s-master ~]$ curl https://raw.githubusercontent.com/kubernetes/hel ...
- 为什么下载程序的时候会提示win-amd64.exe
- Pandas学习之路【1】
安装pandas: pip install pandas pandas读取数据: 数据类型 读取方式 csv, tsv, txt pd.read_csv Excel pd.read_excel mys ...
- 这是一个基于threading可停止线程的有限容量有限并行度的python任务管理器
这是一个可停止线程的有限容量有限并行度的任务管理器 基于:GitHub - AlitaIcon/StopableThreadJob: 可停止线程任务管理器 Quick Start 基础调用与效果 im ...
- WPF使用事件聚合器,实现任意页面跨页通信
前言:最近几天有好几个小伙伴玩WPF,遇到不同页面,不知道要怎么传递消息.于是,我今天就来演示一个事件聚合器的玩法,采用prism框架来实现.作为福利,内容附带了主页面打开对话框时候直接通过参数传递消 ...
- 初步搭建一个自己的对象存储服务---Minio
docker安装 1.拉取镜像 docker pull minio/minio 2.启动镜像 docker run -p 9000:9000 -p 9001:9001 --name minio -d ...
- Visual Studio 2022 community 社区版本离线安装
下载好 vs_community__115739266.1625310894.exe 的,重命名为:vs_community2022.exe 命令: E:\vs_community2022.exe - ...