Skip to content

A
Athena
Commit e65b6d24 authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

签证

parent e5dbff32
Show whitespace changes
Inline Side-by-side
Showing with 603 additions and 10 deletions
src/App.vue
View file @ e65b6d24
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_74m8au7e9xx.css'; @import '//at.alicdn.com/t/font_863923_jvgf79ozet9.css';
@import './assets/global/global.css'; @import './assets/global/global.css';
body,html{ body,html{
padding: 0px; padding: 0px;
......
src/components/Ticket/Pay.vue
View file @ e65b6d24
...@@ -192,7 +192,7 @@ export default { ...@@ -192,7 +192,7 @@ export default {
"OnlinePay_post_GetCodeUrlForAirB2B", "OnlinePay_post_GetCodeUrlForAirB2B",
this.code, this.code,
res => { res => {
console.log(res) // console.log(res)
this.codeLoading=false; this.codeLoading=false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.codeInfo=res.data.data; this.codeInfo=res.data.data;
......
src/components/Ticket/TicketList.vue
View file @ e65b6d24
...@@ -267,10 +267,13 @@ ...@@ -267,10 +267,13 @@
<div class="describe"> <div class="describe">
<p class="info">航班信息</p> <p class="info">航班信息</p>
<div class="content" v-for="(flight,i) in item.flightList" :key="i"> <div class="content" v-for="(flight,i) in item.flightList" :key="i">
<p v-if="i>0" style="text-align:center">中转</p>
<p v-if="i>0" style="text-align:center;margin:0;color:#FF6633;margin-bottom:10px">中转</p>
<div style="vertical-align:middle"> <div style="vertical-align:middle">
<img class="imgsrc" :src="item.airlineUrl" alt=""> <img class="imgsrc" :src="item.airlineUrl" alt="">
<span style="vertical-align:middle">{{flight.alName}}</span> <span style="vertical-align:middle;">{{flight.alName}}
&nbsp;{{flight.flightDate | YMD}}
</span>
</div> </div>
<ul class="list_cn"> <ul class="list_cn">
<li> <li>
...@@ -282,10 +285,12 @@ ...@@ -282,10 +285,12 @@
</ul> </ul>
</div> </div>
<div class="content" v-for="(back,k) in item.backFlightList" :key="k.id"> <div class="content" v-for="(back,k) in item.backFlightList" :key="k.id">
<p v-if="k>0" style="text-align:center">中转</p> <p v-if="k>0" style="text-align:center;margin:0;color:#FF6633;margin-bottom:10px">中转</p>
<div style="vertical-align:middle"> <div style="vertical-align:middle">
<img class="imgsrc" :src="item.airlineUrl" alt=""> <img class="imgsrc" :src="item.airlineUrl" alt="">
<span style="vertical-align:middle">{{back.alName}}</span> <span style="vertical-align:middle">
{{back.alName}} {{back.flightDate | YMD}}
</span>
</div> </div>
<ul class="list_cn"> <ul class="list_cn">
<li> <li>
...@@ -668,7 +673,7 @@ export default { ...@@ -668,7 +673,7 @@ export default {
this.loading=true; this.loading=true;
this.choose_info.qFlightDateStart=moment(this.choose_info.qFlightDateStart).format("YYYY-MM-DD"); this.choose_info.qFlightDateStart=moment(this.choose_info.qFlightDateStart).format("YYYY-MM-DD");
this.apiJavaPost('/api/dmc/airticket/getB2BAirticketList',this.choose_info,res=>{ this.apiJavaPost('/api/dmc/airticket/getB2BAirticketList',this.choose_info,res=>{
// console.log(res); console.log(res);
this.loading=false; this.loading=false;
if(res.data.resultCode==1){ if(res.data.resultCode==1){
...@@ -896,7 +901,7 @@ export default { ...@@ -896,7 +901,7 @@ export default {
display: inline-block; display: inline-block;
width:5px; width:5px;
height:5px; height:5px;
background:rgba(51,51,51,1); background:#333333;
border:2px solid rgba(255, 255, 255, 1); border:2px solid rgba(255, 255, 255, 1);
border-radius:50%; border-radius:50%;
margin:0 15px; margin:0 15px;
...@@ -929,6 +934,7 @@ li{ ...@@ -929,6 +934,7 @@ li{
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
text-align:center; text-align:center;
margin:0;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
......
src/components/visa/VisaHomePage.vue 0 → 100644
View file @ e65b6d24
<template>
<div class="visahome">
<div class="mall-swiper" style="margin-bottom:0">
<div :height="swiperHeight">
<img src='../../assets/img/visa/visahome.png'>
</div>
<div class="search-box" :style="{'width':searchBoxWidth,'left':searchBoxLeft}">
<div class="chosen-item">旅游</div>
<div class="search-content">
<el-row>
<el-col :span="2" style="text-align:center">
<i class="iconfont icon-search"></i>
</el-col>
<el-col :span="15">
<input type="text" v-model='searchText' class="s-input" placeholder="快速搜索如出游国家，目的地名称等" @keyup.enter='goSearch'/>
</el-col>
<el-col :span="6" :offset="1" style="text-align:right;line-height:29px;">
<el-button type="danger" size="mini" @click="goSearch">立即搜索</el-button>
</el-col>
</el-row>
</div>
</div>
</div>
<el-row :gutter="20">
<el-col :span="18" :offset="3">
<ul class="visa_process">
<li style="width:110px;background:#FDF5F7;padding:0 10px;box-shadow:3px 0px 6px 0px rgba(102,102,102,0.45);">
<div style="padding-top:10px">
<img src="../../assets/img/visa/visa.png" alt="">
</div>
<div style="position:absolute;top:18px;right:6px">
签证流程
</div>
</li>
<li>
<div>
<img src="../../assets/img/visa/1.png" alt="">
</div>
<div>
<p class="fold">网上提交订单</p>
<p class="grey">自动下单 操作便捷</p>
</div>
</li>
<li>
<i class="iconfont icon-diandian"></i>
</li>
<li>
<div>
<img src="../../assets/img/visa/2.png" alt="">
</div>
<div>
<p class="fold">寄交签证资料</p>
<p class="grey">陈列清单 快速递交</p>
</div>
</li>
<li>
<i class="iconfont icon-diandian"></i>
</li>
<li>
<div>
<img src="../../assets/img/visa/3.png" alt="">
</div>
<div>
<p class="fold">送签（免签）</p>
<p class="grey">XXXXXXXXXXX</p>
</div>
</li>
<li>
<i class="iconfont icon-diandian"></i>
</li>
<li>
<div>
<img src="../../assets/img/visa/4.png" alt="">
</div>
<div>
<p class="fold">出签&配送</p>
<p class="grey">陈列清单 快速递交</p>
</div>
</li>
</ul>
<!-- 限时优惠 -->
<div style="margin-top:50px">
<p style="text-align:center">
<img src="../../assets/img/visa/youhui.png" alt="">
</p>
<el-row style="padding:6px 0">
<el-col :span="10" style="">
<span class="dashed"></span>
</el-col>
<el-col :span="4" style="text-align:center;font-family:PingFang;color:#000000;font-size:24px;">限时优惠</el-col>
<el-col :span="10">
<span class="dashed"></span>
</el-col>
</el-row>
<p style="text-align:center;font-family:PingFang;font-size:14px;">Special Offers</p>
<div class="Qzlist">
<div>
<div>
<img src="../../assets/img/visa/rd.png" alt="">
</div>
<div>
<p class="title">瑞典签证</p>
<p class="money">￥12000</p>
<p>
<span class="gq">个签</span>
</p>
</div>
</div>
<div>
<div>
<img src="../../assets/img/visa/rb.png" alt="">
</div>
<div>
<p class="title">日本签证</p>
<p class="money">￥12000</p>
<p>
<span class="gq">个签</span>
</p>
</div>
</div>
<div>
<div>
<img src="../../assets/img/visa/hg.png" alt="">
</div>
<div>
<p class="title">韩国签证</p>
<p class="money">￥12000</p>
<p>
<span class="gq">个签</span>
</p>
</div>
</div>
<div>
<div>
<img src="../../assets/img/visa/rb.png" alt="">
</div>
<div>
<p class="title">瑞典签证</p>
<p class="title">(电商专用)</p>
<p class="money" style="padding-top:0">￥12000</p>
<p>
<span class="gq">个签</span>
</p>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 热门国家 -->
<div style="padding:30px 0;background:#f5f5f5;margin-top:15px">
<el-row :gutter="20">
<el-col :span="18" :offset="3">
<!-- 限时优惠 -->
<div>
<p style="text-align:center">
<img src="../../assets/img/visa/youhui.png" alt="">
</p>
<el-row style="padding:6px 0">
<el-col :span="10" style="">
<span class="dashed"></span>
</el-col>
<el-col :span="4" style="text-align:center;font-family:PingFang;color:#000000;font-size:24px;">热门国家</el-col>
<el-col :span="10">
<span class="dashed"></span>
</el-col>
</el-row>
<p style="text-align:center;font-family:PingFang;font-size:14px;">Popular countries</p>
<div class="row_flex" type="flex" justify="space-between">
<div @mouseenter="enter" @mouseleave="leave">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="country_side">
<p class="country_img"><img src="../../assets/img/visa/rb.png" alt=""></p>
<p class="country_text">日本</p>
</div>
<transition name="el-zoom-in-center">
<div v-show="CountryHover" class="popular_coun_hover">
<p style="font-size:20px">韩国</p>
<div class="coun_hover_visa">
<div>
<img src="../../assets/img/visa/gq.png" alt="">
<p style="font-size:12px;">个签</p>
</div>
<div>
<img src="../../assets/img/visa/tq.png" alt="">
<p style="font-size:12px;">团签</p>
</div>
</div>
</div>
</transition>
</div>
<div>
<img src="../../assets/img/visa/country1.png" alt="">
<div class="country_side">
<p class="country_img"><img src="../../assets/img/visa/hg.png" alt=""></p>
<p class="country_text">韩国</p>
</div>
</div>
<div>
<img src="../../assets/img/visa/country3.png" alt="">
<div class="country_side">
<p class="country_img"><img src="../../assets/img/visa/rb.png" alt=""></p>
<p class="country_text">法国</p>
</div>
</div>
<div>
<img src="../../assets/img/visa/country4.png" alt="">
<div class="country_side">
<p class="country_img"><img src="../../assets/img/visa/rb.png" alt=""></p>
<p class="country_text">意大利</p>
</div>
</div>
<div>
<img src="../../assets/img/visa/country5.png" alt="">
<div class="country_side">
<p class="country_img"><img src="../../assets/img/visa/rb.png" alt=""></p>
<p class="country_text">瑞典</p>
</div>
</div>
</div>
<div style="text-align:center;padding-top:15px;">
<el-button class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo"></i><i class="iconfont icon-gengduo"></i></el-button>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 热门签证 -->
<div style="margin:20px 0">
<el-row :gutter="20">
<el-col :span="18" :offset="3">
<div>
<p style="text-align:center">
<img src="../../assets/img/visa/youhui.png" alt="">
</p>
<el-row style="padding:6px 0">
<el-col :span="10" style="">
<span class="dashed"></span>
</el-col>
<el-col :span="4" style="text-align:center;font-family:PingFang;color:#000000;font-size:24px;">热门签证</el-col>
<el-col :span="10">
<span class="dashed"></span>
</el-col>
</el-row>
<p style="text-align:center;font-family:PingFang;font-size:14px;">Popular Visa</p>
<div class="visa_flex" type="flex" justify="space-between">
<div class="el-col">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="visa_content">
<p class="visa_title">荷兰商务签证</p>
<p class="visa_money">￥12000</p>
</div>
</div>
<div class="el-col">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="visa_content">
<p class="visa_title">荷兰商务签证</p>
<p class="visa_money">￥12000</p>
</div>
</div>
<div class="el-col">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="visa_content">
<p class="visa_title">荷兰商务签证</p>
<p class="visa_money">￥12000</p>
</div>
</div>
<div class="el-col">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="visa_content">
<p class="visa_title">荷兰商务签证</p>
<p class="visa_money">￥12000</p>
</div>
</div>
<div class="el-col">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="visa_content">
<p class="visa_title">荷兰商务签证</p>
<p class="visa_money">￥12000</p>
</div>
</div>
<div class="el-col">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="visa_content">
<p class="visa_title">荷兰商务签证</p>
<p class="visa_money">￥12000</p>
</div>
</div>
</div>
<div style="text-align:center;padding-top:15px;">
<el-button class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo"></i><i class="iconfont icon-gengduo"></i></el-button>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
CountryHover:false,
swiperHeight:'500px',
searchBoxWidth:'580px',
searchBoxLeft:'270px',
swipers:[],
isLoading:true,
companyId:-1,
searchText:''
}
},
mounted () {
this.companyId=this.$store.state.site
this.changeScreen()
this.loadSwiper()
},
methods: {
leave(){
this.CountryHover=false;
},
enter(){
this.CountryHover=true;
},
goSearch(){
if(this.searchText!=''){
let query={keywords:encodeURIComponent(this.searchText)}
this.$router.push({
path:'search',
query
});
}else{
this.Error('请输入搜索关键词')
}
},
loadSwiper(){
if(this.companyId!=-1){
this.apipost('b2b_get_HomeSlide',{'companyId':this.companyId},r=>{
this.swipers=r.data.data
this.isLoading=false
},null)
}
},
changeScreen(){
console.log("屏幕分辨率为："+screen.width+"*"+screen.height)
let h=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
console.log(h)
this.swiperHeight=h/3.84+'px'
this.searchBoxWidth=h/3.01+'px'
this.searchBoxLeft=(h-(h/3.01))/2+'px'
}
}
}
</script>
<style scoped>
@import url('../../assets/mall/swiper.css');
.coun_hover_visa div:hover{
background: #5079ED;
border: 1px solid #5079ED;
}
.coun_hover_visa div img{
margin:12px 0 4px 0;
width: 26px!important;
height: 19px!important;
}
.coun_hover_visa div{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
border-radius: 50%;
border:1px solid #fff;
}
.coun_hover_visa{
margin-top: 25px;
display: flex;
padding-right: 10px;
justify-content: space-between;
box-sizing: border-box;
}
.popular_coun_hover{
position: absolute;
bottom:0;
width:224px;
height: 214px;
left: -5px;
background: #6BA0EE;
border-radius: 4px;
color: #fff;
padding: 20px 0 0 30px;
box-sizing: border-box;
}
.visa_flex .el-col .visa_money{
color: #EE4454;
font-size: 14px;
}
.visa_flex .el-col .visa_title{
color: #333333;
font-size: 12px;
padding:10px 0;
}
.visa_flex .el-col img{
position: absolute;
width: 74px;
height: 74px;
}
.visa_flex .visa_content{
padding-left: 85px;
box-sizing: border-box;
font-family: "PingFang";
min-height: 80px;
}
.visa_flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.visa_flex .el-col{
position: relative;
width: 20%;
margin-bottom: 15px;
}
.country_btn:hover{
background: #EE4454;
color: #fff!important;
border: 1px solid #EE4454;
}
.visahome .icon-gengduo{
font-size: 12px;
}
.row_flex .country_side .country_img{
height: 32px;
}
.row_flex .country_side .country_text{
color: #fff;
background: rgba(0,0,0,0.4);
text-align:center;
font-size: 12px;
font-family: "PingFang";
padding:2px 0;
}
.row_flex .country_side{
position: absolute;
width: 50px;
right: 20px;
top: 0;
}
.row_flex{
width: 100%;
padding-top:20px;
justify-content: space-between;
display: flex;
}
.row_flex>div{
position: relative;
width: 224px;
height: 224px;
display: inline-block;
cursor: pointer;
}
.row_flex>div img{
width: 100%;
height: 100%;
}
.gq{
background: #6EA3F1;
color: #fff;
padding:2px 10px;
font-size: 12px;
}
.visahome .Qzlist .money{
color: #333333;
font-size: 16px;
font-weight:700;
padding:20px 0 6px 0;
}
.visahome .Qzlist .title{
font-size: 14px;
}
.visahome .Qzlist>div>div{
padding-top:50px;
vertical-align: middle;
display: inline-block;
margin:0 10px;
}
.visahome .Qzlist>div:hover{
cursor: pointer;
background: url('../../assets/img/visa/Qzlist.png') no-repeat center center;
}
.visahome .Qzlist>div img{
width: 73px;
height: 48px;
}
.visahome .Qzlist{
display: flex;
justify-content: space-between;
font-family: "PingFang"
}
.visahome .Qzlist>div{
display: inline-block;
width: 299px;
height: 190px;
}
.dashed{
display: block;
width: 100%;
height: 1px;
border-top:1px dashed #DDDDDD;
margin-top:16px;
}
.visa_process .icon-diandian{
display: inline-block;
font-size: 25px;
color: #DDDDDD;
padding-top: 10px;
}
.visa_process li>div p{
margin: 0
}
.visa_process li>div .grey{
color: #999999;
}
.visa_process li>div .fold{
font-weight: 700;
color: #000000;
}
.visahome li{
list-style: none;
}
.visa_process{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.visa_process li{
vertical-align: middle;
font-family: "PingFang";
font-size: 12px;
position: relative;
}
.visa_process li>div{
display: inline-block;
}
.visahome ul,p{
margin:0;
padding:0;
}
</style>
\ No newline at end of file
src/main.js
View file @ e65b6d24
...@@ -12,6 +12,7 @@ import echarts from 'echarts' ...@@ -12,6 +12,7 @@ import echarts from 'echarts'
import VueLazyload from 'vue-lazyload' import VueLazyload from 'vue-lazyload'
import htmlToPdf from './assets/utils/htmlToPdf' import htmlToPdf from './assets/utils/htmlToPdf'
import commonUtils from './assets/utils/commonUtils' import commonUtils from './assets/utils/commonUtils'
import moment from 'moment'
// 使用Vue.use()方法就会调用工具方法中的install方法 // 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf) Vue.use(htmlToPdf)
...@@ -69,6 +70,12 @@ Vue.filter('priceFormat', function (value) { ...@@ -69,6 +70,12 @@ Vue.filter('priceFormat', function (value) {
} }
return x1 + x2; return x1 + x2;
}) })
// 时间格式YYYY-MM-DD
Vue.filter("YMD", function (date) {
return moment(date).format("YYYY-MM-DD");
})
new Vue({ new Vue({
router, router,
store, store,
......
src/router.js
View file @ e65b6d24
...@@ -202,7 +202,18 @@ export default new Router({ ...@@ -202,7 +202,18 @@ export default new Router({
} }
}, },
] {
path: "/VisaHomePage",
name: "VisaHomePage",
component: resolve =>
require(["@/components/visa/VisaHomePage"], resolve),
meta: {
title: "签证"
} }
},
]
},
] ]
}); });
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