update

src/components/DependentTravel/CustomizedTourism.vue

+<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>