<style>
  .TD_MainContent {
    min-height: 650px;
    background: url(../assets/img/bodyBg.png);
    padding-top: 10px;
    font: normal 13px 'Microsoft Yahei';
    color: #555;
  }

  .TD_MainContent .container-fluid {
    padding: 0 20px;
  }

  .TD_MainContent .block {
    border: 1px solid #cdcdcd;
    background: #f9f9f9;
    position: relative;
    margin-bottom: 20px;
  }

  .TD_MainContent .mtop15 {
    margin-top: 15px;
  }

  .TD_MainContent .blockTitle {
    border-bottom: 1px solid #cdcdcd;
    background-color: #efefef;
  }

  .TD_MainContent .blockTitle span.icon {
    border-right: 1px solid #CDCDCD;
    position: absolute;
    left: 10px;
    height: 40px;
    padding-right: 10px;
    padding-top: 8px;
  }

  .TD_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;
  }

  .TD_MainContent .blockTitle h2 span {
    position: absolute;
    right: 10px;
    top: 0;
  }

  .TD_MainContent .contract {
    background: #f9f9f9;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .TD_MainContent .title {
    font-size: 18px;
    margin-top: 10px;
    color: #555;
    height: 100px;
    position: relative;
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 40px !important;
  }

  .TD_MainContent .title p {
    margin: 0;
    font-size: 12px;
  }

  .TD_MainContent .contractNo {
    font-weight: bold;
    margin-right: 5px;
  }

  .TD_MainContent .title h1 {
    font-size: 24px;
    text-align: left;
  }

  .TD_MainContent .title p span {
    font-style: normal;
    font-size: 14px;
    color: #0088cc;
  }

  .TD_MainContent .menu {
    overflow: hidden;
    background: #efefef;
    position: relative;
    width: 100%;
  }

  .TD_MainContent .contract .menu>ul {
    border-bottom: 0px none;
    margin-bottom: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .TD_MainContent .contract .menu>ul>li {
    margin-bottom: -1px;
    float: left;
    list-style: none;
    line-height: 20px;
    border-radius: 0px;
    border-right: 1px solid #DDD;
    border-top: 1px solid #DDD;
    margin: 0px;
    outline: none medium;
    padding: 9px 10px 8px;
    border-bottom: 1px solid #DDD;
    color: #999;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
  }

  .TD_MainContent .contract .menu>ul>li.active {
    background: #f9f9f9;
    color: #444;
    border-bottom-color: #f9f9f9;
  }

  .TD-introduction,
  .TD-basic,
  .TD-break,
  .TD-duty,
  .TD-other,
  .TD-convention {
    margin: 20px 30px 30px 30px;
    font-size: 13px;
    display: none;
  }

  .TD-introduction p,
  .TD-basic p,
  .TD-break p,
  .TD-duty p,
  .TD-other p {
    margin: 5px 0 0 0;
    line-height: 27px;
  }

  .TD-introduction p span,
  .TD-basic p span,
  .TD-break p span,
  .TD-duty p span,
  .TD-other p span {
    border-bottom: #cbcbcb 1px solid;
    padding: 0 5px;
    color: #0088cc;
    margin: 0 5px;
  }

  .TD-introduction h2,
  .TD-basic h2,
  .TD-break h2,
  .TD-duty h2,
  .TD-other h2 {
    font-size: 16px;
  }

  .TD_MainContent h1,
  .TD_MainContent h2,
  .TD_MainContent h3 {
    line-height: 40px !important;
  }

  .TD_MainContent .checkedNav {
    display: block !important;
  }

  .TD_MainContent .SignTable {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 0px;
    table-layout: fixed;
    font-size: 13px;
    line-height: 25px;
  }

  .TD_MainContent .signDiv {
    width: 160px;
    height: 120px;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 0;
    top: 0px;
    z-Index: 100;
  }

  .TD_MainContent .esealDiv {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 0;
    top: 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-Index: 100;
  }

  .TD_MainContent .eseal {
    padding: 20px 30px 30px 30px;
    background-color: #fff;
    display: none;
  }

  .TD_MainContent .SignTable>tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }

  .TD_MainContent .SignTable tr:first-child td {
    position: relative;
    width: 25%;
  }

  .TD_MainContent .SignTable tbody td {
    height: 30px;
  }

  .TD_MainContent .guests,
  .TD_MainContent .routes,
  .TD_MainContent .shoppings,
  .TD_MainContent .attachments,
  .TD_MainContent .activitys {
    font-size: 13px;
    margin: 20px 30px 30px 30px;
    display: none;
  }

  .TD_MainContent .ZTable {
    width: 100%;
    border: none;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .TD_MainContent .ZTable>tbody>tr>td {
    word-break: break-word;
    border: solid #ddd 1px;
    padding: 8px;
    line-height: 25px;
  }

  .TD_MainContent .text_center {
    text-align: center;
  }

  .TD_MainContent .page_break_avoid p {
    padding-bottom: 15px;
  }

  .TDteam_Table {
    width: 900px;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .TDteam_Table td {
    border: 1px solid rgb(0, 0, 0);
    word-break: break-all;
    padding: 5px;
  }

  .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;
  }

  .TCbtn-info:hover {
    color: #ffffff;
    opacity: 0.8;
  }

  /*灰色遮罩层*/
  .TD_MainContent .fade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
  }

  /*弹出层*/
  .TD_MainContent .qrCodeDiv {
    width: 236px;
    height: 275px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #d1d1d1;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -118px;
    z-index: 999;
    border-radius: 5px;
  }

  .TD_MainContent .Ec_cha {
    position: absolute;
    cursor: pointer;
    right: -20px;
    top: -25px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    text-align: center;
    border-radius: 50%;
    line-height: 30px;
  }

  .TD_MainContent .Ec_cha:hover {
    color: red;
  }

  .TD_MainContent .TcTravel_Table td {
    border: 1px solid rgb(0, 0, 0);
    word-break: break-all;
    padding: 5px;
    line-height: 2;
  }

  .TD_MainContent .TcTravel_Table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .TD_MainContent .TC_LASTTD div {
    margin-bottom: 10px;
  }

  .Travel_DetailQuan{
      display: inline-block;
      width:23px;
      height:23px;
      border:1px solid #d1d1d1;
      border-radius: 5px;
      text-align: center;
      line-height: 20px;
    }
    .Travel_DetailQuan i {
      font-size:12px;
      color:gray;
    }
</style>

