Skip to content

T
techbook
Commit 1bfd4415 authored by zhangyanni's avatar zhangyanni
Browse files
Options

视频一半

parent 9d5b743b
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 17 deletions
public/css/phone.scss
View file @ 1bfd4415
......@@ -1851,6 +1851,10 @@ i, em {
opacity: 0 !important;
}
.hideControl .vjs-custom-skin > .video-js .vjs-control-bar{
opacity: 0 !important;
}
.textareaDiv{
position:relative;
textarea{
......
src/views/mobile/proFeedback/api.js
View file @ 1bfd4415
......@@ -82,4 +82,9 @@ export default {
return api.fetchGet('/business/dict/selectDictList?groupCode=comments_report');
},
//视频播放量
playingAxios(params){
return api.fetchPost("/business/subject/addProjectVideoPlay",params);
}
}
\ No newline at end of file
src/views/mobile/proFeedback/secondStage.vue
View file @ 1bfd4415
......@@ -27,22 +27,36 @@
<ul class="contentUl">
<li v-for="(item,index) in tableData">
<div class="videoLi">
<videoCmpt :src="item.videoUrl"></videoCmpt>
<div class="topPosition">
<videoCmpt :src="item.videoUrl" :currentData="item" @showShareAndDetail="showShareAndDetail" @postDuration="postDuration" :index="index" @hideTopAndBottom="hideTopAndBottom"></videoCmpt>
<div class="topPosition" v-if="item.isShowVideoInfo">
<div class="topNum" v-if="isReturnBy==1">
<p>TOP</p>
<span>{{item.sort+index}}</span>
<span>{{item.sort}}</span>
</div>
<div class="topNum sortByNum" v-if="isReturnBy==2">
<span>{{item.sort+index}}</span>
<span>{{item.sort}}</span>
</div>
<div class="topTitle">
{{item.projectName}}
</div>
</div>
<div class="bottomPosition">
<div class="bottomPosition" v-if="item.isShowVideoInfo">
<span>{{item.projectPlay==null?0:item.projectPlay}}次播放</span>
<span>01:27</span>
<span></span>
</div>
<div class="shareAndDetail" v-if="item.showShare">
<div @click="handleShare(item)">
<p><img src="../../../assets/img/mobile/shareFriend.png" alt=""></p>
<p>微信</p>
</div>
<div @click="handleShare(item)">
<p><img src="../../../assets/img/mobile/shareLine.png" alt=""></p>
<p>朋友圈</p>
</div>
<div @click="handleToDetail(item)">
<p><img src="../../../assets/img/mobile/proDetail.png" alt=""></p>
<p>项目详情</p>
</div>
</div>
</div>
<div class="bottomScore">
......@@ -51,12 +65,12 @@
<p>得分</p>
</div>
<div class="rightInfo">
<div @click="handleToDetail(item)">{{item.companyIntroduction}}</div>
<div @click="handleToDetail(item)">{{item.companyIntroduction}}</div>
<div>
<span><i class="iconfont icon-liulan"></i>{{item.virtualBrowse==null||item.virtualBrowse==0?'浏览':item.virtualBrowse}}</span>
<span @click="handlePraise(item)"><i class="iconfont icon-zan2" v-if="item.isHasHot"></i><i class="iconfont icon-zan1" v-if="!item.isHasHot"></i>{{item.projectHot==null||item.projectHot==0?'赞':item.projectHot}}</span>
<span @click="handleToComment(item)"><i class="iconfont icon-pinglun"></i>{{item.projectComments==null||item.projectComments==0?'评论':item.projectComments}}</span>
<span><i class="iconfont icon-fenxiang"></i>分享</span>
<span @click="handleShare(item)"><i class="iconfont icon-fenxiang"></i>分享</span>
</div>
</div>
......@@ -80,6 +94,7 @@
</div>
</mt-loadmore>
<applyCmpt v-if="applyVisible" @sendApplyVisible="sendApplyVisible" :visible="applyVisible" :class-name="className"></applyCmpt>
<shareCmpt @hideShareAndShowCanvas="hideShareAndShowCanvas" @closeShareDialog="closeShareDialog" :detailInfo="currentData" :visible="isShare"></shareCmpt>
</div>
</template>
......@@ -89,12 +104,14 @@
import {Toast} from 'mint-ui';
import videoCmpt from './videoCmpt1';
import applyCmpt from '../../../components/mobile/applyTitleDialog';
import shareCmpt from '../../../components/shareCmpt';
export default {
name: "secondStage",
components:{
videoCmpt,
applyCmpt
applyCmpt,
shareCmpt
},
data(){
return{
......@@ -112,6 +129,7 @@
detailInfo:null,
applyVisible:false,//报名是否显示
className:"height600px",
isShare:false,
}
},
......@@ -143,6 +161,8 @@
if(response.result.records.length>0){
response.result.records.forEach((item)=>{
item.disabledFlag = 0;
item.isShowVideoInfo = true;
item.showShare=false;
if(item.projectScore==null||item.projectScore==0){
item.projectScore = 0.0;
}
......@@ -216,6 +236,43 @@
this.$router.push({path:"/secondStageDetail",query:query});
},
//是否显示头部和底部信息
hideTopAndBottom(index,data){
this.tableData[index].isShowVideoInfo = data;
this.tableData[index].showShare = false;
let params = {
subjectProjectId:this.tableData[index].id
};
api.playingAxios(params).then((res)=>{
if(res.code==0){
}else{
this.$toast(res.msg);
}
}).catch((err)=>{
this.$toast(err);
})
},
//展示朋友和朋友圈
showShareAndDetail(data){
this.tableData[data].isShowVideoInfo = false;
this.tableData[data].showShare = true;
},
//打开canvas
hideShareAndShowCanvas(){
this.isShare = false;
this.isCanvas = true;
},
//分享
closeShareDialog(){
this.isShare = false;
},
//去评论
handleToComment(data){
let query = {
......@@ -227,6 +284,12 @@
this.$router.push({path:"/secondStageDetail",query:query});
},
//分享
handleShare(item){
this.isShare=true;
this.currentData = item;
},
//点赞
handlePraise(data){
let params = {
......@@ -280,6 +343,10 @@
this.getInitFunc();
}
},
postDuration(index,data){
console.log(data)
}
},
mounted(){
this.getInitFunc();
......@@ -381,6 +448,50 @@
font-size: .24rem;
font-weight:400;
}
.shareAndDetail{
width: 100%;
height: 3rem;
background-color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
&>div{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
&>p:first-of-type{
width: 1.2rem;
height: 1.2rem;
background: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
padding: .08rem;
img{
width: 100%;
height: 100%;
}
}
&>p:last-of-type{
width: 100%;
padding-top: .1rem;
color: #fff;
}
}
.resetPlay{
position: absolute;
right: .5rem;
bottom: .2rem;
color: #fff;
}
}
.bottomScore{
width: 100%;
display: flex;
......
src/views/mobile/proFeedback/secondStageDetail.vue
View file @ 1bfd4415
......@@ -5,7 +5,7 @@
<videoCmpt :className="true" src="https://techbook-test.oss-cn-beijing.aliyuncs.com/public/23b67ae196688598f1002a95d77f170c.mp4"></videoCmpt>
<div class="bottomPosition">
<span>{{subjectInfo.projectPlay==null?0:subjectInfo.projectPlay}}次播放</span>
<span>01:27</span>
<span></span>
</div>
</div>
<div class="projectBasicInfo">
......
src/views/mobile/proFeedback/videoCmpt1.vue
View file @ 1bfd4415
<template>
<div class="video-player" @click="autoPlayVideo" :class="[className?'detailVideo':'', {'hiddeen': hide}]" ref="videoEl">
<div class="video-player" @click="autoPlayVideo" :class="[className?'detailVideo':'', {'hiddeen': hide},isShowControl?'hideControl':'']" ref="videoEl">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
......@@ -91,11 +91,13 @@
className:{
type:Boolean,
default: true
}
},
index:Number
},
data() {
return {
hide: false,
isShowControl:false,
// video元素
$video: null,
// 视频容器元素
......@@ -166,16 +168,22 @@
},
onPlayerPlay(player){
console.log(player)
this.hide = true
this.hide = true;
this.isShowControl = false;
this.$emit("hideTopAndBottom",this.index,false);
},
onPlayerPause(player){
console.log(player)
this.hide = false
this.hide = false;
this.isShowControl = true;
this.$emit("hideTopAndBottom",this.index,true);
},
onPlayerEnded(player){
this.$emit("showShareAndDetail")
this.hide = true;
this.isShowControl = false;
this.$emit("showShareAndDetail",this.index);
},
onFullscreenChange(player){
......@@ -352,7 +360,6 @@
},
handlePlay(){
alert(11)
this.state.isLoading = false;
this.state.controlBtnShow = false;
this.state.playing=true;
......@@ -361,7 +368,10 @@
computed: {
},
mounted() {
// var that = this;
// setTimeout(function(){
// that.$emit("postDuration",that.index,document.getElementsByClassName("vjs-tech")[0].duration)
// },2000)
},
beforeDestroy() {}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment