zcdsj
/
cma_search
mirror of https://e.coding.net/ctcdevteam/cma_search.git
5
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增观看次数

This commit is contained in:
caoqianming 2021-07-05 16:55:54 +08:00
parent d1ea031c88
commit ddba9c0b9a
4 changed files with 149 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client_mp/pages.json
View File

@ -96,7 +96,7 @@
"path" : "pages/inspectrecord/deptreport",
"style" :
{
"navigationBarTitleText": "",
"navigationBarTitleText": "检查任务",
"enablePullDownRefresh": false
}
@ -105,7 +105,7 @@
"path" : "pages/document/index",
"style" :
{
"navigationBarTitleText": "",
"navigationBarTitleText": "手册资料",
"enablePullDownRefresh": false
}
@ -114,7 +114,7 @@
"path" : "pages/vod/index",
"style" :
{
"navigationBarTitleText": "",
"navigationBarTitleText": "云点播",
"enablePullDownRefresh": true,
"onReachBottomDistance":100
}
@ -124,7 +124,7 @@
"path" : "pages/vod/video",
"style" :
{
"navigationBarTitleText": "",
"navigationBarTitleText": "云点播",
"enablePullDownRefresh": false
}

173
client_mp/pages/vod/video.vue
View File

@ -1,8 +1,8 @@
<template>
<view>
<view style="height: 80upx;">
<uni-search-bar @confirm="search"></uni-search-bar>
</view>
<!-- <view style="height: 80upx;">
<uni-search-bar @confirm="startSearch" v-model="search"></uni-search-bar>
</view> -->
<scroll-view class="nav-scroll" :enable-flex="true" scroll-with-animation :throttle="false"
:scroll-left="scrollToLeft" scroll-x @scroll="handleScroll">
<view class="nav uni-nav">
@ -21,9 +21,18 @@
@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
@scrolltolower="swiperScrollLower">
<view>
<view class="swiper-item-list" v-for="sub_item in item.content" :key="sub_item">
{{ sub_item }}</view>
<view class="swiper-item-list" v-for="(video,index) in item.content" :key="video.id">
<video class="video" :src="video.mediaurl" controls object-fit="cover"
:id="'video'+video.id" :poster="video.coverurl" @play="doPlay($event, index)"
@pause="doPlay($event, index)" @ended="doPlay($event, index)">
<view class='video-slot' v-if="video.showTitle" :title="video.name">
<span style="margin-left:6px">{{video.name}}</span>
</view>
</video>
<view style="color:darkblue;margin-left:12upx">{{video.name}}</view>
</view>
</view>
<view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
</scroll-view>
</swiper-item>
</swiper>
@ -35,6 +44,7 @@
export default {
data() {
return {
playingVideoStr: null,
swiperIndex: 0, //当前的swiperindex
navItemWidth: '', //选中下划线的宽度
navItemLeft: 0, //选中下划线的显示位置
@ -45,9 +55,12 @@
list: [{
id: 0,
title: '全部',
page: 1,
content: []
}],
refreStatus: false
refreStatus: false,
loadingText: "加载中",
search:""
};
},
computed: {
@ -66,6 +79,7 @@
let list = [{
id: 0,
title: '全部',
page: 1,
content: []
}]
for (var i = 0; i < res.data.length; i++) {
@ -74,17 +88,34 @@
id: data.id,
title: data.name,
page: 1,
loadingText:'加载中...',
content: []
})
}
this.list = list
this.$nextTick(function() {
this.init()
this.getVideos()
});
})
},
methods: {
doPlay(e, index) {
if (e.type == 'play') {
var playingVideoStr = e.target.id
this.list[this.swiperIndex].content[index].showTitle = false
//暂停其他视频播放
if(this.playingVideoStr==null){
this.playingVideoStr = playingVideoStr
}
else if (playingVideoStr != this.playingVideoStr) {
var videoContextPrev = uni.createVideoContext(this.playingVideoStr)
videoContextPrev.pause()
this.playingVideoStr = playingVideoStr
}
} else {
this.list[this.swiperIndex].content[index].showTitle = true
}
},
// 获取dom信息
init() {
const query = uni.createSelectorQuery().in(this);
@ -100,7 +131,6 @@
rect: true,
size: true
}, data => {
console.log(data)
data.forEach((item, index) => {
if (index == 0) {
this.navItemWidth = item.width;
@ -117,6 +147,9 @@
// 点击导航切换swiper
taggleNav(val) {
this.swiperIndex = val;
if (this.list[val].content.length == 0) {
this.getVideos()
}
},
// 滚动tabs以及移动下划线
scrollDom() {
@ -134,6 +167,9 @@
this.swiperIndex = e.detail.current;
this.scrollDom();
this.$emit('currentIndex', this.swiperIndex);
if (this.list[e.detail.current].content.length == 0) {
this.getVideos()
}
},
// tabs-scrollview触底
handleScroll(e) {
@ -141,13 +177,51 @@
},
// swiper-ScrollLower触底
swiperScrollLower() {
uni.showToast({
icon: 'none',
title: `此时为${this.list[this.swiperIndex].title}触底`
});
setTimeout(() => {
this.getData();
}, 500);
// uni.showToast({
// icon: 'none',
// title: `此时为${this.list[this.swiperIndex].title}触底`
// });
// setTimeout(() => {
// this.getData();
// }, 500);
this.list[this.swiperIndex].page = this.list[this.swiperIndex].page + 1
this.getVideos()
},
getVideos() {
let swiperIndex = this.swiperIndex
let currentData = this.list[swiperIndex]
var params = {
page: currentData.page
}
if (currentData.id == 0) {} else {
params.category = currentData.id
}
this.$u.api.getVideos(params).then(res => {
this.refreStatus = false
let results = res.data.results
for (var i = 0; i < results.length; i++) {
results[i].showTitle = true
}
if (currentData.page == 1) {
if (results == 0) {
this.loadingText = '暂无视频'
} else {
this.loadingText = ''
this.list[swiperIndex].content = results
}
} else {
this.loadingText = ''
this.list[swiperIndex].content.concat(results)
}
}).catch(res => {
this.refreStatus = false
if (res.code == 404) {
this.loadingText = '到底了'
}
})
},
// 生成列表数据
getData() {
@ -158,7 +232,7 @@
for (let index = 0; index < 10; index++) {
let arr = this.list[this.swiperIndex].content;
this.$set(arr, arr.length, Math.random() + '-' + index + this.list[this.swiperIndex]
.title);
.title);
}
uni.hideLoading();
}, 1000);
@ -167,19 +241,24 @@
// 下拉事件
handleRefre() {
this.refreStatus = true;
uni.showLoading({
title: '下拉加载中'
});
setTimeout(() => {
this.list[this.swiperIndex].content = [];
for (var i = 0; i < 5; i++) {
this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
}
uni.hideLoading();
}, 1000);
setTimeout(() => {
this.refreStatus = false;
}, 1000);
// uni.showLoading({
// title: '下拉加载中'
// });
this.list[this.swiperIndex].page = 1
this.getVideos()
// setTimeout(() => {
// this.list[this.swiperIndex].content = [];
// for (var i = 0; i < 5; i++) {
// this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
// }
// uni.hideLoading();
// }, 1000);
// setTimeout(() => {
// this.refreStatus = false;
// }, 1000);
},
startSearch(e){
console.log(e)
}
}
};
@ -230,28 +309,44 @@
}
swiper {
height: calc(100vh - 160upx);
height: calc(100vh - 80upx);
}
swiper-item {
text-align: center;
color: #000;
position: relative;
background-color: skyblue;
color: #fff;
}
// swiper-item {
// text-align: center;
// color: #000;
// position: relative;
// background-color: skyblue;
// color: #fff;
// }
.swiper-item {
overflow-y: scroll;
}
.swiper-item-list {
height: 400upx;
margin-top:4upx;
// height: 400upx;
border-bottom: 2upx solid pink;
line-height: 400upx;
// line-height: 400upx;
}
.swiper-scroll {
height: 100%;
}
.video {
width: 100%;
height: 380rpx;
}
.video-slot {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 16px;
color: white;
background-color: black;
opacity: 0.3;
}
</style>

2
client_mp/store/index.js
View File

@ -38,7 +38,7 @@ const store = new Vuex.Store({
// vuex_apifile: 'http://127.0.0.1:8000/api/file/',
vuex_host: 'https://testsearch.ctc.ac.cn',
// vuex_api: 'https://testsearch.ctc.ac.cn/api',
//vuex_api: 'https://testsearch.ctc.ac.cn/api',
vuex_apifile: 'https://testsearch.ctc.ac.cn/api/file/',
// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式

10
server/apps/vod/views.py
View File

@ -56,6 +56,16 @@ class VideoViewSet(PageOrNot, CreateUpdateModelAMixin, ModelViewSet):
return self.get_paginated_response(serializer.data)
serializer = self.get_serializer(queryset, many=True)
return Response(serializer.data)
@action(methods=['post'], detail=True, permission_classes=[IsAuthenticated])
def view(self, request, *args, **kwargs):
"""
新增观看次数
"""
obj = self.get_object()
obj.views = obj.views + 1
obj.save()
return Response()
class VRecordViewSet(ListModelMixin, GenericViewSet):