Commit 17351c69 authored by 黄奎's avatar 黄奎

页面修改

parent 6b35e7c9
<template>
<div>
<div>clickFeature
<div class="TravelFeature" :class="{'foldHeight':isFold==1}">
<span class="TMTitle">
<i></i>{{$t('sm.chanpintese')}}
......@@ -7,8 +7,8 @@
<span class="foldList" @click="fold" v-if="isFold==''">{{$t('sm.djzd')}}</span>
<span class="foldList" @click="fold" v-if="isFold==1">{{$t('sm.djzk')}}</span>
<template v-if="true">
<span v-if="FeatureData.ConfigId&&dataAll.FeaturePageType&&FeatureData.FeatureType==9" class="foldList" style="margin-right: 5px;"
@click="journeyTemplate()">编辑行程</span>
<span v-if="FeatureData.ConfigId&&dataAll.FeaturePageType&&FeatureData.FeatureType==9" class="foldList"
style="margin-right: 5px;" @click="journeyTemplate()">编辑行程</span>
<span style="color: red;float: right;margin-right: 5px;line-height: 28px;font-weight:bold;">
新复制的【团期】,如需单独修改【行程特色】操作步骤: 当团修改=》保存=》团控列表=》当团修改=》编辑行程特色.</span>
</template>
......@@ -34,7 +34,7 @@
<div v-if="CurrentUserInfo.RB_Group_id==QjGroupId()">{{$t('sm.huandengplongTips')}}</div>
<div v-if="CurrentUserInfo.RB_Group_id==QjGroupId()" class="ScraList">{{$t('sm.imgLongtips')}}</div>
<div v-if="FeatureData.FeatureType==8" class="ScraList">
<span style="color: red;">此功能将于2024-02-18正式下线</span>
</div>
<div class="TFContent">
<div class="TFconTitle">
......@@ -81,11 +81,64 @@
</div>
<!--自定义 开始-->
<div v-if="FeatureData.FeatureType==FeatureTypeState.userDefined">
<span class="userDeSpan">{{$t('sm.xiaoguoyldzxg')}}</span>
<span class="userDeSpan">上传自定义行程特色和行程详情</span>
<div class="userDefined">
<my-edit v-on:edit-value="FeatureData.FeatureContent = arguments[0]"
<!-- <my-edit v-on:edit-value="FeatureData.FeatureContent = arguments[0]"
v-bind:editValue="FeatureData.FeatureContent" v-bind:toolbarShow="toolbar"
v-bind:referenceList="DefaultList" v-bind:placeholder="placeholder"></my-edit>
v-bind:referenceList="DefaultList" v-bind:placeholder="placeholder"></my-edit> -->
<div class="sliderContent clearfix" style="width:1000px;">
<el-upload class="upload-demo" :http-request="reUpload" :multiple="true"
accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action>
<el-button size="small" type="primary" @click="updateTFimg(1)">上传行程特色</el-button>
<div slot="tip" class="el-upload__tip" style="color:red;">横版1754*1240,竖版:1240X1754</div>
</el-upload>
<div class="TFimgList" v-for="(item,index) in FeatureData.TripImageListNew" :key="item.subCode">
<img :key="index+10000" v-if="!item" src="../../../assets/img/bg_c3@3x.png">
<img :key="index+20000" v-else :src="item">
<div :key="index+30000" class="TFIMGzhe">
<div class="TFremove" @click="removeImg(1,index)">
<i class="iconfont icon-xingzhuang"></i>
</div>
<div class="TFremove" @click="showImg(item)">
<i class="iconfont icon-img_cz"></i>
</div>
<div class="TFremove" @click.stop="ExchangeImg(1,index,0)" v-if="index!=0">
<i class="iconfont icon-zuoyi"></i>
</div>
<div class="TFremove" @click.stop="ExchangeImg(1,index,1)"
v-if="index!=FeatureData.TripImageListNew.length-1">
<i class="iconfont icon-youyi"></i>
</div>
</div>
</div>
</div>
<br />
<div class="sliderContent clearfix" style="width:1000px;">
<el-upload class="upload-demo" :http-request="reUpload" :multiple="true"
accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action>
<el-button size="small" type="primary" @click="updateTFimg(2)">上传行程详情</el-button>
<div slot="tip" class="el-upload__tip" style="color:red;">横版1754*1240,竖版:1240X1754</div>
</el-upload>
<div class="TFimgList" v-for="(item,index) in FeatureData.DetailsImageListNew" :key="item.subCode">
<img :key="index+1000" v-if="!item" src="../../../assets/img/bg_c3@3x.png">
<img :key="index+2000" v-else :src="item">
<div :key="index+3000" class="TFIMGzhe">
<div class="TFremove" @click="removeImg(2,index)">
<i class="iconfont icon-xingzhuang"></i>
</div>
<div class="TFremove" @click="showImg(item)">
<i class="iconfont icon-img_cz"></i>
</div>
<div class="TFremove" @click.stop="ExchangeImg(2,index,0)" v-if="index!=0">
<i class="iconfont icon-zuoyi"></i>
</div>
<div class="TFremove" @click.stop="ExchangeImg(2,index,1)"
v-if="index!=FeatureData.DetailsImageListNew.length-1">
<i class="iconfont icon-youyi"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="TFright" v-if="FeatureData.FeatureType!=FeatureTypeState.userDefined">
......@@ -145,6 +198,10 @@
<!-- ppt 模版新增编辑窗口 -->
<pptIframe v-show="dialogPptistVisible" :FeaturePageType="dataAll.FeaturePageType" :Url="TemplateUrl"
@close="closeIframe()"></pptIframe>
<viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
<img v-for="src in images" :src="src" :key="src">
</viewer>
</div>
</template>
<script>
......@@ -186,6 +243,11 @@
inject: ['loadConfigInfo'],
data() {
return {
images: [],
imageOptions: {
navbar: false,
title: false
},
updateChoseIndex: "0",
toolbar: {
clean: false, //加粗
......@@ -204,13 +266,12 @@
travelSpecial: 4,
travelSpecial2: 5,
},
TypeArray: [
// {
// ckTitle: "自定义",
// isShow: false,
// imgUrl: userDefined,
// TypeState: 3
// },
TypeArray: [{
ckTitle: "自定义",
isShow: false,
imgUrl: Travelslider,
TypeState: 3
},
// {
// ckTitle: "幻灯片",
// isShow: false,
......@@ -284,7 +345,6 @@
//当前登录用户信息
CurrentUserInfo: {},
dialogPptistVisible: false,
userInfo: {},
TemplateUrl: '', // 模版 修改url
myIframeUrl: '', //行程特色url
myIframeHeigth: 0,
......@@ -296,8 +356,56 @@
created: function () {
},
methods: {
//图片左移右移
ExchangeImg(type, index, IsMove) {
if (type == 1) {
var imgItem = this.FeatureData.TripImageListNew[index];
//左移
if (IsMove == 0) {
var upItem = this.FeatureData.TripImageListNew[index - 1];
this.$set(this.FeatureData.TripImageListNew, index - 1, imgItem);
this.$set(this.FeatureData.TripImageListNew, index, upItem);
} else {
//右移动
var downItem = this.FeatureData.TripImageListNew[index + 1];
this.$set(this.FeatureData.TripImageListNew, index + 1, imgItem);
this.$set(this.FeatureData.TripImageListNew, index, downItem);
}
} else {
var imgItem = this.FeatureData.DetailsImageListNew[index];
//左移
if (IsMove == 0) {
var upItem = this.FeatureData.DetailsImageListNew[index - 1];
this.$set(this.FeatureData.DetailsImageListNew, index - 1, imgItem);
this.$set(this.FeatureData.DetailsImageListNew, index, upItem);
} else {
//右移动
var downItem = this.FeatureData.DetailsImageListNew[index + 1];
this.$set(this.FeatureData.DetailsImageListNew, index + 1, imgItem);
this.$set(this.FeatureData.DetailsImageListNew, index, downItem);
}
}
},
inited(viewer) {
this.$viewer = viewer;
},
showImg: function (src) {
let srcArr = src.split('?')
src = srcArr[0]
let isExsit = false
this.images.forEach(x => {
if (x === src)
isExsit = true
})
if (!isExsit) {
this.images.push(src)
} else {
this.$viewer.view(this.images.indexOf(src))
}
this.$viewer.show()
},
closeIframe() {
this.dialogPptistVisible = false
},
......@@ -334,8 +442,7 @@
this.isPostMessage = false;
let href = this.domainManager().PptUrl
this.TemplateUrl =
`${href}/?uid=${this.userInfo.EmployeeId}&ConfigId=${this.FeatureData.ConfigId}&model=0&TempType=${this.dataAll.FeaturePageType}`
// this.TemplateUrl=`${href}/index/${this.userInfo.EmployeeId}/${this.FeatureData.ConfigId}/0/${this.dataAll.FeaturePageType}`
`${href}/?uid=${this.CurrentUserInfo.EmployeeId}&ConfigId=${this.FeatureData.ConfigId}&model=0&TempType=${this.dataAll.FeaturePageType}`
this.dialogPptistVisible = true
},
//重新加载行程特色
......@@ -345,8 +452,6 @@
this.$refs.UpgradedVersion.initFeature(true)
}
},
// 初始化行程特色
init: function () {},
// 行程特色删除区块
delFeature: function (key) {
this.travelsList.splice(key, 1);
......@@ -357,46 +462,8 @@
this.$refs.newFeature.clearOldData()
}
},
// 抓取行程特色节点储存
uuid(len, radix) {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
""
);
var uuid = [],
i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
} else {
var r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
uuid[14] = "4";
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | (Math.random() * 16);
uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join("");
},
base64ToBlob(code) {
let parts = code.split(";base64,");
let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
},
getHtml: function (postData, SaveType, TeamType) {
console.log("postData", postData);
var FeatureData = {
B2BRemark: postData.B2BRemark,
ConfigId: postData.ConfigId,
......@@ -414,7 +481,11 @@
ShopRemark: postData.ShopRemark,
VisaRemark: postData.VisaRemark,
WarmTip: postData.WarmTip,
TemplateId: postData.TemplateId
TemplateId: postData.TemplateId,
IsUploadDetails: postData.IsUploadDetails,
IsUploadFeature: postData.IsUploadFeature,
DetailsImageListNew: postData.DetailsImageListNew, //行程详情图片
TripImageListNew: postData.TripImageListNew, //行程特色图片
};
if (this.$refs.newFeature != undefined) {
var obj = '';
......@@ -449,6 +520,7 @@
}
FeatureData.FeatureHtml = newHtml;
} catch (err) {}
console.log("Api_FeatureData", FeatureData);
this.apipost("travel_post_SetFeature", FeatureData, res => {
try {
this.$refs.newFeature.setReadOnly(false)
......@@ -570,12 +642,10 @@
}
this.initFileList();
if (this.FeatureData.FeatureType == 9) {
// this.iframeLoading = true
if (document.all.myIframe) {
document.all.myIframe.src = this.myIframeUrl + `&t=${new Date().getTime()}`
}
}
},
//点击折叠
fold() {
......@@ -589,24 +659,45 @@
reUpload(file) {
let newArr = [];
newArr.push(file.file);
let fileName = file.file.name;
//let fileName = file.file.name;
let that = this;
let path = "/Upload/DMC/";
let path = "/Upload/24Trip/";
this.UploadSelfFileT(path, newArr, x => {
var str = this.domainManager().ViittoFileUrl + x.data.FilePath;
that.FeatureData.fileList[
this.updateChoseIndex
].Url = this.$commonUtils.GetALiFileUrl(str);
that.FeatureData.fileList[this.updateChoseIndex].Name = fileName;
// that.FeatureData.fileList[
// this.updateChoseIndex
// ].Url = this.$commonUtils.GetALiFileUrl(str);
// that.FeatureData.fileList[this.updateChoseIndex].Name = fileName;
//行程特色
if (that.updateChoseIndex == 1) {
that.FeatureData.TripImageListNew.push(str);
}
//行程详情
else if (that.updateChoseIndex == 2) {
that.FeatureData.DetailsImageListNew.push(str);
}
});
},
//删除图片
removeImg(type, index) {
if (type == 1) {
this.FeatureData.TripImageListNew.splice(index, 1);
} else if (type == 2) {
this.FeatureData.DetailsImageListNew.splice(index, 1);
}
},
//删除
handleRemove(obj) {
obj.Url = "";
obj.Name = "";
},
//修改图片
//上传图片(index==1行程特色,=2行程详情)
updateTFimg(index) {
if (index == 1) {
this.FeatureData.IsUploadFeature = 1;
} else if (index == 2) {
this.FeatureData.IsUploadDetails = 1;
}
this.updateChoseIndex = index;
},
//初始化幻灯片
......@@ -648,9 +739,7 @@
},
mounted() {
window.addEventListener('message', this.handleMessage, false);
this.userInfo = this.getLocalStorage()
let userInfo = this.getLocalStorage()
this.CurrentUserInfo = userInfo
this.CurrentUserInfo = this.getLocalStorage();
this.MsgBus.$on('FeatureDataFlag', () => {
this.FeatureDataFlag = true
});
......@@ -661,7 +750,7 @@
this.clickFeature(obj)
}
this.myIframeUrl =
`${this.domainManager().PptUrl}/?uid=${this.userInfo.EmployeeId}&ConfigId=${this.$route.query.configId}&index=0&model=3&w=1108`
`${this.domainManager().PptUrl}/?uid=${this.CurrentUserInfo.EmployeeId}&ConfigId=${this.$route.query.configId}&index=0&model=3&w=1108`
if (document.all.myIframe) {
document.all.myIframe.src = this.myIframeUrl + `&t=${new Date().getTime()}`
}
......@@ -677,7 +766,6 @@
handler: function (val, oldVal) {
this.$emit("featureCallBack", this.FeatureData);
this.initFeature();
},
deep: true,
immediate: true
......@@ -689,12 +777,6 @@
},
deep: true
},
"FeatureData.DayList": {
handler: function (val, oldval) {
//this.init();
},
deep: true
}
}
};
......
......@@ -55,11 +55,10 @@
:IsDirect="PostConfig.IsDirect" v-bind:AllCityList="AllCityList" v-bind:StartCity="StartCity"
:UseTypeArray="UseTypeArray" :AirPickUp="AirPickUp" :AirSend="AirSend" @change="handlerChangeData"
:TeamType="TeamType" :IsOpenHotel="PostConfig.IsOpenHotel"></TravelDaysTripDirect>
<TravelFeature :TripColor="PostConfig.TripColor" :dataAll="PostConfig" :class="{'showOther':(TeamType==3)}" ref="TravelFeature"
id="thirdAnchor" @featureCallBack="getFeature" :FeatureData="FeatureData" :TeamType="TeamType"
:isNewConfig="isNewConfig" @unlockFormCommit="unlockFormCommit" :CurrentUserInfo="CurrentUserInfo"
@ConfigInfo="firstLoadConfigInfo"
@pptJourney="getPptJourney">
<TravelFeature :TripColor="PostConfig.TripColor" :dataAll="PostConfig" :class="{'showOther':(TeamType==3)}"
ref="TravelFeature" id="thirdAnchor" @featureCallBack="getFeature" :FeatureData="FeatureData"
:TeamType="TeamType" :isNewConfig="isNewConfig" @unlockFormCommit="unlockFormCommit"
:CurrentUserInfo="CurrentUserInfo" @ConfigInfo="firstLoadConfigInfo" @pptJourney="getPptJourney">
</TravelFeature>
<!-- 地图 -->
<div id="thirdMap">
......@@ -226,8 +225,8 @@
TripCountryList: [], //行程国家
TripCityList: [], //行程城市
TripMapList: [],
NotQueryCityList:[],//使用系统中的经纬度城市
FeaturePageType:0,//1横版 2竖版
NotQueryCityList: [], //使用系统中的经纬度城市
FeaturePageType: 0, //1横版 2竖版
},
//行程
FeatureData: {
......@@ -250,6 +249,12 @@
IsSave: false, //是否保存
TripColor: "", //行程特色主色
LtName: "", //系列名称
DetailsImageList: '', //行程详情图片
TripImageList: '', //行程特色图片
IsUploadFeature: 0, //是否上传自定义行程特色
IsUploadDetails: 0, //是否上传自定义行程图片
TripImageListNew: [], //行程特色图片数组
DetailsImageListNew: [], //行程详情图片数组
},
//线路行程
journeyList: {
......@@ -340,7 +345,7 @@
reader.readAsDataURL(e.target.files[0]);
}
},
getPptJourney(status){
getPptJourney(status) {
this.isPptJourney = status
},
/*获取行程特色内容对象*/
......@@ -419,7 +424,7 @@
},
//提交验证
submitForm(SaveType) {
if(this.FeatureData.FeatureType==9&&!this.isPptJourney){
if (this.FeatureData.FeatureType == 9 && !this.isPptJourney) {
this.Error('请编辑PPT行程并保存');
return
}
......@@ -440,7 +445,7 @@
}
},
/*保存数据*/
SaveData(SaveType,MapUrl) {
SaveData(SaveType, MapUrl) {
this.ShowMap = false
this.saveLoading = true;
this.MsgBus.$emit('saveTravel', true);
......@@ -729,12 +734,12 @@
this.journeyList.isFileUpload = true;
this.journeyList.DayNum = configData.Days.length;
this.journeyList.NightNum = this.journeyList.DayNum - 1;
let arrDayList = function(list){
list.forEach(x=>{
let arrDayList = function (list) {
list.forEach(x => {
x.IsBlowUp = false
if(this.PostConfig.FeaturePageType==2){
if (this.PostConfig.FeaturePageType == 2) {
x.zoom = 0.40
}else if(this.PostConfig.FeaturePageType==1){
} else if (this.PostConfig.FeaturePageType == 1) {
x.zoom = 0.285
}
})
......@@ -801,10 +806,16 @@
this.FeatureData.ID = tempData.Feature.ID;
this.FeatureData.ConfigId = tempData.Feature.ConfigId;
this.FeatureData.FeatureType = tempData.Feature.FeatureType;
this.FeatureData.TripImageListNew = tempData.Feature.TripImageListNew;
this.FeatureData.FeatureImg = tempData.Feature.FeatureImg;
this.FeatureData.TemplateId = tempData.Feature.TemplateId;
this.FeatureData.FeatureContent = tempData.Feature.FeatureContent;
this.FeatureData.IsUploadDetails = tempData.Feature.IsUploadDetails;
this.FeatureData.IsUploadFeature = tempData.Feature.IsUploadFeature;
this.FeatureData.DetailsImageList = tempData.Feature.DetailsImageList;
this.FeatureData.TripImageList = tempData.Feature.TripImageList;
this.FeatureData.TripImageListNew = tempData.Feature.TripImageListNew;
this.FeatureData.DetailsImageListNew = tempData.Feature.DetailsImageListNew;
//图片列表
this.FeatureData.fileList = tempData.Feature.FeatureImgList;
this.FeatureData.FeatureHtmlJson =
......@@ -928,7 +939,8 @@
this.PostConfig.TeamType = tempData.TeamType;
this.PostConfig.FeaturePageType = tempData.FeaturePageType;
this.PostConfig.FeatureType = tempData.Feature&&tempData.Feature.FeatureType?tempData.Feature.FeatureType:8
this.PostConfig.FeatureType = tempData.Feature && tempData.Feature.FeatureType ? tempData.Feature
.FeatureType : 8
//视频地址
this.PostConfig.VideoStr = tempData.VideoStr;
this.PostConfig.OpenTeamDescribe = tempData.OpenTeamDescribe;
......@@ -941,7 +953,7 @@
this.PostConfig.TripCountryList = tempData.TripCountryList;
this.PostConfig.TripCityList = tempData.TripCityList;
this.PostConfig.TripMapList = tempData.TripMapList;
this.PostConfig.NotQueryCityList=tempData.NotQueryCityList;
this.PostConfig.NotQueryCityList = tempData.NotQueryCityList;
this.PostConfig.MapUrl = tempData.MapUrl;
let arrList = function (list) {
list.forEach(x => {
......@@ -999,12 +1011,12 @@
this.journeyList.NightNum = tempData.NightNum;
this.journeyList.ReturnArriveCityId = tempData.ReturnArriveCityId;
this.journeyList.StartCityId = tempData.StartCityId;
let arrDayList = function(list){
list.forEach(x=>{
let arrDayList = function (list) {
list.forEach(x => {
x.IsBlowUp = false
if(tempData.FeaturePageType==2){
if (tempData.FeaturePageType == 2) {
x.zoom = 0.40
}else if(tempData.FeaturePageType==1){
} else if (tempData.FeaturePageType == 1) {
x.zoom = 0.285
}
})
......@@ -1099,12 +1111,12 @@
'$route'(to, from) { //监听路由是否变化
location.reload()
},
PostDaysTrip:{
PostDaysTrip: {
handler: function (val, oldVal) {
},
deep: true,
immediate:true
immediate: true
}
},
mounted() {
......
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