Skip to content

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

update

parent e1e9bee9
Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 109 deletions
src/components/Educationvideo.vue
View file @ 12b3a243
......@@ -2,7 +2,7 @@
<template>
<div class="Educationvideo">
<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>
......@@ -25,16 +25,27 @@
<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-else style="height:195px;width:100%" src="../assets/img/hotel/biefu.png" alt="">
<div @click.prevent="goUrl1('EducationvideoList',$event)" class="icon">
<span class="iconfont icon-weihu"></span>
<div class="backDiv">
<span class="iconfont icon-ico_bofang"></span>
<div @click.prevent="goUrl1('EducationvideoList',$event)" class="icon">
<span class="iconfont icon-weihu"></span>
</div>
</div>
</div>
<p>{{item.Name}}</p>
<p>{{item.EmName}}</p>
<p>{{item.WatchNum}}次观看
<span class="circle"></span>
<span>{{item.UpdateDate}}</span>
</p>
<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>{{item.UpdateDate}}</span>
</p>
</div>
</div>
</li>
</ul>
<div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
......@@ -45,6 +56,12 @@
</el-pagination>
</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>
</template>
......@@ -57,6 +74,8 @@ export default {
},
data () {
return {
videoDivState:false,
thisVideoAddress:"",
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
val:'',
LineList:[],
......@@ -77,6 +96,17 @@ export default {
mounted() {
this.getLineList();
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: {
SelectLineId(id){
......@@ -113,15 +143,29 @@ export default {
}
});
},
goUrl(path,item){
let msg=JSON.stringify(item)
this.$router.push({
name:path,
query: {
msg:msg,
blank: "y"
AddList(id) {
this.apipost(
"Video_post_SetVideoWatch",{VideoId:id},
res => {
if (res.data.resultCode == 1) {
}
});
}
);
},
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() {
......@@ -141,6 +185,52 @@ export default {
}
</script>
<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{
background-color: #f56c6c!important;
}
......@@ -171,7 +261,6 @@ export default {
}
.Educationvideo .right .Content .videoUl li p{
font-size: 12px;
color:#666666;
padding-left:6px;
box-sizing: border-box;
}
......@@ -183,7 +272,7 @@ export default {
margin-right: 10px;
}
.Educationvideo .right .Content{
padding:90px 15px 10px 15px;
padding:15px 15px 10px 15px;
box-sizing: border-box;
}
*{
......@@ -193,6 +282,7 @@ export default {
.Educationvideo .left .lineUl .Active{
color:#fff;
background: #f56c6c;
font-family: "pingfangR";
}
.Educationvideo .left .lineUl li:hover{
background: #f56c6c;
......@@ -212,20 +302,20 @@ li{
padding: 15px 0;
padding-left: 50px;
box-sizing: border-box;
position: fixed;
top: 0;
width: calc(100% - 200px);
/* position: fixed;
top: 50px;
width: calc(100% - 200px); */
background: #fff;
left: 200px;
/* left: 200px; */
}
.Educationvideo{
position: relative;
min-height: 100%;
background: #fff;
background: #f5f5f5;
}
.Educationvideo .left{
position: fixed;
position: absolute;
min-height: 100%;
width: 200px;
z-index: 100;
......@@ -233,7 +323,7 @@ li{
}
.Educationvideo .right{
background: #f5f5f5;
padding-left: 210px;
padding-left: 200px;
box-sizing: border-box;
min-height: 100%;
}
......
src/components/EducationvideoList.vue
View file @ 12b3a243
......@@ -21,8 +21,9 @@
<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-else style="height:195px;width:100%" src="../assets/img/hotel/biefu.png" alt="">
<div class="icon">
<div class="backDiv">
<span class="iconfont icon-ico_bofang"></span>
<div class="icon">
<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)">
<span class="iconfont icon-bianji-smal"></span>
......@@ -39,22 +40,30 @@
</div>
</el-tooltip>
</div>
</div>
</div>
<p>{{item.Name}}</p>
<p>{{item.EmName}}
<span style="color:#f56c6c">(
<span v-if="item.VideoStatus==1">发布</span>
<span v-if="item.VideoStatus==2">草稿</span>
<span v-if="item.VideoStatus==3">撤回</span>
)
</span>
</p>
<p>{{item.WatchNum}}次观看
<span class="circle"></span>
<span>{{item.UpdateDate}}</span>
</p>
<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}}
<span class="bold" style="color:#f56c6c">(
<span v-if="item.VideoStatus==1">发布</span>
<span v-if="item.VideoStatus==2">草稿</span>
<span v-if="item.VideoStatus==3">撤回</span>
)
</span>
</p>
<p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
<span class="circle"></span>
<span>{{item.UpdateDate}}</span>
</p>
</div>
</div>
</li>
</ul>
<div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
......@@ -87,7 +96,7 @@
<el-option v-for="(item,index) in LineList" :key="index" :label="item.LineName" :value="item.LineID"></el-option>
</el-select>
</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">
<img style="width:160px;height:120px" :src="addMsg.Cover" alt="">
<div class="iconfontDiv">
......@@ -102,7 +111,7 @@
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">{{$t("active.ld_djscwj")}}</div>
</el-upload>
</el-form-item>
</el-form-item> -->
<el-form-item label="视频地址" style="margin-bottom:0px;display:inline-block;">
<div v-if="addMsg.VideoAddress!=''" class="shipinDiv deleteDiv" style="position:relative">
<span class="iconfont icon-shipin"></span>
......@@ -121,12 +130,15 @@
</el-form>
<div style="text-align:right">
<el-button size="samll" @click="dialogVisible = false">取 消</el-button>
<el-button size="samll" type="danger" @click="submitForm('addMsg')">确 定</el-button>
<div style="text-align:right;margin-bottom:10px">
<el-button style="font-size:12px" size="samll" @click="dialogVisible = false">取 消</el-button>
<el-button style="font-size:12px" size="samll" type="danger" @click="submitForm('addMsg')">确 定</el-button>
</div>
</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>
</template>
......@@ -142,6 +154,8 @@ export default {
},
data () {
return {
videoDivState:false,
thisVideoAddress:'',
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
val:'',
LineList:[],
......@@ -207,31 +221,33 @@ export default {
UserType:1,
}
},
uploadFileBtn1(file) {
let typeArr=[
{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 typeOk = false;
typeArr.forEach(x => {
if (x.stringArr.indexOf(ft) != "-1") {
typeOk = true;
}
});
if (!typeOk) return this.$message.error(this.$t('tips.qsctpian'));
let newArr = [];
newArr.push(file.file);
let path = "/Sale/Uploadvideo/";
this.uploadFile(path, newArr, x => {
this.addMsg.Cover=x.res.requestUrls[0];
});
},
// uploadFileBtn1(file) {
// let typeArr=[
// {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 typeOk = false;
// typeArr.forEach(x => {
// if (x.stringArr.indexOf(ft) != "-1") {
// typeOk = true;
// }
// });
// if (!typeOk) return this.$message.error(this.$t('tips.qsctpian'));
// let newArr = [];
// newArr.push(file.file);
// let path = "/Sale/Uploadvideo/";
// this.uploadFile(path, newArr, x => {
// this.addMsg.Cover=x.res.requestUrls[0];
// });
// },
uploadFileBtn(file) {
let newArr = [];
newArr.push(file.file);
let path = "/Sale/Uploadvideo/";
this.uploadFile(path, newArr, x => {
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) {
......@@ -296,10 +312,6 @@ export default {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if(this.addMsg.Cover==''){
this.Error("请上传封面图！");
return;
}
if(this.addMsg.VideoAddress==''){
this.Error("请上传视频！");
return;
......@@ -331,15 +343,29 @@ export default {
this.dialogVisible=true;
},
goUrl(path,item){
let msg=JSON.stringify(item)
this.$router.push({
name:path,
query: {
msg:msg,
blank: "y"
}
});
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"
// }
// });
},
AddList(id) {
this.apipost(
"Video_post_SetVideoWatch",{VideoId:id},
res => {
if (res.data.resultCode == 1) {
}
}
);
},
//获取线路列表
getLineList() {
this.apipost(
......@@ -358,6 +384,59 @@ export default {
}
</script>
<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{
background-color: #f56c6c!important;
}
......@@ -426,7 +505,6 @@ export default {
}
.EducationvideoList .right .Content .videoUl li p{
font-size: 12px;
color:#666666;
padding-left:6px;
box-sizing: border-box;
......@@ -436,10 +514,9 @@ export default {
width: 300px;
padding: 5px;
box-sizing: border-box;
margin-right:10px;
}
.EducationvideoList .right .Content{
padding:90px 15px 10px 15px;
padding:15px 15px 10px 15px;
box-sizing: border-box;
}
*{
......@@ -462,8 +539,8 @@ li{
padding: 15px 0;
padding-left: 50px;
box-sizing: border-box;
position: fixed;
top: 0;
/* position: fixed; */
/* top: 50px; */
width: 100%;
background: #fff;
/* left: 240px; */
......@@ -472,7 +549,7 @@ li{
.EducationvideoList{
position: relative;
min-height: 100%;
background: #fff;
background: #f5f5f5;
}
.EducationvideoList .left{
position: fixed;
......
src/components/EducationvideoSee.vue
View file @ 12b3a243
......@@ -6,7 +6,7 @@
<div class="imgDiv">
<video style="border: 1px solid #f5f5f5;" width="100%" :height="videoHeight" :src="datainfo.VideoAddress" controls="controls">
</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.WatchNum}}次观看
<span class="circle"></span>
......
src/router/config.js
View file @ 12b3a243
......@@ -133,6 +133,31 @@ export default {
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',
name: 'finance',
......@@ -4495,30 +4520,7 @@ export default {
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