<style>
*{
margin:0;
padding:0;
}
.TC-MainContent{
min-height: 650px;
background: url(../assets/img/bodyBg.png);
padding-top: 10px;
font: normal 13px 'Microsoft Yahei';
color:#555;
height:auto!important;
}
.TC-MainContent .fixedMenu {
position: fixed;
left: 20px;
top: 75px;
margin: 0;
padding-top: 10px;
}
.TC-MainContent .fixedMenu li {
padding: 5px 15px;
position: relative;
border-right: 2px solid #e2e2e2;
cursor: pointer;
list-style: none;
font-size:13px;
}
.TC-MainContent .fixedMenu li:after {
content: '';
display: block;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #e2e2e2;
position: absolute;
right: -12px;
top: 11px;
}
.TC-MainContent .contractTit {
position: fixed;
left: 0;
top:0;
width: 100%;
z-index: 1000;
padding: 15px 20px 12px;
line-height: 30px;
box-sizing: border-box;
background: url(../assets/img/bodyBg.png);
font-size: 18px;
color: #555;
}
.TC-MainContent .contractTit span{
font-size: 21px;
font-weight: bold;
}
.TC-MainContent .block {
border: 1px solid #cdcdcd;
background: #f9f9f9;
position: relative;
margin-bottom: 20px;
}
.TC-MainContent .container-fluid {
padding-right: 20px;
padding-left: 20px;
*zoom: 1;
}
.TC-MainContent .mtop15{
margin-top:15px;
}
.TC-MainContent .blockTitle {
border-bottom: 1px solid #cdcdcd;
background-color: #efefef;
}
.TC-MainContent .blockTitle span.icon {
border-right: 1px solid #CDCDCD;
position: absolute;
left: 10px;
height: 40px;
padding-right: 10px;
padding-top: 8px;
}
.TC-MainContent .blockTitle h2 {
font-size: 15px;
min-height: 40px;
margin: 0;
font-family: 'Microsoft Yahei';
color: #5b5b5b;
padding-right: 15px;
padding-left: 48px;
line-height: 40px;
}
.TC-MainContent .blockTitle h2 {
font-size: 15px;
min-height: 40px;
margin: 0;
font-family: 'Microsoft Yahei';
color: #5b5b5b;
padding-right: 15px;
padding-left: 48px;
}
.TC-MainContent .block em {
font-style: normal;
}
.TC-MainContent .createTableTitle {
padding: 10px 0;
margin: 5px 30px 0;
border-bottom: 1px dashed #ccc;
font: normal 15px 'microsoft yahei';
}
.TC-MainContent .createTable{
background-color: #f9f9f9;
width:100%;
}
.TC-MainContent .el-form-item{
margin-bottom:10px;
}
.TC-MainContent .w300{
width:300px!important;
}
.TC-MainContent .w150{
width:150px!important;
}
.TC-MainContent .w600{
width:600px!important;
}
.TC-MainContent .singeRowTable{width: 100%;border-collapse:collapse;}
.TC-MainContent .singeRowTable tr th,.v-table-title-cell{background: #E6E6E6;height:40px; font-size: 14px; color: #333;}
.TC-MainContent .singeRowTable tr{background: #fff;text-align: center; height: 40px;}
.TC-MainContent .singeRowTable tr:nth-child(2n+1){background:#fafafa; }
.TC-MainContent .singeRowTable tr:hover{background: #f2f2f2;}
.TC-MainContent .singeRowTable tr td{font-size: 12px;border: 1px solid #E5E5E5;}
.TC-MainContent .TC_NewAddBtn{
background-color: #006dcc;
width:83px;
height:26px;
color:#fff;
border:none;
margin-right: 5px;
cursor: pointer;
}
.TC-MainContent .singeRowTable .el-button.is-circle{
padding:5px;
}
.TC-MainContent .TcNewTable td{
padding:5px;
}
.TC-MainContent .fixedMenu li.active {
background: #90b7ec;
color: #fff;
border-right-color: #5882bb;
}
.TC-MainContent .fixedMenu li.active:after {
border-left-color: #5882bb;
}
.TC-MainContent .pull-right{
float:right;
}
.TC-MainContent .TC_disabled{
color:#57a3f3;
cursor: not-allowed!important;
}
.TC-MainContent .TCbtn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
padding:10px 19px;
border:none;
outline: none;
cursor: pointer;
}
.TC-MainContent .btn-warning{
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #faa732;
*background-color: #f89406;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
padding:10px 19px;
outline: none;
border:none;
cursor: pointer;
}
.TCbtn-info:hover,.btn-warning:hover{
color: #ffffff;
opacity: 0.8;
}
.TcTravel_Table{
width: 100%;
border: none;
border-collapse: collapse;
border-spacing: 0;
}
.TcTravel_Table td{
border: 1px solid rgb(0, 0, 0);
word-break: break-all;
padding:5px;
line-height: 2;
}
.TC_LASTTD div{
margin-bottom:10px;
}
</style>
<template>
<div class="TC-MainContent">
<!-- 内容开始 -->
<ul class="fixedMenu" id="fixedMenu">
<li v-for="(item,index) in menuArr" :class="{'active':index==ckedIndex}" @click="ckedIndex=index,goAnchor('#anchor-'+index)">{{item}}</li>
</ul>
<div class="contractTit">
<span>
四川和平国际旅行社有限公司团队出境旅游合同
<span style="color:blue;font-size:14px;">{{CtObj.contractNum}}</span>
</span>
<div class="pull-right">
<input type="button" v-if="CtObj.status==1&&CtObj.auditContract==0" class="TCbtn-info" @click="sendAudit()" value="提交审核"/>
<input type="button" v-if="CtObj.status==1&&CtObj.auditContract==3" class="TCbtn-info" @click="sendAudit()" value="审核已被驳回,重新提交"/>
<input type="button" class="TCbtn-info" v-if="CtObj.status==1" @click="goUrl()" value="预览">
<input type="button" class="TCbtn-info" v-if="CtObj.auditContract==2" @click="getinvalid()" value="作废">
<input type="button" class="TCbtn-info" @click="dialogVisible=true,getGuestList()" value="复制合同"/>
<input type="button" class="TCbtn-info" v-if="CtObj.status==1" @click="msgDialog=true,getMsgList()" value="发送短信"/>
<input type="button" v-if="CtObj.auditContract!=2" class="btn-warning" @click="submitForm('CtObj')" value="保存"/>
</div>
</div>
<el-form label-width="180px" :model="CtObj" :rules="rules" ref="CtObj">
<div class="container-fluid" style="padding-top: 60px; padding-left: 220px;">
<div class="block mtop15" id="anchor-0" ref="anchor0">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-dingdanguanli-"></i>
</span>
<h2>
<em>合同基本信息</em>
</h2>
</div>
<div class="createTableTitle">旅游者代表信息</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="姓名" prop="clientName">
<el-input type="text" v-model="CtObj.clientName" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="证件号码">
<el-input type="text" v-model="CtObj.clientIdcardnum" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="详细地址">
<el-input type="text" v-model="CtObj.clientAddress" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="联系电话" prop="clientCall">
<el-input type="text" v-model="CtObj.clientCall" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="传真">
<el-input type="text" v-model="CtObj.clientFax" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮编">
<el-input type="text" v-model="CtObj.clientPostCode" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="电子邮箱">
<el-input type="text" v-model="CtObj.clientEmail" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<!-- <tr>
<td>
<el-form-item label="所在地区">
<el-select placeholder="请选择国家" filterable class='multiple_input w300' v-model="CtObj.clientCountryid" @change="GetSubAreaList(CtObj.clientCountryid,1),CtObj.clientProvinceid=0,CtObj.clientCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择省" filterable class='multiple_input w300' v-model="CtObj.clientProvinceid"
@change="GetSubAreaList(CtObj.clientProvinceid,2),CtObj.clientCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in ClientProvinceList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择市" filterable class='multiple_input w300' v-model="CtObj.clientCityid">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in ClientCityList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
</el-form-item>
</td>
</tr> -->
</tbody>
</table>
<div class="createTableTitle">出境社信息</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="公司名称">
<el-input type="text" v-model="CtObj.company" :disabled="true" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="经营许可证号">
<el-input type="text" class="w300" :disabled="true" v-model="CtObj.businessCertificate"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="经办人" prop="agentName">
<el-input type="text" class="w300" v-model="CtObj.agentName"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="营业地址">
<el-input type="text" class="w300" v-model="CtObj.companyAddress"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="联系电话">
<el-input type="text" class="w300" v-model="CtObj.companyCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="传真">
<el-input type="text" class="w300" v-model="CtObj.companyFax"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮编">
<el-input type="text" class="w300" v-model="CtObj.companyPostCode"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="电子邮箱">
<el-input type="text" class="w300" v-model="CtObj.companyEmail"></el-input>
</el-form-item>
</td>
</tr>
<!-- <tr>
<td>
<el-form-item label="所在地区">
<el-select placeholder="请选择国家" filterable class='multiple_input w210' v-model="CtObj.companyCountryid" @change="GetComAreaList(CtObj.companyCountryid,1),CtObj.companyProvinceid=0,CtObj.companyCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择省" filterable class='multiple_input w210' v-model="CtObj.companyProvinceid"
@change="GetComAreaList(CtObj.companyProvinceid,2),CtObj.companyCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in companyProvinceList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择市" filterable class='multiple_input w210' v-model="CtObj.companyCityid">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in companyCityList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
</el-form-item>
</td>
</tr> -->
<!-- <tr>
<td class="TC_tittle">
<div class="littleTitle">经办人信息</div>
</td>
</tr> -->
<!-- <tr>
<td>
<el-form-item label="联系电话" prop="agentCall">
<el-input type="text" class="w300" v-model="CtObj.agentCall"></el-input>
</el-form-item>
</td>
</tr> -->
<tr>
<td>
<el-form-item label="签约地点">
<el-input type="text" class="w300" v-model="CtObj.contractPlace"></el-input>
</el-form-item>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-1" ref="anchor1">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-renwuguanli"></i>
</span>
<h2>
<em>合同协议条款</em>
</h2>
</div>
<div class="createTableTitle">线路行程时间</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="团号">
<el-input type="text" class="w300" v-model="CtObj.tCNum"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="旅游产品名称" prop="productName">
<el-input type="text" class="w300" v-model="CtObj.productName"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="出发日期" prop="startDate">
<el-date-picker class="w300" v-model="CtObj.startDate" type="date" value-format="yyyy-MM-dd" placeholder></el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="返回日期" prop="returnDate">
<el-date-picker class="w300" v-model="CtObj.returnDate" type="date" value-format="yyyy-MM-dd" placeholder></el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="共" prop="dayNum">
<el-select placeholder="请选择" filterable class='w300' v-model="CtObj.dayNum">
<el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
<el-option label="1" :value='1'></el-option>
<el-option label="2" :value='2'></el-option>
<el-option label="3" :value='3'></el-option>
<el-option label="4" :value='4'></el-option>
<el-option label="5" :value='5'></el-option>
<el-option label="6" :value='6'></el-option>
<el-option label="7" :value='7'></el-option>
<el-option label="8" :value='8'></el-option>
<el-option label="9" :value='9'></el-option>
<el-option label="10" :value='10'></el-option>
<el-option label="11" :value='11'></el-option>
<el-option label="12" :value='12'></el-option>
<el-option label="13" :value='13'></el-option>
<el-option label="14" :value='14'></el-option>
<el-option label="15" :value='15'></el-option>
<el-option label="16" :value='16'></el-option>
<el-option label="17" :value='17'></el-option>
<el-option label="18" :value='18'></el-option>
<el-option label="19" :value='19'></el-option>
<el-option label="20" :value='20'></el-option>
</el-select>
天
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="酒店住宿" prop="nightNum">
<el-select placeholder="请选择" filterable class='w300' v-model="CtObj.nightNum">
<el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
<el-option label="1" :value='1'></el-option>
<el-option label="2" :value='2'></el-option>
<el-option label="3" :value='3'></el-option>
<el-option label="4" :value='4'></el-option>
<el-option label="5" :value='5'></el-option>
<el-option label="6" :value='6'></el-option>
<el-option label="7" :value='7'></el-option>
<el-option label="8" :value='8'></el-option>
<el-option label="9" :value='9'></el-option>
<el-option label="10" :value='10'></el-option>
<el-option label="11" :value='11'></el-option>
<el-option label="12" :value='12'></el-option>
<el-option label="13" :value='13'></el-option>
<el-option label="14" :value='14'></el-option>
<el-option label="15" :value='15'></el-option>
<el-option label="16" :value='16'></el-option>
<el-option label="17" :value='17'></el-option>
<el-option label="18" :value='18'></el-option>
<el-option label="19" :value='19'></el-option>
<el-option label="20" :value='20'></el-option>
</el-select>
晚
</el-form-item>
</td>
</tr>
</tbody>
</table>
<div class="createTableTitle">旅游费用及支付</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="成人价" prop="adultPrice">
<el-input type="text" class="w300" v-model="CtObj.adultPrice"></el-input> 元/人
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="儿童(不满14岁的)">
<el-input type="text" class="w300" v-model="CtObj.childPrice"></el-input> 元/人
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="导游服务费" prop="servicePrice">
<el-input type="text" class="w300" v-model="CtObj.servicePrice"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="费用合计" prop="orderPrice">
<el-input type="text" class="w300" v-model="CtObj.orderPrice"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="支付日期" prop="payDate">
<el-date-picker class="w300" v-model="CtObj.payDate" type="date" value-format="yyyy-MM-dd" placeholder></el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="支付方式" prop="payType">
<el-select placeholder="请选择" filterable class='w300' v-model="CtObj.payType">
<el-option label="现金" :value='1'></el-option>
<el-option label="转账" :value='2'></el-option>
<el-option label="支票" :value='3'></el-option>
</el-select>
</el-form-item>
</td>
</tr>
</tbody>
</table>
<div class="createTableTitle">人身意外伤害保险</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="旅游者">
<el-select placeholder="请选择" filterable class='w300' v-model="CtObj.insuranceOpinion">
<el-option label="委托出境社购买" :value='1'></el-option>
<el-option label="自行购买" :value='2'></el-option>
<el-option label="放弃购买" :value='3'></el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr style="display:none;">
<td>
<div style="margin:0 0 10px 180px;">
<el-checkbox-group>
<el-checkbox label="大地保险"></el-checkbox>
<el-checkbox label="平安保险"></el-checkbox>
<el-checkbox label="工行保险"></el-checkbox>
</el-checkbox-group>
</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="保险产品名称" prop="insuranceProduct" v-if="CtObj.insuranceOpinion==1">
<el-input type="text" class="w300" v-model="CtObj.insuranceProduct"></el-input>
</el-form-item>
</td>
</tr>
<!-- <tr>
<td>
<el-form-item label="保险公司">
<el-input type="text" class="w210" v-model="CtObj.insuranceCompany"></el-input>
</el-form-item>
</td>
</tr> -->
<!-- <tr>
<td>
<el-form-item label="保额">
<el-input type="text" class="w210" v-model="CtObj.insuranceAmount"></el-input>
</el-form-item>
</td>
</tr> -->
</tbody>
</table>
<div class="createTableTitle">成团人数与不成团的约定</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="最低成团人数" prop="minNumber">
<el-input type="text" class="w300" v-model="CtObj.minNumber"></el-input> 人
</el-form-item>
</td>
</tr>
<tr>
<td style="padding:10px 0 20px 86px;">如不能成团，旅游者是否同意按下列方式解决：</td>
</tr>
<tr>
<td>
<el-form-item label="1、">
<el-select placeholder="请选择" filterable class='w150' v-model="CtObj.insteadOpinion">
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
出境社委托
<el-input type="text" class="w300" v-model="CtObj.insteadCompany"></el-input> 出境社履行合同；
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="2、">
<el-select placeholder="请选择" filterable class='w150' v-model="CtObj.delayOpinion">
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
延期出团；
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="3、">
<el-select placeholder="请选择" filterable class='w150' v-model="CtObj.changeOpinion">
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
改签其他线路出团；
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="4、">
<el-select placeholder="请选择" filterable class='w150' v-model="CtObj.terminateOpinion">
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
解除合同。
</el-form-item>
</td>
</tr>
</tbody>
</table>
<div class="createTableTitle">拼团约定</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="旅游者">
<el-select placeholder="请选择" filterable class='w150' v-model="CtObj.carpoolOpinion">
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
采用拼团方式拼至
<el-input type="text" class="w300" v-model="CtObj.carpoolCompany"></el-input> 出境社成团。
</el-form-item>
</td>
</tr>
</tbody>
</table>
<div class="createTableTitle">争议的解决方式</div>
<table class="createTable">
<tbody>
<tr>
<td>
<div style="margin:20px 0 10px 20px">本合同履行过程中发生争议，由双方协商解决；亦可向合同签订地的旅游质监执法机构、消费者协会等有关部门或者机构申请调解解决。</div>
<el-form-item label="协商或调解不成，按照第" prop="settleDisputeMode">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.settleDisputeMode">
<el-option label="1" :value='1'></el-option>
<el-option label="2" :value='2'></el-option>
</el-select>
种方式解决
</el-form-item>
<div style="margin-left:20px;">2、依法向人民法院起诉。</div>
</td>
</tr>
<!-- <tr>
<td>
<el-form-item label="（1）提交">
<el-input type="text" class="w210" v-model="CtObj.arbitrationCommission"></el-input> 仲裁委员会仲裁
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="（2）依法向">
<el-input type="text" class="w210" v-model="CtObj.court"></el-input> 人民法院起诉
</el-form-item>
</td>
</tr> -->
</tbody>
</table>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="本合同一式" prop="totalNumber">
<el-select placeholder="请选择" filterable v-model="CtObj.totalNumber" class='w210'>
<el-option label="壹" :value='1'></el-option>
<el-option label="贰" :value='2'></el-option>
<el-option label="叁" :value='3'></el-option>
<el-option label="肆" :value='4'></el-option>
<el-option label="伍" :value='5'></el-option>
<el-option label="陆" :value='6'></el-option>
<el-option label="柒" :value='7'></el-option>
<el-option label="捌" :value='8'></el-option>
<el-option label="玖" :value='9'></el-option>
<el-option label="拾" :value='10'></el-option>
</el-select>
份
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="双方各持" prop="eachNumber">
<el-select placeholder="请选择" filterable v-model="CtObj.eachNumber" class='w210'>
<el-option label="壹" :value='1'></el-option>
<el-option label="贰" :value='2'></el-option>
<el-option label="叁" :value='3'></el-option>
<el-option label="肆" :value='4'></el-option>
<el-option label="伍" :value='5'></el-option>
<el-option label="陆" :value='6'></el-option>
<el-option label="柒" :value='7'></el-option>
<el-option label="捌" :value='8'></el-option>
<el-option label="玖" :value='9'></el-option>
<el-option label="拾" :value='10'></el-option>
</el-select>
份，具有同等法律效力，自双方当事人签字或者盖章之日起生效。
</el-form-item>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-2" ref="anchor2">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-copy"></i>
</span>
<h2>
<em>其他约定事项</em>
</h2>
</div>
<div style="padding:10px;">未尽事宜，经旅游者和出境社双方协商一致，可以列入补充条款。(如合同空间不够，可以另附纸张，由双方签字或者盖章确认。)</div>
<el-input type="textarea" resize="none" v-model="CtObj.otherMatter" rows="13"></el-input>
</div>
<div class="block mtop15" id="anchor-3" ref="anchor3">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-Shape2"></i>
</span>
<h2>
<em>投诉联系</em>
</h2>
</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="出境社监督、投诉电话">
<el-input type="text" class="w300" v-model="CtObj.regulatorComplainCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="监管机构名称">
<el-input type="text" class="w300" v-model="CtObj.regulatorName"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="投诉电话">
<el-input type="text" class="w300" v-model="CtObj.companyComplainCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="电子邮箱">
<el-input type="text" class="w300" v-model="CtObj.regulatorWebsite"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="地址">
<el-input type="text" class="w300" v-model="CtObj.regulatorAddress"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮编">
<el-input type="text" class="w300" v-model="CtObj.regulatorPostCode"></el-input>
</el-form-item>
</td>
</tr>
<!-- <tr>
<td>
<el-form-item label="监管机构所属地区">
<el-select placeholder="请选择国家" filterable class='multiple_input w210' v-model="CtObj.regulatorCountryid" @change="GetJianAreaList(CtObj.regulatorCountryid,1),CtObj.regulatorProvinceid=0,CtObj.regulatorCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择省" filterable class='multiple_input w210' v-model="CtObj.regulatorProvinceid"
@change="GetJianAreaList(CtObj.regulatorProvinceid,2),CtObj.regulatorCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in JianProvinceList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择市" filterable class='multiple_input w210' v-model="CtObj.regulatorCityid">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in JianCityList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
</el-form-item>
</td>
</tr> -->
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-4" ref="anchor4">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-Shape1"></i>
</span>
<h2>
<em>行程信息</em>
</h2>
</div>
<div style="padding:10px;background:#f9f9f9;color:red;">
《行程单》应当对如下内容作出明确的说明：
（1）旅游行程的出发地、途经地、目的地、结束地，线路行程时间（按自然日计算，含乘飞机、车、船等在途时间，不足24小时以一日计）；
（2）旅游目的地地接社的名称、地址、联系人和联系电话；
（3）交通服务安排及其标准（明确交通工具及档次等级、出发时间以及是否需中转等信息）；
（4）住宿服务安排及其标准（明确住宿饭店的名称、地址、档次等级及是否有空调、热水等相关服务设施）；
（5）用餐（早餐和正餐）服务安排及其标准（明确用餐次数、地点、标准）；
（6）出境社统一安排的游览项目的具体内容及时间（明确旅游线路内容包括景区点及游览项目名称、景区点停留的最少时间）；
（7）自由活动的时间；
（8）行程安排的娱乐活动（明确娱乐活动的时间、地点和项目内容）；
《行程单》用语须准确清晰，在表明服务标准用语中不应当出现“准×星级”、“豪华”、“仅供参考”、“以××为准”、“与××同级”等不确定用语。
</div>
<div v-if="CtObj.travelContent!=''" v-html="CtObj.travelContent" ref="TcTravel_Table">
</div>
<div v-else ref="TcTravel_Table">
<table class="TcTravel_Table">
<tbody>
<tr>
<td colspan="5">
组团社：印象之旅
</td>
</tr>
<tr>
<td colspan="5">
旅游线路名称：{{CtObj.productName}} 行程共计：{{CtObj.dayNum}}天 {{CtObj.nightNum}}晚（含在途时间）
</td>
</tr>
<tr>
<td colspan="5">
出发时间：{{getDate(CtObj.startDate)}}
出发地点：{{CtObj.goAirport}}
目的地：{{CtObj.touristDestination}}
</td>
</tr>
<tr>
<td colspan="5">
结束时间：{{getDate(CtObj.returnDate)}}
返回地点：{{CtObj.backAirport}}
</td>
</tr>
<tr>
<td colspan="5">日本周游</td>
</tr>
<tr>
<td colspan="5">地址：</td>
</tr>
<tr>
<td style="width:15%">行程时间</td>
<td style="width:50%">主要景点名称（游览时间）</td>
<td>交通工具（标准）</td>
<td>酒店标准</td>
<td>房间标准</td>
</tr>
<tr v-for="(item,index) in tripDays">
<td contenteditable="true">{{getDayAddOne(CtObj.startDate,index)}}</td>
<td contenteditable="true">
<div v-for="subItem in item.dayArray">
<span v-if="subItem.type==2">
{{subItem.childItem.couponsName}}
<span v-if="subItem.childItem.playTimeHour!=null&&subItem.childItem.playTimeHour!=''">（{{subItem.childItem.playTimeHour}}小时</span>
<span v-if="subItem.childItem.playTimeMinutes!=null&&subItem.childItem.playTimeMinutes!=''">
<template v-if="subItem.childItem.playTimeHour==null&&subItem.childItem.playTimeHour!=''">（</template>
{{subItem.childItem.playTimeMinutes}}分钟）</span>
</span>
<span v-if="subItem.type==7&&(index==0||index==tripDays.length-1)">
{{subItem.childItem.title}}
</span>
</div>
</td>
<td contenteditable="true">
{{item.TrifficType}}
</td>
<td contenteditable="true">
<span v-if="index!=tripList.length-1">旅游酒店</span>
<span v-else>无</span>
</td>
<td contenteditable="true">
<span v-if="index!=tripList.length-1">双人间</span>
<span v-else>无</span>
</td>
</tr>
<!-- <tr v-for="(item,index) in tripList">
<td contenteditable="true">{{getDayAddOne(CtObj.startDate,index)}}</td>
<td contenteditable="true">
<div v-for="subItem in item.details">
<span v-if="subItem.content">{{subItem.content}}</span>
<span v-else>{{subItem.title}}</span>
<span v-if="subItem.content==''&&subItem.title==''">温暖的家</span>
</div>
</td>
<td contenteditable="true">
{{item.TrifficType}}
</td>
<td contenteditable="true">
<span v-if="index!=tripList.length-1">旅游酒店</span>
<span v-else>无</span>
</td>
<td contenteditable="true">
<span v-if="index!=tripList.length-1">双人间</span>
<span v-else>无</span>
</td>
</tr> -->
<tr>
<td colspan="5" class="TC_LASTTD" contenteditable="true">
<div>备注：1、在主要景点的游览时间不小于此数的时间，以小时填; 2、交通工具不含景区观光车、索道等; 3、“交通工具”栏中的“标准”按各类别的标准填写。</div>
<div>飞机：头等舱/商务舱/经济舱； 汽车：空调大巴/空调卧铺/普通客车</div>
<div>火车：普通车/空调车/动车组（其中：软卧/硬卧/软座/硬座）；</div>
<div>轮船：普通客船/星级游船 人/间</div>
</td>
</tr>
</tbody>
</table>
</table>
</div>
<!-- <el-input type="textarea" rows="26" resize="none" v-model="CtObj.travelContent"></el-input> -->
</div>
<div class="block mtop15" id="anchor-5" ref="anchor5">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-people"></i>
</span>
<h2>
<em>游客信息</em>
</h2>
</div>
<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>序号</th>
<th>姓名</th>
<!-- <th>国籍</th>
<th>民族</th> -->
<th>性别</th>
<!-- <th>出生日期</th>
<th>身份证号</th> -->
<th>证件类型</th>
<th>护照号码</th>
<th>联系方式</th>
<th>身体状况</th>
</tr>
<tr v-for="(item,index) in guestList">
<td>{{index+1}}</td>
<td>{{item.surName+''+item.name}}</td>
<!-- <td>{{item.nationalityName}}</td>
<td></td> -->
<td>{{item.sex==1?'男':'女'}}</td>
<!-- <td>{{getDate(item.birthday)}}</td>
<td>{{item.idCard}}</td> -->
<td>护照</td>
<td>{{item.passportNo}}</td>
<td>{{item.mobilePhone}}</td>
<td>健康</td>
</tr>
</table>
</div>
<div class="block mtop15" id="anchor-6" ref="anchor6">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>自愿购物活动补充协议</em>
</h2>
</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th width="10%">具体时间</th>
<th width="15%">地点</th>
<th width="12%">购物场所名称</th>
<th width="12%">主要商品信息</th>
<th width="12%">最长停留时间（分钟）</th>
<th width="12%">其他说明</th>
<th width="12%">旅游者签名同意</th>
<th width="100">操作</th>
</tr>
<tr v-for="(item,index) in VoluntaryArr">
<td>
{{index+1}}
</td>
<td>
<span v-if="item.IsShow==0">{{item.specificTime}}</span>
<el-date-picker v-else v-model="item.specificTime" class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<span v-if="item.IsShow==0">{{item.Address}}</span>
<el-input type="text" v-model="item.Address" v-else></el-input>
</td>
<td style="text-align:left;">
<span v-if="item.IsShow==0">{{item.shoppName}}</span>
<el-input type="text" v-model="item.shoppName" v-else></el-input>
</td>
<td style="text-align:left;">
<span v-if="item.IsShow==0">{{item.CommodityInformation}}</span>
<el-input type="text" v-model="item.CommodityInformation" v-else></el-input>
</td>
<td>
<span v-if="item.IsShow==0">{{item.stayTime}}</span>
<el-input type="text" v-model="item.stayTime" v-else></el-input>
</td>
<td style="text-align:left;">
<span v-if="item.IsShow==0">{{item.other}}</span>
<el-input type="text" v-model="item.other" v-else></el-input>
</td>
<td>
<span v-if="item.IsShow==0">{{item.travelSign}}</span>
<el-input type="text" v-model="item.travelSign" v-else></el-input>
</td>
<td>
<el-tooltip class="item" effect="dark" content="修改" placement="top-start" v-if="item.IsShow==0">
<el-button type="primary" icon="el-icon-edit" circle @click="item.IsShow=1"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="保存" placement="top-start" v-if="item.IsShow==1">
<el-button type="primary" icon="iconfont icon-baocun" circle @click="item.IsShow=0"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="item.IsShow==0">
<el-button type="danger" icon="el-icon-delete" @click="delVoluntray(index)" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="9" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" @click="addRecord()" value="+添加记录" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-7" ref="anchor7">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>自愿付费项目补充协议</em>
</h2>
</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th width="10%">具体时间</th>
<th width="15%">地点</th>
<th width="12%">项目名称和内容</th>
<th width="12%">费用（元）</th>
<th width="12%">项目时长（分钟）</th>
<th width="12%">其他说明</th>
<th width="12%">旅游者签名同意</th>
<th width="100">操作</th>
</tr>
<tr v-for="(item,index) in WillingPayArr">
<td>
{{index+1}}
</td>
<td>
<span v-if="item.IsShow==0">{{item.specificTime}}</span>
<el-date-picker v-else v-model="item.specificTime" class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<span v-if="item.IsShow==0">{{item.Address}}</span>
<el-input type="text" v-model="item.Address" v-else></el-input>
</td>
<td style="text-align:left;">
<span v-if="item.IsShow==0">{{item.programName}}</span>
<el-input type="text" v-model="item.programName" v-else></el-input>
</td>
<td style="text-align:left;">
<span v-if="item.IsShow==0">{{item.money}}</span>
<el-input type="text" v-model="item.money" v-else></el-input>
</td>
<td>
<span v-if="item.IsShow==0">{{item.programTime}}</span>
<el-input type="text" v-model="item.programTime" v-else></el-input>
</td>
<td style="text-align:left;">
<span v-if="item.IsShow==0">{{item.other}}</span>
<el-input type="text" v-model="item.other" v-else></el-input>
</td>
<td>
<span v-if="item.IsShow==0">{{item.travelSign}}</span>
<el-input type="text" v-model="item.travelSign" v-else></el-input>
</td>
<td>
<el-tooltip class="item" effect="dark" content="修改" placement="top-start" v-if="item.IsShow==0">
<el-button type="primary" icon="el-icon-edit" circle @click="item.IsShow=1"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="保存" placement="top-start" v-if="item.IsShow==1">
<el-button type="primary" icon="iconfont icon-baocun" circle @click="item.IsShow=0"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="item.IsShow==0">
<el-button type="danger" icon="el-icon-delete" @click="delWilling(index)" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="9" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" @click="addWilling()" value="+添加记录" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</el-form>
<el-dialog custom-class='w600' title='合同复制' :visible.sync="dialogVisible" center>
<input type="button" v-if="backGuest.length>0" class="TCbtn-info" style="padding:8px 10px;float:right;margin-bottom:10px;" @click="copyContract()" value="批量复制合同"/>
<table border="0" cellspacing="0" cellpadding="0" class="singeRowTable">
<tr>
<th>旅客姓名</th>
<th>电话</th>
</tr>
<tr v-for="(item,index) in backGuest">
<td>{{item.surName+''+item.name}}</td>
<td>{{item.mobilePhone}}</td>
</tr>
<tr v-if="backGuest.length==0">
<td colspan="2">已经复制完成</td>
</tr>
</table>
</el-dialog>
<el-dialog custom-class='w600' title='发送信息' :visible.sync="msgDialog" center>
<input type="button" class="TCbtn-info" :class='{"TC_disabled":!this.canClick}' style="padding:8px 10px;float:right;margin-bottom:10px;" @click="sendMsg11()" :value="content"/>
<table border="0" cellspacing="0" cellpadding="0" class="singeRowTable">
<tr>
<th>
<label for="label" @change="getCkAll">
<input type="checkbox" id="label" v-model="ckedAll" >全选
</label>
</th>
<th>旅客姓名</th>
<th>电话</th>
<th>发送状态</th>
</tr>
<tr v-for="(item,index) in msgGuest">
<td>
<input v-model="item.checked" :disabled="item.isCanck" type="checkbox"/>
</td>
<td>{{item.clientName}}</td>
<td>{{item.clientCall}}</td>
<td>
<span v-if="item.msgSendStatus==0">未发送</span>
<span v-else-if="item.msgSendStatus==3">发送成功</span>
<span v-else>发送失败</span>
</td>
</tr>
</table>
</el-dialog>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
let valiTotalNumber = (rule, value, callback) => {
if (this.CtObj.totalNumber == 0||this.CtObj.totalNumber =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validateEach = (rule, value, callback) => {
if (this.CtObj.eachNumber == 0||this.CtObj.eachNumber =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validatepayType = (rule, value, callback) => {
if (this.CtObj.payType == 0||this.CtObj.payType =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validatesettleDisputeMode = (rule, value, callback) => {
if (this.CtObj.settleDisputeMode == 0 ||this.CtObj.settleDisputeMode=='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
return {
//国家列表
CountryList: [],
//客户省份列表
ClientProvinceList: [],
//客户城市列表
ClientCityList: [],
//公司省份列表
companyProvinceList:[],
//公司城市列表
companyCityList:[],
//监管机构省
JianProvinceList:[],
//监管机构市
JianCityList:[],
//选中切换
cked:1,
//查询参数
msg:{
TCID:0,
orderID:0,
guestId:0
},
addMsg: {
Country: 0,
Province: 0,
City: 0
},
dialogVisible:false,
//发送短信
msgDialog:false,
//参数
CtObj:{
//基本信息
clientName:'',
clientIdcardnum:'',
clientCall:'',
clientFax:'',
clientEmail:'',
clientPostCode:'',
clientCountryid:0,
clientProvinceid:0,
clientCityid:0,
clientAddress:'',
company:'',
businessCertificate:'',
companyCall:'',
companyFax:'',
companyEmail:'',
companyPostCode:'',
companyCountryid:0,
companyProvinceid:0,
companyCityid:0,
companyAddress:'',
agentName:'',
agentCall:'',
contractPlace:'',
//合同条款
totalNumber:2,
eachNumber:1,
productName:'',
startDate:'',
returnDate:'',
dayNum:'',
nightNum:'',
adultPrice:'',
childPrice:'',
servicePrice:'',
orderPrice:'',
payDate:'',
payType:'',
//客户同意
insuranceOpinion:'',
insuranceCompany:'',
insuranceProduct:'',
insuranceAmount:'',
minNumber:0,
insteadOpinion:'',
insteadCompany:'',
delayOpinion:'',
changeOpinion:'',
terminateOpinion:'',
carpoolOpinion:'',
carpoolCompany:'',
settleDisputeMode:2,
arbitrationCommission:'',
court:'',
otherMatter:'',
//投诉信息
companyComplainCall:'',
regulatorName:'',
regulatorComplainCall:'',
regulatorWebsite:'',
regulatorPostCode:'',
regulatorCountryid:0,
regulatorProvinceid:0,
regulatorCityid:0,
regulatorAddress:'',
//行程信息
travelContent:'',
//旅客信息
togetherRemark:'',
singleRemark:'',
nobedRemark:'',
aloneRemark:'',
tcid:0,
orderId:0,
tCNum:'',
payProtocol:'',
shopProtocol:''
},
//旅客名单
guestList:[],
tripList: [],
rules: {
clientName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
clientCall: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
agentName: [{ required: true, message: "请输入经办人", trigger: "blur" }],
agentCall: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
totalNumber: [{ validator: valiTotalNumber,trigger: 'change',required: true,}],
eachNumber:[{ validator: validateEach, trigger: "change",required: true, }],
productName:[{ required: true, message: "请填写产品名称", trigger: "blur" }],
startDate:[{ required: true, message: "请选择出发日期", trigger: "change" }],
returnDate:[{ required: true, message: "请选择返回日期", trigger: "blur" }],
dayNum:[{ required: true, message: "请选择天数", trigger: "change" }],
nightNum:[{ required: true, message: "请选择晚数", trigger: "change" }],
adultPrice:[{ required: true, message: "请填写成人价", trigger: "blur" }],
orderPrice:[{ required: true, message: "请填写费用合计", trigger: "blur" }],
payDate:[{ required: true, message: "请选择支付日期", trigger: "change" }],
payType:[{ validator: validatepayType , trigger: "change",required: true, }],
servicePrice:[{required: true, message: "请输入导游服务费", trigger: "blur" }],
insuranceProduct:[{ required: true, message: "请填写保险名称", trigger:'blur'}],
minNumber:[{ required: true, message: "请填写最低成团人数", trigger: "change" }],
settleDisputeMode:[{ required: true, validator: validatesettleDisputeMode, trigger: "change" }],
},
//自愿购物活动补充协议
VoluntaryArr:[],
//自愿付费项目补充协议
WillingPayArr:[],
//菜单列表
menuArr:['合同基本信息','合同协议条款','其他约定事项','投诉联系','行程信息','游客信息','自愿购物活动补充协议','自愿付费项目补充协议'],
ckedIndex:0,
LineName:'',
//交通
trifficList:[],
//行程
tripDays:[],
//旅客名单
backGuest:[],
//短信旅客名单
msgGuest:[],
ckedAll:false,
content:'发送短信', //按钮显示内容
totalTime:10,
canClick: true //添加canClick
};
},
methods: {
//跳转锚点
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.documentElement.scrollTop = anchor.offsetTop-70
},
getList(){
this.apiJavaPost("/api/contract/getContractInfo",this.msg,res => {
if (res.data.resultCode === 1) {
this.CtObj = res.data.data;
this.guestList = res.data.data.guestList;
this.CtObj.tcid = this.$route.query.TCID;
this.CtObj.orderId = this.$route.query.orderID;
this.CtObj.totalNumber=2;
this.CtObj.eachNumber=1;
this.VoluntaryArr = this.CtObj.shopProtocolList;
this.WillingPayArr = this.CtObj.payProtocolList;
if(this.CtObj.clientCountryid>0){
this.GetSubAreaList(this.CtObj.clientCountryid,1,1);
}
if(this.CtObj.clientProvinceid>0){
this.GetSubAreaList(this.CtObj.clientProvinceid,2,1);
}
if(this.CtObj.companyCountryid>0){
this.GetComAreaList(this.CtObj.companyCountryid,1,1);
}
if(this.CtObj.companyProvinceid>0){
this.GetComAreaList(this.CtObj.companyProvinceid,2,1);
}
if(this.CtObj.regulatorCountryid>0){
this.GetJianAreaList(this.CtObj.regulatorCountryid,1,1);
}
if(this.CtObj.regulatorProvinceid>0){
this.GetJianAreaList(this.CtObj.regulatorProvinceid,2,1);
}
this.CtObj.company = '四川和平国际旅行社有限公司';
this.CtObj.businessCertificate = 'L-SC-CJ00015';
this.CtObj.companyAddress='成都市锦江区一环路东五段87号2幢23层2310.2311.2312号';
this.CtObj.regulatorName = '四川省成都市旅游质监执法机构';
this.CtObj.regulatorComplainCall = '17708046437';
this.CtObj.companyComplainCall = '028-96927';
} else {
this.Error(res.data.message);
}
},null);
},
//获取国家
GetCounrty() {
this.apipost(
"dict_post_Destination_GetCountry", {},
res => {
this.CountryList = res.data.data;
},
err => {}
);
},
//获取客户省份和城市
GetSubAreaList(ID, type, isClear) {
let msg = {
Id: ID
};
if (type == 1) {
if (isClear != 1) {
this.CtObj.clientProvinceid = 0;
this.CtObj.clientCityid = 0;
}
} else if (type == 2) {
if (isClear != 1) {
this.CtObj.clientCityid = 0;
}
}
if (this.CtObj.clientCountryid != 0) {
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
if (type == 1) {
this.ClientProvinceList = res.data.data;
} else if (type == 2) {
this.ClientCityList = res.data.data;
}
},
err => {}
);
}
},
//获取公司身份城市
GetComAreaList(ID, type,isClear) {
let msg = {
Id: ID
};
if (type == 1) {
if (isClear != 1) {
this.CtObj.companyProvinceId = 0;
this.CtObj.companyCityId = 0;
}
} else if (type == 2) {
if (isClear != 1) {
this.CtObj.companyCityId = 0;
}
}
if (this.CtObj.companyCountryId != 0) {
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
if (type == 1) {
this.companyProvinceList = res.data.data;
} else if (type == 2) {
this.companyCityList = res.data.data;
}
},
err => {}
);
}
},
//获取监管机构省市
GetJianAreaList(ID, type, isClear){
let msg = {
Id: ID
};
if (type == 1) {
if (isClear != 1) {
this.CtObj.regulatorProvinceid = 0;
this.CtObj.regulatorCityid = 0;
}
} else if (type == 2) {
if (isClear != 1) {
this.CtObj.regulatorCityid = 0;
}
}
if (this.CtObj.regulatorCountryid != 0) {
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
if (type == 1) {
this.JianProvinceList = res.data.data;
} else if (type == 2) {
this.JianCityList = res.data.data;
}
},
err => {}
);
}
},
getDate(date){
return moment(date).format("YYYY-MM-DD");
},
//提交数据
SaveMsg(){
this.CtObj.status = 1;
this.CtObj.contractStatus=2;
let VolArr = [];
let WalArr = [];
if(this.VoluntaryArr.length>0){
this.VoluntaryArr.forEach(x=>{
if(x.IsShow==0){
VolArr.push(x);
}
})
if(VolArr.length>0){
this.CtObj.shopProtocol = JSON.stringify(VolArr);
}else{
this.CtObj.shopProtocol=''
}
}
if(this.WillingPayArr.length>0){
this.WillingPayArr.forEach(x=>{
if(x.IsShow==0){
WalArr.push(x);
}
})
if(WalArr.length>0){
this.CtObj.payProtocol = JSON.stringify(WalArr);
}else{
this.CtObj.payProtocol=''
}
}
this.CtObj.travelContent= this.$refs.TcTravel_Table.innerHTML;
this.apiJavaPost("/api/contract/dosaveOrUpdate",this.CtObj,res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
this.dialogVisible=false;
this.getList();
} else {
this.Error(res.data.message);
}
},null);
},
//跳转至预览
goUrl(){
this.$router.push({
name: 'TravelContractDetail',
query: {
TCID: this.$route.query.TCID,
guestId:this.CtObj.guestId,
orderID: this.$route.query.orderID,
blank: "y",
}
});
},
//作废
getinvalid(){
this.$confirm('是否作废?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.CtObj.status=0;
this.CtObj.auditContract=0;
this.apiJavaPost("/api/contract/dosaveOrUpdate",this.CtObj,res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
this.getList();
} else {
this.Error(res.data.message);
}
},null);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//提交
submitForm(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.SaveMsg();
} else {
this.Error('请完成必填项');
return false;
}
});
},
sendAudit(){
this.CtObj.auditContract=1;
this.apiJavaPost("/api/contract/dosaveOrUpdate",this.CtObj,res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
} else {
this.Error(res.data.message);
}
},null);
},
//添加补充协议
addRecord(){
let obj={
specificTime:'',
Address:'',
shoppName:'',
CommodityInformation:'',
stayTime:'',
other:'',
travelSign:'',
IsShow:1
}
this.VoluntaryArr.push(obj);
},
//删除补充协议1
delVoluntray(index){
this.VoluntaryArr.splice(index, 1);
},
//添加自愿付费协议
addWilling(){
let obj={
specificTime:'',
Address:'',
programName:'',
money:'',
programTime:'',
other:'',
travelSign:'',
IsShow:1
}
this.WillingPayArr.push(obj);
},
//删除自愿付费协议
delWilling(index){
this.WillingPayArr.splice(index, 1);
},
//滚动条滚动选中tab
menu() {
var _self = this;
_self.scroll = (document.documentElement.scrollTop || document.body.scrollTop)+70;
//滑动到指定位置相应菜单高亮
var a_0 = this.$refs.anchor0.offsetTop;
var a_1 = this.$refs.anchor1.offsetTop;
var a_2 = this.$refs.anchor2.offsetTop;
var a_3 = this.$refs.anchor3.offsetTop;
var a_4 = this.$refs.anchor4.offsetTop;
var a_5 = this.$refs.anchor5.offsetTop;
var a_6 = this.$refs.anchor6.offsetTop;
var a_7 = this.$refs.anchor7.offsetTop;
// var a_0 = $("#anchor-0").offset().top;
// var a_1 = $("#anchor-1").offset().top;
// var a_2 = $("#anchor-2").offset().top;
// var a_3 = $("#anchor-3").offset().top;
// var a_4 = $("#anchor-4").offset().top;
// var a_5 = $("#anchor-5").offset().top;
// var a_6 = $("#anchor-6").offset().top;
// var a_7 = $("#anchor-7").offset().top;
if (_self.scroll < a_0) {
this.ckedIndex = 0
} else if (_self.scroll>a_0 && _self.scroll < a_1) {
this.ckedIndex = 1
} else if (_self.scroll > a_2 && _self.scroll<a_3) {
this.ckedIndex = 2
}else if (_self.scroll > a_3 && _self.scroll<a_4) {
this.ckedIndex = 3
}else if (_self.scroll > a_4 && _self.scroll<a_5) {
this.ckedIndex = 4
}else if (_self.scroll > a_5 && _self.scroll<a_6) {
this.ckedIndex = 5
}else if (_self.scroll > a_6 && _self.scroll<a_7) {
this.ckedIndex = 6
}else if (_self.scroll > a_7) {
this.ckedIndex = 7
}
},
//加一天返回
getDayAddOne(day,num){
return moment(day).add(num,'days').format('MM/DD');
},
//点击合同获取旅客信息
getGuestList(){
let msg={
orderId:this.msg.orderID
}
this.apiJavaPost("/api/contract/getContractGuestByOrderId",msg,res => {
if (res.data.resultCode === 1) {
this.backGuest=res.data.data;
} else {
this.Error(res.data.message);
}
},null);
},
//获取旅客短信列表
getMsgList(){
let msg={
orderId:this.msg.orderID
}
this.apiJavaPost("/api/contract/sendMsgList",msg,res => {
if (res.data.resultCode === 1) {
this.msgGuest=res.data.data;
this.msgGuest.forEach(x=>{
x.checked=false;
if(x.msgSendStatus==3){
x.isCanck=true;
}else{
x.isCanck=false;
}
})
} else {
this.Error(res.data.message);
}
},null);
},
//复制合同
copyContract(){
let newArr=[];
this.guestList.forEach(x=>{
newArr.push(x.id);
})
this.CtObj.guestIds=newArr.join(',');
this.submitForm('CtObj');
},
//点击全选
getCkAll(){
var that=this;
if(that.ckedAll){
this.msgGuest.forEach(x=>{
if(x.msgSendStatus==3){
x.checked=false;
}else{
x.checked = true;
}
})
}else{
this.msgGuest.forEach(x=>{
x.checked = false;
})
}
},
sendMsg11(){
let newArr = [];
this.msgGuest.forEach(x=>{
let obj={};
if(x.checked){
newArr.push(x);
}
})
if(newArr.length==0){
this.Error('请勾选要发送信息的旅客！');
return;
}
if (!this.canClick)
return
this.sendMsg(); //调用发送短信
this.canClick = false
this.content = this.totalTime + 's后重新发送'
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 's后重新发送'
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = '重新发送验证码'
this.totalTime = 10
this.canClick = true //这里重新开启
}
},1000)
},
//发送短信
sendMsg(){
let msgObj=[];
let dateTime = moment(this.CtObj.startDate).format("YYYY-MM-DD");
let lineTeam = this.CtObj.productName;
let days = this.CtObj.dayNum;
let nights = this.CtObj.nightNum;
this.msgGuest.forEach(x=>{
let obj={};
if(x.checked){
obj.mobiles=x.clientCall;
obj.Url=`http://yx.oytour.com/#/clientConfirm?TCID=${this.msg.TCID}&orderID=${this.msg.orderID}&guestId=${x.guestId}`;
msgObj.push(obj);
}
})
let msg={
msgObj:msgObj,
dateTime:dateTime,
lineTeam:lineTeam,
days:days,
nights:nights,
orderID:this.msg.orderID
}
this.apiJavaPost("/api/contract/sendMassage",msg,res => {
if (res.data.resultCode === 1) {
this.getMsgList();
} else {
this.Error(res.data.message);
}
},null);
},
GetTrip(id, TCID) {
this.tripList = [];
this.startDate = '';
var nTCID = 0;
if (TCID) {
nTCID = TCID;
}
var msg = {
configId: 0,
tcid: nTCID,
isClick:1//不算统计
};
if (id !== undefined) {
//根据ID 获取行程内容
this.apipost(
"b2b_get_GetB2BTravelInfoNoDes", msg,
res => {
if (res.data.resultCode == 1) {
if (res.data.data.priceList && res.data.data.priceList.length > 0) {
this.startDate = res.data.data.priceList[0].startDate;
}
this.tripDays=res.data.data.dayList;
this.trifficList = res.data.data.trafficList;
this.tripList = res.data.data.dayList;
this.LineName=res.data.data.lineName;
this.init();
}
},
err => {}
);
} else {
var dayList = [];
this.subConfig.DayList.forEach((objItem, objIndex) => {
var dayItem = this.$tripUtils.daysArrayObj();
dayItem.dayNum = objItem.dayNum;
//每一天的数组
var dayArray = [];
//子项遍历
objItem.dayArray.forEach(subItem => {
switch (subItem.Type) {
//交通
case "1":
var subTraffiArray = [];
subItem.childItem.SubTraffic.forEach(subTrafficItem => {
subTraffiArray.push({
startCityName: subTrafficItem.StartCityName,
arrivalType: subTrafficItem.ArrivalType,
arrivalCityName: subTrafficItem.ArrivalCityName
});
});
var trafficObj = {
type: subItem.Type,
childItem: {
description: subItem.childItem.Description,
subTraffic: subTraffiArray
}
};
dayArray.push(trafficObj);
break;
//景点
case "2":
var imgArray = [];
subItem.childItem.ImaArray.forEach(imgItem => {
imgArray.push({
url: imgItem.Url,
name: imgItem.Name
});
});
var scenicObj = {
type: subItem.Type,
childItem: {
couponsName: subItem.childItem.CouponsName,
couponsTicketName: subItem.childItem.CouponsTicketName,
playTimeHour: subItem.childItem.PlayTimeHour,
playTimeMinutes: subItem.childItem.PlayTimeMinutes,
description: subItem.childItem.Description,
imaArray: imgArray
}
};
dayArray.push(scenicObj);
break;
//酒店
case "3":
var imgArray = [];
subItem.childItem.ImaArray.forEach(imgItem => {
imgArray.push({
url: imgItem.Url,
name: imgItem.Name
});
});
var hotelObj = {
type: subItem.Type,
childItem: {
hotelName: subItem.childItem.HotelName,
hotelProductName: subItem.childItem.HotelProductName,
useDinnerType: subItem.childItem.UseDinnerType,
description: subItem.childItem.Description,
imaArray: imgArray
}
};
dayArray.push(hotelObj);
break;
//餐厅
case "4":
var imgArray = [];
subItem.childItem.ImaArray.forEach(imgItem => {
imgArray.push({
url: imgItem.Url,
name: imgItem.Name
});
});
var dinnerObj = {
type: subItem.Type,
childItem: {
dinnerName: subItem.childItem.DinnerName,
mealName: subItem.childItem.MinnerName,
useDinnerType: subItem.childItem.UseDinnerType,
useTimeHour: subItem.childItem.UseTimeHour,
useTimeMinutes: subItem.childItem.UseTimeMinutes,
description: subItem.childItem.Description,
descriptionText: subItem.childItem.Description,
imaArray: imgArray
}
};
dayArray.push(dinnerObj);
break;
//自由活动
case "5":
var freedomObj = {
type: subItem.Type,
childItem: {
description: subItem.Description,
descriptionText: subItem.Description
}
};
dayArray.push(freedomObj);
break;
//温馨提示
case "6":
var warmObj = {
type: subItem.Type,
childItem: {
description: subItem.Description,
descriptionText: subItem.Description
}
};
dayArray.push(warmObj);
break;
//行程大点
case "7":
var titleObj = {
type: subItem.Type,
childItem: {
title: subItem.childItem.Title,
description: subItem.childItem.Description
}
};
dayArray.push(titleObj);
break;
}
});
dayItem.dayArray = dayArray;
dayList.push(dayItem);
});
this.tripList = dayList;
this.init();
}
},
init() {
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
};
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 += '-';
} else if (z.arrivalType == 2) {
title += '-';
} else if (z.arrivalType == 3) {
title += '-';
} else {
title += '-';
}
if (i + 1 == y.childItem.subTraffic.length) {
title += z.arrivalCityName;
}
});
let obj = {
title: title,
content: y.childItem.description,
img: "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
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.playTimeHour
};
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
};
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
};
activy.push(obj);
} else if (y.type == 6) {
let obj = {
title: y.childItem.title,
content: y.childItem.description,
img: "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
tips.push(obj);
}
if (y.type == 3) {
jiu2.push(y.childItem.hotelName);
useDinnerTypeBy = y.childItem.useDinnerType;
}
});
if (
can.breakfirst == "敬请自理" &&
useDinnerTypeBy.indexOf("1") != -1
) {
can.breakfirst = "酒店内享用早餐";
}
if (can.lanuch == "敬请自理" && useDinnerTypeBy.indexOf("2") != -1) {
can.lanuch = "酒店自助";
}
if (can.dinner == "敬请自理" && useDinnerTypeBy.indexOf("3") != -1) {
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 :
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);
});
for (let i = this.tripList.length - 1; i >= 0; i--) {
if (i == 0) this.tripList[i].can.breakfirst = "敬请自理";
else {
this.tripList[i].can.breakfirst = this.tripList[i - 1].can.breakfirst;
if (
this.tripList[i].lineId != 5 &&
this.tripList[i].can.breakfirst == "敬请自理"
)
this.tripList[i].can.breakfirst = "酒店内享用早餐";
}
}
this.trifficList.forEach((x,index)=>{
if(x.airportPickUp==1||x.airportPickUp==2){
if(x.isUseBus==1){
this.tripDays[index].TrifficType='飞机+大巴'
}
}
if(x.airportPickUp==0&&x.isUseBus==1){
this.tripDays[index].TrifficType='大巴'
}
if(x.airportPickUp==1||x.airportPickUp==2){
if(x.isUseBus==0){
this.tripDays[index].TrifficType='飞机'
}
}
if(x.airportPickUp==0||x.airportPickUp==0){
if(x.isUseBus==0){
this.tripDays[index].TrifficType='无'
}
}
})
//生成其他约定事项
let otherMatter='';
otherMatter+=`本人已阅读了本合同所有条款，乙方（旅行社）已就合同条款对本人进行了真实、准确、完整的说明，本人已完全了解合同条款的内容及含义并同意本合同条款包括行程中有关自愿购物活动以及自愿参加另付费旅游项目的说明，同时本人悉知自身身体适宜此次旅行。\n`
otherMatter+='烦请务必携带自身常用药品，如有身体不适必须第一时间告知随团导游或领队，并及时到当地医院做检查，如因个人原因耽误病情，一切后果均由客人自行承担。\n'
otherMatter+='旅游意外伤害险：若旅行社购买赠送客人，如有出险理赔视为旅行社责任风险分摊，保险公司赔偿金额为最终赔付，旅行社不再进行赔偿。\n'
otherMatter+='签约委托授权书：本人已征得其余全体委托人同意作为本次旅游出行签约代表（全体委托人名单详见游客名单），全体委托人享受本合同约定的权利，履行本合同约定的义务，受托人在旅游合同及其附件上的签字全体委托人均予以认可。\n'
otherMatter+='健康承诺书：在旅游过程中，如本人未按贵社要求如实告知相关健康情况，本人承担因此而产生的全部后果，并承担给贵社造成损失的赔偿责任。本人自愿放弃不适宜本人身体状况参加的相应景点或相应活动；若因本人坚持参加而所产生的全部后果均由本人自行承担。本人因自身过错，造成的一切其他损失由本人承担。本人作为此次出行的签约代表，已就此承诺告知了全体委托人及其直系亲属并得到他们的同意。\n'
otherMatter+='如其他游客不予认可本合同或者本人未取得授权、未告知本合同及相关告知书内容的，由本人承担相应责任。'
this.CtObj.otherMatter=otherMatter;
},
},
mounted() {
this.GetCounrty();
this.msg.TCID = this.$route.query.TCID;
this.msg.orderID = this.$route.query.orderID;
this.msg.guestId = this.$route.query.guestId;
this.getList();
this.GetTrip(0,this.msg.TCID);
this.$nextTick(function () {
//滚动监听事件
window.addEventListener('scroll', this.menu)
});
}
};
</script>