<template>
  <div class="TD_MainContent" v-loading="pdfLoading">
    <div class="container-fluid">
      <div class="block mtop15">
        <div class="blockTitle">
          <span class="icon"><i class="iconfont icon-wenjian"></i></span>
          <h2>合同详情
            <span>
              <input type="button" class="TCbtn-info" v-if="dataList.status==1" @click="getinvalid()" value="作废" />
              <input type="button" class="TCbtn-info" v-if="dataList.companySignature==''"
                @click="isShowFade=true,GetQrCode()" value="客户签字" />
              <input type="button" class="TCbtn-info" v-if="dataList.companySignature!=''" value="下载"
                @click="toContractPDF(dataList.contractNum)" />
            </span>
          </h2>
        </div>
        <div class="contract">
          <div class="title">
            <h1>四川和平国际旅行社有限公司团队出境旅游合同</h1>
            <p class="contractNo">合同编号:<span>{{dataList.contractNum}}</span></p>
          </div>
          <div class="menu">
            <ul>
              <li :class="{'active':cked==1}" @click="cked=1">使用说明</li>
              <li :class="{'active':cked==2}" @click="cked=2">合同信息</li>
              <li :class="{'active':cked==3}" @click="cked=3">签字盖章</li>
              <li :class="{'active':cked==4}" @click="cked=4">游客名单</li>
              <li :class="{'active':cked==5}" @click="cked=5">团队行程</li>
              <li :class="{'active':cked==6}" @click="cked=6">自愿购物活动补充协议</li>
              <li :class="{'active':cked==7}" @click="cked=7">自愿参加另行付费旅游项目补充协议</li>
              <li :class="{'active':cked==8}" @click="cked=8">文明旅游公约</li>
            </ul>
          </div>
          <!-- 使用说明 -->
          <div class="TD-introduction" :class="{'checkedNav':cked==1}">
            <p>
              1.本合同为示范文本,供中华人民共和国境内(不含港、澳、台地区)经营出境旅游业务或者边境旅游业务的旅行社(以下简称“出境社”)与出境旅游者(以下简称“旅游者”)之间签订团队出境包价旅游(不含赴台湾地区旅游)合同时使用。
            </p>
            <p>2.双方当事人应当结合具体情况选择本合同协议条款中所提供的选择项,空格处应当以文字形式填写完整。</p>
            <p>3.双方当事人可以书面形式对本示范文本内容进行变更或者补充,但变更或者补充的内容,不得减轻或者免除应当由出境社承担的责任。</p>
            <p>4.本示范文本由国家旅游局和国家工商行政管理总局共同制定、解释,在全国范围内推行使用。</p>
          </div>
          <!-- 合同信息 -->
          <div class="TD-basic" :class="{'checkedNav':cked==2}">
            <p>旅游者:<span>{{dataList.clientName}}</span>等<span
                v-if="dataList.guestList">{{dataList.guestList.length}}</span>人(名单可附页,需出境社和旅游者代表签字盖章确认);</p>
            <p>出境社:<span>{{dataList.company}}</span></p>
            <p>旅行社业务经营许可证编号:<span>{{dataList.businessCertificate}}</span></p>
            <br>
            <h2>第一章 术语和定义</h2>
            <h3>第一条 本合同术语和定义</h3>
            <p>
              1.团队出境旅游服务,指出境社依据《中华人民共和国旅游法》、《中国公民出国旅游管理办法》和《旅行社条例》等法律、法规,组织旅游者出国旅游及赴中外双方政府商定的国外边境区域和港、澳地区等旅游目的地旅游,代办旅游签证/签注,代订公共交通客票,提供餐饮、住宿、游览等两项以上服务活动。
            </p>
            <p>2.旅游费用,指旅游者支付给出境社,用于购买本合同约定的旅游服务的费用。</p>
            <p>旅游费用包括:</p>
            <p>(1)必要的签证/签注费用(旅游者自办的除外);</p>
            <p>(2)交通费(含境外机场税);</p>
            <p>(3)住宿费;</p>
            <p>(4)餐费(不含酒水费);</p>
            <p>(5)出境社统一安排的景区景点的门票费;</p>
            <p>(6)行程中安排的其他项目费用;</p>
            <p>(7)导游服务费;</p>
            <p>(8)边境旅游中办理旅游证件的费用;</p>
            <p>(9)出境社、境外地接社等其他服务费用。</p>
            <p>旅游费用不包括:</p>
            <p>(1)办理护照、港澳通行证的费用;</p>
            <p>(2)办理离团的费用;</p>
            <p>(3)旅游者投保的人身意外伤害保险费用;</p>
            <p>(4)合同未约定由出境社支付的费用,包括但不限于行程以外非合同约定项目所需的费用、自行安排活动期间发生的费用; </p>
            <p>(5)境外小费;</p>
            <p>(6)行程中发生的旅游者个人费用,包括但不限于交通工具上的非免费餐饮费、行李超重费,住宿期间的洗衣、通讯 、饮料及酒类费用,个人娱乐费用,个人伤病医疗费,寻找个人遗失物品的费用及报酬,个人原因造成的赔偿费用。
            </p>
            <p>3.履行辅助人,指与旅行社存在合同关系,协助其履行本合同义务,实际提供相关服务的法人、自然人或者其他组织。</p>
            <p>4.自由活动,特指《旅游行程单》中安排的自由活动。</p>
            <p>5.自行安排活动期间,指《旅游行程单》中安排的自由活动期间、旅游者不参加旅游行程活动期间、每日行程开始前、结束后旅游者离开住宿设施的个人活动期间、旅游者经领队或者导游同意暂时离团的个人活动期间。</p>
            <p>
              6.不合理的低价,指出境社提供服务的价格低于接待和服务费用或者低于行业公认的合理价格,且无正当理由和充分证据证明该价格的合理性。其中,接待和服务费用主要包括出境社提供或者采购餐饮、住宿、交通、游览、导游或者领队等服务所支出的费用。
            </p>
            <p>
              7.具体购物场所,指购物场所有独立的商号以及相对清晰、封闭、独立的经营边界和明确的经营主体,包括免税店,大型购物商场,前店后厂的购物场所,景区内购物场所,景区周边或者通往景区途中的购物场所,服务旅游团队的专门商店,商品批发市场和与餐饮、娱乐、停车休息等相关联的购物场所等。
            </p>
            <p>
              8.旅游者投保的人身意外伤害保险,指旅游者自己购买或者通过旅行社、航空机票代理点、景区等保险代理机构购买的以旅行期间自身的生命、身体或者有关利益为保险标的的短期保险,包括但不限于航空意外险、旅游意外险、紧急救援保险、特殊项目意外险。
            </p>
            <p>9.离团,指团队旅游者在境外经领队同意不随团队完成约定行程的行为。</p>
            <p>10.脱团,指团队旅游者在境外未经领队同意脱离旅游团队,不随团队完成约定行程的行为。</p>
            <p>11.转团,指由于未达到约定成团人数不能出团,出境社征得旅游者书面同意,在行程开始前将旅游者转至其他出境社所组的出境旅游团队履行合同的行为。</p>
            <p>12.拼团,指出境社在保证所承诺的服务内容和标准不变的前提下,在签订合同时经旅游者同意,与其他出境社招徕的旅游者拼成一个团统一安排旅游服务的行为。</p>
            <p>13.不可抗力,指不能预见、不能避免并不能克服的客观情况,包括但不限于因自然原因和社会原因引起的,如自然灾害、战争、恐怖活动、动乱、骚乱、罢工、突发公共卫生事件、政府行为。</p>
            <p>14.已尽合理注意义务仍不能避免的事件,指因当事人故意或者过失以外的客观因素引发的事件,包括但不限于重大礼宾活动导致的交通堵塞,飞机、火车、班轮、城际客运班车等公共客运交通工具延误或者取消,景点临时不开放。
            </p>
            <p>15.必要的费用,指出境社履行合同已经发生的费用以及向地接社或者履行辅助人支付且不可退还的费用,
              包括乘坐飞机(车、船)等交通工具的费用(含预订金)、旅游签证/签注费用、饭店住宿费用(含预订金)、旅游观光汽车的人均车租等。</p>
            <p>16.公共交通经营者,指航空、铁路、航运客轮、城市公交、地铁等公共交通工具经营者。</p>
            <h2>第二章 合同的订立</h2>
            <h3>第二条 旅游行程单</h3>
            <p>出境社应当提供带团号的《旅游行程单》(以下简称《行程单》),经双方签字或者盖章确认后作为本合同的组成部分。《行程单》应当对如下内容作出明确的说明:</p>
            <p>(1)旅游行程的出发地、途经地、目的地、结束地,线路行程时间(按自然日计算,含乘飞机、车、船等在途时间,不足24小时以一日计); </p>
            <p>(2)旅游目的地地接社的名称、地址、联系人和联系电话;</p>
            <p>(3)交通服务安排及其标准(明确交通工具及档次等级、出发时间以及是否需中转等信息);</p>
            <p>(4)住宿服务安排及其标准(明确住宿饭店的名称、地址、档次等级及是否有空调、热水等相关服务设施);</p>
            <p>(5)用餐(早餐和正餐)服务安排及其标准(明确用餐次数、地点、标准);</p>
            <p>(6)出境社统一安排的游览项目的具体内容及时间(明确旅游线路内容包括景区点及游览项目名称、景区点停留的最少时间);</p>
            <p>(7)自由活动的时间;</p>
            <p>(8)行程安排的娱乐活动(明确娱乐活动的时间、地点和项目内容);</p>
            <p>《行程单》用语须准确清晰,在表明服务标准用语中不应当出现“准×星级”、“豪华”、“仅供参考”、“以××为准”、“与××同级”等不确定用语。</p>
            <h3>第三条 订立合同</h3>
            <p>旅游者应当认真阅读本合同条款和《行程单》,在旅游者理解本合同条款及有关附件后,出境社和旅游者应当签订书面合同。</p>
            <p>由旅游者的代理人订立合同的,代理人需要出具被代理的旅游者的授权委托书。</p>
            <h3>第四条 旅游广告及宣传品</h3>
            <p>出境社的旅游广告及宣传品应当遵循诚实信用的原则,其内容符合《中华人民共和国合同法》要约规定的,视为本合同的组成部分,对出境社和旅游者双方具有约束力。</p>
            <h2>第三章 合同双方的权利义务</h2>
            <h3>第五条 出境社的权利</h3>
            <p>1.根据旅游者的身体健康状况及相关条件决定是否接纳旅游者报名参团;</p>
            <p>2.核实旅游者提供的相关信息资料;</p>
            <p>3.按照合同约定向旅游者收取全额旅游费用;</p>
            <p>4.旅游团队遇紧急情况时,可以采取安全防范措施和紧急避险措施并要求旅游者配合;</p>
            <p>5.拒绝旅游者提出的超出合同约定的不合理要求;</p>
            <p>6.要求旅游者对在旅游活动中或者在解决纠纷时损害出境社合法权益的行为承担赔偿责任;</p>
            <p>7.要求旅游者健康、文明旅游,劝阻旅游者违法和违反社会公德的行为。</p>
            <h3>第六条 出境社的义务</h3>
            <p>1.按照合同和《行程单》约定的内容和标准为旅游者提供服务,不擅自变更旅游行程安排,不降低服务标准;</p>
            <p>2.向合格的供应商订购产品和服务;</p>
            <p>3.不以不合理的低价组织旅游活动,诱骗旅游者,并通过安排购物或者另行付费旅游项目获取回扣等不正当利益;</p>
            <p>组织、接待旅游者,不指定具体购物场所,不安排另行付费旅游项目,但是,经双方协商一致或者旅游者要求,且不影响其他旅游者行程安排的除外;</p>
            <p>
              4.在出团前采取行前说明会等方式,如实告知具体行程安排和有关具体事项。具体事项包括但不限于旅游目的地国家或者地区的相关法律、法规和风俗习惯、文化传统和宗教禁忌;旅游活动中的安全注意事项和安全避险措施、旅游者不适合参加旅游活动的情形;出境社依法可以减免责任的信息;境外小费标准、外汇兑换事项、应急联络方式(包括我驻外使领馆及出境社境内和境外应急联系人及联系方式);法律、法规规定的其他应当告知的事项;
            </p>
            <p>5.为旅游团队安排符合《中华人民共和国旅游法》、《旅行社条例》、《中国公民出国旅游管理办法》等法律、法规规定的持证领队人员;</p>
            <p>6.妥善保管旅游者交其代管的证件、行李等物品;</p>
            <p>7.为旅游者发放用中英文固定格式书写、由旅游者填写的安全信息卡(内容包括旅游者的姓名、国籍、血型、应急联络方式等);</p>
            <p>8.旅游者人身、财产权益受到损害时,应采取合理必要的保护和救助措施,避免旅游者人身、财产权益损失扩大;</p>
            <p>9.积极协调处理旅游行程中的纠纷,采取适当措施防止损失扩大;</p>
            <p>10.提示旅游者按照规定投保人身意外伤害保险;</p>
            <p>11.向旅游者提供发票;</p>
            <p>12.依法对旅游者个人信息保密。</p>
            <h3>第七条 旅游者的权利</h3>
            <p>1.要求出境社按照合同及《行程单》约定履行相关义务;</p>
            <p>2.拒绝出境社未经事先协商一致的转团、拼团行为;</p>
            <p>
              3.有权自主选择旅游产品和服务,有权拒绝出境社未与旅游者协商一致或者未经旅游者要求而指定购物场所、安排旅游者参加另行付费旅游项目的行为,有权拒绝出境社的导游、领队强迫或者变相强迫旅游者购物、参加另行付费旅游项目的行为;
            </p>
            <p>4.在支付旅游费用时要求出境社出具发票;</p>
            <p>5.人格尊严、民族风俗习惯和宗教信仰得到尊重;</p>
            <p>6.在人身、财产安全遇有危险时,有权请求救助和保护;人身、财产受到侵害的,有权依法获得赔偿;</p>
            <p>7.在合法权益受到损害时向有关部门投诉或者要求出境社协助索赔;</p>
            <p>8.《中华人民共和国旅游法》、《中华人民共和国消费者权益保护法》和有关法律、法规赋予旅游者的其他各项权利。</p>
            <h3>第八条 旅游者的义务</h3>
            <p>1.如实填写《出境旅游报名表》、签证/签注资料和游客安全信息卡等各项内容,告知与旅游活动相关的个人健康信息,并对其真实性负责,保证所提供的联系方式准确无误且能及时联系; </p>
            <p>2.向出境社提交能有效使用的因私护照或者通行证,自办签证/签注者应当确保所持签证/签注在出游期间有效;</p>
            <p>3.按照合同约定支付旅游费用;</p>
            <p>4.按照合同约定随团完成旅游行程,配合领队人员的统一管理;</p>
            <p>5.遵守我国和旅游目的地国家(地区)的法律、法规和有关规定,不携带违禁物品出入境;不参与色情、赌博和涉毒活动;不擅自脱团;不在境外滞留不归;</p>
            <p>6.遵守旅游目的地国家(地区)的公共秩序和社会公德,尊重当地的风俗习惯,文化传统和宗教信仰,爱护旅游资源,保护生态环境,遵守《中国公民出国(境)旅游文明行为指南》等文明行为规范;</p>
            <p>7.对国家应对重大突发事件暂时限制旅游活动的措施以及有关部门、机构或者旅游经营者采取的安全防范和应急处置措施予以配合;</p>
            <p>8.妥善保管自己的行李物品,随身携带现金、有价证券、贵重物品,不在行李中夹带;</p>
            <p>9.在旅游活动中或者在解决纠纷时,应采取适当措施防止损失扩大,不损害当地居民的合法权益,不干扰他人的旅游活动,不损害旅游经营者和旅游从业人员的合法权益,不采取拒绝上、下机(车、船)、拖延行程或者脱团等不当行为;
            </p>
            <p>10.在自行安排活动期间,应当在自己能够控制风险的范围内选择活动项目,遵守旅游活动中的安全警示规定,对自己的安全负责。</p>
            <h2>第四章 合同的变更与转让</h2>
            <h3>第九条 合同内容的变更</h3>
            <p>1.出境社与旅游者双方协商一致,可以变更本合同约定的内容,但应当以书面形式由双方签字确认。由此增加的旅游费用及给对方造成的损失,由变更提出方承担;由此减少的旅游费用,出境社应当退还旅游者。</p>
            <p>
              2.行程开始前遇到不可抗力或者出境社、履行辅助人已尽合理注意义务仍不能避免的事件的,双方经协商可以取消行程或者延期出行。取消行程的,按照本合同第十四条处理;延期出行的,增加的费用由旅游者承担,减少的费用退还旅游者。
            </p>
            <p>3.行程中遇到不可抗力或者出境社、履行辅助人已尽合理注意义务仍不能避免的事件,影响旅游行程的,按以下方式处理:</p>
            <p>(1)合同不能完全履行的,旅行社经向旅游者作出说明,旅游者同意变更的,可以在合理范围内变更合同,因此增加的费用由旅游者承担,减少的费用退还旅游者。</p>
            <p>(2)危及旅游者人身、财产安全的,旅行社应当采取相应的安全措施,因此支出的费用,由出境社与旅游者分担。</p>
            <p>(3)造成旅游者滞留的,旅行社应采取相应的安置措施。因此增加的食宿费用由旅游者承担,增加的返程费用双方分担。</p>
            <h3>第十条 合同的转让</h3>
            <p>旅游行程开始前,旅游者可以将本合同中自身的权利义务转让给第三人,出境社没有正当理由的不得拒绝,并办理相关转让手续,因此增加的费用由旅游者和第三人承担。</p>
            <p>正当理由包括但不限于:对应原报名者办理的相关服务不可转让给第三人的;无法为第三人办妥签证/签注、安排交通等情形的;旅游活动对于旅游者的身份、资格等有特殊要求的。</p>
            <h3>第十一条 不成团的安排</h3>
            <p>当未达到约定的成团人数不能成团时,旅游者可以与出境社就如下安排在本合同第二十三条中做出约定。</p>
            <p>
              1.转团:出境社可以在保证所承诺的服务内容和标准不降低的前提下,经事先征得旅游者书面同意,委托其他旅行社履行合同,并就受委托出团的出境社违反本合同约定的行为先行承担责任,再行追偿。旅游者和受委托出团的出境社另行签订合同的,本合同的权利义务终止。
            </p>
            <p>2.延期出团或者改签线路出团:出境社经征得旅游者书面同意,可以延期出团或者改签其他线路出团,因此增加的费用由旅游者承担,减少的费用出境社予以退还。需要时可以重新签订旅游合同。</p>
            <h2>第五章 合同的解除</h2>
            <h3>第十二条 出境社解除合同</h3>
            <p>
              1.未达到约定的成团人数不能成团时,出境社解除合同的,应当采取书面等有效形式。出境社在行程开始前30日(按照出发日减去解除合同通知到达日的自然日之差计算,下同)以上(含第30日,下同)提出解除合同的,不承担违约责任,出境社向旅游者退还已收取的全部旅游费用(不得扣除签证/签注费用);出境社在行程开始前30日以内(不含第30日,下同)提出解除合同的,除向旅游者退还已收取的全部旅游费用外,还应当按照本合同第十七条第1款的约定承担相应的违约责任。
            </p>
            <p>2.旅游者有下列情形之一的,出境社可以解除合同(相关法律、行政法规另有规定的除外):</p>
            <p>(1)患有传染病等疾病,可能危害其他旅游者健康和安全的;</p>
            <p>(2)携带危害公共安全的物品且不同意交有关部门处理的;</p>
            <p>(3)从事违法或者违反社会公德的活动的;</p>
            <p>(4)从事严重影响其他旅游者权益的活动,且不听劝阻、不能制止的;</p>
            <p>(5)法律规定的影响合同履行的其他情形。</p>
            <p>出境社因上述情形解除合同的,应当以书面等形式通知旅游者,按照本合同第十五条的相关约定扣除必要的费用后,将余款退还旅游者。</p>
            <h3>第十三条 旅游者解除合同</h3>
            <p>
              1.未达到约定的成团人数不能成团时,旅游者既不同意转团,也不同意延期出行或者改签其他线路出团的,出境社应及时发出不能成团的书面通知,旅游者可以解除合同。旅游者在行程开始前30日以上收到旅行社不能成团通知的,旅行社不承担违约责任,向旅游者退还已收取的全部旅游费用;旅游者在行程开始前30日以内收到旅行社不能成团通知的,按照本合同第十七条第1款相关约定处理。
            </p>
            <p>
              2.除本条第1款约定外,在行程结束前,旅游者亦可以书面等形式解除合同(相关法律、行政法规另有规定的除外)。旅游者在行程开始前30日以上提出解除合同的,未办理签证/签注的,出境社应当向旅游者退还全部旅游费用;已办理签证/签注的,应当扣除签证/签注费用(旅游者自办的除外);旅游者在行程开始前30日以内提出解除合同的,出境社按照本合同第十五条相关约定扣除必要的费用后,将余款退还旅游者。
            </p>
            <p>3.旅游者未按约定时间到达约定集合出发地点,也未能在出发中途加入旅游团队的,视为旅游者解除合同,按照本合同第十五条相关约定处理。</p>
            <h3>第十四条 因不可抗力或者已尽合理注意义务仍不能避免的事件解除合同</h3>
            <p>
              因不可抗力或者出境社、履行辅助人已尽合理注意义务仍不能避免的事件,影响旅游行程,合同不能继续履行的,出境社和旅游者均可以解除合同;合同不能完全履行,旅游者不同意变更的,可以解除合同(因已尽合理注意义务仍不能避免的事件提出解除合同的,相关法律、行政法规另有规定的除外)。
            </p>
            <p>合同解除的,出境社应当在扣除已向地接社或者履行辅助人支付且不可退还的费用后,将余款退还旅游者。</p>
            <h3>第十五条 必要的费用扣除</h3>
            <p>1.旅游者在行程开始前30日以内提出解除合同或者按照本合同第十二条第2款约定由出境社在行程开始前解除合同的,按下列标准扣除必要的费用:</p>
            <p>行程开始前29日至15日,按旅游费用总额的5%;</p>
            <p>行程开始前14日至7日,按旅游费用总额的20%;</p>
            <p>行程开始前6日至4日,按旅游费用总额的50%;</p>
            <p>行程开始前3日至1日,按旅游费用总额的60%;</p>
            <p>行程开始当日,按旅游费用总额的70%。</p>
            <p>2.在行程中解除合同的,必要的费用扣除标准为:</p>
            <p>旅游费用×行程开始当日扣除比例+(旅游费用-旅游费用×行程开始当日扣除比例)÷旅游天数×已经出游的天数。</p>
            <p>如按上述第1款或者第2款约定比例扣除的必要的费用低于实际发生的费用,旅游者按照实际发生的费用支付,但最高额不应当超过旅游费用总额。</p>
            <p>解除合同的,出境社扣除必要的费用后,应当在解除合同通知到达日起5个工作日内为旅游者办结退款手续。</p>
            <h3>第十六条 出境社协助旅游者返程及费用承担</h3>
            <p>
              旅游行程中解除合同的,出境社应协助旅游者返回出发地或者旅游者指定的合理地点。因旅行社或者履行辅助人的原因导致合同解除的,返程费用由出境社承担;行程中按照本合同第十二条第2款,第十三条第2款约定解除合同的,返程费用由旅游者承担;按照本合同第十四条约定解除合同的,返程费用由双方分担。
            </p>
            <h2>第六章 违约责任</h2>
            <h3>第十七条 出境社的违约责任</h3>
            <p>
              1.出境社在行程开始前30日以内提出解除合同的,或者旅游者在行程开始前30日以内收到出境社不能成团通知,不同意转团、延期出行和改签线路解除合同的,出境社向旅游者退还已收取的全部旅游费用(不得扣除签证/签注等费用),并按下列标准向旅游者支付违约金:
            </p>
            <p>行程开始前29日至15日,支付旅游费用总额2%的违约金;</p>
            <p>行程开始前14日至7日,支付旅游费用总额5%的违约金;</p>
            <p>行程开始前6日至4日,支付旅游费用总额10%的违约金;</p>
            <p>行程开始前3日至1日,支付旅游费用总额15%的违约金;</p>
            <p>行程开始当日,支付旅游费用总额20%的违约金。</p>
            <p>如按上述比例支付的违约金不足以赔偿旅游者的实际损失,出境社应当按实际损失对旅游者予以赔偿。</p>
            <p>出境社应当在取消出团通知或者旅游者不同意不成团安排的解除合同通知到达日起5个工作日内,为旅游者办结退还全部旅游费用的手续并支付上述违约金。</p>
            <p>2.出境社未按合同约定提供服务,或者未经旅游者同意调整旅游行程(本合同第九条第3款规定的情形除外),造成项目减少、旅游时间缩短或者标准降低的,应当依法承担继续履行、采取补救措施或者赔偿损失等违约责任。</p>
            <p>
              3.出境社具备履行条件,经旅游者要求仍拒绝履行本合同义务的,出境社向旅游者支付旅游费用总额30%的违约金,旅游者采取订同等级别的住宿、用餐、交通等补救措施的,费用由出境社承担;造成旅游者人身损害、滞留等严重后果的,旅游者还可以要求出境社支付旅游费用一倍以上三倍以下的赔偿金。
            </p>
            <p>
              4.未经旅游者同意,出境社转团、拼团的,出境社应向旅游者支付旅游费用总额25%的违约金;旅游者解除合同的,出境社还应向未随团出行的旅游者退还全部旅游费用,向已随团出行的旅游者退还尚未发生的旅游费用。如违约金不足以赔偿旅游者的实际损失,出境社应当按实际损失对旅游者予以赔偿。
            </p>
            <p>5.出境社有以下情形之一的,旅游者有权在旅游行程结束后30日内,要求出境社为其办理退货并先行垫付退货货款,或者退还另行付费旅游项目的费用:</p>
            <p>(1)出境社以不合理的低价组织旅游活动,诱骗旅游者,并通过安排购物或者另行付费旅游项目获取回扣等不正当利益的;</p>
            <p>(2)未经双方协商一致或者未经旅游者要求,出境社指定具体购物场所或者安排另行付费旅游项目的。</p>
            <p>6.与旅游者出现纠纷时,出境社应当积极采取措施防止损失扩大,否则应当就扩大的损失承担责任。</p>
            <h3>第十八条 旅游者的违约责任</h3>
            <p>1.因不听从出境社及其领队的劝告、提示而影响团队行程,给出境社造成损失的,应当承担相应的赔偿责任。</p>
            <p>2.旅游者超出本合同约定的内容进行个人活动所造成的损失,由其自行承担。</p>
            <p>3.由于旅游者的过错,使出境社、履行辅助人、旅游从业人员或者其他旅游者遭受损害的,应当由旅游者赔偿损失。</p>
            <p>4.旅游者在旅游活动中或者在解决纠纷时,应采取措施防止损失扩大,否则应当就扩大的损失承担相应的责任。</p>
            <p>5.旅游者违反安全警示规定,或者对国家应对重大突发事件暂时限制旅游活动的措施、安全防范和应急处置措施不予配合,造成旅行社损失的,应当依法承担相应责任。</p>
            <h3>第十九条 其他责任</h3>
            <p>
              1.因旅游者提供材料存在问题或者自身其他原因被拒签、缓签、拒绝入境和出境的,相关责任和费用由旅游者承担,出境社将未发生的费用退还旅游者。如给出境社造成损失的,旅游者还应当承担赔偿责任。因出境社原因导致旅游者被拒签而解除合同的,依据本合同第十七条第1款处理。
            </p>
            <p>2.由于旅游者自身原因导致本合同不能履行或者不能按照约定履行,或者造成旅游者人身损害、财产损失的,出境社不承担责任。</p>
            <p>3.旅游者自行安排活动期间人身、财产权益受到损害的,出境社在事前已尽到必要警示说明义务且事后已尽到必要救助义务的,出境社不承担赔偿责任。</p>
            <p>4.由于第三方侵害等不可归责于出境社的原因导致旅游者人身、财产权益受到损害的,出境社不承担赔偿责任。但因出境社不履行协助义务致使旅游者人身、财产权益损失扩大的,应当就扩大的损失承担赔偿责任。</p>
            <p>5.由于公共交通经营者的原因造成旅游者人身损害、财产损失依法应承担责任的,出境社应当协助旅游者向公共交通经营者索赔。</p>
            <h2>第七章 协议条款</h2>
            <h3>第二十条 线路行程时间</h3>
            <p>
              旅游线路为<span>{{dataList.productName}}</span>出发时间:<span>{{getDate(dataList.startDate)}}</span>,结束时间<span>{{getDate(dataList.returnDate)}}</span>;共<span>{{dataList.dayNum}}</span>天,饭店住宿<span>{{dataList.nightNum}}</span>夜。
            </p>
            <h3>第二十一条 旅游费用及支付(以人民币为计算单位)</h3>
            <p>
              成人:<span>{{dataList.adultPrice}}</span>元/人,儿童(不满14岁):<span>{{dataList.childPrice}}</span>元/人;其中,导游服务费<span>{{dataList.servicePrice}}</span>元/人;
            </p>
            <p>旅游费用合计:<span>{{dataList.orderPrice}}</span>元。</p>
            <p>旅游费用支付方式:
              <span v-if="dataList.payType==1">现金</span>
              <span v-if="dataList.payType==2">转账</span>
              <span v-if="dataList.payType==3">支票</span>。
            </p>
            <p>旅游费用支付时间:<span v-if="dataList.payDate">{{getDate(dataList.payDate)}}</span>。</p>
            <h3>第二十二条 人身意外伤害保险</h3>
            <p>1.出境社提示旅游者购买人身意外伤害保险;</p>
            <p>
              2.旅游者可以做以下选择:
            </p>
            <p>
              <p>
                <span class="Travel_DetailQuan">
                  <i v-if="dataList.insuranceOpinion==1" class="iconfont icon-duigou"></i>
                  <i v-else class="iconfont icon-cha"></i>
                </span>
                委托旅行社购买(旅行社不具有保险兼业代理资格的,不得勾选此项):保险产品名称
                <font>{{dataList.insuranceProduct}}</font>(投保的相关信息以实际保单为准);
              </p>
              <p>
                <span class="Travel_DetailQuan">
                  <i v-if="dataList.insuranceOpinion==2" class="iconfont icon-duigou"></i>
                  <i v-else class="iconfont icon-cha"></i>
                </span>
                自行购买
              </p>
              <p>
                <span class="Travel_DetailQuan">
                  <i v-if="dataList.insuranceOpinion==3" class="iconfont icon-duigou"></i>
                  <i v-else class="iconfont icon-cha"></i>
                </span>
                放弃购买
              </p>
            </p>

            <!-- <p>
              2.旅游者<span v-if="dataList.insuranceOpinion==1">委托出境社购买</span>
              <span v-if="dataList.insuranceOpinion==2">自行购买</span>
              <span v-if="dataList.insuranceOpinion==3">放弃购买</span>人身意外伤害保险
              <span v-if="dataList.insuranceOpinion==1">{{dataList.insuranceProduct}},保险产品名称(投保的相关信息以实际保单为准);</span>
            </p> -->
            <h3>第二十三条 成团人数与不成团的约定</h3>
            <p>成团的最低人数:<span>{{dataList.minNumber}}</span>人。</p>
            <p>如不能成团,旅游者是否同意按下列方式解决:</p>
            <p>
              1.<span>{{dataList.insteadOpinion==1?'同意':'不同意'}}</span>出境社委托<span>{{dataList.insteadCompany}}</span>出境社履行合同;
            </p>
            <p>2.<span>{{dataList.delayOpinion==1?'同意':'不同意'}}</span>(同意或者不同意,打勾无效)延期出团;</p>
            <p>3.<span>{{dataList.changeOpinion==1?'同意':'不同意'}}</span>(同意或者不同意,打勾无效)改签其他线路出团;</p>
            <p>4.<span>{{dataList.terminateOpinion==1?'同意':'不同意'}}</span>(同意或者不同意,打勾无效)解除合同。</p>
            <h3>第二十四条 拼团约定</h3>
            <p>
              旅游者<span>{{dataList.carpoolOpinion==1?'同意':'不同意'}}</span>(同意或者不同意,打勾无效)采用拼团方式拼至<span>{{dataList.carpoolCompany}}</span>出境社成团。
            </p>
            <h3>第二十五条 自愿购物和参加另行付费旅游项目约定</h3>
            <p>1.旅游者可以自主决定是否参加出境社安排的购物活动、另行付费旅游项目;</p>
            <p>2.出境社可以在不以不合理的低价组织旅游活动、不诱骗旅游者、不获取回扣等不正当利益,且不影响其他旅游者行程安排的前提下,按照平等自愿、诚实信用的原则,与旅游者协商一致达成购物活动、另行付费旅游项目协议;</p>
            <p>3.购物活动、另行付费旅游项目安排应不与《行程单》冲突;</p>
            <p>4.地接社及其从业人员在行程中安排购物活动、另行付费旅游项目的,责任由订立本合同的出境社承担;</p>
            <p>5. 购物活动、另行付费旅游项目具体约定见《自愿购物活动补充协议》(附件3)、《自愿参加另行付费旅游项目补充协议》(附件4)。</p>
            <h3>第二十六条 争议的解决方式</h3>
            <p>本合同履行过程中发生争议,由双方协商解决,亦可向合同签订地的旅游质监执法机构、消费者协会、有关的调解组织等有关部门或者机构申请调解。协商或者调解不成的,按下列第<span>2</span>种方式解决:</p>
            <p>1.提交<span>{{dataList.arbitrationCommission}}</span>仲裁委员会仲裁;</p>
            <p>2.依法向人民法院起诉。</p>
            <h3>第二十七条 其他约定事项</h3>
            <p>未尽事宜,经旅游者和出境社双方协商一致,可以列入补充条款。(如合同空间不够,可以另附纸张,由双方签字或者盖章确认。)</p>
            <div class="userDiv">
              <p>
                本人已阅读了本合同所有条款,乙方(旅行社)已就合同条款对本人进行了真实、准确、完整的说明,本人已完全了解合同条款的内容及含义并同意本合同条款包括行程中有关自愿购物活动以及自愿参加另付费旅游项目的说明,同时本人悉知自身身体适宜此次旅行。
              </p>
              <p>烦请务必携带自身常用药品,如有身体不适必须第一时间告知随团导游或领队,并及时到当地医院做检查,如因个人原因耽误病情,一切后果均由客人自行承担。</p>
              <p>旅游意外伤害险:若旅行社购买赠送客人,如有出险理赔视为旅行社责任风险分摊,保险公司赔偿金额为最终赔付,旅行社不再进行赔偿。</p>
              <p>
                签约委托授权书:本人已征得其余全体委托人同意作为本次旅游出行签约代表(全体委托人名单详见游客名单),全体委托人享受本合同约定的权利,履行本合同约定的义务,受托人在旅游合同及其附件上的签字全体委托人均予以认可。
              </p>
              <p>
                健康承诺书:在旅游过程中,如本人未按贵社要求如实告知相关健康情况,本人承担因此而产生的全部后果,并承担给贵社造成损失的赔偿责任。本人自愿放弃不适宜本人身体状况参加的相应景点或相应活动;若因本人坚持参加而所产生的全部后果均由本人自行承担。本人因自身过错,造成的一切其他损失由本人承担。本人作为此次出行的签约代表,已就此承诺告知了全体委托人及其直系亲属并得到他们的同意。
              </p>
              <p>如其他游客不予认可本合同或者本人未取得授权、未告知本合同及相关告知书内容的,由本人承担相应责任。</p>
            </div>
            <h3>第二十八条 合同效力</h3>
            <p>
              本合同一式<span>{{getTotalNum(dataList.totalNumber)}}</span>份,双方各持<span>{{getTotalNum(dataList.eachNumber)}}</span>份,具有同等法律效力,自双方当事人签字或者盖章之日起生效。
            </p>
          </div>
          <!-- 签章信息 -->
          <div class="eseal" :class="{'checkedNav':cked==3}">
            <table class="SignTable">
              <tbody>
                <tr>
                  <td>旅游者代表签字(盖章):</td>
                  <td>
                    <span>{{dataList.clientName}}</span>
                    <img class="signDiv" :src="dataList.companySignature" alt="">
                  </td>
                  <td>
                    出境社盖章:
                  </td>
                  <td>
                    <span>{{dataList.company}}</span>
                    <img class="esealDiv" v-if="isShowZhang==1" :src="CurrentUserInfo.ZhangImg" alt="" />
                  </td>
                </tr>
                <tr>
                  <td>证件号码:</td>
                  <td>{{dataList.clientIdcardnum}}</td>
                  <td>签约代表签字(盖章):</td>
                  <td>
                    <span>{{dataList.agentName}}</span>
                  </td>
                </tr>
                <tr>
                  <td>住 址:</td>
                  <td>{{dataList.clientAddress}}</td>
                  <td>营业地址:</td>
                  <td>
                    <span>{{dataList.companyAddress}}</span>
                  </td>
                </tr>
                <tr>
                  <td>联系电话:</td>
                  <td>{{dataList.clientCall}}</td>
                  <td>联系电话:</td>
                  <td>{{dataList.companyCall}}</td>
                </tr>
                <tr>
                  <td>传 真:</td>
                  <td>{{dataList.clientFax}}</td>
                  <td>传 真:</td>
                  <td>{{dataList.companyFax}}</td>
                </tr>
                <tr>
                  <td>邮 编:</td>
                  <td>{{dataList.clientPostCode}}</td>
                  <td>邮 编:</td>
                  <td>{{dataList.companyPostCode}}</td>
                </tr>
                <tr>
                  <td>电子信箱:</td>
                  <td>{{dataList.clientEmail}}</td>
                  <td>电子信箱:</td>
                  <td>{{dataList.companyEmail}}</td>
                </tr>
                <tr>
                  <td>签约日期:</td>
                  <td>
                    <span v-if="dataList.payDate">{{getDate(dataList.payDate)}}</span>
                  </td>
                  <td>签约日期:</td>
                  <td>
                    <span v-if="dataList.payDate">{{getDate(dataList.payDate)}}</span>
                  </td>
                </tr>
                <tr>
                  <td>签约地点:</td>
                  <td colspan="3">{{dataList.contractPlace}}</td>
                </tr>
                <tr>
                  <td>出境社监督、投诉电话:</td>
                  <td colspan="3">{{dataList.regulatorComplainCall}}</td>
                </tr>
                <tr>
                  <td>四川省 成都市旅游质监执法机构:</td>
                  <td colspan="3">{{dataList.regulatorName}}</td>
                </tr>
                <tr>
                  <td>投诉电话:</td>
                  <td colspan="3">{{dataList.companyComplainCall}}</td>
                </tr>
                <tr>
                  <td>电子邮箱:</td>
                  <td colspan="3">{{dataList.regulatorWebsite}}</td>
                </tr>
                <tr>
                  <td>地 址:</td>
                  <td colspan="3">{{dataList.regulatorAddress}}</td>
                </tr>
                <tr>
                  <td>邮 编:</td>
                  <td colspan="3">{{dataList.regulatorPostCode}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 游客名单 -->
          <div class="guests" :class="{'checkedNav':cked==4}">
            <table class="ZTable">
              <tbody>
                <tr>
                  <td width="10%">序号</td>
                  <td width="15%">姓名</td>
                  <td width="10%">性别</td>
                  <td width="10%">证件类型</td>
                  <td width="20%">证件号码</td>
                  <td width="20%">联系方式</td>
                  <td width="15%">身体状况</td>
                </tr>
                <tr v-for="(item,index) in dataList.guestList">
                  <td>{{index+1}}</td>
                  <td>{{item.surName+''+item.name}}</td>
                  <td>{{item.sex==1?'男':'女'}}</td>
                  <td>护照</td>
                  <td>{{item.passportNo}}</td>
                  <td>{{item.mobilePhone}}</td>
                  <td>健康</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 团队行程 -->
          <div class="routes" :class="{'checkedNav':cked==5}">
            <table class="ZTable">
              <tbody>
                <tr>
                  <td width="10%">团号</td>
                  <td width="36%">
                    <span>{{dataList.tCNum}}</span>
                  </td>
                  <td width="12%">出团日期</td>
                  <td width="15%">
                    <span>{{getDate(dataList.startDate)}}</span>
                  </td>
                  <td width="12%">返回日期</td>
                  <td width="15%">
                    <span>{{getDate(dataList.returnDate)}}</span>
                  </td>
                </tr>
                <tr>
                  <td>线路名称</td>
                  <td colspan="5">
                    <span>{{dataList.productName}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <br>
            <div v-html="dataList.travelContent">

            </div>
            <!-- <table class="TDteam_Table">
                            <tbody>
                                <tr>
                                    <td colspan="5">
                                        组团社:印象之旅
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        旅游线路名称:{{LineName}}&nbsp;&nbsp;&nbsp;&nbsp;行程共计:{{dataList.dayNum}}天 {{dataList.nightNum}}晚(含在途时间)
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        出发时间:{{getDate(dataList.startDate)}}&nbsp;&nbsp;
                                        出发地点:{{startCityName}}
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        结束时间:{{getDate(dataList.returnDate)}}&nbsp;&nbsp;
                                        返回地点:{{returnArriveCityName}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>行程时间</td>
                                    <td>主要景点名称(游览时间)</td>
                                    <td>交通工具(标准)</td>
                                    <td>酒店标准</td>
                                    <td>房间标准</td>
                                </tr>
                                <tr v-for="(item,index) in tripList">
                                    <td>{{getDayAddOne(dataList.startDate,index)}}</td>
                                    <td>
                                        <div v-for="subItem in item.details">
                                            <span v-if="subItem.title">{{subItem.title}}</span>
                                            <span v-else>温暖的家</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span>{{item.TrifficType}}</span>
                                    </td>
                                    <td>
                                        <span v-if="index!=tripList.length-1">旅游酒店</span>
                                    </td>
                                    <td>
                                        <span v-if="index!=tripList.length-1">双人间</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table> -->
          </div>
          <!-- 自愿购物 -->
          <div class="shoppings" :class="{'checkedNav':cked==6}">
            <table class="ZTable" v-if="dataList.shopProtocolList&&dataList.shopProtocolList.length>0">
              <tbody>
                <tr>
                  <td width="5%">序号</td>
                  <td width="10%">具体时间</td>
                  <td width="15%">地点</td>
                  <td width="15%">购物场所名称</td>
                  <td width="15%">主要商品信息</td>
                  <td width="15%">最长停留时间(分钟)</td>
                  <td width="15%">其他说明</td>
                  <td width="10%">旅游者签名同意</td>
                </tr>
                <tr v-for="(item,index) in dataList.shopProtocolList">
                  <td>{{index+1}}</td>
                  <td>{{item.specificTime}}</td>
                  <td>{{item.Address}}</td>
                  <td>{{item.shoppName}}</td>
                  <td>{{item.CommodityInformation}}</td>
                  <td>{{item.stayTime}}</td>
                  <td>{{item.other}}</td>
                  <td>{{item.travelSign}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 自愿补充协议 -->
          <div class="activitys" :class="{'checkedNav':cked==7}">
            <table class="ZTable" v-if="dataList.payProtocolList&&dataList.payProtocolList.length>0">
              <tbody>
                <tr>
                  <td width="5%">序号</td>
                  <td width="10%">具体时间</td>
                  <td width="15%">地点</td>
                  <td width="15%">项目名称和内容</td>
                  <td width="15%">费用(元)</td>
                  <td width="15%">项目时长(分钟)</td>
                  <td width="15%">其他说明</td>
                  <td width="10%">旅游者签名同意</td>
                </tr>
                <tr v-for="(item,index) in dataList.payProtocolList">
                  <td>{{index+1}}</td>
                  <td>{{item.specificTime}}</td>
                  <td>{{item.Address}}</td>
                  <td>{{item.programName}}</td>
                  <td>{{item.money}}</td>
                  <td>{{item.programTime}}</td>
                  <td>{{item.other}}</td>
                  <td>{{item.travelSign}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 文明旅游公约 -->
          <div class="TD-convention" :class="{'checkedNav':cked==8}">
            <div class="page_break_avoid">
              <h1 class="text_center" style="font-size:30px;color:#555;margin:30px 0;">中国公民出境旅游文明行为指南</h1>
              <p class="text_center">中国公民, 出境旅游, 注重礼仪, 保持尊严。</p>
              <p class="text_center">讲究卫生, 爱护环境; 衣着得体, 请勿喧哗。</p>
              <p class="text_center">尊老爱幼, 助人为乐; 女士优先, 礼貌谦让。</p>
              <p class="text_center">出行办事, 遵守时间; 排队有序, 不越黄线。</p>
              <p class="text_center">文明住宿, 不损用品; 安静用餐, 请勿浪费。</p>
              <p class="text_center">健康娱乐, 有益身心; 赌博色情, 坚决拒绝。</p>
              <p class="text_center">参观游览, 遵守规定; 习俗禁忌, 切勿冒犯。</p>
              <p class="text_center">遇有疑难, 咨询领馆; 文明出行, 一路平安。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fade" v-show="isShowFade"></div>
    <div class="qrCodeDiv" v-show="isShowFade">
      <div style="margin-top:15px;">请扫码签字</div>
      <div id="qrcode" style="margin:25px;" ref="qrcode">
        <img class="WeiXinShare" :src="'data:image/png;base64,'+QRCodeStr" />
      </div>
      <i class="iconfont icon-cha Ec_cha" @click="isShowFade=false"></i>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        CurrentUserInfo: {},
        //选中切换
        cked: 1,
        //查询参数  
        msg: {
          TCID: 0,
          orderID: 0,
          guestId: 0
        },
        //数据源
        dataList: [],
        isShowFade: false,
        QRCodeStr: "",
        pdfLoading: false,
        //线路名称
        LineName: '',
        //出发地点
        startCityName: '',
        //返回地点
        returnArriveCityName: '',
        tripList: [],
        //交通
        trifficList: [],
        isShowZhang: 0,
      };
    },
    methods: {

      // 生成二维码
      GetQrCode: function () {
        let urlObj = this.domainManager();
        let msg = {
          TCID: this.$route.query.TCID,
          orderID: this.$route.query.orderID,
          pUrl: "clientConfirm",
        };
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetQrCodeImage?',
          data: {
            "msg": msg
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            this.QRCodeStr = res.data.data;
          } else {

          }
        }).catch(err => {})
      },

      // 生成pdf
      toContractPDF: function (title) {
        let urlObj = this.domainManager();
        let msg = {
          TCID: this.$route.query.TCID,
          GuestId: this.msg.guestId,
          orderID: this.$route.query.orderID,
        };
        this.pdfLoading = true;
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetDownLoadContract',
          data: {
            "msg": msg
          }
        }).then(res => {
          this.pdfLoading = false
          if (res.data.resultCode === 1) {
            let sign = title + "V2"
            const a = document.createElement('a');
            a.setAttribute('download', '');
            a.setAttribute('href', urlObj.DomainUrl + '/api/file/DownloadFileForPdf?fileName=' + sign +
              '.pdf&&fPath=' + res.data.data);
            a.click();
          } else {
            this.Error('PDF获取失败');
          }
        }).catch(err => {

        })
      },
      //获取数据
      getList() {
        this.apiJavaPost("/api/contract/getContractInfo", this.msg, res => {
          if (res.data.resultCode === 1) {
            this.dataList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
      getDate(date) {
        return moment(date).format("YYYY-MM-DD");
      },
      //加一天返回
      getDayAddOne(day, num) {
        return moment(day).add(num, 'days').format('YYYY-MM-DD')
      },
      //获取是否显示公司章
      getShow(ID) {
        if (ID != null && ID != undefined) {
          let msg = {
            ID: ID
          }
          this.apipost("travelcontract_post_GetContractService", msg, res => {
            if (res.data.resultCode === 1) {
              this.isShowZhang = res.data.data.IsTravelAgencySignature;
            } else {
              this.Error(res.data.message);
            }
          });
        }
      },
      //获取大写
      getTotalNum(num) {
        switch (num) {
          case 1:
            return '壹';
            break;
          case 2:
            return '贰';
            break;
          case 3:
            return '叁';
            break;
          case 4:
            return '肆';
            break;
          case 5:
            return '伍';
            break;
          case 6:
            return '陆';
            break;
          case 7:
            return '柒';
            break;
          case 8:
            return '捌';
            break;
          case 9:
            return '玖';
            break;
          case 10:
            return '玖';
            break;
        }
      },
      //作废
      getinvalid() {
        this.$confirm('是否作废?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dataList.status = 0;
          this.apiJavaPost("/api/contract/dosaveOrUpdate", this.dataList, res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
            } else {
              this.Error(res.data.message);
            }
          }, null);
        }).catch(() => {
          this.$message.info('取消删除');
        });
      },

      //获取行程
      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.trifficList = res.data.data.trafficList;
                this.tripList = res.data.data.dayList;
                this.LineName = res.data.data.lineName;
                this.startCityName = res.data.data.startCityName;
                this.returnArriveCityName = res.data.data.returnArriveCityName;
                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.tripList[index].TrifficType = '飞机+大巴'
            }
          }
          if (x.airportPickUp == 0 && x.isUseBus == 1) {
            this.tripList[index].TrifficType = '大巴'
          }
          if (x.airportPickUp == 1 || x.airportPickUp == 2) {
            if (x.isUseBus == 0) {
              this.tripList[index].TrifficType = '飞机'
            }
          }
          if (x.airportPickUp == 0 || x.airportPickUp == 0) {
            if (x.isUseBus == 0) {
              this.tripList[index].TrifficType = '无'
            }
          }
        })
      }
    },
    mounted() {
      this.CurrentUserInfo = this.getLocalStorage();
      this.msg.TCID = this.$route.query.TCID;
      this.msg.orderID = this.$route.query.orderID;
      this.msg.guestId = this.$route.query.guestId;
      let TID = this.$route.query.ID;
      this.getList();
      this.getShow(this.TID);
      this.GetTrip(0, this.msg.TCID);
    }
  };

</script>