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>
.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;
}
.DMCActiveclass {
width: 98px;
margin: 0 25px;
}
.DmcactiveMyClass {
width: 32px !important;
}
.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;
}
.DMCActiveclass {
width: 98px;
margin: 0 25px;
}
.DmcactiveMyClass {
width: 32px !important;
}
</style>
<template>
<div class="DMCchooseImg">
<div class="DMCActiveclass" v-if="this.IsShowVideo" :class="{ 'DmcactiveMyClass': this.isVideoActive }">
<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="isSHowVideoCheck" :label="$t('hotel.shipin')" name="second"></el-tab-pane>
<el-tab-pane v-if="isSHowVideoCheck" 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="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')" />
<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>
<div class="addimgContent test-1" v-loading="loading">
<div class="addimgDiv" v-for="(item, index) in imglistArry" :key="item.subCode"
......@@ -242,277 +245,277 @@
</template>
<script>
export default {
props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo', 'checkType'],
data() {
return {
loading: false,
queryMsg: {
pageSize: 50,
pageIndex: 1,
currentPage: 1,
total: 0,
Type: 1, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
Name: "", //资源图片名称
SourceId: 0 //资源编号
export default {
props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo', 'checkType'],
data() {
return {
loading: false,
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: [],
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();
},
//显示数组
imglistArry: [],
//选中显示数组
selectImgArr: [],
activeName: 'first',
queVideoMsg: {
pageSize: 10,
pageIndex: 1,
Name: '',
currentPage: 1,
total: 0
resetPageIndex() {
this.queryMsg.pageIndex = 1;
this.queryMsg.currentPage = 1;
},
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
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.imglistArry[index].isShow = !this.imglistArry[index].isShow;
if (this.imglistArry[index].isShow) {
this.selectImgArr.push(this.imglistArry[index]);
} else {
this.removeImg();
}
},
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() {
this.queryMsg.pageIndex = 1;
this.queryMsg.currentPage = 1;
},
selectImg(index) {
//选取弹窗图片
if (this.isCheckmore == 1) {
this.imglistArry.forEach(item => {
}
},
//选中视频方法
selectVideo(index) {
this.videoListArray.forEach(item => {
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.push(this.imglistArry[index]);
} else {
this.imglistArry[index].isShow = !this.imglistArry[index].isShow;
if (this.imglistArry[index].isShow) {
this.selectImgArr.push(this.imglistArry[index]);
},
//无效路径整个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.removeImg();
this.queryMsg.Name = '';
this.queryMsg.SourceId = 0;
}
}
},
//选中视频方法
selectVideo(index) {
this.videoListArray.forEach(item => {
item.isShow = false;
});
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);
},
//点击切换
handleClick(tab, event) {
if (this.activeName == 'first') {
this.getList();
} else {
this.getVideoList();
}
});
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();
}
},
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;
},
//获取视频列表数据
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");
}
},
//点击切换
handleClick(tab, event) {
if (this.activeName == 'first') {
this.getList();
} else {
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.isVideoActive = true;
}
},
//获取视频列表数据
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.queryMsg.Type = this.imgType;
this.getQueryItem();
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: {
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'
watch: {
queryItem: {
//深度监听，可监听到对象、数组的变化
handler: function (val, oldVal) {
this.getQueryItem();
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>
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