import CourseDetail from "../components/CourseDetail"{name:"CourseDetail",path: "/detail",component: CourseDetail,}
# 1. 安装依赖
npm install vue-video-player --save# 2. 在main.js中注册加载组件
require(&＃39;video.js/dist/video-js.css&＃39;);
require(&＃39;vue-video-player/src/custom-theme.css&＃39;);
import VideoPlayer from &＃39;vue-video-player&＃39;
Vue.use(VideoPlayer);
在课程详情页中的script标签里面加入以下代码:
import {videoPlayer} from &＃39;vue-video-player&＃39;;export default {data () {return {playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度autoplay: false, //如果true,则自动播放muted: false, // 默认情况下将会消除任何音频。loop: false, // 循环播放preload: &＃39;auto&＃39;, // 建议浏览器在
1 {{course.students}}人在学 课程总时长&＃xff1a;{{course.lessons}}课时/{{course.pub_lessons}}小时 难度&＃xff1a;{{course.level_name}} {{course.price_service_type.name}} 距离结束&＃xff1a;仅剩 {{Math.floor(sale_time/86400)}}天 {{Math.floor(sale_time%86400/3600)}}小时 {{Math.floor(sale_time%3600/60)}}分 {{Math.floor(sale_time%60)}} 秒
2
3
4
5
6
7
9 :playsinline&＃61;"true"
10 :options&＃61;"playerOptions"
11 &＃64;play&＃61;"onPlayerPlay($event)"
12 &＃64;pause&＃61;"onPlayerPause($event)"
13 >
14
15
16
17 {{course.name}}
18
19
20
21
22
23
24 活动价
25 ¥{{course.real_price}}
26 ¥{{course.price}}
27
28
29
30 立即购买
31 免费试学
32
33
34 加入购物车
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
128
129
后端数据接口 views:
class CourseDetailAPIView(RetrieveAPIView):queryset &＃61; models.Course.objects.all()serializer_class &＃61; CourseDetailSerializer
serlizer,序列化器:
1 from rest_framework import serializers
2
3 from luffy.apps.courses import models
4
5
6 class CourseCateserializer(serializers.ModelSerializer):
7 class Meta:
8 model &＃61; models.CourseCategory
9 fields &＃61; (&＃39;id&＃39;,&＃39;name&＃39;,&＃39;orders&＃39;)
10
11 class CourseChaptersSerializer(serializers.ModelSerializer):
12 class Meta:
13 model&＃61; models.CourseChapter
14 fields &＃61; ("id","chapter","name")
15
16 class Teacherserializer(serializers.ModelSerializer):
17 class Meta:
18 model &＃61; models.Teacher
19 fields &＃61; ("id","name","title",)
20
21
22 class PriceServiceserializer(serializers.ModelSerializer):
23 class Meta:
24 model &＃61; models.PriceService
25 fields &＃61; ("condition","sale","start_time","end_time","endtime_stamp")
26
27
28 class PriceServiceTypeserializer(serializers.ModelSerializer):
29 priceservices &＃61; PriceServiceserializer(many&＃61;True)
30 class Meta:
31 model &＃61; models.PriceServiceType
32 fields &＃61;("id","name","priceservices")
33
34 class Courseserializer(serializers.ModelSerializer):
35 teacher &＃61; Teacherserializer()
36 price_service_type &＃61; PriceServiceTypeserializer()
37 class Meta:
38 model &＃61; models.Course
39 fields &＃61; ("id","name","course_img","students","lessons","pub_lessons","price","teacher","course_category","price_service_type")
40
41
42 class CourseDetailSerializer(serializers.ModelSerializer):
43 coursechapters &＃61; CourseChaptersSerializer(many&＃61;True)
44 price_service_type &＃61; PriceServiceTypeserializer()
45 teacher &＃61; Teacherserializer()
46 class Meta:
47 model &＃61; models.Course
48 fields &＃61; (
49 "id", "name", "course_img", "students",
50 "lessons", "brief", "level_name", "pub_lessons","price",
51 "teacher", "real_price", "price_service_type","coursechapters",)
京公网安备 11010802041100号