Skip to content

S
SuperMan
Commit 8ee419aa authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent 1aef593d
Hide whitespace changes
Inline Side-by-side
Showing with 443 additions and 196 deletions
src/App.vue
View file @ 8ee419aa
...@@ -173,7 +173,7 @@ export default { ...@@ -173,7 +173,7 @@ export default {
} }
</script> </script>
<style> <style>
@import "//at.alicdn.com/t/font_635492_b5w8t86krqv.css"; @import "//at.alicdn.com/t/font_635492_pnkqfvbvc4.css";
@import "./assets/css/Semibold.css"; @import "./assets/css/Semibold.css";
@import "./assets/css/global/config.css"; @import "./assets/css/global/config.css";
@import "./assets/css/fileIcon.css"; @import "./assets/css/fileIcon.css";
......
src/components/Educationvideo.vue
View file @ 8ee419aa
...@@ -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:30px"> <ul class="lineUl" style="margin-top:62px">
<li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''"> <li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''">
不限 不限
</li> </li>
...@@ -13,11 +13,13 @@ ...@@ -13,11 +13,13 @@
</div> </div>
<div class="right"> <div class="right">
<div class="search"> <div class="search">
<el-input style="width:600px" placeholder="请输入内容" v-model="msg.Name" class="input-with-select"> <el-input size="small" style="width:600px" placeholder="请输入内容" v-model="msg.Name" class="input-with-select">
<el-button @click="getList" slot="append" icon="el-icon-search"></el-button> <el-button @click="getList" slot="append" icon="el-icon-search"></el-button>
</el-input> </el-input>
<el-button style="margin-left:20px" size="small" type="danger" @click.prevent="goUrl1('EducationvideoList',$event)" round>发布视频</el-button>
</div> </div>
<div class="Content"> <div v-loading="loading" class="Content">
<ul class="videoUl"> <ul class="videoUl">
<li v-for="(item,index) in dataList" :key="index"> <li v-for="(item,index) in dataList" :key="index">
<div @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv"> <div @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv">
...@@ -35,7 +37,9 @@ ...@@ -35,7 +37,9 @@
</p> </p>
</li> </li>
</ul> </ul>
<div v-if="dataList.length==0" style="text-align:center">暂无数据</div> <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
<span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
</div>
<el-pagination background @current-change="handleCurrentChange" <el-pagination background @current-change="handleCurrentChange"
layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'> layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
</el-pagination> </el-pagination>
...@@ -53,7 +57,7 @@ export default { ...@@ -53,7 +57,7 @@ export default {
}, },
data () { data () {
return { return {
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"', defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
val:'', val:'',
LineList:[], LineList:[],
msg:{ msg:{
...@@ -67,6 +71,7 @@ export default { ...@@ -67,6 +71,7 @@ export default {
}, },
dataList:[], dataList:[],
total:0, total:0,
loading:false,
} }
}, },
mounted() { mounted() {
...@@ -84,9 +89,12 @@ export default { ...@@ -84,9 +89,12 @@ export default {
}, },
//获取列表 //获取列表
getList() { getList() {
this.loading=true;
this.apipost( this.apipost(
"Video_get_GetPCVideoPageList",this.msg, "Video_get_GetPCVideoPageList",this.msg,
res => { res => {
this.loading=false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData; this.dataList = res.data.data.pageData;
this.total = res.data.data.count; this.total = res.data.data.count;
...@@ -133,6 +141,9 @@ export default { ...@@ -133,6 +141,9 @@ export default {
} }
</script> </script>
<style> <style>
.Educationvideo .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #f56c6c!important;
}
.Educationvideo .right .Content .circle{ .Educationvideo .right .Content .circle{
display: inline-block; display: inline-block;
width: 3px; width: 3px;
...@@ -159,14 +170,17 @@ export default { ...@@ -159,14 +170,17 @@ export default {
cursor: pointer; cursor: pointer;
} }
.Educationvideo .right .Content .videoUl li p{ .Educationvideo .right .Content .videoUl li p{
font-size: 14px; font-size: 12px;
color:#666666; color:#666666;
padding-left:6px;
box-sizing: border-box;
} }
.Educationvideo .right .Content .videoUl li{ .Educationvideo .right .Content .videoUl li{
display: inline-block; display: inline-block;
width: 300px; width: 300px;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
margin-right: 10px;
} }
.Educationvideo .right .Content{ .Educationvideo .right .Content{
padding:90px 15px 10px 15px; padding:90px 15px 10px 15px;
...@@ -177,15 +191,18 @@ export default { ...@@ -177,15 +191,18 @@ export default {
padding: 0; padding: 0;
} }
.Educationvideo .left .lineUl .Active{ .Educationvideo .left .lineUl .Active{
background: #f5f5f5; color:#fff;
background: #f56c6c;
} }
.Educationvideo .left .lineUl li:hover{ .Educationvideo .left .lineUl li:hover{
background: #f5f5f5; background: #f56c6c;
color:#fff;
} }
.Educationvideo .left .lineUl li{ .Educationvideo .left .lineUl li{
padding:10px 35px; padding:10px 35px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 12px;
cursor: pointer;
} }
li{ li{
list-style: none; list-style: none;
...@@ -197,9 +214,9 @@ li{ ...@@ -197,9 +214,9 @@ li{
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
top: 0; top: 0;
width: calc(100% - 240px); width: calc(100% - 200px);
background: #fff; background: #fff;
left: 240px; left: 200px;
} }
.Educationvideo{ .Educationvideo{
...@@ -210,13 +227,13 @@ li{ ...@@ -210,13 +227,13 @@ li{
.Educationvideo .left{ .Educationvideo .left{
position: fixed; position: fixed;
min-height: 100%; min-height: 100%;
width: 240px; width: 200px;
z-index: 100; z-index: 100;
background: #fff; background: #fff;
} }
.Educationvideo .right{ .Educationvideo .right{
background: #f5f5f5; background: #f5f5f5;
padding-left: 250px; padding-left: 210px;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
} }
......
src/components/EducationvideoList.vue
View file @ 8ee419aa
<template> <template>
<div class="Educationvideo"> <div class="EducationvideoList">
<!-- <div class="left"> <!-- <div class="left">
<ul class="lineUl" style="margin-top:30px"> <ul class="lineUl" style="margin-top:30px">
<li v-for="(item,index) in LineList" :key="index"> <li v-for="(item,index) in LineList" :key="index">
...@@ -10,31 +10,36 @@ ...@@ -10,31 +10,36 @@
</div> --> </div> -->
<div class="right"> <div class="right">
<div class="search"> <div class="search">
<el-input style="width:600px" placeholder="请输入内容" v-model="msg.Name" class="input-with-select"> <el-input size="small" style="width:600px" placeholder="请输入内容" v-model="msg.Name" class="input-with-select">
<el-button @click="getList" slot="append" icon="el-icon-search"></el-button> <el-button @click="getList" slot="append" icon="el-icon-search"></el-button>
</el-input> </el-input>
<el-button style="margin-left:20px" size="small" type="danger" @click="addList" round>新增</el-button>
</div> </div>
<div class="Content"> <div v-loading="loading" class="Content">
<ul class="videoUl"> <ul class="videoUl">
<li v-for="(item,index) in dataList" :key="index"> <li v-for="(item,index) in dataList" :key="index">
<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="">
<el-tooltip class="item" effect="dark" content="编辑" placement="left">
<div @click.prevent="Edit(item,$event)" class="icon"> <div class="icon">
<span class="iconfont icon-bianji-smal"></span> <el-tooltip class="item" effect="dark" content="编辑" placement="left">
</div> <div class="iconDiv" @click.prevent="Edit(item,$event)">
</el-tooltip> <span class="iconfont icon-bianji-smal"></span>
<el-tooltip class="item" effect="dark" content="删除" placement="left"> </div>
<div style="top:35px" @click.prevent="Delete(item,$event)" class="icon"> </el-tooltip>
<span class="iconfont icon-shanchu"></span> <el-tooltip class="item" effect="dark" content="删除" placement="left">
</div> <div class="iconDiv" v-if="item.VideoStatus==2 || item.VideoStatus==3" style="top:35px" @click.prevent="Delete(item,$event)">
</el-tooltip> <span class="iconfont icon-shanchu"></span>
<el-tooltip class="item" effect="dark" content="撤回" placement="left"> </div>
<div style="top:70px" @click.prevent="Chehui(item,$event)" class="icon"> </el-tooltip>
<span class="iconfont icon-chehui"></span> <el-tooltip class="item" effect="dark" content="撤回" placement="left">
<div class="iconDiv" v-if="item.VideoStatus!=3" style="top:70px" @click.prevent="Chehui(item,$event)">
<span class="iconfont icon-chehui"></span>
</div>
</el-tooltip>
</div> </div>
</el-tooltip>
</div> </div>
<p>{{item.Name}}</p> <p>{{item.Name}}</p>
...@@ -45,7 +50,9 @@ ...@@ -45,7 +50,9 @@
</p> </p>
</li> </li>
</ul> </ul>
<div v-if="dataList.length==0" style="text-align:center">暂无数据</div> <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
<span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
</div>
<el-pagination background @current-change="handleCurrentChange" <el-pagination background @current-change="handleCurrentChange"
layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'> layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
</el-pagination> </el-pagination>
...@@ -73,8 +80,30 @@ ...@@ -73,8 +80,30 @@
<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="视频地址"> <el-form-item label="封面图" style="display:inline-block;width:330px">
<el-upload class="EducationvideoListupload" <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">
<span @click="DeleteSrc(1)" class="iconfont icon-bumenguanli-shanchu"></span>
</div>
</div>
<el-upload v-else style="display:inline-block;" class="EducationvideoListupload"
drag
:http-request="uploadFileBtn1"
:multiple="false" :show-file-list="false" action="">
<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 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>
<div class="iconfontDiv">
<span @click="DeleteSrc(2)" class="iconfont icon-bumenguanli-shanchu"></span>
</div>
</div>
<el-upload v-else style="display:inline-block;" class="EducationvideoListupload"
drag drag
:http-request="uploadFileBtn" :http-request="uploadFileBtn"
:multiple="false" :show-file-list="false" action=""> :multiple="false" :show-file-list="false" action="">
...@@ -84,11 +113,11 @@ ...@@ -84,11 +113,11 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <div style="text-align:right">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button size="samll" @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm('addMsg')">确 定</el-button> <el-button size="samll" type="danger" @click="submitForm('addMsg')">确 定</el-button>
</span> </div>
</el-dialog> </el-dialog>
</div> </div>
...@@ -100,7 +129,8 @@ export default { ...@@ -100,7 +129,8 @@ export default {
name: 'Educationvideo', name: 'Educationvideo',
created() { created() {
let userInfo = this.getLocalStorage()
this.msg.CreateBy=userInfo.EmployeeId
}, },
data () { data () {
...@@ -108,7 +138,7 @@ export default { ...@@ -108,7 +138,7 @@ export default {
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"', defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
val:'', val:'',
LineList:[], LineList:[],
dialogVisible:true, dialogVisible:false,
dataList:[], dataList:[],
msg:{ msg:{
pageIndex:1, pageIndex:1,
...@@ -127,6 +157,7 @@ export default { ...@@ -127,6 +157,7 @@ export default {
Label:'', Label:'',
VideoStatus:1, VideoStatus:1,
LineId:'', LineId:'',
UserType:1,
}, },
total:0, total:0,
rules: { rules: {
...@@ -139,7 +170,9 @@ export default { ...@@ -139,7 +170,9 @@ export default {
LineId: [ LineId: [
{ required: true, message: '请选择线路', trigger: 'change' } { required: true, message: '请选择线路', trigger: 'change' }
], ],
} },
loading:false,
baseurl:'http://vt-im-bucket.oss-cn-chengdu.aliyuncs.com',
} }
}, },
mounted() { mounted() {
...@@ -147,134 +180,211 @@ export default { ...@@ -147,134 +180,211 @@ export default {
this.getList(); this.getList();
}, },
methods: { methods: {
uploadFileBtn(file) { DeleteSrc(num){
let newArr = []; if(num==1){
newArr.push(file.file); this.addMsg.Cover='';
// console.log("newArr",newArr); }else{
let path = "/Sale/Uploadvideo/"; this.addMsg.VideoAddress='';
this.uploadFile(path, newArr, x => { }
// let fileSize = },
// file.file.size < 1024 addList(){
// ? file.file.size this.dialogVisible=true;
// : (file.file.size / 1024).toFixed(0); this.addMsg={
// this.addMsg.images = this.domainManager().ViittoFileUrl + x.data.FilePath; Id:0,
console.log("x",x); Name:'',
Cover:'',
VideoAddress:'',
Label:'',
VideoStatus:1,
LineId:'',
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];
});
},
uploadFileBtn(file) {
let newArr = [];
newArr.push(file.file);
let path = "/Sale/Uploadvideo/";
this.uploadFile(path, newArr, x => {
this.addMsg.VideoAddress=this.baseurl+x.name;
});
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.msg.pageIndex = val; this.msg.pageIndex = val;
this.getList(); this.getList();
}, },
//获取列表 //获取列表
getList() { getList() {
this.apipost( this.loading=true;
"Video_get_GetPCVideoPageList",this.msg, this.apipost(
res => { "Video_get_GetPCVideoPageList",this.msg,
if (res.data.resultCode == 1) { res => {
this.dataList = res.data.data.pageData; this.loading=false;
this.total = res.data.data.count;
console.log("this.dataList",this.dataList)
}
}
);
},
Chehui(item,e){
e.stopPropagation()
this.$confirm("是否撤回?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.apipost('Video_post_CancelVidelInfo', {VideoId:item.Id}, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.Success(res.data.message) this.dataList = res.data.data.pageData;
this.getList() this.total = res.data.data.count;
}else{
this.Error(res.data.message)
} }
}
);
},
Chehui(item,e){
e.stopPropagation()
this.$confirm("是否撤回?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}) })
}) .then(() => {
.catch(() => {}); this.apipost('Video_post_CancelVidelInfo', {VideoId:item.Id}, res => {
}, if (res.data.resultCode == 1) {
Delete(item,e){ this.Success(res.data.message)
e.stopPropagation() this.getList()
this.$confirm("是否删除? 删除后不可恢复", "提示", { }else{
confirmButtonText: "确定", this.Error(res.data.message)
cancelButtonText: "取消",
type: "warning" }
}) })
.then(() => {
this.apipost('Video_post_DelVidelInfo', {VideoId:item.Id}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message)
this.getList()
}else{
this.Error(res.data.message)
}
}) })
}) .catch(() => {});
.catch(() => {}); },
}, Delete(item,e){
submitForm(formName) { e.stopPropagation()
this.$refs[formName].validate((valid) => { this.$confirm("是否删除? 删除后不可恢复", "提示", {
if (valid) { confirmButtonText: "确定",
this.apipost('Video_post_SetPCVideoInfo', this.addMsg, res => { cancelButtonText: "取消",
if (res.data.resultCode == 1) { type: "warning"
this.Success(res.data.message)
this.getList()
}else{
this.Error(res.data.message)
}
}) })
} else { .then(() => {
} this.apipost('Video_post_DelVidelInfo', {VideoId:item.Id}, res => {
}); if (res.data.resultCode == 1) {
}, this.Success(res.data.message)
Edit(item,e){ this.getList()
console.log(item); }else{
e.stopPropagation() this.Error(res.data.message)
this.addMsg.Cover=item.Cover;
this.addMsg.Id=item.Id; }
this.addMsg.LineId=item.LineId; })
this.addMsg.Name=item.Name; })
this.addMsg.VideoAddress=item.VideoAddress; .catch(() => {});
this.addMsg.VideoStatus=item.VideoStatus; },
this.dialogVisible=true; submitForm(formName) {
}, this.$refs[formName].validate((valid) => {
goUrl(path,item){ if (valid) {
let msg=JSON.stringify(item) if(this.addMsg.Cover==''){
this.$router.push({ this.Error("请上传封面图！");
name:path, return;
query: { }
msg:msg, if(this.addMsg.VideoAddress==''){
blank: "y" this.Error("请上传视频！");
return;
}
this.apipost('Video_post_SetPCVideoInfo', this.addMsg, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message)
this.dialogVisible=false;
this.getList()
}else{
this.Error(res.data.message)
}
})
} else {
} }
}); });
}, },
//获取线路列表 Edit(item,e){
getLineList() { e.stopPropagation()
this.apipost( this.addMsg.Cover=item.Cover;
"line_post_GetList", { this.addMsg.Id=item.Id;
LineDirection: 2 this.addMsg.LineId=item.LineId;
}, this.addMsg.Name=item.Name;
res => { this.addMsg.VideoAddress=item.VideoAddress;
if (res.data.resultCode == 1) { this.addMsg.VideoStatus=item.VideoStatus;
this.LineList = res.data.data; this.addMsg.Label=item.Label;
this.dialogVisible=true;
},
goUrl(path,item){
let msg=JSON.stringify(item)
this.$router.push({
name:path,
query: {
msg:msg,
blank: "y"
}
});
},
//获取线路列表
getLineList() {
this.apipost(
"line_post_GetList", {
LineDirection: 2
},
res => {
if (res.data.resultCode == 1) {
this.LineList = res.data.data;
}
} }
} );
); },
}, },
},
} }
</script> </script>
<style> <style>
.Educationvideo .right .Content .circle{ .EducationvideoList .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #f56c6c!important;
}
.EducationvideoList .deleteDiv:hover .iconfontDiv{
display: block;
}
.EducationvideoList .deleteDiv .iconfontDiv{
position: absolute;
right: 0;
top: 0;
width:160px;height:120px;
background: rgba(0,0,0,0.5);
text-align: center;
padding-top: 42px;
display: none;
}
.EducationvideoList .deleteDiv .iconfontDiv .icon-bumenguanli-shanchu{
color:#f56c6c;
font-size: 24px;
}
.EducationvideoList .shipinDiv .icon-shipin{
font-size: 95px;
position: relative;
top: -20px;
}
.EducationvideoList .shipinDiv{
display: inline-flex;
align-items: center;
width:160px;height:160px;
justify-content: center;
position: relative;
}
.EducationvideoList .right .Content .circle{
display: inline-block; display: inline-block;
width: 3px; width: 3px;
height:3px; height:3px;
...@@ -282,38 +392,46 @@ export default { ...@@ -282,38 +392,46 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
.EducationvideoListupload .el-upload .el-upload-dragger{ .EducationvideoListupload .el-upload .el-upload-dragger{
width: 220px!important; width: 160px!important;
height: 115px!important; height: 115px!important;
} }
.Educationvideo .right .Content .videoUl li .imgDiv:hover .icon{ .EducationvideoList .right .Content .videoUl li .imgDiv:hover .icon{
display: block; display: block;
} }
.Educationvideo .right .Content .videoUl li .imgDiv .icon{ .EducationvideoList .right .Content .videoUl li .imgDiv .icon{
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 3px; top: 3px;
display: none;
}
.EducationvideoList .right .Content .videoUl li .imgDiv .iconDiv{
padding: 2px 6px; padding: 2px 6px;
background: #000; background: #000;
display: none; margin-top: 5px;
} }
.Educationvideo .right .Content .videoUl li .imgDiv .icon .iconfont{ .EducationvideoList .right .Content .videoUl li .imgDiv .icon .iconfont{
color:#fff; color:#fff;
} }
.Educationvideo .right .Content .videoUl li .imgDiv{ .EducationvideoList .right .Content .videoUl li .imgDiv{
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.Educationvideo .right .Content .videoUl li p{ .EducationvideoList .right .Content .videoUl li p{
font-size: 14px; font-size: 12px;
color:#666666; color:#666666;
padding-left:6px;
box-sizing: border-box;
} }
.Educationvideo .right .Content .videoUl li{ .EducationvideoList .right .Content .videoUl li{
display: inline-block; display: inline-block;
width: 300px; width: 300px;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
margin-right:10px;
} }
.Educationvideo .right .Content{ .EducationvideoList .right .Content{
padding:90px 15px 10px 15px; padding:90px 15px 10px 15px;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -321,10 +439,10 @@ export default { ...@@ -321,10 +439,10 @@ export default {
margin:0; margin:0;
padding: 0; padding: 0;
} }
.Educationvideo .left .lineUl li:hover{ .EducationvideoList .left .lineUl li:hover{
background: #f5f5f5; background: #f5f5f5;
} }
.Educationvideo .left .lineUl li{ .EducationvideoList .left .lineUl li{
padding:10px 35px; padding:10px 35px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
...@@ -333,7 +451,7 @@ li{ ...@@ -333,7 +451,7 @@ li{
list-style: none; list-style: none;
} }
.Educationvideo .right .search{ .EducationvideoList .right .search{
padding: 15px 0; padding: 15px 0;
padding-left: 50px; padding-left: 50px;
box-sizing: border-box; box-sizing: border-box;
...@@ -344,19 +462,19 @@ li{ ...@@ -344,19 +462,19 @@ li{
/* left: 240px; */ /* left: 240px; */
} }
.Educationvideo{ .EducationvideoList{
position: relative; position: relative;
min-height: 100%; min-height: 100%;
background: #fff; background: #fff;
} }
.Educationvideo .left{ .EducationvideoList .left{
position: fixed; position: fixed;
min-height: 100%; min-height: 100%;
width: 240px; width: 240px;
z-index: 100; z-index: 100;
background: #fff; background: #fff;
} }
.Educationvideo .right{ .EducationvideoList .right{
background: #f5f5f5; background: #f5f5f5;
/* padding-left: 250px; */ /* padding-left: 250px; */
box-sizing: border-box; box-sizing: border-box;
......
src/components/EducationvideoSee.vue
View file @ 8ee419aa
<template> <template>
<div class="EducationvideoSee"> <div class="EducationvideoSee">
<div class="imgDiv"> <!-- <div class="container"> -->
<video height="500" :src="datainfo.VideoAddress" controls="controls"> <div class="left">
您的浏览器不支持 video 标签。 <div class="imgDiv">
</video> <video style="border: 1px solid #f5f5f5;" width="100%" :height="videoHeight" :src="datainfo.VideoAddress" controls="controls">
<!-- <img style="height:100%;width:100%" src="../assets/img/hotel/biefu.png" alt=""> --> </video>
<!-- <div class="icon"> <p style="font-size:18px;font-family:'PingFangR';margin-top:15px">{{datainfo.Name}}</p>
<span class="iconfont icon-weihu"></span> <p>{{datainfo.EmName}}</p>
</div> --> <p>{{datainfo.WatchNum}}次观看
<p>{{datainfo.Name}}</p> <span class="circle"></span>
<p>{{datainfo.EmName}}</p> <span>{{datainfo.UpdateDate}}</span>
<p>{{datainfo.WatchNum}}次观看 </p>
<span class="circle"></span> </div>
<span>{{datainfo.UpdateDate}}</span>
</p>
</div> </div>
<div class="right">
<ul>
<li @click.prevent="goUrl('EducationvideoSee',item)" v-for="(item,index) in dataList" :key="index">
<img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="height:56px;width:100px" :src="item.Cover" alt="">
<img v-else style="height:56px;width:100px" src="../assets/img/hotel/biefu.png" alt="">
<div class="content">
<p style="font-size:14px">{{item.Name}}</p>
<p style="padding:6px 0">{{item.EmName}}</p>
<p>{{item.WatchNum}}次观看
<span class="circle"></span>
<span>{{item.UpdateDate}}</span>
</p>
</div>
</li>
</ul>
</div>
<!-- </div> -->
</div> </div>
</template> </template>
...@@ -32,21 +49,125 @@ export default { ...@@ -32,21 +49,125 @@ export default {
return { return {
val:'', val:'',
datainfo:{}, datainfo:{},
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
msg:{
pageIndex:1,
pageSize:5,
Name:'',
UserType:1,
VideoStatus:1,
CreateBy:'',
LineId:-1,
},
dataList:[],
videoHeight:0,
} }
}, },
mounted() { mounted() {
if(this.$route.query.msg){ if(this.$route.query.msg){
this.datainfo=JSON.parse(this.$route.query.msg) this.datainfo=JSON.parse(this.$route.query.msg)
console.log("this.datainfo",this.datainfo)
} }
this.getList();
this.AddList(this.datainfo.Id)
let h = document.documentElement.clientHeight || document.body.clientHeight;
this.videoHeight=h-110;
}, },
methods: { methods: {
goUrl(path,item){
let msg=JSON.stringify(item)
let routeData = this.$router.resolve({
name: path,
query: {
msg:msg,
blank: "y"
}
});
window.open(routeData.href, "_blank");
},
AddList(id) {
this.apipost(
"Video_post_SetVideoWatch",{VideoId:id},
res => {
if (res.data.resultCode == 1) {
}
}
);
},
//获取列表
getList() {
this.loading=true;
this.apipost(
"Video_get_GetPCVideoPageList",this.msg,
res => {
this.loading=false;
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
}
}
);
},
}, },
} }
</script> </script>
<style> <style>
.EducationvideoSee .container{
width: 1200px;
margin: 0 auto;
padding-top:20px;
}
.EducationvideoSee p{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.EducationvideoSee .right ul li img{
position: absolute;
width: 100px;
height: 60px;
}
.EducationvideoSee .right ul li .content{
padding-left: 115px;
box-sizing: border-box;
font-size: 12px;
}
.EducationvideoSee .right ul li{
position: relative;
/* min-height:64px; */
cursor: pointer;
background: #f5f5f5;
margin-bottom: 15px;
padding:15px;
box-sizing: border-box;
}
.EducationvideoSee .right ul{
width: 100%;
padding:0 10px 10px 10px;
}
.EducationvideoSee .right{
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
width: 400px;
position: absolute;
right:15px;
}
.EducationvideoSee .left{
display: inline-block;
width: calc(100% - 400px);
}
.EducationvideoSee .imgDiv p{
font-size: 12px;
}
.EducationvideoSee .circle{ .EducationvideoSee .circle{
display: inline-block; display: inline-block;
width: 3px; width: 3px;
...@@ -55,8 +176,7 @@ export default { ...@@ -55,8 +176,7 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
.EducationvideoSee .imgDiv{ .EducationvideoSee .imgDiv{
width: 850px; width: 100%;
height: 453px;
position: relative; position: relative;
} }
.EducationvideoSee{ .EducationvideoSee{
...@@ -64,5 +184,6 @@ export default { ...@@ -64,5 +184,6 @@ export default {
background: #fff; background: #fff;
padding: 15px 50px; padding: 15px 50px;
box-sizing: border-box; box-sizing: border-box;
position: relative;
} }
</style> </style>
src/plug/index.js
View file @ 8ee419aa
...@@ -732,16 +732,7 @@ export default { ...@@ -732,16 +732,7 @@ export default {
progress: function* (p) {}, progress: function* (p) {},
mime: 'application/octet-stream' mime: 'application/octet-stream'
}) })
successCall(result);
// var result = oss.multipartUpload(filename, files[index], {
// progress: async function (p, checkpoint) {
// checkpoint = checkpoint
// percentage = p * 100
// },
// checkpoint: that.checkpoint
// })
console.log("result",result)
// successCall(result);
} }
}).catch(function (err) { }).catch(function (err) {
......
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