Skip to content

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

选择图片调整

parent d96c799d
Hide whitespace changes
Inline Side-by-side
Showing with 427 additions and 424 deletions
src/components/commonPage/DMCchooseImg.vue
View file @ 280498e3
<style> <style>
.DMCchooseImg .resAddImg { .DMCchooseImg .resAddImg {
width: 520px; width: 520px;
padding-right: 45px; padding-right: 45px;
margin-top: 15px; margin-top: 15px;
} }
.DMCchooseImg .resource-name { .DMCchooseImg .resource-name {
height: 34px; height: 34px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
outline: none; outline: none;
border: 1px solid #d6d6d6; border: 1px solid #d6d6d6;
padding-left: 10px; padding-left: 10px;
} }
.DMCchooseImg .search-imgicon { .DMCchooseImg .search-imgicon {
padding-right: 20px; padding-right: 20px;
margin-left: -40px; margin-left: -40px;
} }
.DMCchooseImg .searchImgIcon { .DMCchooseImg .searchImgIcon {
cursor: pointer; cursor: pointer;
} }
.DMCchooseImg .addimgContent { .DMCchooseImg .addimgContent {
height: 290px; height: 290px;
overflow: auto; overflow: auto;
margin: 30px 0 20px 25px; margin: 30px 0 20px 25px;
width: 560px; width: 560px;
} }
.DMCchooseImg .addimgDiv { .DMCchooseImg .addimgDiv {
width: 160px; width: 160px;
height: 155px; height: 155px;
float: left; float: left;
margin: 0 20px 15px 0; margin: 0 20px 15px 0;
overflow: hidden; overflow: hidden;
} }
.DMCchooseImg .addimgContent div:first-child { .DMCchooseImg .addimgContent div:first-child {
margin-left: 0; margin-left: 0;
} }
.addimgContent div:nth-child(3n) { .addimgContent div:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
.DMCchooseImg .test-1::-webkit-scrollbar { .DMCchooseImg .test-1::-webkit-scrollbar {
width: 0px; width: 0px;
height: 0px; height: 0px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.DMCchooseImg .test-1::-webkit-scrollbar-track { .DMCchooseImg .test-1::-webkit-scrollbar-track {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.DMCchooseImg .test-1::-webkit-scrollbar-thumb { .DMCchooseImg .test-1::-webkit-scrollbar-thumb {
border-radius: 20px; border-radius: 20px;
background-color: #aaa; background-color: #aaa;
margin-bottom: 24px; margin-bottom: 24px;
} }
.DMCchooseImg .test-1:hover::-webkit-scrollbar { .DMCchooseImg .test-1:hover::-webkit-scrollbar {
width: 4px; width: 4px;
height: 4px; height: 4px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.DMCchooseImg .itemImgdiv { .DMCchooseImg .itemImgdiv {
width: 160px; width: 160px;
height: 106px; height: 106px;
position: relative; position: relative;
} }
.DMCchooseImg .itemImgdiv img { .DMCchooseImg .itemImgdiv img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10px; border-radius: 10px;
} }
.DMCchooseImg .imgseclet { .DMCchooseImg .imgseclet {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
top: 0; top: 0;
text-align: center; text-align: center;
line-height: 106px; line-height: 106px;
color: #e95252; color: #e95252;
} }
.DMCchooseImg .addimg-btnlist { .DMCchooseImg .addimg-btnlist {
text-align: center; text-align: center;
} }
.DMCchooseImg .addimg-select { .DMCchooseImg .addimg-select {
font-size: 14px; font-size: 14px;
color: #999999; color: #999999;
float: right; float: right;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
bottom: 20px; bottom: 20px;
} }
.DMCchooseImg .save-Btn { .DMCchooseImg .save-Btn {
width: 90px; width: 90px;
height: 30px; height: 30px;
background: rgba(233, 82, 82, 1); background: rgba(233, 82, 82, 1);
border-radius: 15px; border-radius: 15px;
color: #fff; color: #fff;
outline: none; outline: none;
border: none; border: none;
border: 1px solid #e95252 !important; border: 1px solid #e95252 !important;
cursor: pointer; cursor: pointer;
margin-right: 20px; margin-right: 20px;
} }
.DMCchooseImg .cancel-Btn, .DMCchooseImg .cancel-Btn,
.save-Btn:hover { .save-Btn:hover {
opacity: 0.8; opacity: 0.8;
} }
.DMCchooseImg .cancel-Btn { .DMCchooseImg .cancel-Btn {
width: 90px; width: 90px;
height: 30px; height: 30px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border-radius: 15px; border-radius: 15px;
color: #e95252; color: #e95252;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
border: 1px solid #e95252 !important; border: 1px solid #e95252 !important;
} }
.DMCchooseImg .el-pagination__total { .DMCchooseImg .el-pagination__total {
display: none !important; display: none !important;
} }
.DMC_addContent { .DMC_addContent {
width: 160; width: 160;
height: 106px; height: 106px;
border-radius: 10px; border-radius: 10px;
background-color: rgba(236, 236, 236, 1); background-color: rgba(236, 236, 236, 1);
color: #fff; color: #fff;
position: relative; position: relative;
} }
.DMC_addContent .el-upload { .DMC_addContent .el-upload {
width: 100%; width: 100%;
height: 105px; height: 105px;
} }
.DMC_addContent i { .DMC_addContent i {
font-size: 50px; font-size: 50px;
color: #d1d1d1; color: #d1d1d1;
position: relative; position: relative;
left: 0; left: 0;
top: 20px; top: 20px;
} }
.DMCActiveclass { .DMCActiveclass {
width: 98px; width: 98px;
margin: 0 25px; margin: 0 25px;
} }
.DmcactiveMyClass { .DmcactiveMyClass {
width: 32px !important; width: 32px !important;
} }
</style> </style>
<template> <template>
<div class="DMCchooseImg"> <div class="DMCchooseImg">
<div class="DMCActiveclass" v-if="this.IsShowVideo" :class="{ 'DmcactiveMyClass': this.isVideoActive }"> <div class="DMCActiveclass" v-if="this.IsShowVideo" :class="{ 'DmcactiveMyClass': this.isVideoActive }">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-if="isSHowImgCheck" :label="$t('system.label_img')" name="first"></el-tab-pane> <el-tab-pane v-if="isSHowImgCheck" :label="$t('system.label_img')" name="first"></el-tab-pane>
<el-tab-pane v-if="isSHowVideoCheck" :label="$t('hotel.shipin')" name="second"></el-tab-pane> <el-tab-pane v-if="isSHowVideoCheck" label="视频" name="second"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div v-if="activeName == 'first'"> <div v-if="activeName == 'first'">
<span style="margin-left:24px;"> <span style="margin-left:24px;">
<input type="text" class="resource-name resAddImg" v-model="queryMsg.Name" @keyup.enter="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()" <input type="text" class="resource-name resAddImg" v-model="queryMsg.Name"
@keyup.enter="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()"
:placeholder="$t('objFill.qsrguanjianci')" /> :placeholder="$t('objFill.qsrguanjianci')" />
<span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()"></i></span> <span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon"
@click="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()"></i></span>
</span> </span>
<div class="addimgContent test-1" v-loading="loading"> <div class="addimgContent test-1" v-loading="loading">
<div class="addimgDiv" v-for="(item, index) in imglistArry" :key="item.subCode" <div class="addimgDiv" v-for="(item, index) in imglistArry" :key="item.subCode"
...@@ -242,277 +245,277 @@ ...@@ -242,277 +245,277 @@
</template> </template>
<script> <script>
export default { export default {
props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo', 'checkType'], props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo', 'checkType'],
data() { data() {
return { return {
loading: false, loading: false,
queryMsg: { queryMsg: {
pageSize: 50, pageSize: 50,
pageIndex: 1, pageIndex: 1,
currentPage: 1, currentPage: 1,
total: 0, total: 0,
Type: 1, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店 Type: 1, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
Name: "", //资源图片名称 Name: "", //资源图片名称
SourceId: 0 //资源编号 SourceId: 0 //资源编号
},
//显示数组
imglistArry: [],
//选中显示数组
selectImgArr: [],
activeName: 'first',
queVideoMsg: {
pageSize: 10,
pageIndex: 1,
Name: '',
currentPage: 1,
total: 0
},
videoListArray: [],
//选中视频数组
selectVideoArr: [],
isSHowImgCheck: true,
isSHowVideoCheck: true,
isVideoActive: false,
};
},
methods: {
getList() {
//初始化弹窗图片列表
this.imglistArry = [];
this.loading = true
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;
this.loading = false
} else {
this.loading = false
}
},
null
);
},
closeDialog() {
this.imglistArry.forEach(selImg => {
selImg.isShow = false;
});
this.selectImgArr = [];
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() {
imglistArry: [], this.queryMsg.pageIndex = 1;
//选中显示数组 this.queryMsg.currentPage = 1;
selectImgArr: [],
activeName: 'first',
queVideoMsg: {
pageSize: 10,
pageIndex: 1,
Name: '',
currentPage: 1,
total: 0
}, },
videoListArray: [], selectImg(index) {
//选中视频数组 //选取弹窗图片
selectVideoArr: [], if (this.isCheckmore == 1) {
isSHowImgCheck: true, this.imglistArry.forEach(item => {
isSHowVideoCheck: true, item.isShow = false;
isVideoActive: false, });
}; this.imglistArry[index].isShow = true;
}, this.selectImgArr = [];
methods: { this.selectImgArr.push(this.imglistArry[index]);
getList() { } else {
//初始化弹窗图片列表 this.imglistArry[index].isShow = !this.imglistArry[index].isShow;
this.imglistArry = []; if (this.imglistArry[index].isShow) {
this.loading = true this.selectImgArr.push(this.imglistArry[index]);
this.apipost( } else {
"hotel_post_GetPicList", this.removeImg();
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;
this.loading = false
}else{
this.loading = false
} }
}, }
null },
); //选中视频方法
}, selectVideo(index) {
closeDialog() { this.videoListArray.forEach(item => {
this.imglistArry.forEach(selImg => {
selImg.isShow = false;
});
this.selectImgArr = [];
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; item.isShow = false;
}); });
this.imglistArry[index].isShow = true; this.videoListArray[index].isShow = true;
this.selectVideoArr = [];
this.selectVideoArr.push(this.videoListArray[index]);
},
//删除选中图片
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 = []; this.selectImgArr = [];
this.selectImgArr.push(this.imglistArry[index]); },
} else { //无效路径整个div不显示
this.imglistArry[index].isShow = !this.imglistArry[index].isShow; imgError(item) {
if (this.imglistArry[index].isShow) { item.isShowImgDiv = false;
this.selectImgArr.push(this.imglistArry[index]); 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 { } else {
this.removeImg(); this.queryMsg.Name = '';
this.queryMsg.SourceId = 0;
} }
} },
}, //点击切换
//选中视频方法 handleClick(tab, event) {
selectVideo(index) { if (this.activeName == 'first') {
this.videoListArray.forEach(item => { this.getList();
item.isShow = false; } else {
}); this.getVideoList();
this.videoListArray[index].isShow = true;
this.selectVideoArr = [];
this.selectVideoArr.push(this.videoListArray[index]);
},
//删除选中图片
removeImg() {
var newArr = [];
this.selectImgArr.forEach(selImg => {
if (selImg.isShow) {
newArr.push(selImg);
} }
}); },
this.selectImgArr = newArr; //获取视频列表数据
}, getVideoList() {
this.videoListArray = [];
//点击确定 this.apipost(
dmccheckImgList() { "Video_get_GetTripVideoPageListService",
this.$emit("headCallBack", this.selectImgArr); this.queVideoMsg,
this.$emit("closeImg"); res => {
this.imglistArry.forEach(selImg => { if (res.data.resultCode == 1) {
selImg.isShow = false; this.videoListArray = res.data.data.pageData;
}); this.queVideoMsg.total = res.data.data.count;
this.selectImgArr = []; this.videoListArray.forEach(x => {
}, x.isShowImgDiv = true;
//无效路径整个div不显示 x.isShow = false;
imgError(item) { x.FileType = ".mp4"
item.isShowImgDiv = false; });
this.$forceUpdate(); } else {
}, this.Error(res.data.message);
//上传图片 }
UploadImage(file) { },
let newArr = []; null
newArr.push(file.file); );
let fileName = file.file.name; },
var path = "/Upload/DMC/"; //点击确定选择
this.UploadSelfFileT(path, newArr, x => { chkedVideoList() {
var obj = this.$DMCUtils.DMCImageObj(); if (this.isCheckmore > 1 && this.selectVideoArr.length > this.isCheckmore) {
var str = x.name; return this.Error(`${this.$t('objFill.zuiduoxuan')}${this.isCheckmore}${this.$t('objFill.zhangtu')}`);
var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath; }
obj.Path = str; this.$emit("headCallBack", this.selectVideoArr);
obj.ShowPath = imgUrl; this.$emit("closeImg");
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;
} }
}, },
//点击切换 created() {},
handleClick(tab, event) { mounted() {
if (this.activeName == 'first') { if (this.checkType == 2) {
this.getList(); this.isSHowVideoCheck = true
} else { this.isSHowImgCheck = false
this.activeName = 'second'
this.getVideoList(); this.getVideoList();
this.isVideoActive = true;
} else if (this.checkType == 1) {
this.isSHowImgCheck = true
this.isSHowVideoCheck = false
this.activeName = 'first'
this.getList();
this.isVideoActive = true;
} }
}, this.queryMsg.Type = this.imgType;
//获取视频列表数据 this.getQueryItem();
getVideoList() {
this.videoListArray = [];
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;
x.FileType = ".mp4"
});
} else {
this.Error(res.data.message);
}
},
null
);
},
//点击确定选择
chkedVideoList() {
if(this.isCheckmore>1&&this.selectVideoArr.length>this.isCheckmore){
return this.Error(`${this.$t('objFill.zuiduoxuan')}${this.isCheckmore}${this.$t('objFill.zhangtu')}`);
}
this.$emit("headCallBack", this.selectVideoArr);
this.$emit("closeImg");
}
},
created() { },
mounted() {
if (this.checkType == 2) {
this.isSHowVideoCheck = true
this.isSHowImgCheck = false
this.activeName = 'second'
this.getVideoList();
this.isVideoActive = true;
} else if (this.checkType == 1) {
this.isSHowImgCheck = true
this.isSHowVideoCheck = false
this.activeName = 'first'
this.getList(); this.getList();
this.isVideoActive = true;
}
this.queryMsg.Type = this.imgType;
this.getQueryItem();
this.getList();
},
watch: {
queryItem: {
//深度监听，可监听到对象、数组的变化
handler: function (val, oldVal) {
this.getQueryItem();
this.getList();
this.getVideoList();
},
deep: true
}, },
checkType: { watch: {
handler: function (val, oldVal) { queryItem: {
if (val == 2) { //深度监听，可监听到对象、数组的变化
this.isSHowImgCheck = false handler: function (val, oldVal) {
this.isSHowVideoCheck = true this.getQueryItem();
this.activeName = 'second'
this.getVideoList();
this.isVideoActive = true;
} else if (val == 1) {
this.isSHowImgCheck = true
this.isSHowVideoCheck = false
this.activeName = 'first'
this.getList(); this.getList();
this.isVideoActive = true; this.getVideoList();
} },
deep: true
}, },
deep: true checkType: {
handler: function (val, oldVal) {
if (val == 2) {
this.isSHowImgCheck = false
this.isSHowVideoCheck = true
this.activeName = 'second'
this.getVideoList();
this.isVideoActive = true;
} else if (val == 1) {
this.isSHowImgCheck = true
this.isSHowVideoCheck = false
this.activeName = 'first'
this.getList();
this.isVideoActive = true;
}
},
deep: true
}
} }
}
}; };
</script> </script>
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