Skip to content

S
SuperMan
Commit e51eabc7 authored by 黄奎's avatar 黄奎
Browse files
Options

文件上传修改

parent 70e1da66
Hide whitespace changes
Inline Side-by-side
Showing with 1281 additions and 1155 deletions
src/components/EducationvideoList.vue
View file @ e51eabc7
<template> <template>
<div class="EducationvideoList"> <div class="EducationvideoList">
<!-- <div class="left"> <!-- <div class="left">
...@@ -9,682 +8,718 @@ ...@@ -9,682 +8,718 @@
</ul> </ul>
</div> --> </div> -->
<div class="right"> <div class="right">
<div class="search"> <div class="search">
<el-input size="small" 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="Search" slot="append" icon="el-icon-search"></el-button> <el-button @click="Search" 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> <el-button style="margin-left:20px" size="small" type="danger" @click="addList" round>新增</el-button>
<!-- <el-button style="margin-left:20px" size="small" type="primary" @click="goUrlHome" round>返回</el-button> --> <!-- <el-button style="margin-left:20px" size="small" type="primary" @click="goUrlHome" round>返回</el-button> -->
</div> </div>
<div v-loading="loading" 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 :style="{backgroundImage: 'url(' + item.background + ')', backgroundSize:'cover'}" @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv"> <div :style="{backgroundImage: 'url(' + item.background + ')', backgroundSize:'cover'}"
<!-- <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="min-height: 199px;width:100%" :src="item.Cover" alt=""> @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv">
<!-- <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="min-height: 199px;width:100%" :src="item.Cover" alt="">
<img v-else style="height:199px;width:100%" src="../assets/img/hotel/biefu.png" alt=""> --> <img v-else style="height:199px;width:100%" src="../assets/img/hotel/biefu.png" alt=""> -->
<div class="backDiv"> <div class="backDiv">
<span class="iconfont icon-ico_bofang"></span> <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"
<span class="iconfont icon-bianji-smal"></span> @click.prevent="Edit(item,$event)">
</div> <span class="iconfont icon-bianji-smal"></span>
</el-tooltip> </div>
<el-tooltip class="item" effect="dark" content="删除" placement="left"> </el-tooltip>
<div class="iconDiv" v-if="item.VideoStatus==2 || item.VideoStatus==3" style="top:35px" @click.prevent="Delete(item,$event)"> <el-tooltip class="item" effect="dark" content="删除" placement="left">
<span class="iconfont icon-shanchu"></span> <div class="iconDiv" v-if="item.VideoStatus==2 || item.VideoStatus==3" style="top:35px"
</div> @click.prevent="Delete(item,$event)">
</el-tooltip> <span class="iconfont icon-shanchu"></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>
</div> </div>
<div class="contentDiv"> </el-tooltip>
<img v-if="item.EmPhoto && item.EmPhoto!=''" :src="item.EmPhoto" alt=""> <el-tooltip class="item" effect="dark" content="撤回" placement="left">
<img v-else src="../assets/img/default.png" alt=""> <div class="iconDiv" v-if="item.VideoStatus!=3" style="top:70px"
<div class="DesDiv"> @click.prevent="Chehui(item,$event)">
<el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start"> <span class="iconfont icon-chehui"></span>
<p style="font-size:14px" class="bold text1">{{item.Name}}</p>
</el-tooltip>
<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 stryle="margin-left:5px"> </span>
<span>{{item.UpdateDate}}</span>
</p>
</div>
</div> </div>
</li> </el-tooltip>
</ul> </div>
<div v-if="dataList.length==0" style="text-align:center;padding-top:40px"> </div>
<span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
</div>
<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">
<el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
<p style="font-size:14px" class="bold text1">{{item.Name}}</p>
</el-tooltip>
<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 stryle="margin-left:5px"> </span>
<span>{{item.UpdateDate}}</span>
</p>
</div>
</div> </div>
<!-- <el-pagination background @current-change="handleCurrentChange" </li>
</ul>
<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"
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> -->
<div v-show="nodata && msg.pageIndex>1" class="wryh" style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div> <div v-show="nodata && msg.pageIndex>1" class="wryh"
<div style="opacity: 0;" ref="bottomDiv">1111</div> style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div>
<div style="opacity: 0;" ref="bottomDiv">1111</div>
</div>
</div>
</div> </div>
<el-dialog <el-dialog title="上传" :visible.sync="dialogVisible" width="800px">
title="上传" <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
:visible.sync="dialogVisible"
width="800px">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
<el-form-item style="display:inline-block;" label="标题" prop="Name"> <el-form-item style="display:inline-block;" label="标题" prop="Name">
<el-input style="width:220px" v-model="addMsg.Name"></el-input> <el-input style="width:220px" v-model="addMsg.Name"></el-input>
</el-form-item> </el-form-item>
<el-form-item style="display:inline-block" label="标签" prop="Label"> <el-form-item style="display:inline-block" label="标签" prop="Label">
<!-- <el-input style="width:220px" v-model="addMsg.Label"></el-input> --> <!-- <el-input style="width:220px" v-model="addMsg.Label"></el-input> -->
<el-select style="width:220px" v-model="addMsg.Label" placeholder="请选择状态"> <el-select style="width:220px" v-model="addMsg.Label" placeholder="请选择状态">
<el-option label="酒店" value="酒店"></el-option> <el-option label="酒店" value="酒店"></el-option>
<el-option label="景点" value="景点"></el-option> <el-option label="景点" value="景点"></el-option>
<el-option label="餐食" value="餐食"></el-option> <el-option label="餐食" value="餐食"></el-option>
<el-option label="交通" value="交通"></el-option> <el-option label="交通" value="交通"></el-option>
<el-option label="专辑" value="专辑"></el-option> <el-option label="专辑" value="专辑"></el-option>
<el-option label="其他" value="其他"></el-option> <el-option label="其他" value="其他"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item style="display:inline-block" label="状态" prop="VideoStatus"> <el-form-item style="display:inline-block" label="状态" prop="VideoStatus">
<el-select style="width:220px" v-model="addMsg.VideoStatus" placeholder="请选择状态"> <el-select style="width:220px" v-model="addMsg.VideoStatus" placeholder="请选择状态">
<el-option label="发布" :value="1"></el-option> <el-option label="发布" :value="1"></el-option>
<el-option label="草稿" :value="2"></el-option> <el-option label="草稿" :value="2"></el-option>
<el-option label="撤回" :value="3"></el-option> <el-option label="撤回" :value="3"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item style="display:inline-block" label="线路" prop="LineId"> <el-form-item style="display:inline-block" label="线路" prop="LineId">
<el-select style="width:220px" v-model="addMsg.LineId" placeholder="请选择线路"> <el-select style="width:220px" v-model="addMsg.LineId" placeholder="请选择线路">
<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-select> </el-option>
</el-select>
</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>
<div class="iconfontDiv"> <div class="iconfontDiv">
<span @click="DeleteSrc(2)" class="iconfont icon-bumenguanli-shanchu"></span> <span @click="DeleteSrc(2)" class="iconfont icon-bumenguanli-shanchu"></span>
</div>
</div> </div>
<el-upload v-else style="display:inline-block;" class="EducationvideoListupload" </div>
drag <el-upload v-else style="display:inline-block;" class="EducationvideoListupload" drag
:http-request="uploadFileBtn" :http-request="uploadFileBtn" :multiple="false" :show-file-list="false" action="">
:multiple="false" :show-file-list="false" action=""> <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> <p style="font-size:12px;color:#e95252" v-show="scLoad">
<p style="font-size:12px;color:#e95252" v-show="scLoad"> <span v-loading="scLoad" style="display:inline-block;width:50px;height:50px"></span>
<span v-loading="scLoad" style="display:inline-block;width:50px;height:50px"></span> <span style="position: relative;top: -23px;">上传中，请稍后...</span>
<span style="position: relative;top: -23px;">上传中，请稍后...</span> </p>
</p>
</el-form-item> </el-form-item>
</el-form>
<div style="text-align:right;margin-bottom:10px"> </el-form>
<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" @click="dialogVisible = false">取 消</el-button>
<el-button style="font-size:12px" 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 class="videoDiv" v-show="videoDivState">
<div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="Setvideo" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div> <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="Setvideo"
<video ref="myVideo" autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video> style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
<video ref="myVideo" autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress"
controls="controls"></video>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Educationvideo', name: 'Educationvideo',
created() { created() {
let userInfo = this.getLocalStorage() let userInfo = this.getLocalStorage()
this.msg.CreateBy=userInfo.EmployeeId this.msg.CreateBy = userInfo.EmployeeId
}, },
data () { data() {
return { return {
scLoad:false, scLoad: false,
videoDivState:false, videoDivState: false,
thisVideoAddress:'', 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: [],
dialogVisible:false, dialogVisible: false,
dataList:[], dataList: [],
msg:{ msg: {
pageIndex:1, pageIndex: 1,
pageSize:20, pageSize: 20,
Name:'', Name: '',
UserType:1, UserType: 1,
VideoStatus:'', VideoStatus: '',
CreateBy:'', CreateBy: '',
LineId:-1, LineId: -1,
}, },
addMsg:{ addMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Cover:'', Cover: '',
VideoAddress:'', VideoAddress: '',
Label:'', Label: '',
VideoStatus:1, VideoStatus: 1,
LineId:'', LineId: '',
UserType:1, UserType: 1,
}, },
total:0, total: 0,
rules: { rules: {
Name: [ Name: [{
{ required: true, message: '请输入标题', trigger: 'blur' }, required: true,
], message: '请输入标题',
Label: [ trigger: 'blur'
{ required: true, message: '请选择标签', trigger: 'change' } }, ],
], Label: [{
VideoStatus: [ required: true,
{ required: true, message: '请选择状态', trigger: 'change' } message: '请选择标签',
], trigger: 'change'
LineId: [ }],
{ required: true, message: '请选择线路', trigger: 'change' } VideoStatus: [{
], required: true,
}, message: '请选择状态',
loading:false, trigger: 'change'
baseurl:'http://vt-im-bucket.oss-cn-chengdu.aliyuncs.com', }],
windowHeight:0, LineId: [{
nodata:false, required: true,
} message: '请选择线路',
}, trigger: 'change'
mounted() { }],
this.getLineList(); },
this.getList(); loading: false,
this.$nextTick(()=>{ baseurl: 'http://vt-im-bucket.oss-cn-chengdu.aliyuncs.com',
window.addEventListener('scroll',this.ScrollTop) windowHeight: 0,
nodata: false,
}) }
},
let h = document.documentElement.clientHeight || document.body.clientHeight; mounted() {
this.windowHeight=h; this.getLineList();
}, this.getList();
destroyed(){ this.$nextTick(() => {
window.removeEventListener('scroll',this.ScrollTop) window.addEventListener('scroll', this.ScrollTop)
}, })
methods: {
Search(){ let h = document.documentElement.clientHeight || document.body.clientHeight;
this.msg.pageIndex=1; this.windowHeight = h;
this.nodata=false; },
this.dataList=[]; destroyed() {
this.getList(); window.removeEventListener('scroll', this.ScrollTop)
},
methods: {
Search() {
this.msg.pageIndex = 1;
this.nodata = false;
this.dataList = [];
this.getList();
}, },
Setvideo(){ Setvideo() {
this.videoDivState=false; this.videoDivState = false;
let myVideo=this.$refs.myVideo; let myVideo = this.$refs.myVideo;
myVideo.pause(); myVideo.pause();
}, },
ScrollTop(){ ScrollTop() {
var that = this; var that = this;
if(that.$refs.bottomDiv.getBoundingClientRect()){ if (that.$refs.bottomDiv.getBoundingClientRect()) {
var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top; var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top;
if(this.windowHeight-50 < bottomDiv){ if (this.windowHeight - 50 < bottomDiv) {
this.handleCurrentChange(); this.handleCurrentChange();
} }
} }
}, },
DeleteSrc(num){ DeleteSrc(num) {
if(num==1){ if (num == 1) {
this.addMsg.Cover=''; this.addMsg.Cover = '';
}else{ } else {
this.addMsg.VideoAddress=''; this.addMsg.VideoAddress = '';
} }
}, },
addList(){ addList() {
this.dialogVisible=true; this.dialogVisible = true;
this.addMsg={ this.addMsg = {
Id:0, Id: 0,
Name:'', Name: '',
Cover:'', Cover: '',
VideoAddress:'', VideoAddress: '',
Label:'', Label: '',
VideoStatus:1, VideoStatus: 1,
LineId:'', LineId: '',
UserType:1, UserType: 1,
} }
}, },
// uploadFileBtn1(file) {
// let typeArr=[ uploadFileBtn(file) {
// {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3}, if (['video/mp4', 'video/ogg', 'video/webm', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file
// ] .file.type) == -1) {
// let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase(); this.Error("请上传正确的视频格式");
// let typeOk = false; return;
// typeArr.forEach(x => { }
// if (x.stringArr.indexOf(ft) != "-1") { let newArr = [];
// typeOk = true; newArr.push(file.file);
// } let path = "/Sale/Uploadvideo/";
// }); this.scLoad = true;
// if (!typeOk) return this.$message.error(this.$t('tips.qsctpian')); this.uploadFile(path, newArr, x => {
// let newArr = []; this.scLoad = false;
// newArr.push(file.file); this.addMsg.VideoAddress = this.baseurl + x.name;
// let path = "/Sale/Uploadvideo/"; let lastUrl = "?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast";
// this.uploadFile(path, newArr, x => { this.addMsg.Cover = this.addMsg.VideoAddress + lastUrl;
// this.addMsg.Cover=x.res.requestUrls[0]; });
// }); },
// }, handleCurrentChange() {
uploadFileBtn(file) { this.msg.pageIndex = this.msg.pageIndex + 1;
if (['video/mp4', 'video/ogg','video/webm','video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.file.type) == -1) { this.getList();
this.Error("请上传正确的视频格式"); },
return;
}
let newArr = [];
newArr.push(file.file);
let path = "/Sale/Uploadvideo/";
this.scLoad=true;
this.uploadFile(path, newArr, x => {
this.scLoad=false;
this.addMsg.VideoAddress=this.baseurl+x.name;
let lastUrl="?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast";
this.addMsg.Cover=this.addMsg.VideoAddress+lastUrl;
});
},
handleCurrentChange() {
this.msg.pageIndex = this.msg.pageIndex +1;
this.getList();
},
//获取列表 //获取列表
getList() { getList() {
if(this.nodata){ if (this.nodata) {
return; return;
} }
this.loading=true; this.loading = true;
this.apipost( this.apipost(
"Video_get_GetPCVideoPageList",this.msg, "Video_get_GetPCVideoPageList", this.msg,
res => { res => {
this.loading=false; this.loading = false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
let data= res.data.data.pageData; let data = res.data.data.pageData;
if(data.length==0 && this.msg.pageIndex>1){ if (data.length == 0 && this.msg.pageIndex > 1) {
this.nodata=true; this.nodata = true;
} } else {
else{ data.forEach(item => {
data.forEach(item=>{ let lastUrl = "?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast";
let lastUrl="?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast"; item.background = item.VideoAddress + lastUrl;
item.background=item.VideoAddress+lastUrl;
})
this.dataList = this.dataList.concat(data)
}
}
}
);
},
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) {
this.Success(res.data.message)
this.dataList=[];
this.msg.pageIndex=1;
this.nodata=false;
this.getList()
}else{
this.Error(res.data.message)
}
})
})
.catch(() => {});
},
Delete(item,e){
e.stopPropagation()
this.$confirm("是否删除? 删除后不可恢复", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.apipost('Video_post_DelVidelInfo', {VideoId:item.Id}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message)
this.dataList=[];
this.msg.pageIndex=1;
this.nodata=false;
this.getList()
}else{
this.Error(res.data.message)
}
})
}) })
.catch(() => {}); this.dataList = this.dataList.concat(data)
}, }
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if(this.scLoad){
this.Error("上传中，请稍候...")
return;
}
let Label=this.addMsg.Label;
if (['酒店','景点','餐食','交通','专辑','其他'].indexOf(Label) == -1) {
this.Error("请选择正确的标签！");
return;
}
if(this.addMsg.VideoAddress==''){
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.dataList=[];
this.msg.pageIndex=1;
this.nodata=false;
this.getList()
}else{
this.Error(res.data.message)
}
})
} else {
} }
}); }
}, );
Edit(item,e){ },
e.stopPropagation() Chehui(item, e) {
this.addMsg.Cover=item.Cover; e.stopPropagation()
this.addMsg.Id=item.Id; this.$confirm("是否撤回?", "提示", {
this.addMsg.LineId=item.LineId; confirmButtonText: "确定",
this.addMsg.Name=item.Name; cancelButtonText: "取消",
this.addMsg.VideoAddress=item.VideoAddress; type: "warning"
this.addMsg.VideoStatus=item.VideoStatus; })
this.addMsg.Label=item.Label; .then(() => {
this.apipost('Video_post_CancelVidelInfo', {
this.dialogVisible=true; VideoId: item.Id
}, }, res => {
goUrlHome(){ if (res.data.resultCode == 1) {
this.$router.push({ this.Success(res.data.message)
name:'Educationvideo', this.dataList = [];
query: { this.msg.pageIndex = 1;
blank: "y" this.nodata = false;
} this.getList()
}); } else {
}, this.Error(res.data.message)
goUrl(path,item){
let that=this; }
this.videoDivState=true; })
this.thisVideoAddress=item.VideoAddress; })
this.AddList(item.Id) .catch(() => {});
let myVideo=this.$refs.myVideo; },
myVideo.play(); Delete(item, e) {
if(!item.VideoWH || item.VideoWH==''){ e.stopPropagation()
myVideo.addEventListener('canplay', function () { this.$confirm("是否删除? 删除后不可恢复", "提示", {
let VideoWH=this.videoWidth+','+this.videoHeight; confirmButtonText: "确定",
that.AddWidthHeight(VideoWH,item.Id) cancelButtonText: "取消",
type: "warning"
}); })
.then(() => {
this.apipost('Video_post_DelVidelInfo', {
VideoId: item.Id
}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message)
this.dataList = [];
this.msg.pageIndex = 1;
this.nodata = false;
this.getList()
} else {
this.Error(res.data.message)
}
})
})
.catch(() => {});
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.scLoad) {
this.Error("上传中，请稍候...")
return;
} }
let Label = this.addMsg.Label;
if (['酒店', '景点', '餐食', '交通', '专辑', '其他'].indexOf(Label) == -1) {
}, this.Error("请选择正确的标签！");
AddWidthHeight(VideoWH,id) { return;
let msg={ }
Id:id, if (this.addMsg.VideoAddress == '') {
VideoWH:VideoWH this.Error("请上传视频！");
return;
} }
this.apipost( this.apipost('Video_post_SetPCVideoInfo', this.addMsg, res => {
"Video_set_SetPCVideoWHInfo",msg, if (res.data.resultCode == 1) {
res => { this.Success(res.data.message)
this.dialogVisible = false;
this.dataList = [];
this.msg.pageIndex = 1;
this.nodata = false;
this.getList()
} else {
this.Error(res.data.message)
if (res.data.resultCode == 1) { }
})
} else {}
});
},
Edit(item, e) {
e.stopPropagation()
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;
this.addMsg.VideoStatus = item.VideoStatus;
this.addMsg.Label = item.Label;
} this.dialogVisible = true;
} },
); goUrlHome() {
}, this.$router.push({
AddList(id) { name: 'Educationvideo',
this.apipost( query: {
"Video_post_SetVideoWatch",{VideoId:id}, blank: "y"
res => { }
});
},
goUrl(path, item) {
let that = this;
this.videoDivState = true;
this.thisVideoAddress = item.VideoAddress;
this.AddList(item.Id)
let myVideo = this.$refs.myVideo;
myVideo.play();
if (!item.VideoWH || item.VideoWH == '') {
myVideo.addEventListener('canplay', function () {
let VideoWH = this.videoWidth + ',' + this.videoHeight;
that.AddWidthHeight(VideoWH, item.Id)
if (res.data.resultCode == 1) { });
}
},
AddWidthHeight(VideoWH, id) {
let msg = {
Id: id,
VideoWH: VideoWH
}
this.apipost(
"Video_set_SetPCVideoWHInfo", msg,
res => {
if (res.data.resultCode == 1) {
}
} }
}
); );
}, },
//获取线路列表 AddList(id) {
getLineList() { this.apipost(
this.apipost( "Video_post_SetVideoWatch", {
"Video_get_GetPCVideoLineList", {}, VideoId: id
res => { },
if (res.data.resultCode == 1) { res => {
this.LineList = res.data.data;
} if (res.data.resultCode == 1) {
} }
); }
}, );
},
//获取线路列表
getLineList() {
this.apipost(
"Video_get_GetPCVideoLineList", {},
res => {
if (res.data.resultCode == 1) {
this.LineList = res.data.data;
}
}
);
},
}, },
} }
</script> </script>
<style> <style>
.EducationvideoList .el-loading-spinner .circular{ .EducationvideoList .el-loading-spinner .circular {
width:20px!important; width: 20px !important;
height:20px!important; height: 20px !important;
} }
.EducationvideoList .el-loading-mask{
background-color: rgba(255,255,255,.1)!important; .EducationvideoList .el-loading-mask {
} background-color: rgba(255, 255, 255, .1) !important;
.text1{ }
overflow: hidden;
.text1 {
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
height:20px; height: 20px;
} }
.EducationvideoList .el-upload-dragger .el-upload__text{
.EducationvideoList .el-upload-dragger .el-upload__text {
font-family: '微软雅黑'; font-family: '微软雅黑';
font-size: 12px; font-size: 12px;
} }
.EducationvideoList .el-form-item__label{
.EducationvideoList .el-form-item__label {
font-family: '微软雅黑'; font-family: '微软雅黑';
font-size: 12px; font-size: 12px;
} }
.wryh{
font-family: '微软雅黑' .wryh {
} font-family: '微软雅黑'
.EducationvideoList .right .Content .videoUl li .backDiv{ }
display: flex;
align-items: center; .EducationvideoList .right .Content .videoUl li .backDiv {
justify-content: center; display: flex;
position: absolute; align-items: center;
width: 100%; justify-content: center;
height: 100%; position: absolute;
background: rgba(0,0,0,0.3); width: 100%;
top: 0; 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; .EducationvideoList .right .Content .videoUl li .imgDiv .icon-ico_bofang {
color:#fff; position: absolute;
} font-size: 36px;
.videoDiv{ color: #fff;
position: fixed; }
top: 0;
width: 100%; .videoDiv {
height: 100%; position: fixed;
z-index: 999999999; top: 0;
background: #000; width: 100%;
} height: 100%;
.EducationvideoList .contentDiv img{ z-index: 999999999;
width:35px;height:35px;border-radius:50%; background: #000;
position: absolute; }
.EducationvideoList .contentDiv img {
} width: 35px;
.EducationvideoList .contentDiv .DesDiv{ height: 35px;
padding-left: 45px; border-radius: 50%;
box-sizing: border-box; position: absolute;
width: 100%;
}
.EducationvideoList .contentDiv{ }
position: relative;
margin-top:5px; .EducationvideoList .contentDiv .DesDiv {
} padding-left: 45px;
.EducationvideoList .bold{ box-sizing: border-box;
font-family: "pingfangR" width: 100%;
} }
.EducationvideoList .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #f56c6c!important; .EducationvideoList .contentDiv {
} position: relative;
.EducationvideoList .deleteDiv:hover .iconfontDiv{ margin-top: 5px;
}
.EducationvideoList .bold {
font-family: "pingfangR"
}
.EducationvideoList .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #f56c6c !important;
}
.EducationvideoList .deleteDiv:hover .iconfontDiv {
display: block; display: block;
} }
.EducationvideoList .deleteDiv .iconfontDiv{
.EducationvideoList .deleteDiv .iconfontDiv {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width:160px;height:120px; width: 160px;
background: rgba(0,0,0,0.5); height: 120px;
background: rgba(0, 0, 0, 0.5);
text-align: center; text-align: center;
padding-top: 42px; padding-top: 42px;
display: none; display: none;
z-index:100; z-index: 100;
} }
.EducationvideoList .deleteDiv .iconfontDiv .icon-bumenguanli-shanchu{
.EducationvideoList .deleteDiv .iconfontDiv .icon-bumenguanli-shanchu {
color:#f56c6c;
color: #f56c6c;
font-size: 24px; font-size: 24px;
} }
.EducationvideoList .shipinDiv .icon-shipin{
.EducationvideoList .shipinDiv .icon-shipin {
font-size: 95px; font-size: 95px;
position: relative; position: relative;
top: -20px; top: -20px;
} }
.EducationvideoList .shipinDiv{
.EducationvideoList .shipinDiv {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
width:160px;height:160px; width: 160px;
height: 160px;
justify-content: center; justify-content: center;
position: relative; position: relative;
} }
.EducationvideoList .right .Content .circle{
.EducationvideoList .right .Content .circle {
display: inline-block; display: inline-block;
width: 3px; width: 3px;
height:3px; height: 3px;
background: #666666; background: #666666;
border-radius: 50%; border-radius: 50%;
} }
.EducationvideoListupload .el-upload .el-upload-dragger{
width: 160px!important; .EducationvideoListupload .el-upload .el-upload-dragger {
height: 115px!important; width: 160px !important;
} height: 115px !important;
.EducationvideoList .right .Content .videoUl li .imgDiv:hover .icon{ }
.EducationvideoList .right .Content .videoUl li .imgDiv:hover .icon {
display: block; display: block;
} }
.EducationvideoList .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; display: none;
} }
.EducationvideoList .right .Content .videoUl li .imgDiv .iconDiv{
.EducationvideoList .right .Content .videoUl li .imgDiv .iconDiv {
padding: 2px 6px; padding: 2px 6px;
background: #000; background: #000;
margin-top: 5px; margin-top: 5px;
} }
.EducationvideoList .right .Content .videoUl li .imgDiv .icon .iconfont{
color:#fff; .EducationvideoList .right .Content .videoUl li .imgDiv .icon .iconfont {
} color: #fff;
.EducationvideoList .right .Content .videoUl li .imgDiv{ }
.EducationvideoList .right .Content .videoUl li .imgDiv {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
height:199px; height: 199px;
overflow:hidden; overflow: hidden;
} }
.EducationvideoList .right .Content .videoUl li p{
.EducationvideoList .right .Content .videoUl li p {
font-size: 12px; font-size: 12px;
padding-left:6px; padding-left: 6px;
box-sizing: border-box; box-sizing: border-box;
} }
.EducationvideoList .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-bottom:15px; margin-bottom: 15px;
} }
.EducationvideoList .right .Content{
padding:15px 15px 10px 15px; .EducationvideoList .right .Content {
box-sizing: border-box; padding: 15px 15px 10px 15px;
} box-sizing: border-box;
*{ }
margin:0;
* {
margin: 0;
padding: 0; padding: 0;
} }
.EducationvideoList .left .lineUl li:hover{
background: #f5f5f5; .EducationvideoList .left .lineUl li:hover {
} background: #f5f5f5;
.EducationvideoList .left .lineUl li{ }
padding:10px 35px;
.EducationvideoList .left .lineUl li {
padding: 10px 35px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
} }
li{
li {
list-style: none; list-style: none;
} }
.EducationvideoList .right .search{
padding: 15px 0; .EducationvideoList .right .search {
padding-left: 50px; padding: 15px 0;
box-sizing: border-box; padding-left: 50px;
/* position: fixed; */ box-sizing: border-box;
/* top: 50px; */ /* position: fixed; */
width: 100%; /* top: 50px; */
background: #fff; width: 100%;
/* left: 240px; */ background: #fff;
/* left: 240px; */
}
.EducationvideoList{ }
position: relative;
min-height: 100%; .EducationvideoList {
background: #f5f5f5; position: relative;
} min-height: 100%;
.EducationvideoList .left{ background: #f5f5f5;
position: fixed; }
min-height: 100%;
width: 240px; .EducationvideoList .left {
z-index: 100; position: fixed;
background: #fff; min-height: 100%;
} width: 240px;
.EducationvideoList .right{ z-index: 100;
background: #f5f5f5; background: #fff;
/* padding-left: 250px; */ }
box-sizing: border-box;
min-height: 100%; .EducationvideoList .right {
background: #f5f5f5;
/* padding-left: 250px; */
box-sizing: border-box;
min-height: 100%;
} }
</style> </style>
src/components/newTravelmanager/travelLineTrip/components/travelDays.vue
View file @ e51eabc7
This source diff could not be displayed because it is too large. You can view the blob instead.
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