<template> <div class="travelControlTrip detail-box"> <div class="trip_cover" v-show="pdfLoading" v-loading="pdfLoading"></div> <input type="button" class="travelControlTripBtn" value="下载PDF" @click="toPDF(orderMsg.StartDate + orderMsg.LineteamName+orderMsg.DayNum+'日游')" /> <div id="pdfNode"> <div id='pdfDom' style="padding:0 20px;"> <div id="pdf_1"> <div class="logo-div"> <img :src="vshowJ===true? domainManager().ViittoFileUrl+'/Upload/PictureMaterial/Web/headerImg.jpg': domainManager().ViittoFileUrl+'/Upload/PictureMaterial/Web/headerImg2.jpg'"> </div> <div class="website"> <div class="website-line"></div> </div> <div class="trip-adviser"> <h1 class="trip-nav-title">{{orderMsg.LineteamName}}{{orderMsg.DayNum}}日游</h1> <p>{{title}}</p> </div> <div v-if='vshowA' class="module-title"> <h2>基础信息</h2> <div class="short-line"></div> <div class="english-title">ESSENTIAL INFORMATION</div> </div> <table v-if='vshowA' class="essential"> <tr> <td class="essential-item"> <img src="../assets/img/TravelControlTripIcon1.png" /> <p class="pkey">线路</p> <p class="pvalue">{{orderMsg.LineName}}</p> </td> <td class="essential-item"> <img src="../assets/img/TravelControlTripIcon2.png" /> <p class="pkey">出发日期</p> <p class="pvalue">{{orderMsg.StartDate}}</p> </td> <td class="essential-item"> <img src="../assets/img/TravelControlTripIcon3.png" /> <p class="pkey">返回日期</p> <p class="pvalue">{{orderMsg.EndDate}}</p> </td> </tr> <tr> <td class="essential-item"> <img src="../assets/img/TravelControlTripIcon4.png" /> <p class="pkey">系列</p> <p class="pvalue">{{orderMsg.LineteamName}}</p> </td> <td class="essential-item"> <img src="../assets/img/TravelControlTripIcon5.png" /> <p class="pkey">行程天数</p> <p class="pvalue">{{orderMsg.DayNum}}</p> </td> </tr> </table> <div v-if='vshowL' class="module-title"> <h2>集合地点&联系人</h2> <div class="short-line"></div> <div class="english-title">Collection place & Contacts</div> </div> <table v-if='vshowL' class="collection"> <tr> <td> <div class="collection-item"> <img src="../assets/img/TravelControlTripIcon9.png" />本团领队 <span>{{orderMsg.LeaderName}}/{{orderMsg.LeaderMobile}}</span> </div> </td> <td> <div class="collection-item"> <img src="../assets/img/TravelControlTripIcon10.png" />集合时间 <span>{{orderMsg.GatheringTime}}</span> </div> </td> </tr> <tr> <td> <div class="collection-item"> <img src="../assets/img/TravelControlTripIcon11.png" />机场服务 <span v-if="orderMsg.AirportService!=''">{{orderMsg.AirportService}}</span> <span v-else>{{orderMsg.AirportServicePerson}}/{{orderMsg.AirportServicePhone}}</span> </div> </td> <td> <div class="collection-item"> <img src="../assets/img/TravelControlTripIcon12.png" />集合标识 <span>{{orderMsg.BName}}</span> </div> </td> </tr> <tr> <td> <div class="collection-item"> <img src="../assets/img/TravelControlTripIcon13.png" />紧急联系人 <template> <span v-if='vshowLLR'>{{orderMsg.BranchManager}}/{{orderMsg.MobilePhone}}</span> <span v-else>{{orderMsg.SellName}}/{{orderMsg.SellTel}}</span> </template> </div> </td> <td> <div class="collection-item"> <img src="../assets/img/TravelControlTripIcon14.png" />集合地点 <span>{{orderMsg.GatheringAddress}}</span> </div> </td> </tr> </table> <div v-if='vshowB' class="module-title"> <h2>航班信息</h2> <div class="short-line"></div> <div class="english-title">Flight situation</div> </div> <div v-if='vshowB' class="hangban-info"> <table border="0" align="center" cellpadding="0" cellspacing="0" class="flight_th"> <tbody> <tr> <td width="140">出发时间<span>(当地)</span></td> <td width="160">抵达时间<span>(当地)</span></td> <td width="206">起飞机场</td> <td width="18" class="gap"> </td> <td>抵达机场</td> <td width="18" class="gap"> </td> <td width="140">航空公司</td> <td width="90">航班编号</td> </tr> </tbody> </table> <div class="_hangban_line"></div> <table border="0" align="center" cellspacing="0" cellpadding="0" class="flight_list"> <tbody v-if="priceList.length>0&&priceList[0].priceFlight&&priceList[0].priceFlight.length>0"> <tr v-for="(flight,ftIndex) in priceList[0].priceFlight" :key="ftIndex"> <td width="140"><span class="nth-day">{{flight.startDate.substring(5)}}</span> <span class="num">{{flight.departureTime}}</span></td> <td width="160"><span class="nth-day">{{flight.arriveDate.substring(5)}}</span> <span class="num">{{flight.arrivalTime}}</span></td> <td width="206">{{flight.departureAirPortName}}<span class="citycode"></span></td> <td width="18" class="gap"> </td> <td>{{flight.arrivalAirPortName}}<span class="citycode"></span></td> <td width="18" class="gap"> </td> <td width="140">{{flight.alName}}</td> <td width="90">{{flight.flightNumber}}</td> </tr> </tbody> <tbody v-else> <tr> <td>航班信息未确认</td> </tr> </tbody> </table> </div> <div style="width: 100%;height:20px;"></div> </div> <div id="pdf_2"> <div class="nin-box" v-if="showType==2&&vshowC"> <table> <tbody> <tr> <td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index<3" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}"> </td> </tr> <tr> <td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index>2&&index<6" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}"> </td> </tr> <tr> <td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index>5&&index<=8" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}"> </td> </tr> </tbody> </table> </div> <div class="slider" v-if="showType==1&&loadNone==false&&vshowC"> <img v-for="(i,index) in feature.featureImgList" :key="index" :src="i.url" style="width:100%;"> </div> <div class="zidingyi" v-if="showType==3&&loadNone==false&&vshowC"> <div v-html="feature.featureContent"></div> </div> <div class="template-box" v-if="(showType==4||showType==5)&&loadNone==false&&vshowC"> <div v-if="vshowC" class="module-title"> <h2>行程特色</h2> <div class="short-line"></div> <div class="english-title">Trip characteristics</div> </div> <div v-html="feature.featureHtml"></div> </div> <div id="teamacitvy"> </div> </div> <div v-if='vshowD' class="trip-box"> <div v-if="vshowK"> <div class="trip-block pdf_3_block" v-for="(item,i) in tripList" :key="i"> <div v-if="i==0" class="module-title" id="pdf_3_header"> <h2>行程安排</h2> <div class="short-line"></div> <div class="english-title">Scheduling</div> </div> <oneday v-if="item.details && item.details.length==1" :day='item' :dayNum="item.dayNum" :title="item.title" :isDirect="isDirect"></oneday> <twoday v-if="item.details && item.details.length==2" :day='item' :dayNum="item.dayNum" :title="item.title" :isDirect="isDirect"></twoday> <threeday v-if="item.details && item.details.length==3" :day='item' :dayNum="item.dayNum" :title="item.title" :isDirect="isDirect"></threeday> <fourday v-if="item.details && item.details.length==4" :day='item' :dayNum="item.dayNum" :title="item.title" :isDirect="isDirect"></fourday> <fiveday v-if="item.details && item.details.length>=5" :day='item' :dayNum="item.dayNum" :title="item.title" :isDirect="isDirect"></fiveday> </div> </div> <div v-else> <div class="trip-block pdf_3_block" v-for="(item,i) in tripList" :key="i"> <div v-if="i==0" class="module-title" id="pdf_3_header"> <h2>行程安排</h2> <div class="short-line"></div> <div class="english-title">Scheduling</div> </div> <table class="trip-title"> <tr> <td class="day"> <h3>第<span v-if='item.dayNum<10'>0</span>{{item.dayNum}}天</h3> </td> <td class="desc" v-html="item.title"></td> </tr> </table> <div class="trip_text_details" v-for="(item2,index2) in item.details" :key="index2"> <h3> {{item2.title}} <span class="playInfo-item" v-if='item2.playTimeHour || item2.playTimeMinutes'> <i class="iconfont icon-shijian1"></i>约 <span v-if="item2.playTimeHour">{{item2.playTimeHour}}小时 </span> <span v-if="item2.playTimeMinutes">{{item2.playTimeMinutes}}分钟 </span> </span> </h3> <div class="trip_text_content" v-html="item2.content"></div> </div> <div class="trip_text_trips" v-if='item.tips.length>0'> <h4>温馨提示</h4> <div> <div v-for="(t,k) in item.tips" :key="k" v-html="t.content"></div> </div> </div> <div class="trip_text_restaurant"> <div class="restaurant"> <div> <div class="restaurant-item"> <div class="key"> <img crossOrigin="Anonymous" src='../assets/img/daily_breakfast.png' /> </div> <div class="val">{{item.can.breakfirst}}</div> </div> <div class="restaurant-item"> <div class="key"> <img crossOrigin="Anonymous" src='../assets/img/daily_lunch.png' /> </div> <div class="val">{{item.can.lanuch}}</div> </div> <div class="restaurant-item"> <div class="key"> <img crossOrigin="Anonymous" src='../assets/img/daily_dinner.png' /> </div> <div class="val">{{item.can.dinner}}</div> </div> </div> </div> <div class="restaurant"> <div> <div class="restaurant-item"> <div class="key"> <img crossOrigin="Anonymous" src='../assets/img/daily_hotel-1.png' /> </div> <div class="val" v-if='item.jiu2.length>0'> <span v-for="(t,k) in item.jiu2" :key="k"> {{t.name}} / </span> 或同級 </div> <div class="val" v-else>本日无酒店安排</div> </div> </div> </div> </div> </div> </div> </div> <div id="pdf_4"> <div v-if='vshowE' class="module-title"> <h2>费用</h2> <div class="short-line"></div> <div class="english-title">Expense</div> </div> <div v-if='vshowE' class="expense"> <div class="left">费用包含</div> <div class="right"> <div v-html="feature.feeInclude"></div> </div> <div class="left" style="margin: 15px 0 15px 0;">费用不包含</div> <div class="right"> <div v-html="feature.feeNonInclude"></div> </div> </div> <div class="expense" v-if='dataList.selfpayingList && dataList.selfpayingList.length>0&&vshowE'> <div class="left">自理费用</div> <div class="right"> <table class="expense-table" cellspacing=0 cellpadding=0> <thead> <th>城市</th> <th>活动</th> <th>参考价格</th> <th>说明</th> </thead> <tbody> <tr v-for="(item,i) in dataList.selfpayingList" :key="i"> <td>{{item.cityName}}</td> <td>{{item.itemName}}</td> <td>约{{item.estimatedCost}}</td> <td>{{item.explain}}</td> </tr> </tbody> </table> </div> </div> <div v-if='vshowF' class="module-title"> <h2>购物说明</h2> <div class="short-line"></div> <div class="english-title">Expense</div> </div> <div v-if='vshowF' class="expense"> <div class="left"> <!-- 购物协议 --> </div> <div class="right"> <div v-html="feature.shopRemark"></div> </div> </div> <div class="expense" v-if="dataList.shopList && dataList.shopList.length>0&&vshowF"> <div class="left">购物安排</div> <div class="right"> <table class="expense-table autowidth" cellspacing=0 cellpadding=0> <thead> <th>城市</th> <th>购物店名称</th> <th>预计停留时间</th> </thead> <tbody> <tr v-for="(item,i) in dataList.shopList" :key="i"> <td>{{item.cityName}}</td> <td>{{item.shopName}}</td> <td>{{item.visitTime}}</td> </tr> </tbody> </table> </div> </div> <div style="width: 100%;height:1px;"></div> </div> <div id="pdf_5"> <div v-if='vshowG' class="module-title"> <h2>订单须知</h2> <div class="short-line"></div> <div class="english-title">Tips</div> </div> <div class="expense" v-if="feature.importantTip!=''&&vshowG"> <div class="left">重要提示</div> <div class="right"> <div v-html="feature.importantTip"></div> </div> </div> <div v-if='vshowG' class="expense"> <div class="left">温馨提示</div> <div class="right"> <div v-html="feature.warmTip"></div> </div> </div> <div style="width: 100%;height:1px;"></div> </div> <div id="pdf_6"> <div v-if='vshowH' class="module-title"> <h2>签证</h2> <div class="short-line"></div> <div class="english-title">Visa</div> </div> <div v-if='vshowH' class="expense"> <div class="left">签证须知</div> <div class="right"> <div v-html="feature.visaRemark"></div> </div> </div> <div v-if='vshowI' class="module-title"> <h2>同行备注</h2> <div class="short-line"></div> <div class="english-title">Remark</div> </div> <div v-if='vshowI' class="expense"> <div class="left"></div> <div class="right"> <div v-html="feature.b2BRemark"></div> </div> </div> <div v-if='vshowM' class="module-title"> <h2>旅客信息</h2> <div class="short-line"></div> <div class="english-title">Passenger information</div> </div> <table v-if='vshowM' class="Passenger-table" border="0" cellspacing="2" cellpadding="2"> <tr> <td width="16.6%" class="thClass">姓名</td> <td width="16.6%" class="thClass">英文姓名</td> <td width="16.6%" class="thClass">性别</td> <td width="16.6%" class="thClass">护照号</td> <td width="16.6%" class="thClass">有效期</td> <td width="16.6%" class="thClass">联系电话</td> </tr> <tr v-for="(item,i) in orderMsg.GuestList" :key="i"> <td>{{item.Name}}</td> <td>{{item.EName}}</td> <td>{{item.Sex}}</td> <td>{{item.PassportNo}}</td> <td>{{item.PassportExpiry}}</td> <td>{{item.MobilePhone}}</td> </tr> </table> <div v-if='vshowJ' class="footer-div"> <img :src="domainManager().ViittoFileUrl+'/Upload/PictureMaterial/Web/TravelControlTripIcon20.png'" /> </div> </div> </div> </div> </div> </template> <script> import html2Canvas from 'html2canvas' import oneday from './commonPage/oneday' import twoday from './commonPage/twoday' import threeday from './commonPage/threeday' import fourday from './commonPage/fourday' import fiveday from './commonPage/fiveday' import { setTimeout } from 'timers'; export default { data() { return { pdfLoading: true, vshowA: this.$route.query.vshowA === undefined ? true : this.$route.query.vshowA === 'true', vshowB: this.$route.query.vshowB === undefined ? true : this.$route.query.vshowB === 'true', vshowC: this.$route.query.vshowC === undefined ? true : this.$route.query.vshowC === 'true', vshowD: this.$route.query.vshowD === undefined ? true : this.$route.query.vshowD === 'true', vshowE: this.$route.query.vshowE === undefined ? true : this.$route.query.vshowE === 'true', vshowF: this.$route.query.vshowF === undefined ? true : this.$route.query.vshowF === 'true', vshowG: this.$route.query.vshowG === undefined ? true : this.$route.query.vshowG === 'true', vshowH: this.$route.query.vshowH === undefined ? true : this.$route.query.vshowH === 'true', vshowI: this.$route.query.vshowI === undefined ? true : this.$route.query.vshowI === 'true', vshowJ: this.$route.query.vshowJ === undefined ? true : this.$route.query.vshowJ === 'true', vshowK: this.$route.query.vshowK === undefined ? true : this.$route.query.vshowK === 'true', vshowL: this.$route.query.vshowL === undefined ? true : this.$route.query.vshowL === 'true', vshowM: this.$route.query.vshowM === undefined ? true : this.$route.query.vshowM === 'true', vshowLLR: this.$route.query.vshowLLR === undefined ? true : this.$route.query.vshowLLR === 'true', list: [], tripList: [], priceList: [], feature: {}, dataList: {}, showType: -1, loadNone: false, orderMsg: {}, title: '', isDirect: 1, //是否是直采 0:否,1:是 } }, mounted() { this.init() this.getOrderMsg() setTimeout(() => { this.appendParent() }, 2000) }, methods: { appendParent() { var lables = document.querySelectorAll('#pdf_2 .zidingyi img'); if (lables != null && lables.length > 0) { let parent = lables[0].parentElement; lables.forEach(function (lable, index) { var ele = document.createElement('div') ele.className = 'u-box'; ele.appendChild(lable) parent.appendChild(ele) }); } }, // 生成pdf toPDF: function (title) { this.pdfLoading = true let pageData = document.getElementById('pdfNode').innerHTML let urlObj = this.domainManager() this.$http({ headers: { 'Content-Type': 'application/json' }, method: 'post', url: urlObj.DomainUrl + '/api/file/GetWebHtmlTwo', data: { "msg": pageData } }).then(res => { if (res.data.resultCode === 1) { setTimeout(() => { let sign = title const a = document.createElement('a'); a.setAttribute('download', ''); a.setAttribute('href', urlObj.DomainUrl + '/api/file/DownloadFileForPdf?fileName=' + sign + '.pdf&&fPath=' + res.data.data); a.click(); }, 1000) } else { this.$message.error('PDF获取失败'); } this.pdfLoading = false }).catch(err => { }) }, DateDiff(sDate1, sDate2) { //sDate1和sDate2是2002-12-18格式 var aDate, oDate1, oDate2, iDays aDate = sDate1.split("-") oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为12-18-2002格式 aDate = sDate2.split("-") oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数 return iDays }, getOrderMsg() { this.apipost('sellorder_post_GetPDFOrderEntity', { ID: this.$route.query.orderId }, res => { if (res.data.resultCode == 1) { this.orderMsg = res.data.data this.title = this.orderMsg.StartDate + this.orderMsg.LineteamName + this.orderMsg.DayNum + '日游' document.title = this.title } }, err => {}) }, init() { this.apipost('b2b_get_GetB2BTravelInfoNoDes', { configId: this.$route.query.id, cityId: this.$route.query.cityId, tcid: this.$route.query.tcid, orderId: this.$route.query.orderId, isClick:1//不算统计 }, res => { if (res.data.resultCode == 1) { let data = (res.data.data); this.tripList = res.data.data.dayList this.feature = res.data.data.feature this.showType = this.feature.featureType; this.isDirect = data.isDirect; if (data.priceList.length > 0) { data.priceList[0].priceFlight.forEach((x, i) => { if (i == 0) { x.dayNum = 1; if (x.departureTime < x.arrivalTime) { x.daodaDay = 1; } else { x.daodaDay = 2; } } else { x.dayNum = this.DateDiff(data.priceList[0].priceFlight[0].startDate, x.startDate); if (x.departureTime < x.arrivalTime) { x.daodaDay = x.dayNum; } else { x.daodaDay = x.dayNum + 1; } } }) } this.priceList = data.priceList; this.dataList = data; this.tripList.forEach((x, j) => { let useDinnerTypeBy = '' let jin = [], jiu = [], jiu2 = [], jiao = [], dadian = [], tips = [], activy = [], can = { breakfirst: '敬请自理', lanuch: '敬请自理', dinner: '敬请自理' } x.dayArray.forEach((y, index) => { if (y.type == 7 && y.childItem.title != '') { let obj = { title: y.childItem.title, content: y.childItem.description, img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ? y.childItem.imaArray[0] .url : '', ticketName: '', playTimeHour: null, playTimeMinutes: null, url: '' } dadian.push(obj) } else if (y.type == 1 && y.childItem.subTraffic.length > 0) { let title = '' y.childItem.subTraffic.forEach((z, i) => { title += z.startCityName if (z.arrivalType == 1) { title += '<i class="iconfont icon-feiji"></i>' } else if (z.arrivalType == 2) { title += '<i class="iconfont icon-bus"></i>' } else if (z.arrivalType == 3) { title += '<i class="iconfont icon-icon31"></i>' } else { title += '<i class="iconfont icon-gaotiedongche"></i>' } if (i + 1 == y.childItem.subTraffic.length) { title += z.arrivalCityName } }) let obj = { title: title, content: y.childItem.description, img: '', ticketName: '', playTimeHour: null, playTimeMinutes: null, url: '' } jiao.push(obj) } else if (y.type == 2 && y.childItem.couponsName != '' && y.childItem.imaArray.length > 0) { let obj = { title: y.childItem.couponsName, content: y.childItem.description, img: y.childItem.imaArray[0].url, ticketName: y.childItem.couponsTicketName, playTimeHour: y.childItem.playTimeHour, playTimeMinutes: y.childItem.playTimeMinutes, scenicJson: y.childItem.scenicJson, url: y.childItem.url } jin.push(obj) } else if (y.type == 3 && y.childItem.hotelName != '' && y.childItem.imaArray.length > 0) { let obj = { title: y.childItem.hotelName, content: y.childItem.description, img: y.childItem.imaArray[0].url, ticketName: '', playTimeHour: null, playTimeMinutes: null, url: y.childItem.url } jiu.push(obj) } else if (y.type == 4) { if (y.childItem.useDinnerType == "1") { can.breakfirst = y.childItem.dinnerName } else if (y.childItem.useDinnerType == "2") { can.lanuch = y.childItem.dinnerName } else if (y.childItem.useDinnerType == "3") { can.dinner = y.childItem.dinnerName } } else if (y.type == 5) { let obj = { title: '自由活动', content: y.childItem.description, img: '', ticketName: '', playTimeHour: null, playTimeMinutes: null, url: '' } activy.push(obj) } else if (y.type == 6) { let obj = { title: y.childItem.title, content: y.childItem.description, img: '', ticketName: '', playTimeHour: null, playTimeMinutes: null, url: '' } tips.push(obj) } if (y.type == 3) { jiu2.push({ name: y.childItem.hotelName, url: y.childItem.url }); useDinnerTypeBy = y.childItem.useDinnerType } }) if (can.breakfirst == '敬请自理' && useDinnerTypeBy.indexOf('1') != -1) { can.breakfirst = '酒店内享用早餐' } else if (can.breakfirst == '') { can.breakfirst = '方便游玩敬请自理' } if (can.lanuch == '敬请自理' && useDinnerTypeBy.indexOf('2') != -1) { can.lanuch = '酒店自助' } else if (can.lanuch == '') { can.lanuch = '方便游玩敬请自理' } if (can.dinner == '敬请自理' && useDinnerTypeBy.indexOf('3') != -1) { can.dinner = '酒店自助' } else if (can.dinner == '') { can.dinner = '方便游玩敬请自理' } x.can = can let details = []; x.tips = tips x.jiu2 = jiu2 if (jin.length > 0) { details = jin } else if (jiu.length > 0) { details = jiu } else if (dadian.length > 0) { details = dadian } else if (jiao.length > 0) { if (j == this.tripList.length - 1) { let obj = { title: '温暖的家', content: '感谢您参加本次行程,期待下次与您相遇', img: '' } details.push(obj) } else { details = jiao } } else if (activy.length > 0) { details = activy } x.title = dadian.length > 0 && dadian[0].title && dadian[0].title != '' ? dadian[0].title : (jiao .length > 0 ? jiao[0].title : '集合出发') x.details = details if (x.details.length == 0) { if (j == 0) { let obj = { title: '集合出发', content: '向着远方的目标出发起飞', img: '', ticketName: '', playTimeHour: null, playTimeMinutes: null } details.push(obj) } else if (j == this.tripList.length - 1) { let obj = { title: '温暖的家', content: '感谢您参加本次行程,期待下次与您相遇', img: '', ticketName: '', playTimeHour: null, playTimeMinutes: null } details.push(obj) } } else { if (x.title == '集合出发') { x.details.forEach(xc => { if (xc.title !== undefined) x.title = xc.title + '~' }) if (x.title == '集合出发') { if (j > 0 && j < tripList.length - 1) x.title = '自由活动' } else { x.title = x.title.substring(0, x.title.length - 1) } } } x.islast = (j + 1) == this.tripList.length this.$set(this.tripList, j, x) }) } this.$nextTick(function () { this.pdfLoading = false; let imgs = document.getElementsByTagName('img'); for (let i = 0; i < imgs.length; i++) { document.getElementsByTagName('img')[i].removeAttribute('crossOrigin') } }) }, err => {}) }, }, components: { oneday, twoday, threeday, fourday, fiveday }, } </script> <style> @import url('../assets/css/tripIndex.css'); @import url('../assets/css/detail.css'); @media print { html, sbody { background: none !important; } .travelControlTrip { margin: 0px !important; padding: 0px !important; } .travelControlTripBtn { display: none !important; } .travelControlTripLayer { display: none !important; } #pdfNode { margin: 0px !important; } .trip-block { border: none !important; } @page { margin: 6.5mm; } } </style>