Skip to content

S
SuperMan
Commit 12b3a243 authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent e1e9bee9
Show whitespace changes
Inline Side-by-side
Showing with 278 additions and 109 deletions
src/components/Educationvideo.vue
View file @ 12b3a243
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="Educationvideo"> <div class="Educationvideo">
<div class="left"> <div class="left">
<ul class="lineUl" style="margin-top:62px"> <ul class="lineUl" style="margin-top:64px">
<li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''"> <li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''">
不限 不限
</li> </li>
...@@ -25,16 +25,27 @@ ...@@ -25,16 +25,27 @@
<div @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv"> <div @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv">
<img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="height:195px;width:100%" :src="item.Cover" alt=""> <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="height:195px;width:100%" :src="item.Cover" alt="">
<img v-else style="height:195px;width:100%" src="../assets/img/hotel/biefu.png" alt=""> <img v-else style="height:195px;width:100%" src="../assets/img/hotel/biefu.png" alt="">
<div class="backDiv">
<span class="iconfont icon-ico_bofang"></span>
<div @click.prevent="goUrl1('EducationvideoList',$event)" class="icon"> <div @click.prevent="goUrl1('EducationvideoList',$event)" class="icon">
<span class="iconfont icon-weihu"></span> <span class="iconfont icon-weihu"></span>
</div> </div>
</div> </div>
<p>{{item.Name}}</p>
<p>{{item.EmName}}</p> </div>
<p>{{item.WatchNum}}次观看 <div class="contentDiv">
<img v-if="item.EmPhoto && item.EmPhoto!=''" :src="item.EmPhoto" alt="">
<img v-else src="../assets/img/default.png" alt="">
<div class="DesDiv">
<p style="font-size:14px" class="bold">{{item.Name}}</p>
<p class="wryh" style="color:#aaaaaa">{{item.EmName}}</p>
<p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
<span class="circle"></span> <span class="circle"></span>
<span>{{item.UpdateDate}}</span> <span>{{item.UpdateDate}}</span>
</p> </p>
</div>
</div>
</li> </li>
</ul> </ul>
<div v-if="dataList.length==0" style="text-align:center;padding-top:40px"> <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
...@@ -45,6 +56,12 @@ ...@@ -45,6 +56,12 @@
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
<div class="videoDiv" v-show="videoDivState">
<div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="videoDivState=false" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
<video autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video>
</div>
</div> </div>
</template> </template>
...@@ -57,6 +74,8 @@ export default { ...@@ -57,6 +74,8 @@ export default {
}, },
data () { data () {
return { return {
videoDivState:false,
thisVideoAddress:"",
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"', defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
val:'', val:'',
LineList:[], LineList:[],
...@@ -77,6 +96,17 @@ export default { ...@@ -77,6 +96,17 @@ export default {
mounted() { mounted() {
this.getLineList(); this.getLineList();
this.getList(); this.getList();
window.addEventListener('scroll',function(){
console.log("ddocument.documentElement.offsetHeight",document.documentElement.offsetHeight)
console.log("ddocument.documentElement.scrollTop",document.documentElement.scrollTop)
console.log("window.innerHeight",window.innerHeight)
let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
console.log("bottomOfWindow",bottomOfWindow)
if(bottomOfWindow) {
console.log("滚动到底部")
}
})
}, },
methods: { methods: {
SelectLineId(id){ SelectLineId(id){
...@@ -113,15 +143,29 @@ export default { ...@@ -113,15 +143,29 @@ export default {
} }
}); });
}, },
goUrl(path,item){ AddList(id) {
let msg=JSON.stringify(item) this.apipost(
this.$router.push({ "Video_post_SetVideoWatch",{VideoId:id},
name:path, res => {
query: {
msg:msg, if (res.data.resultCode == 1) {
blank: "y"
} }
}); }
);
},
goUrl(path,item){
this.videoDivState=true;
this.thisVideoAddress=item.VideoAddress;
this.AddList(item.Id)
// let msg=JSON.stringify(item)
// this.$router.push({
// name:path,
// query: {
// msg:msg,
// blank: "y"
// }
// });
}, },
//获取线路列表 //获取线路列表
getLineList() { getLineList() {
...@@ -141,6 +185,52 @@ export default { ...@@ -141,6 +185,52 @@ export default {
} }
</script> </script>
<style> <style>
.wryh{
font-family: '微软雅黑'
}
.Educationvideo .right .Content .videoUl li .backDiv{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
top: 0;
}
.Educationvideo .right .Content .videoUl li .imgDiv .icon-ico_bofang{
position: absolute;
font-size: 36px;
color:#fff;
}
.videoDiv{
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 999999999;
background: #000;
}
.Educationvideo .contentDiv img{
width:35px;height:35px;border-radius:50%;
position: absolute;
}
.Educationvideo .contentDiv .DesDiv{
padding-left: 45px;
box-sizing: border-box;
width: 100%;
}
.Educationvideo .contentDiv{
position: relative;
margin-top:5px;
}
.Educationvideo .bold{
font-family: "pingfangR"
}
.Educationvideo .el-pagination.is-background .el-pager li:not(.disabled).active{ .Educationvideo .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #f56c6c!important; background-color: #f56c6c!important;
} }
...@@ -171,7 +261,6 @@ export default { ...@@ -171,7 +261,6 @@ export default {
} }
.Educationvideo .right .Content .videoUl li p{ .Educationvideo .right .Content .videoUl li p{
font-size: 12px; font-size: 12px;
color:#666666;
padding-left:6px; padding-left:6px;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -183,7 +272,7 @@ export default { ...@@ -183,7 +272,7 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
.Educationvideo .right .Content{ .Educationvideo .right .Content{
padding:90px 15px 10px 15px; padding:15px 15px 10px 15px;
box-sizing: border-box; box-sizing: border-box;
} }
*{ *{
...@@ -193,6 +282,7 @@ export default { ...@@ -193,6 +282,7 @@ export default {
.Educationvideo .left .lineUl .Active{ .Educationvideo .left .lineUl .Active{
color:#fff; color:#fff;
background: #f56c6c; background: #f56c6c;
font-family: "pingfangR";
} }
.Educationvideo .left .lineUl li:hover{ .Educationvideo .left .lineUl li:hover{
background: #f56c6c; background: #f56c6c;
...@@ -212,20 +302,20 @@ li{ ...@@ -212,20 +302,20 @@ li{
padding: 15px 0; padding: 15px 0;
padding-left: 50px; padding-left: 50px;
box-sizing: border-box; box-sizing: border-box;
position: fixed; /* position: fixed;
top: 0; top: 50px;
width: calc(100% - 200px); width: calc(100% - 200px); */
background: #fff; background: #fff;
left: 200px; /* left: 200px; */
} }
.Educationvideo{ .Educationvideo{
position: relative; position: relative;
min-height: 100%; min-height: 100%;
background: #fff; background: #f5f5f5;
} }
.Educationvideo .left{ .Educationvideo .left{
position: fixed; position: absolute;
min-height: 100%; min-height: 100%;
width: 200px; width: 200px;
z-index: 100; z-index: 100;
...@@ -233,7 +323,7 @@ li{ ...@@ -233,7 +323,7 @@ li{
} }
.Educationvideo .right{ .Educationvideo .right{
background: #f5f5f5; background: #f5f5f5;
padding-left: 210px; padding-left: 200px;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
} }
......
src/components/EducationvideoList.vue
View file @ 12b3a243
...@@ -21,7 +21,8 @@ ...@@ -21,7 +21,8 @@
<div @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv"> <div @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv">
<img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="height:195px;width:100%" :src="item.Cover" alt=""> <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="height:195px;width:100%" :src="item.Cover" alt="">
<img v-else style="height:195px;width:100%" src="../assets/img/hotel/biefu.png" alt=""> <img v-else style="height:195px;width:100%" src="../assets/img/hotel/biefu.png" alt="">
<div class="backDiv">
<span class="iconfont icon-ico_bofang"></span>
<div class="icon"> <div class="icon">
<el-tooltip class="item" effect="dark" content="编辑" placement="left"> <el-tooltip class="item" effect="dark" content="编辑" placement="left">
<div v-if="item.VideoStatus==2 || item.VideoStatus==3" class="iconDiv" @click.prevent="Edit(item,$event)"> <div v-if="item.VideoStatus==2 || item.VideoStatus==3" class="iconDiv" @click.prevent="Edit(item,$event)">
...@@ -39,22 +40,30 @@ ...@@ -39,22 +40,30 @@
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
</div>
</div> </div>
<p>{{item.Name}}</p> <div class="contentDiv">
<p>{{item.EmName}} <img v-if="item.EmPhoto && item.EmPhoto!=''" :src="item.EmPhoto" alt="">
<span style="color:#f56c6c">( <img v-else src="../assets/img/default.png" alt="">
<div class="DesDiv">
<p style="font-size:14px" class="bold">{{item.Name}}</p>
<p class="wryh" style="color:#aaaaaa">{{item.EmName}}
<span class="bold" style="color:#f56c6c">(
<span v-if="item.VideoStatus==1">发布</span> <span v-if="item.VideoStatus==1">发布</span>
<span v-if="item.VideoStatus==2">草稿</span> <span v-if="item.VideoStatus==2">草稿</span>
<span v-if="item.VideoStatus==3">撤回</span> <span v-if="item.VideoStatus==3">撤回</span>
) )
</span> </span>
</p> </p>
<p>{{item.WatchNum}}次观看 <p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
<span class="circle"></span> <span class="circle"></span>
<span>{{item.UpdateDate}}</span> <span>{{item.UpdateDate}}</span>
</p> </p>
</div>
</div>
</li> </li>
</ul> </ul>
<div v-if="dataList.length==0" style="text-align:center;padding-top:40px"> <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
...@@ -87,7 +96,7 @@ ...@@ -87,7 +96,7 @@
<el-option v-for="(item,index) in LineList" :key="index" :label="item.LineName" :value="item.LineID"></el-option> <el-option v-for="(item,index) in LineList" :key="index" :label="item.LineName" :value="item.LineID"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="封面图" style="display:inline-block;width:330px"> <!-- <el-form-item label="封面图" style="display:inline-block;width:330px">
<div class="deleteDiv" v-if="addMsg.Cover!=''" style="display:inline-block;position:relative"> <div class="deleteDiv" v-if="addMsg.Cover!=''" style="display:inline-block;position:relative">
<img style="width:160px;height:120px" :src="addMsg.Cover" alt=""> <img style="width:160px;height:120px" :src="addMsg.Cover" alt="">
<div class="iconfontDiv"> <div class="iconfontDiv">
...@@ -102,7 +111,7 @@ ...@@ -102,7 +111,7 @@
<i class="el-icon-plus avatar-uploader-icon"></i> <i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">{{$t("active.ld_djscwj")}}</div> <div class="el-upload__text">{{$t("active.ld_djscwj")}}</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item> -->
<el-form-item label="视频地址" style="margin-bottom:0px;display:inline-block;"> <el-form-item label="视频地址" style="margin-bottom:0px;display:inline-block;">
<div v-if="addMsg.VideoAddress!=''" class="shipinDiv deleteDiv" style="position:relative"> <div v-if="addMsg.VideoAddress!=''" class="shipinDiv deleteDiv" style="position:relative">
<span class="iconfont icon-shipin"></span> <span class="iconfont icon-shipin"></span>
...@@ -121,12 +130,15 @@ ...@@ -121,12 +130,15 @@
</el-form> </el-form>
<div style="text-align:right"> <div style="text-align:right;margin-bottom:10px">
<el-button size="samll" @click="dialogVisible = false">取 消</el-button> <el-button style="font-size:12px" size="samll" @click="dialogVisible = false">取 消</el-button>
<el-button size="samll" type="danger" @click="submitForm('addMsg')">确 定</el-button> <el-button style="font-size:12px" size="samll" type="danger" @click="submitForm('addMsg')">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
<div class="videoDiv" v-show="videoDivState">
<div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="videoDivState=false" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
<video autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video>
</div>
</div> </div>
</template> </template>
...@@ -142,6 +154,8 @@ export default { ...@@ -142,6 +154,8 @@ export default {
}, },
data () { data () {
return { return {
videoDivState:false,
thisVideoAddress:'',
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"', defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
val:'', val:'',
LineList:[], LineList:[],
...@@ -207,31 +221,33 @@ export default { ...@@ -207,31 +221,33 @@ export default {
UserType:1, UserType:1,
} }
}, },
uploadFileBtn1(file) { // uploadFileBtn1(file) {
let typeArr=[ // let typeArr=[
{stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3}, // {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
] // ]
let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase(); // let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
let typeOk = false; // let typeOk = false;
typeArr.forEach(x => { // typeArr.forEach(x => {
if (x.stringArr.indexOf(ft) != "-1") { // if (x.stringArr.indexOf(ft) != "-1") {
typeOk = true; // typeOk = true;
} // }
}); // });
if (!typeOk) return this.$message.error(this.$t('tips.qsctpian')); // if (!typeOk) return this.$message.error(this.$t('tips.qsctpian'));
let newArr = []; // let newArr = [];
newArr.push(file.file); // newArr.push(file.file);
let path = "/Sale/Uploadvideo/"; // let path = "/Sale/Uploadvideo/";
this.uploadFile(path, newArr, x => { // this.uploadFile(path, newArr, x => {
this.addMsg.Cover=x.res.requestUrls[0]; // this.addMsg.Cover=x.res.requestUrls[0];
}); // });
}, // },
uploadFileBtn(file) { uploadFileBtn(file) {
let newArr = []; let newArr = [];
newArr.push(file.file); newArr.push(file.file);
let path = "/Sale/Uploadvideo/"; let path = "/Sale/Uploadvideo/";
this.uploadFile(path, newArr, x => { this.uploadFile(path, newArr, x => {
this.addMsg.VideoAddress=this.baseurl+x.name; this.addMsg.VideoAddress=this.baseurl+x.name;
let lastUrl="?x-oss-process=video/snapshot,t_1,f_jpg,w_290,h_195,m_fast";
this.addMsg.Cover=this.addMsg.VideoAddress+lastUrl;
}); });
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
...@@ -296,10 +312,6 @@ export default { ...@@ -296,10 +312,6 @@ export default {
submitForm(formName) { submitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
if(this.addMsg.Cover==''){
this.Error("请上传封面图！");
return;
}
if(this.addMsg.VideoAddress==''){ if(this.addMsg.VideoAddress==''){
this.Error("请上传视频！"); this.Error("请上传视频！");
return; return;
...@@ -331,14 +343,28 @@ export default { ...@@ -331,14 +343,28 @@ export default {
this.dialogVisible=true; this.dialogVisible=true;
}, },
goUrl(path,item){ goUrl(path,item){
let msg=JSON.stringify(item) this.videoDivState=true;
this.$router.push({ this.thisVideoAddress=item.VideoAddress;
name:path, this.AddList(item.Id)
query: { // let msg=JSON.stringify(item)
msg:msg, // this.$router.push({
blank: "y" // name:path,
// query: {
// msg:msg,
// blank: "y"
// }
// });
},
AddList(id) {
this.apipost(
"Video_post_SetVideoWatch",{VideoId:id},
res => {
if (res.data.resultCode == 1) {
} }
}); }
);
}, },
//获取线路列表 //获取线路列表
getLineList() { getLineList() {
...@@ -358,6 +384,59 @@ export default { ...@@ -358,6 +384,59 @@ export default {
} }
</script> </script>
<style> <style>
.EducationvideoList .el-upload-dragger .el-upload__text{
font-family: '微软雅黑';
font-size: 12px;
}
.EducationvideoList .el-form-item__label{
font-family: '微软雅黑';
font-size: 12px;
}
.wryh{
font-family: '微软雅黑'
}
.EducationvideoList .right .Content .videoUl li .backDiv{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
top: 0;
}
.EducationvideoList .right .Content .videoUl li .imgDiv .icon-ico_bofang{
position: absolute;
font-size: 36px;
color:#fff;
}
.videoDiv{
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 999999999;
background: #000;
}
.EducationvideoList .contentDiv img{
width:35px;height:35px;border-radius:50%;
position: absolute;
}
.EducationvideoList .contentDiv .DesDiv{
padding-left: 45px;
box-sizing: border-box;
width: 100%;
}
.EducationvideoList .contentDiv{
position: relative;
margin-top:5px;
}
.EducationvideoList .bold{
font-family: "pingfangR"
}
.EducationvideoList .el-pagination.is-background .el-pager li:not(.disabled).active{ .EducationvideoList .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #f56c6c!important; background-color: #f56c6c!important;
} }
...@@ -426,7 +505,6 @@ export default { ...@@ -426,7 +505,6 @@ export default {
} }
.EducationvideoList .right .Content .videoUl li p{ .EducationvideoList .right .Content .videoUl li p{
font-size: 12px; font-size: 12px;
color:#666666;
padding-left:6px; padding-left:6px;
box-sizing: border-box; box-sizing: border-box;
...@@ -436,10 +514,9 @@ export default { ...@@ -436,10 +514,9 @@ export default {
width: 300px; width: 300px;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
margin-right:10px;
} }
.EducationvideoList .right .Content{ .EducationvideoList .right .Content{
padding:90px 15px 10px 15px; padding:15px 15px 10px 15px;
box-sizing: border-box; box-sizing: border-box;
} }
*{ *{
...@@ -462,8 +539,8 @@ li{ ...@@ -462,8 +539,8 @@ li{
padding: 15px 0; padding: 15px 0;
padding-left: 50px; padding-left: 50px;
box-sizing: border-box; box-sizing: border-box;
position: fixed; /* position: fixed; */
top: 0; /* top: 50px; */
width: 100%; width: 100%;
background: #fff; background: #fff;
/* left: 240px; */ /* left: 240px; */
...@@ -472,7 +549,7 @@ li{ ...@@ -472,7 +549,7 @@ li{
.EducationvideoList{ .EducationvideoList{
position: relative; position: relative;
min-height: 100%; min-height: 100%;
background: #fff; background: #f5f5f5;
} }
.EducationvideoList .left{ .EducationvideoList .left{
position: fixed; position: fixed;
......
src/components/EducationvideoSee.vue
View file @ 12b3a243
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="imgDiv"> <div class="imgDiv">
<video style="border: 1px solid #f5f5f5;" width="100%" :height="videoHeight" :src="datainfo.VideoAddress" controls="controls"> <video style="border: 1px solid #f5f5f5;" width="100%" :height="videoHeight" :src="datainfo.VideoAddress" controls="controls">
</video> </video>
<p style="font-size:18px;font-family:'PingFangR';margin-top:15px">{{datainfo.Name}}</p> <p style="font-size:18px;font-family:'pingfangR';margin-top:15px">{{datainfo.Name}}</p>
<p>{{datainfo.EmName}}</p> <p>{{datainfo.EmName}}</p>
<p>{{datainfo.WatchNum}}次观看 <p>{{datainfo.WatchNum}}次观看
<span class="circle"></span> <span class="circle"></span>
......
src/router/config.js
View file @ 12b3a243
...@@ -133,6 +133,31 @@ export default { ...@@ -133,6 +133,31 @@ export default {
title: '操作' title: '操作'
} }
}, },
{
path: '/Educationvideo', //教育视频
name: 'Educationvideo',
component: resolve => require(['@/components/Educationvideo'], resolve),
meta: {
title: '教育视频'
},
},
{
path: '/EducationvideoSee', //教育视频
name: 'EducationvideoSee',
component: resolve => require(['@/components/EducationvideoSee'], resolve),
meta: {
title: '观看教育视频'
},
},
{
path: '/EducationvideoList', //教育视频
name: 'EducationvideoList',
component: resolve => require(['@/components/EducationvideoList'], resolve),
meta: {
title: '维护教育视频'
},
},
{ {
path: '/finance', path: '/finance',
name: 'finance', name: 'finance',
...@@ -4495,30 +4520,7 @@ export default { ...@@ -4495,30 +4520,7 @@ export default {
title: '资产管理' title: '资产管理'
}, },
}, },
{
path: '/Educationvideo', //教育视频
name: 'Educationvideo',
component: resolve => require(['@/components/Educationvideo'], resolve),
meta: {
title: '教育视频'
},
},
{
path: '/EducationvideoSee', //教育视频
name: 'EducationvideoSee',
component: resolve => require(['@/components/EducationvideoSee'], resolve),
meta: {
title: '观看教育视频'
},
},
{
path: '/EducationvideoList', //教育视频
name: 'EducationvideoList',
component: resolve => require(['@/components/EducationvideoList'], resolve),
meta: {
title: '维护教育视频'
},
},
{ {
......
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