Skip to content

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

update

parent fbda2dbb
Hide whitespace changes
Inline Side-by-side
Showing with 742 additions and 0 deletions
src/components/DependentTravel/CustomizedTourism.vue 0 → 100644
View file @ d20dd21a
<template>
<div class="CustomizedTourism">
<div class="w1200" v-loading="loading">
<div class="step_head">
<p class="step_head_title">{{dataInfo.departureName}}-{{dataInfo.destinationNames}}/{{dataInfo.playDays}}天*定制游</p>
<p style="padding:20px 0;color:#333333;font-size:12px">需求编号：{{customId}}</p>
<el-steps :active="actice_step">
<el-step title="提交需求" icon="iconfont icon-yuandian"></el-step>
<el-step title="设计方案" icon="iconfont icon-yuandian"></el-step>
<el-step title="签订合同" icon="iconfont icon-yuandian"></el-step>
<el-step title="恭喜成团" icon="iconfont icon-yuandian"></el-step>
<el-step title="成团结束" icon="iconfont icon-yuandian"></el-step>
</el-steps>
</div>
<div>
<!-- 第一步 -->
<div v-if="actice_step==1" class="commonStyle Submitdemand">
<p class="title">需求单信息</p>
<ul class="dz_info_list">
<li><em>出游性质</em><p id="travelNature">个人定制</p></li>
<li><em>出发地</em><p id="departure">{{dataInfo.departureName}}</p></li>
<li><em>目的地</em><p id="destination">{{dataInfo.destinationNames}}</p></li>
<li><em>往返时间</em><p id="startDate">出发日期{{dataInfo.startDate | YMD}} ; 返回日期{{dataInfo.backDate | YMD}}</p></li>
<li><em>游玩天数</em><p id="journeyDay">{{dataInfo.playDays}}天</p></li>
<li><em>出行人数</em><p id="personNum"><span v-if="dataInfo.audltNumber>0">成人{{dataInfo.audltNumber}} </span>
<span v-if="dataInfo.childrenNumber>0"> 儿童{{dataInfo.childrenNumber}}</span></p></li>
<li><em>人均预算</em><p id="budget">{{dataInfo.budget}}</p></li>
</ul>
<p class="title" style="border-top:1px solid #DCDCDC">我的联系信息</p>
<ul class="dz_info_list">
<li><em>姓名</em><p id="travelNature">{{dataInfo.contact}}</p></li>
<li><em>手机号码</em><p id="departure">{{dataInfo.phoneNumber}}</p></li>
<li><em>电子邮箱</em><p id="destination">{{dataInfo.email}}</p></li>
<li><em>微信</em><p id="startDate">{{dataInfo.weChat}}</p></li>
</ul>
</div>
<!-- 第二步 -->
<div v-show="actice_step==2">
<DesignScheme :customId="customId" :tcid="tcid"></DesignScheme>
</div>
<div class="commonStyle Signcontract" v-if="actice_step==3 || actice_step==4 || actice_step==5">
<p class="title">订单信息</p>
<ul class="orderinfo">
<li>
<img style="width:200px;height:132px;" src="../../assets/img/visa/activy.jpg" alt="">
</li>
<li style="margin-left:25px;">
<p class="pfR" style="font-size:16px;">{{dataInfo.departureName}}-{{dataInfo.destinationNames}}/{{dataInfo.playDays}}天*定制游</p>
<p> 价格：<span class="pfR" style="color:#FB8F0F;font-size:22px">{{dataInfo.budget}}</span>人/起</p>
<p>
<span><em>行程描述</em>：{{dataInfo.travelSummary}}</span>
<span><em>参团人数</em>：{{dataInfo.childrenNumber+dataInfo.audltNumber}}人（{{dataInfo.audltNumber}}大{{dataInfo.childrenNumber}}小）</span>
</p>
<p>
<span><em>需求包含</em>：{{dataInfo.provideItem}}</span>
<span><em>游玩天数</em>：{{dataInfo.playDays}}天</span>
</p>
<p><em>放完日期</em>：出发日期（{{dataInfo.startDate | YMD}}）</p>
</li>
<li style="text-align:right;float:right">
<img style="width:50px;height:50px;border-radius:50%" :src="dataInfo.salesPhoto" alt="">
<p style="text-align:center">{{dataInfo.salesName}}</p>
</li>
</ul>
<p class="title">合同签订</p>
<div class="htqd">
<div v-for="(item,index) in dataInfo.contractFile" :key="index+200">
<p><a href="#">xxxxxxxxxxxx合同</a></p>
<p style="margin-top: 17px"><span class="downorder">
<span style="background:#B4B4B4;padding: 0px 3px;"><i class="iconfont icon-xiazai"></i></span>
下载合同</span></p>
</div>
</div>
<span class="yct" v-if="dataInfo.orderStatus==5">
<img src="../../assets/img/travel/yct.png" alt="">
</span>
<span class="yct" v-if="dataInfo.orderStatus==6">
<img src="../../assets/img/travel/yjs.png" alt="">
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import DesignScheme from '@/components/DependentTravel/DesignScheme'
export default {
data () {
return {
actice_step:0,
customId:14,
loading:false,
dataInfo:{},
tcid:0,
}
},
components:{
DesignScheme
},
mounted() {
this.GetStatus();
},
methods: {
GetStatus(){
this.loading=true;
this.apiJavaPost('/api/b2b/free/getTravelCustomOrderInfo',{customId: this.customId},res=>{
this.loading=false;
console.log(res);
if(res.data.resultCode==1){
this.dataInfo=res.data.data;
this.tcid=this.dataInfo.tcid;
this.actice_step=this.dataInfo.orderStatus;
}else{
this.Error(res.data.message);
}
},null)
},
}
}
</script>
<style>
.CustomizedTourism .Signcontract .yct{
position: absolute;
top: 82px;
right: 199px;
display: inline-block;
width: 147px;
height: 79px;
border: 1px dashed #cccccc;
}
.CustomizedTourism .Signcontract .yct img{
width: 100%;
height: 100%;
}
.CustomizedTourism .Signcontract .htqd .icon-xiazai{
font-size: 12PX;
color: #fff;
}
.CustomizedTourism .Signcontract .htqd {
padding: 54px;
box-sizing: border-box;
}
.CustomizedTourism .Signcontract .htqd .downorder{
display: block;
font-size:14px;
color:#333333;
width:103px;
height:26px;
line-height: 26px;
text-align: center;
background:rgba(255,255,255,1);
border:1px solid rgba(210,210,210,1);
}
.CustomizedTourism .Signcontract .orderinfo li p{
position: relative;
margin-bottom: 16px;
}
.CustomizedTourism .Signcontract .orderinfo li p span:nth-child(2){
position: absolute;
left: 300px;
display: inline-block;
width: 300px;
}
.CustomizedTourism .pfR{
font-family: "PingFangR";
}
.CustomizedTourism .Signcontract .orderinfo li{
color:#000000;
font-size: 12px;
}
.CustomizedTourism .Signcontract .orderinfo li em{
font-style: normal;
color:#808080;
}
.CustomizedTourism .Signcontract .orderinfo{
overflow: auto;
padding: 30px 60px;
box-sizing: border-box;
}
.CustomizedTourism .Signcontract .orderinfo li{
float: left;
}
.CustomizedTourism .Submitdemand .dz_info_list li p{
color:#000000;
}
.CustomizedTourism .Submitdemand .dz_info_list li em {
width: 122px;
float: left;
margin-left: -146px;
text-align: right;
color: #666666;
display: inline;
font-style: normal;
}
.CustomizedTourism .Submitdemand .dz_info_list li {
padding: 6px 0;
}
.CustomizedTourism .Submitdemand .dz_info_list {
font-size: 12px;
padding: 20px 280px 20px 146px;
border-top: 1px solid #ddd;
margin-top: -1px;
position: relative;
}
.CustomizedTourism .title{
height:40px;
background:rgba(237,244,255,1);
line-height: 40px;
font-size: 14px;
font-family: "PingFangR";
padding-left: 15px;
}
.CustomizedTourism .commonStyle{
position: relative;
margin-top: 20px;
border:1px solid rgba(220,220,220,1);
}
.CustomizedTourism .el-step__line-inner{
border-width: 2px!important;
}
.CustomizedTourism .el-step__description.is-process,.el-step__description.is-wait{
color: #999999;
}
.CustomizedTourism .el-step__description.is-finish{
color: #666666;
}
.CustomizedTourism .el-step.is-horizontal .el-step__line{
height: 5px;
}
.CustomizedTourism .step_head .step_head_title{
font-size:16px;
font-family:"PingFangR";
color:rgba(51,51,51,1);
}
.CustomizedTourism .step_head{
padding: 30px 60px;
box-sizing: border-box;
background:rgba(255,255,255,1);
border:1px solid rgba(220,220,220,1);
}
.CustomizedTourism{
font-family:"PingFang";
}
.CustomizedTourism .w1200{
width: 1200px;
margin: 20px auto;
}
.CustomizedTourism .el-step__title{
font-size: 12px;
}
.CustomizedTourism .el-step__head.is-process{
color:#dcdcdc;
border-color: #dcdcdc;
}
.CustomizedTourism .el-step__title.is-process{
color:#dcdcdc;
}
.CustomizedTourism .el-step__line{
background-color: #e1e1e1;
}
.CustomizedTourism .el-step__head.is-wait {
color: #dcdcdc;
border-color: #dcdcdc;
}
.CustomizedTourism .icon-yuandian{
font-size: 19px;
}
</style>
src/components/DependentTravel/DesignScheme.vue 0 → 100644
View file @ d20dd21a
<template>
<div class="DesignScheme">
<div class="commonStyle">
<p class="title">定制师信息</p>
<div class="designer">
<div class="designer_list" v-for="(item,index) in dataList" :key="index">
<ul class="designer_item">
<span class="yct" v-if="item.planUseStatus==3">
<img src="../../assets/img/travel/ytt.png" alt="">
</span>
<span class="yct" v-if="item.planUseStatus==2">
<img src="../../assets/img/travel/yxd.png" alt="">
</span>
<li>
<img style="width:60px;height:60px;border-radius:50%" :src="item.salesPhoto" alt="">
</li>
<li style="margin-left:20px;width:787px">
<p>
<span class="pfR">定制师 {{item.salesName}}</span>
<span style="margin-left:20px">
<i class="iconfont icon-Shape2"></i>
<span style="margin-left:6px;color:#666666;font-size:14px">联系电话：{{item.salesMobile}}</span></span>
</p>
<p style="color:#333333;font-size:14px;margin-top:16px;">行程简介：{{item.planIntroduce}}</p>
<p style="color:#999999;font-size:12px;margin-top:20px;">
提交时间：{{item.createDate}}
</p>
</li>
<li style="margin-left:45px;">
<p style="font-size:14px;">
价格：<span style="color:#FB8F0F;font-size:18px;">￥{{item.planPrice}}</span>人/起
</p>
<p class="choose_span">
<span @click="ChooseStatus(item,2)" :class="item.planUseStatus==2?'choose_span_active':''">选定</span>
<span @click="ChooseStatus(item,3)" :class="item.planUseStatus==3?'choose_span_active':''">淘汰</span>
</p>
<p style="margin-top:15px;font-size:12px;text-align:center">
<span @click="showStatus(index,item)" :class="desshow==index?'desstatus':''" style="color:#666666;cursor:pointer">查看行程详情 <i class="iconfont icon-more"></i></span>
</p>
</li>
</ul>
<!-- 定制详情 -->
<div v-loading="desLoad" v-show="desshow==index" class="cutomdes">
<p class="title"> {{item.salesName}}——定制游详情</p>
<div style="position:relative;">
<p class="xcap"></p>
<div style="padding-top: 80px;">
<div class="daylist" v-for="(item,index) in datades.dayList" :key="index+100">
<div style="padding-left:36px;margin-bottom:30px;">
<span class="dayindex">D{{item.dayNum}}</span>
<!-- <span class="daytitle">出发东京迪士尼，探寻梦幻王国（专车送去迪士尼）</span> -->
</div>
<div class="common_left" v-for="(des,index) in item.dayArray" :key="index+2000">
<!-- 酒店 -->
<div v-if="des.type==3" class="commonday">
<div class="commonday_item">
<span class="icon_span" style="background:#fff;">
<span class="iconfont icon-Shape"></span>
</span>
<p style="font-size:16px;"><span>酒店</span><span style="color:#5F95E8;margin-left:5px">{{des.childItem.hotelName}}</span></p>
<div style="font-size:14px;margin-top:20px">
{{des.childItem.description}}
</div>
</div>
</div>
<!-- 航班信息 -->
<!-- <div class="commonday" >
<div class="commonday_item">
<span class="icon_span" style="background:#fff;">
<span class="iconfont icon-Shape1"></span>
</span>
<p style="font-size:16px;"><span>航班</span><span style="font-size:12px;color:#666666;">（参考）</span></p>
<div style="font-size:14px;margin-top:20px">
<ul class="hbxf">
<li>
<p>田间航空公司</p>
<p>Gs7979</p>
</li>
<li>
<p class="pfR font16">13:15</p>
<p>国际机场</p>
</li>
<li>
. . . . . .
</li>
<li>
<p class="pfR font16">13:15</p>
<p>国际机场</p>
</li>
<li>
<p>经济舱</p>
</li>
</ul>
</div>
</div>
</div> -->
<!-- 交通 -->
<div v-if="des.type==1" class="commonday">
<div class="commonday_item">
<span class="icon_span" style="background:#fff;">
<span class="iconfont icon-jiaotonggongjiaochekanfangtuandabamianxing"></span>
</span>
<p style="font-size:16px;"><span>交通</span></p>
<div style="font-size:14px;margin-top:20px">
<span v-if="des.childItem.trafficIntroduce">{{des.childItem.trafficIntroduce.introduceDetail}}</span>
</div>
</div>
</div>
<!-- 景点 -->
<div v-if="des.type==2" class="commonday">
<div class="commonday_item">
<span class="icon_span" style="background:#fff;">
<span class="iconfont icon-Shape4"></span>
</span>
<p style="font-size:16px;"><span>景点</span><span style="margin-left:5px;font-size:12px;">（3个）</span></p>
<div v-for="img in des.childItem.imaArray" :key="img.url" style="font-size:14px;margin-top:20px;overflow:auto">
<img :src="img.url" style="width:200px;height:133px;float:left;" alt="">
<div style="float:left;margin-left:20px;width:719px">
<!-- <p>晚餐</p> -->
</div>
</div>
</div>
</div>
<!-- 餐饮 -->
<div v-if="des.type==4" class="commonday commonHover">
<div class="commonday_item">
<span class="icon_span" style="background:#fff;">
<span class="iconfont icon-Shape5"></span>
</span>
<p style="font-size:16px;"><span>餐饮</span><span style="color:#5F95E8;margin-left:5px">一兰拉面(道顿堀店)(大阪)</span></p>
<div v-for="img in des.childItem.imaArray" style="font-size:14px;margin-top:20px;overflow:auto">
<img src="../../assets/img/visa/activy.jpg" style="width:200px;height:133px;float:left;" alt="">
<div style="float:left;margin-left:20px;width:719px">
<p>晚餐</p>
</div>
</div>
</div>
</div>
<!-- 温馨提示 -->
<div v-if="des.type==6" class="commonday">
<div class="commonday_item">
<span class="icon_span" style="background:#fff;">
<span class="iconfont icon-Shape6"></span>
</span>
<p style="font-size:16px;"><span>温馨提示</span></p>
<div v-if="des.childItem.description" style="font-size:14px;margin-top:20px">
<div v-html="des.childItem.description">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position:relative;margin-top:30px;padding:0 0 30px 60px">
<p class="ygbj"></p>
<p style="font-size:14px;padding-top:60px">
价格：<span style="color:#FB8F0F;font-size:18px;">￥{{item.planPrice}}</span>人/起
</p>
<p style="color:#666666;font-size:12px;padding-top:10px">该价格为案例参考报价，最终价格以实际合同为准</p>
<p style="color:#333;font-size:14px;padding-top:10px">费用包含：酒店；签证；机票</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
desshow:-1,
msg:{
pageIndex:1,
pageSize:10,
customId:0,
},
dataList:[],
desLoad:false,
datades:{},
}
},
props:{
customId:{
type:Number,
},
tcid:{
type:Number,
},
},
created() {
this.msg.customId=this.customId;
},
mounted(){
this.GetData();
},
methods: {
ChooseStatus(item,num){
let datainfo={};
datainfo.customId=item.customId;
datainfo.planId=item.planId;
datainfo.planUseStatus=num;
let title="";
if(num==3){
title="是否淘汰该方案？";
}else{
title="是否选定该方案？";
}
this.$confirm(title, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apiJavaPost('/api/b2b/free/setPlanUseStatus',datainfo,res=>{
if(res.data.resultCode==1){
this.Success(res.data.message);
this.GetData();
}else{
this.Error(res.data.message);
}
},null)
}).catch(() => {
});
},
showStatus(index,item){
this.desshow=index;
let msg={};
msg.configId=item.configId;
msg.tcid=this.tcid;
this.desLoad=true;
this.apipost('b2b_get_GetB2BFreeTravelCustomPlanInfo',msg,res=>{
this.desLoad=false;
if(res.data.resultCode==1){
this.datades=res.data.data;
}else{}
},err=>{})
},
GetData(){
this.apiJavaPost('/api/b2b/free/getTravelCoupomPlanList',this.msg,res=>{
if(res.data.resultCode==1){
this.dataList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
}
}
</script>
<style>
.DesignScheme .yct {
position: absolute;
top: 56px;
right:236px;
display: inline-block;
width: 147px;
height: 79px;
border: 1px dashed #cccccc;
}
.DesignScheme .choose_span_active{
background: #EE4454!important;
color: #fff;
}
.DesignScheme .desstatus{
color: #EE4454!important;
}
.DesignScheme .commonHover:hover{
background: #EDF4FF;
cursor: pointer;
}
.DesignScheme .yct img{
width: 100%;
height: 100%;
}
.DesignScheme .cutomdes{
transition: all linear 0.5s;
}
.DesignScheme .commonday{
padding:0 60px;
box-sizing: border-box;
}
.DesignScheme .font16{
font-size: 16px;
}
.DesignScheme .commonday_item .hbxf li{
margin-right: 50px;
font-size: 12px;
color: #333333;
}
.DesignScheme .commonday_item .hbxf{
width:941px;
height:86px;
background:rgba(245,245,245,1);
padding-left: 43px;
display: flex;
align-items: center;
}
.DesignScheme .commonday_item .icon_span .iconfont{
font-size: 20px;
}
.DesignScheme .commonday_item .icon_span{
color:#5F95E8;
position: absolute;
left: -10px;
z-index: 2;
}
.DesignScheme .common_left:last-child .commonday_item{
border-left: none;
}
.DesignScheme .commonday_item{
padding-bottom: 20px;
position: relative;
padding-left:60px;
border-left: 1px dashed #5F95E8;
z-index: 0;
}
.DesignScheme{
font-family: "PingFang";
}
.DesignScheme .daylist .daytitle{
margin-left:20px;color:#333333;font-size:18px;border-bottom:1px solid #e1e1e1;
display: inline-block;
width: 937px;
padding-bottom:25px;
}
.DesignScheme .daylist .dayindex{
display: inline-block;
text-align: center;
line-height: 44px;
color: #fff;
font-size:18px;
width:44px;
height:44px;
background:#5F95E8;
border-radius:50%;
}
.DesignScheme .daylist{
}
.DesignScheme .ygbj:before{
position: absolute; /*必须*/
z-index: 1;
height: 0;
padding-right: 10px;
/* font-family: "PingFangR"; */
line-height: 0;
color: #fff;
border: 15px solid #EE4454;
border-right-color: transparent;
content: '预估报价';
}
.DesignScheme .xcap:before { /*做一个书签效果*/
position: absolute; /*必须*/
z-index: 1;
height: 0;
top: 30px;
left: 30px;
padding-right: 10px;
/* font-family: "PingFangR"; */
line-height: 0;
color: #fff;
border: 15px solid #EE4454;
border-right-color: transparent; /*右边框透明，变成空缺的角*/
content: '行程安排';
}
.DesignScheme .icon-more{
display: inline-block;
cursor: pointer;
transform:rotateX(180deg);
}
.DesignScheme .choose_span span:hover{
background: #EE4454;
color: #fff;
}
.DesignScheme .choose_span span{
cursor: pointer;
display: inline-block;
text-align: center;
line-height: 26px;
font-size: 12px;
width:56px;
height:26px;
margin: 0 8px;
background:rgba(244,244,244,1);
border:1px solid rgba(220,220,220,1);
}
.DesignScheme .choose_span{
margin-top: 28px;
text-align: center;
}
.DesignScheme .icon-Shape2{
color: #35A861;
font-size: 14px;
display: inline-block;
transform:rotateY(180deg);
}
.DesignScheme .pfR{
font-family: "PingFangR";
}
.DesignScheme .designer .designer_list .designer_item:last-child{
border-bottom: none;
}
.DesignScheme .designer .designer_list .designer_item {
overflow: auto;
padding:30px 40px 20px 60px;
color: #000000;
border-bottom: 1px solid #DCDCDC;
}
.DesignScheme .designer .designer_list .designer_item li{
float: left;
}
.designer .designer_list{
position: relative;
box-sizing: border-box;
}
</style>
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