Commit c958c64b authored by 黄奎's avatar 黄奎

页面修改

parent 5d9b240c
<style>
.DMCchooseImg .resAddImg {
width: 520px;
padding-right: 45px;
margin-top: 15px;
}
.DMCchooseImg .resource-name {
height: 34px;
background: rgba(255, 255, 255, 1);
outline: none;
border: 1px solid #d6d6d6;
padding-left: 10px;
}
.DMCchooseImg .search-imgicon {
padding-right: 20px;
margin-left: -40px;
}
.DMCchooseImg .searchImgIcon {
cursor: pointer;
}
.DMCchooseImg .addimgContent {
height: 290px;
overflow: auto;
margin: 30px 0 20px 25px;
width: 560px;
}
.DMCchooseImg .addimgDiv {
width: 160px;
height: 155px;
float: left;
margin: 0 20px 15px 0;
overflow: hidden;
}
.DMCchooseImg .addimgContent div:first-child {
margin-left: 0;
}
.addimgContent div:nth-child(3n) {
margin-right: 0;
}
.DMCchooseImg .test-1::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #aaa;
margin-bottom: 24px;
}
.DMCchooseImg .test-1:hover::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: #f5f5f5;
}
.DMCchooseImg .itemImgdiv {
width: 160px;
height: 106px;
position: relative;
}
.DMCchooseImg .itemImgdiv img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.DMCchooseImg .imgseclet {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
border-radius: 10px;
position: absolute;
top: 0;
text-align: center;
line-height: 106px;
color: #e95252;
}
.DMCchooseImg .addimg-btnlist {
text-align: center;
}
.DMCchooseImg .addimg-select {
font-size: 14px;
color: #999999;
float: right;
margin-bottom: 10px;
position: relative;
bottom: 20px;
}
.DMCchooseImg .save-Btn {
width: 90px;
height: 30px;
background: rgba(233, 82, 82, 1);
border-radius: 15px;
color: #fff;
outline: none;
border:none;
border: 1px solid #e95252!important;
cursor: pointer;
margin-right: 20px;
}
.DMCchooseImg .cancel-Btn,
.save-Btn:hover {
opacity: 0.8;
}
.DMCchooseImg .cancel-Btn {
width: 90px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 15px;
color: #e95252;
outline: none;
cursor: pointer;
border: 1px solid #e95252!important;
}
.DMCchooseImg .el-pagination__total{display:none!important;}
.DMC_addContent{
width:160;
height:106px;
border-radius:10px;
background-color: rgba(236, 236, 236, 1);
color:#fff;
position: relative;
}
.DMC_addContent .el-upload{
width:100%;
height:105px;
}
.DMC_addContent i{
font-size: 50px;
color: #d1d1d1;
position: relative;
left: 0;
top: 20px;
}
.DMCchooseImg .resAddImg {
width: 520px;
padding-right: 45px;
margin-top: 15px;
}
.DMCchooseImg .resource-name {
height: 34px;
background: rgba(255, 255, 255, 1);
outline: none;
border: 1px solid #d6d6d6;
padding-left: 10px;
}
.DMCchooseImg .search-imgicon {
padding-right: 20px;
margin-left: -40px;
}
.DMCchooseImg .searchImgIcon {
cursor: pointer;
}
.DMCchooseImg .addimgContent {
height: 290px;
overflow: auto;
margin: 30px 0 20px 25px;
width: 560px;
}
.DMCchooseImg .addimgDiv {
width: 160px;
height: 155px;
float: left;
margin: 0 20px 15px 0;
overflow: hidden;
}
.DMCchooseImg .addimgContent div:first-child {
margin-left: 0;
}
.addimgContent div:nth-child(3n) {
margin-right: 0;
}
.DMCchooseImg .test-1::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #aaa;
margin-bottom: 24px;
}
.DMCchooseImg .test-1:hover::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: #f5f5f5;
}
.DMCchooseImg .itemImgdiv {
width: 160px;
height: 106px;
position: relative;
}
.DMCchooseImg .itemImgdiv img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.DMCchooseImg .imgseclet {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
border-radius: 10px;
position: absolute;
top: 0;
text-align: center;
line-height: 106px;
color: #e95252;
}
.DMCchooseImg .addimg-btnlist {
text-align: center;
}
.DMCchooseImg .addimg-select {
font-size: 14px;
color: #999999;
float: right;
margin-bottom: 10px;
position: relative;
bottom: 20px;
}
.DMCchooseImg .save-Btn {
width: 90px;
height: 30px;
background: rgba(233, 82, 82, 1);
border-radius: 15px;
color: #fff;
outline: none;
border: none;
border: 1px solid #e95252 !important;
cursor: pointer;
margin-right: 20px;
}
.DMCchooseImg .cancel-Btn,
.save-Btn:hover {
opacity: 0.8;
}
.DMCchooseImg .cancel-Btn {
width: 90px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 15px;
color: #e95252;
outline: none;
cursor: pointer;
border: 1px solid #e95252 !important;
}
.DMCchooseImg .el-pagination__total {
display: none !important;
}
.DMC_addContent {
width: 160;
height: 106px;
border-radius: 10px;
background-color: rgba(236, 236, 236, 1);
color: #fff;
position: relative;
}
.DMC_addContent .el-upload {
width: 100%;
height: 105px;
}
.DMC_addContent i {
font-size: 50px;
color: #d1d1d1;
position: relative;
left: 0;
top: 20px;
}
</style>
<template>
<div class="DMCchooseImg">
<div style="width:98px;margin:0 25px;" v-if="this.IsShowVideo">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="图片" name="first"></el-tab-pane>
<el-tab-pane label="视频" name="second"></el-tab-pane>
</el-tabs>
</div>
<div v-if="activeName=='first'">
<span style="margin-left:24px;">
<input type="text" class="resource-name resAddImg" v-model="queryMsg.Name" @keyup.enter="getList" placeholder="请输入关键字"/>
<span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="getList"></i></span>
</span>
<div class="addimgContent test-1">
<div class="addimgDiv" v-for="(item,index) in imglistArry" :key="item.subCode" v-if="item.isShowImgDiv&&item.Path!=null">
<div class="itemImgdiv" @click="selectImg(index)">
<img :src='compressImg(item.Path, "filt", 160, "")' @error="imgError(item)"/>
<div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
</div>
<div class="imgDescription">{{item.Name}}</div>
</div>
<div class="addimgDiv" v-if="IsShowAdd" >
<div class="DMC_addContent">
<el-upload class="upload-demo" :http-request="UploadImage" :multiple="false" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" action="">
<i class="iconfont icon-img_haha"></i>
</el-upload>
</div>
</div>
<div class="DMCchooseImg">
<div style="width:98px;margin:0 25px;" v-if="this.IsShowVideo">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="图片" name="first"></el-tab-pane>
<el-tab-pane label="视频" name="second"></el-tab-pane>
</el-tabs>
</div>
<div v-if="activeName=='first'">
<span style="margin-left:24px;">
<input type="text" class="resource-name resAddImg" v-model="queryMsg.Name" @keyup.enter="getList"
placeholder="请输入关键字" />
<span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="getList"></i></span>
</span>
<div class="addimgContent test-1">
<div class="addimgDiv" v-for="(item,index) in imglistArry" :key="item.subCode"
v-if="item.isShowImgDiv&&item.Path!=null">
<div class="itemImgdiv" @click="selectImg(index)">
<img :src='compressImg(item.Path, "filt", 160, "")' @error="imgError(item)" />
<div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
</div>
<div class="addimg-btnlist">
<input type="button" class="save-Btn" @click="dmccheckImgList()" value="确定" />
<input type="button" class="cancel-Btn" @click="closeDialog()" value="取消" />
<div class="imgDescription">{{item.Name}}</div>
</div>
<div class="addimgDiv" v-if="IsShowAdd">
<div class="DMC_addContent">
<el-upload class="upload-demo" :http-request="UploadImage" :multiple="false"
accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
<i class="iconfont icon-img_haha"></i>
</el-upload>
</div>
<span class="addimg-select">已选择<span style="color:#E95252;"><span>{{selectImgArr.length}}</span></span>张图片</span>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="queryMsg.currentPage"
:page-size="queryMsg.pageSize"
layout="total,prev, pager, next, jumper" :total="queryMsg.total">
</el-pagination>
</div>
</div>
<div v-else>
<span style="margin-left:24px;">
<input type="text" class="resource-name resAddImg" v-model="queVideoMsg.Name" @keyup.enter="getVideoList" placeholder="请输入关键字"/>
<span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="getVideoList"></i></span>
</span>
<div class="addimgContent test-1">
<div class="addimgDiv" v-for="(item,index) in videoListArray" :key="item.subCode" v-if="item.isShowImgDiv&&item.Cover!=null">
<div class="itemImgdiv" @click="selectVideo(index)">
<img :src='item.Cover' @error="imgError(item)"/>
<div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
</div>
<div class="imgDescription">{{item.Name}}</div>
</div>
</div>
<div class="addimg-btnlist">
<input type="button" class="save-Btn" @click="chkedVideoList()" value="确定" />
<input type="button" class="cancel-Btn" @click="closeDialog()" value="取消" />
<div class="addimg-btnlist">
<input type="button" class="save-Btn" @click="dmccheckImgList()" value="确定" />
<input type="button" class="cancel-Btn" @click="closeDialog()" value="取消" />
</div>
<span class="addimg-select">已选择<span style="color:#E95252;"><span>{{selectImgArr.length}}</span></span>张图片</span>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
:page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
</el-pagination>
</div>
<div v-else>
<span style="margin-left:24px;">
<input type="text" class="resource-name resAddImg" v-model="queVideoMsg.Name" @keyup.enter="getVideoList"
placeholder="请输入关键字" />
<span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="getVideoList"></i></span>
</span>
<div class="addimgContent test-1">
<div class="addimgDiv" v-for="(item,index) in videoListArray" :key="item.subCode"
v-if="item.isShowImgDiv&&item.VideoCover!=null">
<div class="itemImgdiv" @click="selectVideo(index)">
<img :src='item.VideoCover' @error="imgError(item)" />
<div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
</div>
<span class="addimg-select">已选择<span style="color:#E95252;"><span>{{selectVideoArr.length}}</span></span>个视频</span>
<el-pagination
background
@current-change="videoCurrentChange"
:current-page.sync="queVideoMsg.currentPage"
:page-size="queVideoMsg.pageSize"
layout="total,prev, pager, next, jumper" :total="queVideoMsg.total">
</el-pagination>
<div class="imgDescription">{{item.Name}}</div>
</div>
</div>
<div class="addimg-btnlist">
<input type="button" class="save-Btn" @click="chkedVideoList()" value="确定" />
<input type="button" class="cancel-Btn" @click="closeDialog()" value="取消" />
</div>
<span class="addimg-select">已选择<span
style="color:#E95252;"><span>{{selectVideoArr.length}}</span></span>个视频</span>
<el-pagination background @current-change="videoCurrentChange" :current-page.sync="queVideoMsg.currentPage"
:page-size="queVideoMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queVideoMsg.total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
props: ["imgType", "isCheckmore",'queryItem','IsShowAdd','IsShowVideo'],
data() {
return {
queryMsg: {
pageSize: 50,
pageIndex: 1,
currentPage: 1,
total: 0,
Type: 1,//1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
Name: "",//资源图片名称
SourceId:0//资源编号
},
//显示数组
imglistArry: [],
//选中显示数组
selectImgArr: [],
activeName:'first',
queVideoMsg:{
pageSize: 10,
pageIndex: 1,
Name:'',
currentPage:1,
total: 0
},
videoListArray:[],
//选中视频数组
selectVideoArr:[],
};
},
methods: {
getList() {
//初始化弹窗图片列表
this.imglistArry = [];
this.apipost(
"hotel_post_GetPicList",
this.queryMsg,
res => {
if (res.data.resultCode == 1) {
this.imglistArry = res.data.data.pageData;
this.imglistArry.forEach(x=>{
x.isShowImgDiv = true;
})
this.queryMsg.total = res.data.data.count;
}
export default {
props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo'],
data() {
return {
queryMsg: {
pageSize: 50,
pageIndex: 1,
currentPage: 1,
total: 0,
Type: 1, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
Name: "", //资源图片名称
SourceId: 0 //资源编号
},
null
);
},
closeDialog() {
this.imglistArry.forEach(selImg => {
selImg.isShow = false;
});
this.selectImgArr = [];
this.queryMsg.Name='';
this.queryMsg.SourceId=0;
this.$emit("closeImg");
//显示数组
imglistArry: [],
//选中显示数组
selectImgArr: [],
activeName: 'first',
//关闭清除选中视频
this.videoListArray.forEach(selvideo => {
selvideo.isShow = false;
});
this.selectVideoArr = [];
this.queVideoMsg.Name='';
},
sendMsg() {},
handleCurrentChange(val) {
this.queryMsg.pageIndex = val;
this.getList();
},
videoCurrentChange(val){
this.queVideoMsg.pageIndex = val;
this.getVideoList();
},
resetPageIndex() {
this.queryMsg.pageIndex = 1;
this.queryMsg.currentPage = 1;
queVideoMsg: {
pageSize: 10,
pageIndex: 1,
Name: '',
currentPage: 1,
total: 0
},
videoListArray: [],
//选中视频数组
selectVideoArr: [],
};
},
selectImg(index) {
//选取弹窗图片
if (this.isCheckmore == 1) {
this.imglistArry.forEach(item => {
item.isShow = false;
methods: {
getList() {
//初始化弹窗图片列表
this.imglistArry = [];
this.apipost(
"hotel_post_GetPicList",
this.queryMsg,
res => {
if (res.data.resultCode == 1) {
this.imglistArry = res.data.data.pageData;
this.imglistArry.forEach(x => {
x.isShowImgDiv = true;
})
this.queryMsg.total = res.data.data.count;
}
},
null
);
},
closeDialog() {
this.imglistArry.forEach(selImg => {
selImg.isShow = false;
});
this.imglistArry[index].isShow = true;
this.selectImgArr = [];
this.selectImgArr.push(this.imglistArry[index]);
} else {
this.imglistArry[index].isShow = !this.imglistArry[index].isShow;
if (this.imglistArry[index].isShow) {
this.queryMsg.Name = '';
this.queryMsg.SourceId = 0;
this.$emit("closeImg");
//关闭清除选中视频
this.videoListArray.forEach(selvideo => {
selvideo.isShow = false;
});
this.selectVideoArr = [];
this.queVideoMsg.Name = '';
},
sendMsg() {},
handleCurrentChange(val) {
this.queryMsg.pageIndex = val;
this.getList();
},
videoCurrentChange(val) {
this.queVideoMsg.pageIndex = val;
this.getVideoList();
},
resetPageIndex() {
this.queryMsg.pageIndex = 1;
this.queryMsg.currentPage = 1;
},
selectImg(index) {
//选取弹窗图片
if (this.isCheckmore == 1) {
this.imglistArry.forEach(item => {
item.isShow = false;
});
this.imglistArry[index].isShow = true;
this.selectImgArr = [];
this.selectImgArr.push(this.imglistArry[index]);
} else {
this.removeImg();
this.imglistArry[index].isShow = !this.imglistArry[index].isShow;
if (this.imglistArry[index].isShow) {
this.selectImgArr.push(this.imglistArry[index]);
} else {
this.removeImg();
}
}
}
},
//选中视频方法
selectVideo(index){
},
//选中视频方法
selectVideo(index) {
this.videoListArray.forEach(item => {
item.isShow = false;
});
this.videoListArray[index].isShow = true;
this.selectVideoArr = [];
this.selectVideoArr.push(this.videoListArray[index]);
console.log(this.selectVideoArr,'this.selectVideoArr');
},
//删除选中图片
removeImg() {
var newArr = [];
this.selectImgArr.forEach(selImg => {
if (selImg.isShow) {
newArr.push(selImg);
}
});
this.selectImgArr = newArr;
},
//点击确定
dmccheckImgList() {
this.$emit("headCallBack", this.selectImgArr);
this.$emit("closeImg");
this.imglistArry.forEach(selImg => {
selImg.isShow = false;
});
this.selectImgArr = [];
},
//无效路径整个div不显示
imgError(item){
item.isShowImgDiv=false;
this.$forceUpdate();
},
//上传图片
UploadImage(file) {
let newArr = [];
newArr.push(file.file);
let fileName = file.file.name;
var path = "/Upload/DMC/";
this.UploadSelfFileT(path, newArr, x => {
var obj = this.$DMCUtils.DMCImageObj();
var str = x.name;
var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
obj.Path = str;
obj.ShowPath = imgUrl;
this.uploadImageFile(x.data.FilePath);
});
},
//上传图片方法
uploadImageFile(Path) {
let msg = {
SourceId:this.queryMsg.SourceId,
ResourceType: this.imgType,
PicPath:Path,
imageName:this.queryMsg.Name
};
this.apipost(
"dmcimg_post_SetDmcImage",
msg,
response => {
if (response.data.resultCode == 1) {
this.getList();
},
//删除选中图片
removeImg() {
var newArr = [];
this.selectImgArr.forEach(selImg => {
if (selImg.isShow) {
newArr.push(selImg);
}
},
null
);
},
getQueryItem(){
if(this.queryItem && this.queryItem.queryName!=undefined){
this.queryMsg.Name = this.queryItem.queryName;
this.queryMsg.SourceId=this.queryItem.queryId;
});
this.selectImgArr = newArr;
},
this.queVideoMsg.Name=this.queryItem.queryName;
}else{
this.queryMsg.Name = '';
this.queryMsg.SourceId=0;
//点击确定
dmccheckImgList() {
this.$emit("headCallBack", this.selectImgArr);
this.$emit("closeImg");
this.imglistArry.forEach(selImg => {
selImg.isShow = false;
});
this.selectImgArr = [];
},
//无效路径整个div不显示
imgError(item) {
item.isShowImgDiv = false;
this.$forceUpdate();
},
//上传图片
UploadImage(file) {
let newArr = [];
newArr.push(file.file);
let fileName = file.file.name;
var path = "/Upload/DMC/";
this.UploadSelfFileT(path, newArr, x => {
var obj = this.$DMCUtils.DMCImageObj();
var str = x.name;
var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
obj.Path = str;
obj.ShowPath = imgUrl;
this.uploadImageFile(x.data.FilePath);
});
},
//上传图片方法
uploadImageFile(Path) {
let msg = {
SourceId: this.queryMsg.SourceId,
ResourceType: this.imgType,
PicPath: Path,
imageName: this.queryMsg.Name
};
this.apipost(
"dmcimg_post_SetDmcImage",
msg,
response => {
if (response.data.resultCode == 1) {
this.getList();
}
},
null
);
},
getQueryItem() {
if (this.queryItem && this.queryItem.queryName != undefined) {
this.queryMsg.Name = this.queryItem.queryName;
this.queryMsg.SourceId = this.queryItem.queryId;
this.queVideoMsg.Name = this.queryItem.queryName;
} else {
this.queryMsg.Name = '';
this.queryMsg.SourceId = 0;
}
},
//点击切换
handleClick(tab, event) {
if (this.activeName == 'first') {
this.getList();
} else {
this.getVideoList();
}
},
//获取视频列表数据
getVideoList() {
this.apipost(
"Video_get_GetTripVideoPageListService",
this.queVideoMsg,
res => {
if (res.data.resultCode == 1) {
this.videoListArray = res.data.data.pageData;
this.queVideoMsg.total = res.data.data.count;
this.videoListArray.forEach(x => {
x.isShowImgDiv = true;
x.isShow = false;
})
} else {
this.Error(res.data.message);
}
},
null
);
},
//点击确定选择
chkedVideoList() {
this.$emit("headCallBack", this.videoListArray);
this.$emit("closeImg");
this.videoListArray.forEach(x => {
x.isShowImgDiv = true;
x.isShow = false;
})
this.videoListArray = [];
}
},
//点击切换
handleClick(tab,event){
if(this.activeName=='first'){
this.getList();
}else{
this.getVideoList();
}
created() {},
mounted() {
this.queryMsg.Type = this.imgType;
this.getQueryItem();
this.getList();
},
//获取视频列表数据
getVideoList(){
this.apipost(
"Video_get_GetTripVideoPageListService",
this.queVideoMsg,
res => {
if (res.data.resultCode == 1) {
this.videoListArray=res.data.data.pageData;
this.queVideoMsg.total = res.data.data.count;
this.videoListArray.forEach(x=>{
x.isShowImgDiv = true;
x.isShow=false;
})
}else{
this.Error(res.data.message);
}
watch: {
queryItem: {
//深度监听,可监听到对象、数组的变化
handler: function (val, oldVal) {
this.getQueryItem();
this.getList();
},
null
);
},
//点击确定选择
chkedVideoList(){
}
},
created() {},
mounted() {
this.queryMsg.Type = this.imgType;
this.getQueryItem();
this.getList();
},
watch: {
queryItem: {
//深度监听,可监听到对象、数组的变化
handler: function (val, oldVal) {
this.getQueryItem();
this.getList();
},
deep: true
deep: true
}
}
}
};
};
</script>
......@@ -127,12 +127,17 @@
//获取选择的图片
getDMCimg(imgArr) {
var that = this;
console.log("imgArr",imgArr)
imgArr.forEach(imgItem => {
var obj = {
Name: imgItem.Name,
Url: imgItem.Path,
fileName: imgItem.Name
};
if(imgItem.VideoCover)
{
obj.VideoCover=imgItem.VideoCover;
}
that.scenicArray[0].NewImaArray = [];
that.scenicArray[0].NewImaArray.push(obj);
that.scenicArray[0].NewScenicImg = JSON.stringify(that.scenicArray[0].NewImaArray);
......
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