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

record

This commit is contained in:
shijing 2021-10-22 13:02:51 +08:00
parent 1ccd2145c5
commit b457ed73bd
5 changed files with 205 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client_mp/common/http.api.js
View File

@ -47,7 +47,7 @@ const install = (Vue, vm) => {
let putMyVideoView =(id,params)=>vm.$u.put(`/vod/video/${id}/myview/`,params);//更新本人观看信息 let putMyVideoView =(id,params)=>vm.$u.put(`/vod/video/${id}/myview/`,params);//更新本人观看信息
let getMyVideoRecord =(id)=>vm.$u.get(`/vod/video/myview/`);//获取本人观看记录 let getMyVideoRecord =(params)=>vm.$u.get(`/vod/video/myview/`,params);//获取本人观看记录
let getVideoRecord =(id)=>vm.$u.get(`/vod/video/${id}/myview/`);//获取本人观看记录 let getVideoRecord =(id)=>vm.$u.get(`/vod/video/${id}/myview/`);//获取本人观看记录
vm.$u.api = {getUserInfo, vm.$u.api = {getUserInfo,
getCode, getCode,

41
client_mp/pages/my/videoWatchRecords.vue
View File

@ -1,23 +1,15 @@
<template> <template>
<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus" <scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true" @refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
@scrolltolower="swiperScrollLower"> @scrolltolower="swiperScrollLower" >
<uni-list> <uni-list>
<uni-list-item :title="item.video_.name" :note="'上次观看时间:'+item.update_time" thumb-size="lg" <uni-list-item :title="item.video_.name" :note="'上次观看时间:'+item.update_time" thumb-size="lg"
rightText="继续观看" v-for="item in dataList" :key="item.id" @click="plauVideo(item)" link></uni-list-item> rightText="继续观看" v-for="item in dataList" :key="item.id" @click="plauVideo(item)" link></uni-list-item>
<view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
</uni-list> </uni-list>
<!-- <view v-for="item in dataList" style="display: flex ; padding: 24rpx 30rpx;font-size: 28rpx;color: #3b4144;border-bottom: 1px solid #dcdcdc;"> <view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
<view class="leftAction" style="flex: 3;">
<view>{{item.video_.name}}</view>
<view style="margin-top: 6rpx; color: #999; font-size: 24rpx;">上次观看进度:</view>
<view style="margin-top: 6rpx; color: #999; font-size: 24rpx;">上次观看时间:{{item.update_time}}</view>
</view>
<view class="rightAction" style="flex: 1; display: flex; flex-direction: column;justify-content: space-around;">
<a class="mui-navigate-right" style=" color: #999; font-size: 24rpx;">继续观看</a><image src="../../static/common/right_err.png"></image>
</view>
</view> -->
</scroll-view> </scroll-view>
</template> </template>
<script> <script>
@ -25,7 +17,9 @@
data() { data() {
return { return {
page:1, page:1,
page_size:10,
dataList: [], dataList: [],
loadingText:'',
refreStatus: false, refreStatus: false,
} }
}, },
@ -33,10 +27,6 @@
this.page = 1; this.page = 1;
this.getLists(); this.getLists();
//this.$u.api.getMyVideoRecord({}).then(res => {
// this.dataList = res.data.results;
// console.log(res.data.results)
//})
}, },
methods: { methods: {
plauVideo(item){ plauVideo(item){
@ -51,18 +41,20 @@
this.getLists() this.getLists()
}, },
swiperScrollLower() { swiperScrollLower() {
this.page = this.page + 1; this.page = this.page + 1;
this.getLists() this.getLists()
}, },
getLists(){ getLists(){
// debugger;
console.log(this.page)
var params = { var params = {
page: this.page page: this.page,
page_size:10
} }
this.$u.api.getMyVideoRecord(params).then(res => { this.$u.api.getMyVideoRecord(params).then(res => {
this.refreStatus = false this.refreStatus = false
let results = res.data.results let results = res.data.results;
// debugger;
if (this.page == 1) { if (this.page == 1) {
if (results == 0) { if (results == 0) {
this.loadingText = '暂无观看记录' this.loadingText = '暂无观看记录'
@ -71,8 +63,11 @@
this.dataList = results this.dataList = results
} }
} else { } else {
// debugger;
this.loadingText = '' this.loadingText = ''
this.dataList.concat(results) let a = this.dataList.concat(results);
console.log(a)
this.dataList=a;
} }
}).catch(res => { }).catch(res => {
@ -89,4 +84,8 @@
</script> </script>
<style> <style>
.swiper-scroll {
height: calc(100vh - 40upx);
}
</style> </style>

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

@ -124,11 +124,11 @@
}, },
methods: { methods: {
videoOpen(video){ videoOpen(video){
// debugger; debugger;
// console.log(video) console.log(video)
uni.navigateTo({ uni.navigateTo({
url: '/pages/vod/watchPage?id='+video.id url: '/pages/vod/watchPage?id='+video.id+'&url='+video.mediaurl
}); });
}, },
closeVideo(){ closeVideo(){
@ -245,7 +245,9 @@
} }
} else { } else {
this.loadingText = '' this.loadingText = ''
this.list[swiperIndex].content.concat(results) let a = this.list[swiperIndex].content;
let b= a.concat(results);
this.list[swiperIndex].content=b;
} }
}).catch(res => { }).catch(res => {

187
client_mp/pages/vod/watchPage.vue
View File

@ -1,7 +1,37 @@
<template> <template>
<view> <view>
<video class="video" :src="item.mediaurl" controls object-fit="cover" <!-- <view v-show="already" class="markBlock" ref="mydom"> -->
<view v-show="already" :style="{height:ReadyHeight+'px'}" class="markBlock">
<view style="">
<view class="">
<view class="spinner">
<view class="spinner-container container1">
<view class="circle1"></view>
<view class="circle2"></view>
<view class="circle3"></view>
<view class="circle4"></view>
</view>
<view class="spinner-container container2">
<view class="circle1"></view>
<view class="circle2"></view>
<view class="circle3"></view>
<view class="circle4"></view>
</view>
<view class="spinner-container container3">
<view class="circle1"></view>
<view class="circle2"></view>
<view class="circle3"></view>
<view class="circle4"></view>
</view>
</view>
</view>
资源缓冲中，请稍后...
</view>
</view>
<video class="video" :src="url" controls object-fit="cover"
id="videoPlayer" :poster="item.coverurl" @play="doPlay($event)" id="videoPlayer" :poster="item.coverurl" @play="doPlay($event)"
@loadedmetadata="alreadyLoad"
:initial-time="current" style="width: 100%;" @timeupdate="timeupdate($event)" :initial-time="current" style="width: 100%;" @timeupdate="timeupdate($event)"
@pause="doPlay($event)" @ended="doPlay($event)"> @pause="doPlay($event)" @ended="doPlay($event)">
</video> </video>
@ -12,32 +42,45 @@
export default { export default {
data() { data() {
return { return {
url:'',
item: {}, item: {},
ReadyHeight:0,
videoId:0, videoId:0,
current:0, current:0,
currentTime:0, currentTime:0,
already:true,
alreadyPlay:false, alreadyPlay:false,
} }
}, },
onLoad(options) { onLoad(options) {
// debugger; // debugger;
this.videoId = options.id; let that=this;
that.videoId = options.id;
that.url = options.url;
if(options.current){ if(options.current){
this.current = options.current; that.current = options.current;
}else{ }else{
this.$u.api.getVideoRecord(options.id).then(res => { that.$u.api.getVideoRecord(options.id).then(res => {
this.current = res.data.current; that.current = res.data.current;
}) })
} }
this.$u.api.getThisVideo(options.id).then(res => { that.changeHeight();
this.item = res.data;
// console.log(res.data)
})
}, },
methods:{ methods:{
changeHeight(){
let that=this;
let obj = uni.createSelectorQuery().select('.video')
obj.boundingClientRect(function (data) { // data - 各种参数
console.log(data)
that.ReadyHeight=data.height;
}).exec()
},
alreadyLoad(){
this.already = false;
},
doPlay(e) { doPlay(e) {
if(this.alreadyPlay){}else{ if(this.alreadyPlay){}else{
debugger; // debugger;
this.alreadyPlay =true; this.alreadyPlay =true;
this.$u.api.putMyVideoView(this.videoId).then(res=>{}) this.$u.api.putMyVideoView(this.videoId).then(res=>{})
} }
@ -49,13 +92,133 @@ export default {
}, },
}, },
beforeDestroy(){ beforeDestroy(){
debugger; // debugger;
let params = {'current':this.currentTime}; let params = {'current':this.currentTime};
this.$u.api.putMyVideoView(this.item.id,params).then(res => { this.$u.api.putMyVideoView(this.videoId,params).then(res => {
}) })
}, },
} }
</script> </script>
<style> <style>
.markBlock{
color:#ffffff;
text-align:center;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 100;
}
.spinner {
margin: 200upx auto 80upx;
width: 100upx;
height: 100upx;
position: relative;
}
.container1 > view, .container2 > view, .container3 > view {
width: 20upx;
height: 20upx;
background-color: #fff;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style> </style>

4
client_mp/video.vue
View File

@ -243,7 +243,9 @@
} }
} else { } else {
this.loadingText = '' this.loadingText = ''
this.list[swiperIndex].content.concat(results) let a = this.list[swiperIndex].content;
let b= a.concat(results);
this.list[swiperIndex].content=b;
} }
}).catch(res => { }).catch(res => {