Skip to content

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

页面修改

parent 5d9b240c
Show whitespace changes
Inline Side-by-side
Showing with 437 additions and 407 deletions
src/components/commonPage/DMCchooseImg.vue
View file @ c958c64b
<style>
.DMCchooseImg .resAddImg {
.DMCchooseImg .resAddImg {
width: 520px;
padding-right: 45px;
margin-top: 15px;
}
.DMCchooseImg .resource-name {
}
.DMCchooseImg .resource-name {
height: 34px;
background: rgba(255, 255, 255, 1);
outline: none;
border: 1px solid #d6d6d6;
padding-left: 10px;
}
.DMCchooseImg .search-imgicon {
}
.DMCchooseImg .search-imgicon {
padding-right: 20px;
margin-left: -40px;
}
.DMCchooseImg .searchImgIcon {
}
.DMCchooseImg .searchImgIcon {
cursor: pointer;
}
.DMCchooseImg .addimgContent {
}
.DMCchooseImg .addimgContent {
height: 290px;
overflow: auto;
margin: 30px 0 20px 25px;
width: 560px;
}
.DMCchooseImg .addimgDiv {
}
.DMCchooseImg .addimgDiv {
width: 160px;
height: 155px;
float: left;
margin: 0 20px 15px 0;
overflow: hidden;
}
.DMCchooseImg .addimgContent div:first-child {
}
.DMCchooseImg .addimgContent div:first-child {
margin-left: 0;
}
.addimgContent div:nth-child(3n) {
}
.addimgContent div:nth-child(3n) {
margin-right: 0;
}
.DMCchooseImg .test-1::-webkit-scrollbar {
}
.DMCchooseImg .test-1::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-track {
}
.DMCchooseImg .test-1::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-thumb {
}
.DMCchooseImg .test-1::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #aaa;
margin-bottom: 24px;
}
.DMCchooseImg .test-1:hover::-webkit-scrollbar {
}
.DMCchooseImg .test-1:hover::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: #f5f5f5;
}
.DMCchooseImg .itemImgdiv {
}
.DMCchooseImg .itemImgdiv {
width: 160px;
height: 106px;
position: relative;
}
.DMCchooseImg .itemImgdiv img {
}
.DMCchooseImg .itemImgdiv img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.DMCchooseImg .imgseclet {
}
.DMCchooseImg .imgseclet {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
......@@ -75,35 +89,40 @@
text-align: center;
line-height: 106px;
color: #e95252;
}
.DMCchooseImg .addimg-btnlist {
}
.DMCchooseImg .addimg-btnlist {
text-align: center;
}
.DMCchooseImg .addimg-select {
}
.DMCchooseImg .addimg-select {
font-size: 14px;
color: #999999;
float: right;
margin-bottom: 10px;
position: relative;
bottom: 20px;
}
.DMCchooseImg .save-Btn {
}
.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;
border: none;
border: 1px solid #e95252 !important;
cursor: pointer;
margin-right: 20px;
}
.DMCchooseImg .cancel-Btn,
.save-Btn:hover {
}
.DMCchooseImg .cancel-Btn,
.save-Btn:hover {
opacity: 0.8;
}
.DMCchooseImg .cancel-Btn {
}
.DMCchooseImg .cancel-Btn {
width: 90px;
height: 30px;
background: rgba(255, 255, 255, 1);
......@@ -111,28 +130,35 @@
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;
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;
color: #fff;
position: relative;
}
.DMC_addContent .el-upload{
width:100%;
height:105px;
}
.DMC_addContent i{
}
.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">
......@@ -144,21 +170,23 @@
</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="请输入关键字"/>
<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="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)"/>
<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="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="">
<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>
......@@ -169,23 +197,21 @@
<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 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="请输入关键字"/>
<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="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.Cover' @error="imgError(item)"/>
<img :src='item.VideoCover' @error="imgError(item)" />
<div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
</div>
<div class="imgDescription">{{item.Name}}</div>
......@@ -195,21 +221,18 @@
<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">
<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'],
export default {
props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo'],
data() {
return {
queryMsg: {
......@@ -217,26 +240,26 @@ export default {
pageIndex: 1,
currentPage: 1,
total: 0,
Type: 1,//1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
Name: "",//资源图片名称
SourceId:0//资源编号
Type: 1, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
Name: "", //资源图片名称
SourceId: 0 //资源编号
},
//显示数组
imglistArry: [],
//选中显示数组
selectImgArr: [],
activeName:'first',
activeName: 'first',
queVideoMsg:{
queVideoMsg: {
pageSize: 10,
pageIndex: 1,
Name:'',
currentPage:1,
Name: '',
currentPage: 1,
total: 0
},
videoListArray:[],
videoListArray: [],
//选中视频数组
selectVideoArr:[],
selectVideoArr: [],
};
},
methods: {
......@@ -249,7 +272,7 @@ export default {
res => {
if (res.data.resultCode == 1) {
this.imglistArry = res.data.data.pageData;
this.imglistArry.forEach(x=>{
this.imglistArry.forEach(x => {
x.isShowImgDiv = true;
})
this.queryMsg.total = res.data.data.count;
......@@ -263,8 +286,8 @@ export default {
selImg.isShow = false;
});
this.selectImgArr = [];
this.queryMsg.Name='';
this.queryMsg.SourceId=0;
this.queryMsg.Name = '';
this.queryMsg.SourceId = 0;
this.$emit("closeImg");
//关闭清除选中视频
......@@ -272,14 +295,14 @@ export default {
selvideo.isShow = false;
});
this.selectVideoArr = [];
this.queVideoMsg.Name='';
this.queVideoMsg.Name = '';
},
sendMsg() {},
handleCurrentChange(val) {
this.queryMsg.pageIndex = val;
this.getList();
},
videoCurrentChange(val){
videoCurrentChange(val) {
this.queVideoMsg.pageIndex = val;
this.getVideoList();
},
......@@ -306,14 +329,13 @@ export default {
}
},
//选中视频方法
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() {
......@@ -336,8 +358,8 @@ export default {
this.selectImgArr = [];
},
//无效路径整个div不显示
imgError(item){
item.isShowImgDiv=false;
imgError(item) {
item.isShowImgDiv = false;
this.$forceUpdate();
},
//上传图片
......@@ -358,10 +380,10 @@ export default {
//上传图片方法
uploadImageFile(Path) {
let msg = {
SourceId:this.queryMsg.SourceId,
SourceId: this.queryMsg.SourceId,
ResourceType: this.imgType,
PicPath:Path,
imageName:this.queryMsg.Name
PicPath: Path,
imageName: this.queryMsg.Name
};
this.apipost(
"dmcimg_post_SetDmcImage",
......@@ -374,42 +396,38 @@ export default {
null
);
},
getQueryItem(){
if(this.queryItem && this.queryItem.queryName!=undefined){
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.SourceId = this.queryItem.queryId;
this.queVideoMsg.Name = this.queryItem.queryName;
} else {
this.queryMsg.Name = '';
this.queryMsg.SourceId=0;
this.queryMsg.SourceId = 0;
}
},
//点击切换
handleClick(tab,event){
if(this.activeName=='first'){
handleClick(tab, event) {
if (this.activeName == 'first') {
this.getList();
}else{
} else {
this.getVideoList();
}
},
//获取视频列表数据
getVideoList(){
getVideoList() {
this.apipost(
"Video_get_GetTripVideoPageListService",
this.queVideoMsg,
res => {
if (res.data.resultCode == 1) {
this.videoListArray=res.data.data.pageData;
this.videoListArray = res.data.data.pageData;
this.queVideoMsg.total = res.data.data.count;
this.videoListArray.forEach(x=>{
this.videoListArray.forEach(x => {
x.isShowImgDiv = true;
x.isShow=false;
x.isShow = false;
})
}else{
} else {
this.Error(res.data.message);
}
},
......@@ -417,8 +435,14 @@ export default {
);
},
//点击确定选择
chkedVideoList(){
chkedVideoList() {
this.$emit("headCallBack", this.videoListArray);
this.$emit("closeImg");
this.videoListArray.forEach(x => {
x.isShowImgDiv = true;
x.isShow = false;
})
this.videoListArray = [];
}
},
created() {},
......@@ -438,5 +462,6 @@ export default {
}
}
};
};
</script>
src/components/newTravelmanager/TravelTripPreview/onedayList.vue
View file @ c958c64b
......@@ -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