Skip to content

A
Athena
Commit 44413693 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

合并代码

parents 15f62537 e6a3bf10
Show whitespace changes
Inline Side-by-side
Showing with 1088 additions and 390 deletions
src/components/visa/SchedProduct.vue 0 → 100644
View file @ 44413693
<template>
<div class="SchedProduct">
<el-row :gutter="20">
<el-col :span="16" :offset="4">
<div style="margin:15px 0">
<el-row class="top">
<el-col :span="8">
<div v-show="step>0" class="line bule"></div>
<!-- <div class="line grey"></div> -->
<div class="text">
<span class="bottom">
<span class="circle" :class="step>0?'bule_back':''">
<i class="iconfont icon-qianzheng1"></i>
</span>
<p :class="step>0?'bule_active':''">选择产品</p>
</span>
</div>
</el-col>
<el-col :span="8">
<div v-show="step>1" class="line bule"></div>
<div v-show="step<=1" class="line grey"></div>
<div class="text">
<span class="bottom">
<span class="circle" :class="step>1?'bule_back':''">
<i class="iconfont icon-tianxie"></i>
</span>
<p :class="step>1?'bule_active':''">填写与核对</p>
</span>
</div>
</el-col>
<el-col :span="8">
<div v-show="step>2" class="line bule"></div>
<div v-show="step<=2" class="line grey"></div>
<div class="text">
<span class="bottom">
<span class="circle" :class="step>2?'bule_back':''">
<i class="iconfont icon-tijiao"></i>
</span>
<p :class="step>2?'bule_active':''">成功提交</p>
</span>
</div>
</el-col>
</el-row>
</div>
<el-row>
<el-col :span="19">
<div style="margin-bottom:15px;">
<ul class="chooseCp">
<li>
<p style="font-weight:bold;font-size:18px;">日本旅游签证【成都送签】·拒签全退+顺丰回邮+可停留30天</p>
<p style="color:#666666;margin-top:6px">出发日期：{{guestinfo.startdate}}
<span v-if="guestinfo.man>0">{{guestinfo.man}}成人 </span>
<span v-if="guestinfo.child>0"> {{guestinfo.child}}儿童</span>
</p>
</li>
<li style="border-top:1px solid #E5E5E5">
<span style="font-size:16px;font-weight:bold">签证</span>
<span style="margin-left:15px">{{guestinfo.startdate}}</span>
<span style="margin-left:15px;font-weight:400">日本旅游签证【成都送签】·拒签全退+顺丰回邮</span>
</li>
</ul>
<!-- 信息 -->
<div style="margin:20px 0" v-show="step==2">
<el-form :model="formInline" label-width="80px">
<!-- 联系人信息 -->
<div style="padding-bottom:10px;background:#fff;">
<div style="font-size:12px;background:#DDDDDD;height:36px;line-height:36px;padding:0 6px;margin-bottom:15px">
<span style="color:#333333;font-size:16px;font-weight:bold">联系人信息</span>
<span style="color:#666666;margin-left:15px">为方便客服及时与您联系，请准确填写联系人信息</span>
</div>
<el-form-item label="姓名" prop="contactName" :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }">
<el-input size="small" v-model="formInline.contactName" placeholder="请输入联系人姓名"></el-input>
</el-form-item>
<el-form-item label="手机号码">
<el-select size="small" style="width:100px" v-model="formInline.region" placeholder="手机号码">
<el-option label="中国大陆86" value=""></el-option>
</el-select>
<el-input size="small" style="width:260px;margin-left:5px" v-model="formInline.user" placeholder="必填，用于接收短信"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input size="small" v-model="formInline.user" placeholder="可不填，用于接收订单确认消息"></el-input>
<span class="color_form"> 如不填写，也可至订单详情查看相关信息</span>
</el-form-item>
</div>
<!-- 旅客信息 -->
<div style="padding-bottom:10px;background:#fff;margin-top:20px">
<div style="font-size:12px;background:#DDDDDD;height:36px;line-height:36px;padding:0 6px">
<span style="color:#333333;font-size:16px;font-weight:bold">旅客信息</span>
<span style="color:#666666;margin-left:15px">为了您能顺利出行，请务必确认所填姓名、性别与所持证件一致</span>
</div>
<div class="guestInfo">
<div class="guestInfo_left">
<p style="font-weight:600">旅客1</p>
<span style="font-size:12px;background:#6EA3F1;color:#fff;border-radius:2px">成人</span>
<span style="font-size:12px;background:##56D098;color:#fff;border-radius:2px">儿童</span>
</div>
<el-form-item label="中文姓名">
<el-input size="small" v-model="formInline.user" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="英文姓名">
<el-input style="width:120px" size="small" v-model="formInline.user" placeholder="姓(拼音或英文)"></el-input>
<el-input style="width:120px;margin-left:5px" size="small" v-model="formInline.user" placeholder="名(拼音或英文)"></el-input>
</el-form-item>
<el-form-item label="证件类型">
<el-input size="small" v-model="formInline.user" placeholder="可不填"></el-input>
</el-form-item>
<el-form-item label="客户类型">
<el-select size="small" style="width:100px" v-model="formInline.region" placeholder="请选择">
<el-option label="在职" value=""></el-option>
</el-select>
</el-form-item>
<el-form-item label="手机号码">
<el-select size="small" style="width:100px" v-model="formInline.region" placeholder="手机号码">
<el-option label="中国大陆86" value=""></el-option>
</el-select>
<el-input size="small" style="width:260px;margin-left:5px" v-model="formInline.user" placeholder="手机号码"></el-input>
<span class="color_form"> 请至少输入一位出行旅客的手机号码</span>
</el-form-item>
</div>
</div>
<!-- 预订信息 -->
<div style="padding-bottom:10px;background:#fff;">
<div style="font-size:12px;background:#DDDDDD;height:36px;line-height:36px;padding:0 6px;margin-bottom:15px">
<span style="color:#333333;font-size:16px;font-weight:bold">预订信息</span>
</div>
<ul class="yd_info">
<li>
<span class="span_1">发票信息</span>
<span class="span_2" style="color:#5893EB">【修改】</span>
<span class="span_2">不需要发票</span>
</li>
<li>
<span class="span_1" >配送方式</span>
<span @click="adressStatus=!adressStatus" class="span_2 span_border">顺丰快递</span>
<span class="span_2" style="text-decoration:underline;color:#5893EB">配送清单</span>
</li>
<div v-show="adressStatus" class="adress">
<p style="color:#666666;font-weight:600;margin-top:10px">选择常用地址</p>
<p style="color:#E95252;font-weight:600;margin-top:7px;">
<i class="iconfont icon-tishi"></i>
出签后将按照您填写的地址投递出签护照，请务必保证地址准确性。</p>
<div style="margin-top:15px;">
<el-form-item label="收件人">
<el-input size="small" v-model="formInline.user" placeholder="中文/英文"></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input size="small" v-model="formInline.user" placeholder="请填写联系电话"></el-input>
</el-form-item>
<el-form-item label="邮寄地址">
<el-select size="small" style="width:100px" v-model="formInline.region" placeholder="选择省">
<el-option label="在职" value=""></el-option>
</el-select>
<el-select size="small" style="width:100px;margin-left:5px" v-model="formInline.region" placeholder="选择市">
<el-option label="在职" value=""></el-option>
</el-select>
<br>
<el-input size="small" v-model="formInline.user" placeholder="详细地址"></el-input>
</el-form-item>
</div>
</div>
</ul>
</div>
</el-form>
</div>
<div style="padding:0 15px;background:#fff;border:1px solid #ECECEC;font-size:12px;height:50px;line-height:50px">
<span @click="StepStetus(1)" v-show="step==2" style="color:#5893EB;cursor: pointer;">&lt;返回上一步</span>
<span style="float:right">订单金额：￥
<span style="color:#FF680B;font-size:18px;">489</span>起
<el-button @click="StepStetus(2)" v-show="step==1" size="small" class="btn_common">下一步</el-button>
<el-button @click="SecondStep" v-show="step==2" size="small" class="btn_common">去支付</el-button>
</span>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="4">
<ul class="ChargesDetails">
<li style="background:#FFE7AE">
<span style="color:#EE881B;font-size:16px;">费用明细</span>
<span>查看明细</span>
</li>
<li style="border-bottom:1px solid #FFE7AE;font-weight:600">
<span>基本团费</span>
<span>￥480</span>
</li>
<li style="color:#FF680B;font-weight:600">
<span>总额</span>
<span>￥<span style="font-size:18px;">480</span></span>
</li>
</ul>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
formInline:{
contactName:'',
},
mode:true,
step:1,
guestinfo:JSON.parse(sessionStorage.guestinfo),
adressStatus:true,
}
},
mounted () {
},
created(){
console.log(sessionStorage.guestinfo)
if(sessionStorage.guestinfo){
this.InitPersonnum()
}
},
methods: {
InitPersonnum(){
},
StepStetus(step){
this.step=step;
},
SecondStep(){
},
}
}
</script>
<style>
.SchedProduct .bule_back{
background: #5893EB!important;
}
.SchedProduct .bule_active{
color:#5893EB!important;
font-weight:bold;
}
.SchedProduct .btn_common{
margin-left:30px;border:none;background:#EE4454;color:#fff;
}
.SchedProduct .color_form{
color: #999999;
}
.SchedProduct .yd_info .el-form-item{
margin-left: 0;
}
.SchedProduct .yd_info .adress:before {
position: absolute;
content: "";
top: -10px;
left: 25px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #D2D2D2;
}
/* 白色覆盖*/
.SchedProduct .yd_info .adress:after {
position: absolute;
content: "";
/*减少两像素*/
top: -8px;
left: 25px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.SchedProduct .yd_info .adress{
position: relative;
width:663px;
background:rgba(255,255,255,1);
border:1px solid #D2D2D2;
margin-left:82px;
padding: 10px;
box-sizing: border-box;
}
.SchedProduct .yd_info li .span_border{
border: 1px solid #5893EB;
border-top:4px solid #5893EB;
font-weight: 700;
width: 100px;
display: inline-block;
height: 36px;
line-height: 30px;
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
.SchedProduct .yd_info li .span_2{
margin-left:35px;
}
.SchedProduct .yd_info li .span_1{
font-weight: 700;
}
.SchedProduct .yd_info li{
padding:10px 0;
}
.SchedProduct .yd_info{
padding:0 10px;
font-size: 12px;
}
.SchedProduct .el-form-item__label{
color:#333333;
}
.SchedProduct .guestInfo{
position: relative;
margin-top: 15px;
}
.SchedProduct .guestInfo_left{
position: absolute;
font-size: 14px;
top: 20px;
left: 20px;
}
.SchedProduct .el-input__inner{
border-radius: 0;
}
.SchedProduct .el-form-item .el-input{
width: 300px;
}
.SchedProduct .el-select .el-input{
width: 100%!important;
}
.SchedProduct .el-form-item{
/* width:460px; */
margin-left: 100px;
}
.SchedProduct .ChargesDetails li span:nth-child(2){
float: right;
}
.SchedProduct .ChargesDetails li{
padding: 10px 6px;
}
.SchedProduct .ChargesDetails{
color: #000000;
background: #fff;
border: 1px solid #FFE7AE;
font-size: 12px;
}
.SchedProduct ul{
padding: 0;
}
.SchedProduct .chooseCp li{
padding:15px 0;
}
.SchedProduct .chooseCp{
color: #000000;
background: #fff;
border: 1px solid #FFE7AE;
box-sizing: border-box;
padding: 0 15px;
font-size:12px;
}
.SchedProduct{
font-family: "PingFang"
}
.SchedProduct li{
list-style: none;
}
.SchedProduct .bottom{
display: inline-block;
padding: 0 15px;
background: #f5f5f5;
}
.SchedProduct .top .el-col-8{
position: relative;
}
.SchedProduct p{
margin: 0;
}
.SchedProduct .text .circle{
background: #999999;
display: inline-block;
width: 48px;
height: 48px;
border-radius: 50%;
line-height: 48px;
text-align: center;
}
.SchedProduct .text .iconfont{
font-size: 28px;
color: #fff;
}
.SchedProduct .text p{
margin: 6px 0;
}
.SchedProduct .text{
text-align: center;
font-size: 14px;
z-index: 1;
position: relative;
}
.SchedProduct .bule{
background: #5893EB;
}
.SchedProduct .grey{
background: #CCCCCC;
}
.SchedProduct .line{
width: 100%;
height: 2px;
position: absolute;
top: 25px;
left:0;
}
.SchedProduct{
background: #f5f5f5;
}
.SchedProduct .el-step__icon{
background: #f5f5f5;
}
.SchedProduct .icon-chanpin{
font-size: 30px;
}
</style>
\ No newline at end of file
src/components/visa/VisaHomePage.vue
View file @ 44413693
......@@ -100,60 +100,24 @@
<div class="Qzlist">
<div v-for="item in timeList" :key="item.id">
<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="">
<img :src="item.countryIcon" alt="">
</div>
<div>
<p class="title">韩国签证</p>
<p class="money">￥12000</p>
<p class="title">{{item.countryName}}</p>
<p class="money">￥{{item.visaPrice | priceFormat}}</p>
<p>
<span class="gq">个签</span>
<span class="gq">
<span v-if="item.visaType==1">个签</span>
<span v-if="item.visaType==2">团签</span>
</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>
<!-- 热门国家 -->
......@@ -176,15 +140,16 @@
<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 @click="goUrlVisaList(item.countryId)" v-for="item in hotcountry" :key="item.id">
<img :src="item.countryImage[0]" alt="">
<div class="country_side">
<p class="country_img"><img src="../../assets/img/visa/rb.png" alt=""></p>
<p class="country_text">日本</p>
<p class="country_img"><img :src="item.countryIcon" alt=""></p>
<p class="country_text">{{item.countryName}}</p>
</div>
<transition name="el-zoom-in-center">
<div v-show="CountryHover" class="popular_coun_hover">
<p style="font-size:20px">韩国</p>
<div class="popular_coun_hover">
<p class="country_img"><img :src="item.countryIcon" alt=""></p>
<p style="font-size:20px">{{item.countryName}}</p>
<div class="coun_hover_visa">
<div>
<img src="../../assets/img/visa/gq.png" alt="">
......@@ -199,37 +164,10 @@
</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 @click="goUrlVisaList" class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo1"></i></el-button>
<el-button @click="goUrlVisaList(0)" class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo1"></i></el-button>
</div>
</div>
</el-col>
......@@ -256,51 +194,17 @@
<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="el-col" v-for="item in hotvisa" :key="item.id">
<img :src="item.countryIcon" 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>
<p class="visa_title">{{item.name}}</p>
<p class="visa_money">￥{{item.visaPrice | priceFormat}}</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-gengduo1"></i></el-button>
<el-button @click="goUrlVisaList(0)" class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo1"></i></el-button>
</div>
</div>
</el-col>
......@@ -344,17 +248,84 @@ export default {
swipers:[],
isLoading:true,
companyId:-1,
searchText:''
searchText:'',
timeLimited:{
pageSize:4,
pageIndex:1,
companyId:parseInt(window.localStorage.site),
},
timeList:[],
hotcountry:[],
msg:{
companyId:parseInt(window.localStorage.site),
pageIndex:1,
pageSize:5,
},
hotvisamsg:{
companyId:parseInt(window.localStorage.site),
pageIndex:1,
pageSize:10,
},
hotvisa:[],
}
},
mounted () {
this.companyId=this.$store.state.site
this.changeScreen()
this.loadSwiper()
this.TimeLimited();
this.GetVisaCountry();
this.Gethotvisa();
},
methods: {
goUrlVisaList(){
this.$router.push({path: `/Visalist`});
goUrlVisaList(id){
this.$router.push({path: `/Visalist?id=${id}`});
},
Gethotvisa(){
this.apiJavaPost(
"/api/b2b/visa/getHotVisaProduct",
this.msg,
res => {
if (res.data.resultCode == 1) {
this.hotvisa=res.data.data.pageData;
} else {
this.Error(res.data.message);
}
},
null
);
},
// 获取签证国家
GetVisaCountry(){
this.apiJavaPost(
"/api/b2b/visa/getVisaHotCountry",
this.msg,
res => {
// console.log("res",res)
if (res.data.resultCode == 1) {
this.hotcountry=res.data.data.pageData;
} else {
this.Error(res.data.message);
}
},
null
);
},
// 限时优惠
TimeLimited(){
this.apiJavaPost(
"/api/b2b/visa/getVisaProductFlashSale",
this.timeLimited,
res => {
// console.log(res);
if (res.data.resultCode == 1) {
this.timeList=res.data.data.pageData;
} else {
this.Error(res.data.message);
}
},
null
);
},
leave(){
this.CountryHover=false;
......@@ -438,22 +409,17 @@ export default {
margin-top: 25px;
display: flex;
padding-right: 10px;
justify-content: space-between;
justify-content: space-around;
box-sizing: border-box;
}
.popular_coun_hover{
.popular_coun_hover .country_img{
width: 56px;
height: 37px;
position: absolute;
bottom:0;
width:90%;
height:90%;
left: -5px;
background: #6BA0EE;
border-radius: 4px;
color: #fff;
padding: 20px 0 0 30px;
box-sizing: border-box;
right: 10px;
top: 0;
}
.visa_flex .el-col .visa_money{
color: #EE4454;
font-size: 14px;
......@@ -467,7 +433,7 @@ export default {
.visa_flex .el-col img{
position: absolute;
width: 74px;
height: 74px;
height: 48px;
}
.visa_flex .visa_content{
padding-left: 85px;
......@@ -494,6 +460,8 @@ export default {
margin-bottom: 15px;
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.country_btn:hover{
......@@ -520,25 +488,50 @@ export default {
width: 50px;
right: 20px;
top: 0;
opacity: 1;
}
.row_flex{
width: 100%;
padding-top:20px;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
}
.popular_coun_hover{
position: absolute;
bottom:0;
width:90%;
height:90%;
left: -5px;
background: #6BA0EE;
border-radius: 4px;
color: #fff;
padding: 20px 0 0 30px;
box-sizing: border-box;
/* display: none; */
transition: all 0.5s;
opacity: 0;
}
.row_flex>div{
position: relative;
width:18%;
/* width: 224px;
height: 224px; */
/* display: inline-block; */
cursor: pointer;
transition: all .5s linear;
}
.row_flex>div img{
width: 100%;
height: 100%;
}
.row_flex>div:hover .popular_coun_hover{
/* display: block; */
opacity: 1;
transition: all 0.5s linear;
}
.row_flex>div:hover .country_side{
opacity: 0;
transition: all 0.3s linear;
}
.gq{
background: #6EA3F1;
color: #fff;
......@@ -562,21 +555,26 @@ export default {
.visahome .Qzlist>div:hover{
cursor: pointer;
background: url('../../assets/img/visa/Qzlist.png') no-repeat center center;
background-size:100% 100%;
transition: all 0.5s;
}
.visahome .Qzlist>div img{
display: inline-block;
width: 73px;
height: 48px;
}
.visahome .Qzlist{
display: flex;
justify-content: space-between;
font-family: "PingFang"
justify-content: space-around;
font-family: "PingFang";
flex-wrap: wrap;
}
.visahome .Qzlist>div{
display: inline-flex;
width: 299px;
height: 190px;
align-items: center;
transition: all 0.5s;
}
.dashed{
display: block;
......
src/components/visa/Visaitemsdetails.vue
View file @ 44413693
......@@ -14,20 +14,53 @@
<img src="../../assets/img/visa/Qzlist.png" alt="">
</el-col>
<el-col style="font-size:12px" :span="18">
<p style="font-weight:400;font-size:18px">日本旅游签证【成都送签】·拒签全退+顺丰回邮+可停留30天</p>
<p><span class="visa_type">个签</span></p>
<p style="font-weight:400;font-size:18px;margin:0">日本旅游签证【成都送签】·拒签全退+顺丰回邮+可停留30天</p>
<!-- <p><span class="visa_type">个签</span></p> -->
<p class="visa_des">
<span>签证类型：<span>个人旅游类</span></span>
<span>送签底：<span>成都</span></span>
<span>入境次数：<span>多次</span></span>
<span>签证类型：</span><span>个人旅游类</span>
</p>
<p>有效时间：<span style="color:#7e7e7e">2019年3月22日</span></p>
<p style="text-align:right">
<span style="font-size:12px;margin:0 20px">价格：￥<span style="color:#FF680B;font-size:18px">489</span><span style="color:#FF680B;font-size:12px">起</span></span>
<el-button size="small" style="border:none;background:#EE4454;color:#fff;">立即购买</el-button>
<p class="visa_des">
<span>办理时长：</span><span>收齐材料后需10个工作日</span>
</p>
<p class="visa_des">
<span>入境次数：</span><span>15天</span>
</p>
<p class="visa_des">
<span>可停留天数：</span><span>15天</span>
</p>
<p class="visa_des">
<span>签证有效期：</span><span>15天</span>
</p>
</el-col>
</el-row>
<!-- 人数 -->
<div class="person">
<el-form ref="form" :model="peopleform" label-width="80px">
<el-form-item label="出发">
<el-date-picker size="small"
v-model="peopleform.startdate"
type="date"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions0"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="成人" prop="man" :rules="[{ type: 'number', message: '类型必须为数字'}]">
<el-input size="small" v-model.number="peopleform.man"></el-input>
</el-form-item>
<el-form-item label="儿童" prop="child" :rules="[{ type: 'number', message: '类型必须为数字'}]">
<el-input size="small" v-model.number="peopleform.child"></el-input>
</el-form-item>
<el-form-item label="0-12周岁">
&nbsp;
</el-form-item>
<el-form-item style="float:right">
<span style="font-size:12px;margin:0 35px">价格：￥<span style="color:#FF680B;font-size:18px">489</span><span style="color:#FF680B;font-size:12px">起</span></span>
<el-button @click="Gourl" size="small" style="border:none;background:#EE4454;color:#fff;">立即购买</el-button>
</el-form-item>
</el-form>
</div>
<div ref="navs">
<el-row :class="changeNav?'tips_fixed':''" class="tips">
<el-col :span="4">
......@@ -181,191 +214,228 @@
</template>
<script>
export default {
data () {
data() {
return {
scrollobj:null,
navs:[
'ydxz',
'fysm',
'qzcl',
'wxts',
'ydlc',
],
crtnav:"ydxz",
changeNav:false,
scrollobj: null,
navs: ["ydxz", "fysm", "qzcl", "wxts", "ydlc"],
crtnav: "ydxz",
changeNav: false,
peopleform: {
man:0,
child:0
},
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
}
},
};
},
mounted() {
this.scrollobj=document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
this.scrollobj = document.getElementsByClassName("el-scrollbar__wrap")[0];
this.scrollobj.addEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll(){
try {
if(this.scrollobj.scrollTop>this.$refs.navs.offsetTop){
this.changeNav=true
}else{
this.changeNav=false
Gourl(){
console.log("peopleform",this.peopleform);
let personnum=this.peopleform.man+this.peopleform.child;
if(!this.peopleform.startdate || this.peopleform.startdate==null){
this.Error("请选择出发时间！")
return;
}
let current=''
this.navs.forEach(x=>{
let t=document.getElementById(x).offsetTop
if(t<=this.scrollobj.scrollTop+18){
current=x
}
})
this.crtnav=current
} catch (error) {
if(personnum<1){
this.Error("旅客人数至少为1")
return;
}
sessionStorage.guestinfo=JSON.stringify(this.peopleform)
this.$router.push({path: `/SchedProduct`});
},
goScroll(id){
this.scrollobj.scrollTop=document.getElementById(id).offsetTop+screen.availHeight-1200;
handleScroll() {
try {
if (this.scrollobj.scrollTop > this.$refs.navs.offsetTop) {
this.changeNav = true;
} else {
this.changeNav = false;
}
let current = "";
this.navs.forEach(x => {
let t = document.getElementById(x).offsetTop;
if (t <= this.scrollobj.scrollTop + 18) {
current = x;
}
});
this.crtnav = current;
} catch (error) {}
},
goScroll(id) {
this.scrollobj.scrollTop =
document.getElementById(id).offsetTop + screen.availHeight - 1200;
}
}
}
};
</script>
<style scoped>
.tips_fixed{
<style>
@import "../../assets/css/reset.css";
.Visaitemsdetails .person{
background:#fff;
margin-top: 15px;
padding: 15px 0;
padding-right: 25px;
box-sizing: border-box;
}
.Visaitemsdetails .el-input__inner{
border-radius: 0px;
}
.Visaitemsdetails .el-form-item{
display: inline-block;
margin-bottom: 0;
}
.Visaitemsdetails .tips_fixed {
position: fixed;
top: 0;
width:100%;
box-shadow:0px 4px 8px 0px rgba(107,107,107,0.18);
width: 100%;
box-shadow: 0px 4px 8px 0px rgba(107, 107, 107, 0.18);
left: 0;
margin-top: 0!important;
margin-top: 0 !important;
}
.tips_active{
background: #EE4454;
color: #fff!important;
.Visaitemsdetails .tips_active {
background: #ee4454;
color: #fff !important;
}
.process_title .ch{
font-size:18px;color:#000000
.Visaitemsdetails .process_title .ch {
font-size: 18px;
color: #000000;
}
.process_title span{
display:inline-block;width:32px;height:2px;background:rgba(231,62,109,1);
.Visaitemsdetails .process_title span {
display: inline-block;
width: 32px;
height: 2px;
background: rgba(231, 62, 109, 1);
}
.process_title .en{
color:#CCCCCC;font-size:12px;
.Visaitemsdetails .process_title .en {
color: #cccccc;
font-size: 12px;
}
.process .baseline{
.Visaitemsdetails .process .baseline {
position: absolute;
top:8px;
height:1px;
background:#999999;
top: 8px;
height: 1px;
background: #999999;
width: 100%;
z-index:0;
z-index: 0;
}
.process .number_circle{
.Visaitemsdetails .process .number_circle {
position: absolute;
display: inline-block;
width:21px;
width: 21px;
left: 46%;
top: -5px;
height:21px;
background:rgba(51,51,51,1);
border-radius:50%;
z-index:200;
color:#fff;
height: 21px;
background: rgba(51, 51, 51, 1);
border-radius: 50%;
z-index: 200;
color: #fff;
font-size: 12px;
line-height: 21px;
}
.process .s_line{
.Visaitemsdetails .process .s_line {
display: inline-block;
width:1px;
height:18px;
background:rgba(51,51,51,1);
width: 1px;
height: 18px;
background: rgba(51, 51, 51, 1);
}
.process .base_content{
padding-top:24px;
.Visaitemsdetails .process .base_content {
padding-top: 24px;
width: 20%;
text-align: center;
display: inline-block;
}
.process .div1 .back_span .iconfont{
.Visaitemsdetails .process .div1 .back_span .iconfont {
font-size: 30px;
color: #fff;
}
.process .div1 .back_span{
width:81px;
height:81px;
background:rgba(102,102,102,1);
border-radius:50%;
.Visaitemsdetails .process .div1 .back_span {
width: 81px;
height: 81px;
background: rgba(102, 102, 102, 1);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.process{
padding:20px 0;
margin-top:20px;
.Visaitemsdetails .process {
padding: 20px 0;
margin-top: 20px;
background: #fff;
}
.process p{
margin:0;
.Visaitemsdetails .process p {
margin: 0;
padding: 0;
}
.Visaitemsdetails .tips .tips_div:hover{
background: #EE4454;
.Visaitemsdetails .tips .tips_div:hover {
background: #ee4454;
color: #fff;
cursor: pointer;
}
.Visaitemsdetails .tips{
.Visaitemsdetails .tips {
margin-top: 20px;
background: #fff;
padding:15px;
padding: 15px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.Visaitemsdetails .tips .tips_div p{
.Visaitemsdetails .tips .tips_div p {
margin-top: 4px;
}
.Visaitemsdetails .tips .tips_div{
.Visaitemsdetails .tips .tips_div {
text-align: center;
width:150px;
border:1px solid rgba(229,229,229,1);
border-radius:4px;
padding:10px 0;
color: #7E7E7E;
width: 150px;
border: 1px solid rgba(229, 229, 229, 1);
border-radius: 4px;
padding: 10px 0;
color: #7e7e7e;
}
.Visaitemsdetails .tips p{
margin:0;
.Visaitemsdetails .tips p {
margin: 0;
font-size: 14px;
}
.visa_des span span{
.visa_des span:nth-child(1){
display: inline-block;
width: 100px;
}
.visa_des span:nth-child(2){
color: #7e7e7e;
/* margin-left:20px */
}
.visa_des span{
margin-right:35px;
.Visaitemsdetails .details p{
margin:10px 0;
}
.Visaitemsdetails .details .visa_type{
padding:2px 4px;
background: #6EA3F1;
.Visaitemsdetails .details .visa_type {
padding: 2px 4px;
background: #6ea3f1;
font-size: 12px;
color:#fff;
color: #fff;
}
.Visaitemsdetails .details img{
.Visaitemsdetails .details img {
width: 310px;
}
.Visaitemsdetails .details{
.Visaitemsdetails .details {
padding: 20px;
box-sizing: border-box;
background: #fff;
}
.Visaitemsdetails{
.Visaitemsdetails {
background: #f5f5f5;
padding-bottom:20px;
padding-bottom: 20px;
}
.Visaitemsdetails .icon-gengduo1{
.Visaitemsdetails .icon-gengduo1 {
font-size: 12px;
color: #7e7e7e;
margin:0 4px;
margin: 0 4px;
}
</style>
src/components/visa/Visalist.vue
View file @ 44413693
......@@ -4,23 +4,15 @@
<el-row :gutter="20">
<el-col :span="18" :offset="3">
<ul class="top_ul">
<li>
<img src="../../assets/img/visa/rb.png" alt="">
<p>日本签证</p>
<li @click="SelectCountry(item.countryId)" :class="listmsg.visaCountryId==item.countryId?'visa_active':''" v-for="item in hotcountry" :key="item.countryId">
<img :src="item.countryIcon" alt="" :onerror="errorImg">
<p>{{item.countryName}}</p>
</li>
<li>
<img src="../../assets/img/visa/rb.png" alt="">
<p>日本签证</p>
</li>
<li>
<img src="../../assets/img/visa/rb.png" alt="">
<p>日本签证</p>
</li>
<li>
<div class="top_ul_li_last"><i class="iconfont icon-diandian"></i></div>
<!-- <li>
<img src="../../assets/img/visa/more.png" alt="">
<p>陆续开通中</p>
</li>
</li> -->
</ul>
</el-col>
</el-row>
......@@ -32,74 +24,106 @@
<div>
<div class="select_title">常住地</div>
<ul class="select_ul">
<li>成都(15)</li>
<li>巴啦啦大(15)</li>
<li @click="SelectCity(0)" :class="listmsg.companyId==0?'visa_active':''">不限</li>
<li @click="SelectCity(item.cityId)" :class="listmsg.companyId==item.cityId?'visa_active':''" v-for="(item,index) in cityList" :key="item.cityId" v-if="index<12">{{item.cityName}}({{item.productCount}})</li>
<ul v-show="selectcon">
<li>成都(15)</li>
<li @click="SelectCity(item.cityId)" :class="listmsg.companyId==item.cityId?'visa_active':''" v-for="(item,index) in cityList" :key="item.cityId" v-if="index>11">{{item.cityName}}({{item.productCount}})</li>
</ul>
</ul>
<span class="czd" @click="ChangeSelect">{{selectcontext}}<i :class="selectcon?'rolate':''" class="iconfont icon-moban"></i></span>
</div>
<div>
<div class="select_title">签证类型</div>
<ul class="select_ul">
<li>个人旅游(15)</li>
<li>赠送照片打印(15)</li>
</ul>
<el-row>
<el-col :span="7">
<div class="select_title" style="top:15px">签证类型</div>
<div class="select_ul">
<el-select multiple size="mini" style="width:90%" v-model="tagType1" clearable placeholder="请选择">
<el-option v-if="item.tagType==1"
v-for="item in tagItem"
:key="item.id"
:label="item.tagName"
:value="item.id">
</el-option>
</el-select>
</div>
<div>
</el-col>
<el-col :span="7">
<div class="select_title" style="top:15px">产品标签</div>
<div class="select_ul">
<el-select multiple size="mini" style="width:400px" v-model="value4" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
<el-select multiple size="mini" style="width:90%" v-model="tagType2" clearable placeholder="请选择">
<el-option v-if="item.tagType==2"
v-for="item in tagItem"
:key="item.id"
:label="item.tagName"
:value="item.id">
</el-option>
</el-select>
</div>
</div>
<div style="border:none">
</el-col>
<el-col :span="7">
<div class="select_title" style="top:15px">特色服务</div>
<div class="select_ul">
<el-select multiple size="mini" style="width:400px" v-model="value4" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
<el-select multiple size="mini" style="width:90%" v-model="tagType3" clearable placeholder="请选择">
<el-option v-if="item.tagType==3"
v-for="item in tagItem"
:key="item.id"
:label="item.tagName"
:value="item.id">
</el-option>
</el-select>
</div>
</div>
</el-col>
<el-col :span="3" style="text-align:right">
<el-button @click="GetList" size="small" style="background:rgba(238,68,84,1);color:#fff;border:none">查询</el-button>
</el-col>
</el-row>
</div>
<!-- 列表 -->
<div class="datalist">
<p style="padding:8px;background:#DDDDDD;font-size:12px">
<div class="datalist" v-loading="loading">
<p style="padding:0 8px;background:#DDDDDD;font-size:12px">
<span style="display:inline-block;">时间最近
<span class="noben_span"><i class="iconfont icon-moban"></i></span>
<span class="caret-wrapper">
<i @click="OrderByPrice(1)" :class="listmsg.orderByPrice==1?'borderbottom':''" class="sort-caret ascending"></i>
<i @click="OrderByPrice(2)" :class="listmsg.orderByPrice==2?'bordertop':''" class="sort-caret descending"></i>
</span>
<!-- <span class="noben_span"><i class="iconfont icon-moban" :class="listmsg.orderByPrice==2?'rolate':''"></i></span> -->
</span>
<span style="display:inline-block;margin-left:15px">受理时长
<span class="caret-wrapper">
<i @click="OrderByBookAdvance(1)" :class="listmsg.orderByBookAdvance==1?'borderbottom':''" class="sort-caret ascending"></i>
<i @click="OrderByBookAdvance(2)" :class="listmsg.orderByBookAdvance==2?'bordertop':''" class="sort-caret descending"></i>
</span>
</span>
<span style="margin-left:15px">价格</span>
</p>
<div class="content_list">
<el-row class="row_content">
<div class="content_list" v-if="datalist.length>0">
<el-row class="row_content" v-for="item in datalist" :key="item.id">
<el-col :span="3">
<img src="../../assets/img/visa/country1.png" alt="">
<img :src="item.coverImage[0].url" alt="">
</el-col>
<el-col class="div_2" :span="16" style="font-size:12px">
<p @click="GourlItem" class="visa_title" style="font-size:16px;color:#000000">日本旅游签证[成都送签]·拒签全退+顺丰回邮+可停留30天</p>
<p><span class=tag>单次</span><span class=tag>简化材料</span></p>
<p>出发日期：最早04-06出发</p>
<p>提前预定：5个工作日</p>
<el-col class="div_2" :span="14" style="font-size:12px">
<p @click="GourlItem" class="visa_title" style="font-size:16px;color:#000000">{{item.name}}</p>
<p><span v-for="(tag,index) in item.tagList" :key="index+100" class=tag>{{tag}}</span></p>
<p>出发日期：最早{{item.startDate}}出发</p>
<p>提前预定：{{item.bookAdvance}}个工作日</p>
</el-col>
<el-col :span="2" style="color:#FF680B;font-size:16px;text-align:right">
<span>￥489</span><span style="font-size:12px">起</span>
<el-col :span="4" style="color:#FF680B;font-size:16px;">
<span>￥{{item.visaPrice | priceFormat}}</span><span style="font-size:12px">起</span>
</el-col>
<el-col :span="3" style="text-align:right">
<el-button @click="GourlItem" size="small" style="border:1px solid #FF6633;color:#FF6633;">立即预定</el-button>
</el-col>
</el-row>
<el-pagination style="margin:15px;text-align:right"
background
layout="prev, pager, next"
@current-change="CurrentChange"
:total="total">
</el-pagination>
</div>
<div v-if="datalist.length==0" style="padding:15px 0;text-align:center">
<div class="empty-data"><i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
</div>
</div>
</el-col>
......@@ -110,32 +134,150 @@
export default {
data () {
return {
loading:false,
errorImg: 'this.src="' + require('assets/img/default.png') + '"',
selectcon:false,
selectcontext:"展开",
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value4: ''
msg:{
companyId:0,
pageIndex:1,
pageSize:15,
},
hotcountry:[],
cityList:[],
tagItem:[],
tagType1:[],
tagType2:[],
tagType3:[],
listmsg:{
visaCountryId:0,
companyId:0,//常住地
tags:[],
orderByPrice:0,
orderByBookAdvance:0,
pageIndex:1,
pageSize:10,
},
total:0,
datalist:[],
}
},
mounted() {
created(){
if(window.localStorage.site){
this.msg.companyId=parseInt(window.localStorage.site)
}
if(this.$route.query.id){
this.listmsg.visaCountryId=Number(this.$route.query.id);
}
},
mounted() {
this.GetVisaCountry();
// this.GetHotVisaProduct();
},
methods: {
SelectCountry(id){
this.listmsg.visaCountryId=id;
this.GetVisaProListChoose();
},
CurrentChange(val){
this.listmsg.pageIndex=val;
this.GetList();
},
GetList(){
this.loading=true;
let arr= this.tagType1.concat(this.tagType2);
this.listmsg.tags=arr.concat(this.tagType3);
this.apiJavaPost(
"/api/b2b/visa/getVisaProductList",
this.listmsg,
res => {
this.loading=false;
// console.log(res);
if (res.data.resultCode == 1) {
this.datalist=res.data.data.pageData;
this.total=res.data.data.count;
this.datalist.forEach(item=>{
item.tagList=item.tagTames.split(",");
})
} else {
this.Error(res.data.message);
}
},
null
);
},
OrderByPrice(num){
this.listmsg.orderByPrice=num;
this.GetList();
},
OrderByBookAdvance(num){
this.listmsg.orderByBookAdvance=num;
this.GetList();
},
SelectCity(cityId){
this.listmsg.companyId=cityId;
},
// 获取签证产品国家筛选子项
GetVisaProListChoose(){
let msg=Object.assign({},this.msg);
msg.visaCountryId=this.listmsg.visaCountryId;
this.apiJavaPost(
"/api/b2b/visa/getProductCountryChildSearchItem",
msg,
res => {
// console.log(res);
if (res.data.resultCode == 1) {
this.cityList=res.data.data.cityList;
this.tagItem=res.data.data.tagItem;
} else {
this.Error(res.data.message);
}
},
null
);
},
// 获取签证国家
GetVisaCountry(){
this.apiJavaPost(
"/api/b2b/visa/getVisaHotCountry",
this.msg,
res => {
if (res.data.resultCode == 1) {
this.hotcountry=res.data.data.pageData;
if(this.listmsg.visaCountryId==0){
this.listmsg.visaCountryId=this.hotcountry[0].countryId;
}
this.GetVisaProListChoose();
this.GetList();
} else {
this.Error(res.data.message);
}
},
null
);
},
// 获取热门签证产品列表
GetHotVisaProduct(){
this.apiJavaPost(
"/api/b2b/visa/getHotVisaProduct",
this.msg,
res => {
console.log(res);
if (res.data.resultCode == 1) {
} else {
this.Error(res.data.message);
}
},
null
);
},
GourlItem(){
this.$router.push({path: `/Visaitemsdetails`});
},
......@@ -148,8 +290,50 @@ export default {
}
</script>
<style scoped>
<style>
@import "../../assets/css/reset.css";
.el-pagination .btn-next, .el-pagination .btn-prev{
width: 28px!important;
height: 28px!important;
}
.visaList .bordertop{
border-top-color:#EE4454!important;
}
.visaList .borderbottom{
border-bottom-color:#EE4454!important;
}
.visaList .caret-wrapper{
display: inline-flex;
flex-direction: column;
align-items: center;
height: 34px;
width: 24px;
vertical-align: middle;
cursor: pointer;
overflow: initial;
position: relative;
}
.visaList .sort-caret {
width: 0;
height: 0;
border: 5px solid transparent;
position: absolute;
left: 7px;
}
.visaList .sort-caret.ascending {
border-bottom-color: #c0c4cc;
top: 5px;
}
.visaList .sort-caret.descending {
border-top-color: #c0c4cc;
bottom: 7px;
}
.visaList .visa_active{
color: #EE4454!important;
font-weight: bold;
}
.content_list .row_content .visa_title:hover{
color: #EE4454!important;
text-decoration: underline;
......@@ -180,6 +364,8 @@ export default {
color:#666666;
font-weight: 400;
font-size: 12px;
margin-right:5px;
padding: 0 2px;
}
.visaList .datalist .content_list img{
width: 120px;
......@@ -201,10 +387,12 @@ export default {
margin-top: -5px!important;
transition: all 0.2s;
}
.select_ul li:hover{
color: #EE4454!important;
}
.select_ul li{
display: inline-block;
padding-bottom:6px;
width: 100px;
width: 96px;
cursor: pointer;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
......@@ -272,7 +460,6 @@ ul{
}
.visaList .top_ul li{
font-size:12px;
font-weight:400;
color:#666666;
display: inline-block;
text-align: center;
......@@ -280,13 +467,14 @@ ul{
margin-right:20px;
}
.visaList .top_ul li img{
display: inline-block;
width: 62px;
height: 41px;
}
li{
list-style: none;
}
p{
.visaList p{
margin:0;
}
.visaList{
......
src/router.js
View file @ 44413693
......@@ -307,6 +307,15 @@ export default new Router({
title: "签证详情"
}
},
{
path: "/SchedProduct",
name: "SchedProduct",
component: resolve =>
require(["@/components/visa/SchedProduct"], resolve),
meta: {
title: "签证预定"
}
},
{
path: "/IndependentTravel",
......
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