<style>
.TCdiv_content {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #000;
}

.TCdiv_content .NavFixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
  background: #fff;
}

.TCdiv_content .navHidden {
  width: 100%;
  overflow: hidden;
  height: 3rem;
}

.TCdiv_content .navHidden .wrap {
  width: 100%;
  /* height: 3rem; */
  overflow-x: scroll;
  overflow-y: hidden;
}

.TCdiv_content .navHidden .Navul {
  width: 28rem;
  padding: 0;
  display: flex;
  height: 3rem;
  line-height: 3rem;
  margin: 0;
  border-bottom: 1px solid #ccc;
}

.TCdiv_content .navHidden .Navul li {
  display: inline-block;
  margin-left: 1rem;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 1rem;
  cursor: pointer;
}

.navHidden .ActiveLi {
  border-bottom: 2px solid #24ade5;
}

.CisHideen {
  display: none;
  overflow: hidden;
}

.contractTitle {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.ContractMain {
  /* padding: 100px 15px 80px 15px; */
  position: relative;
  background: #fff;
  min-height: 100vh;
}

.CliSignDiv {
  position: fixed;
  border: 1px solid #d1d1d1;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  margin: auto;
  display: block;
  z-index: -999;
}

.TcConfirmMain .isShowSign {
  z-index: 999 !important;
}

.TCdiv_content .signSpan {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background: #fff;
  border-top: 1px solid #ccc;
  z-index: 1000;
}

.TCdiv_content .signSpan .sign {
  width: 75%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  height: 60px;
  line-height: 60px;
}

.ContractMain p {
  font-size: 1rem;
  line-height: 26px;
  margin: 0;
  margin-bottom: 5px;
}

.con_Suojin {
  text-indent: 20px;
}

.comTop {
  margin-top: 10px;
}

.conUnderLine {
  text-decoration: underline;
}

.CanvasDiv {
  width: 100%;
  height: calc(100% - 4rem);
  padding-top: 5%;
}

.dash {
  padding: 10px;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  width: 95%;
  height: 98%;
  margin: 0 auto;
  overflow: hidden;
}

.CanvasDiv #canvas {
  width: 100%;
  height: 100%;
}

.ContractName {
  width: 100%;
  font-size: 1.3rem;
  text-align: center;
}

.contractTitleTwo {
  font-size: 1rem;
  margin-bottom: 10px;
}

.comConInput {
  width: 100%;
  border-bottom: 1px solid #c0c0c0;
  text-align: left;
  padding-bottom: 5px;
}
.TCdiv_content .gzqzUl {
  margin: 0;
  padding: 0;
}
.TCdiv_content .gzqzUl li {
  border-bottom: 1px solid #ddd;
  padding: 14px;
  position: relative;
  box-sizing: border-box;
  list-style-type: none;
}
.feeTable {
  width: 100%;
}
.feeTable th,
.feeTable td {
  border: 1px solid #d1d1d1;
  text-align: center;
  height: 35px;
}
.TCdiv_content .gzqzUl .bgli {
  background: #eee;
  width: 100%;
  padding: 0 !important;
  height: 20px;
}
.yangben_bg {
  background-image: url(../assets/images/yangben.png);
  background-size: 100%;
}
</style>
<template>
  <div class="TcConfirmMain">
    <div class="TCdiv_content">
      <!-- 签字 -->
      <div class="signSpan">
        <div
          @click="goSign()"
          class="sign"
          v-if="dataList.Sign == '' || dataList.Sign == null"
        >
          <span style="padding:0;"
            ><i style="font-size:1.2rem" class="iconfont icon-qianming"></i
          ></span>
          <span style="font-size:1.2rem;margin-left:0.2rem;">签字</span>
          <!-- <span style="font-size:1.2rem;margin-left:0.2rem;" v-else>重新签字</span> -->
        </div>
      </div>
      <div class="NavFixed">
        <p
          style="background:#24ade5;text-align:center;color:#fff;padding:6px 0;font-size:1rem;margin-bottom:0;"
        >
          合同详情
        </p>
        <div class="navHidden">
          <div class="wrap">
            <ul class="Navul">
              <li
                :class="ActiveTab == 1 ? 'ActiveLi' : ''"
                @click="ChangeTab(1)"
              >
                使用说明
              </li>
              <li
                :class="ActiveTab == 2 ? 'ActiveLi' : ''"
                @click="ChangeTab(2)"
              >
                学员信息
              </li>
              <li
                :class="ActiveTab == 3 ? 'ActiveLi' : ''"
                @click="ChangeTab(3)"
              >
                家长信息
              </li>
              <li
                :class="ActiveTab == 4 ? 'ActiveLi' : ''"
                @click="ChangeTab(4)"
              >
                培训课程信息
              </li>
              <li
                :class="ActiveTab == 5 ? 'ActiveLi' : ''"
                @click="ChangeTab(5)"
              >
                费用类别
              </li>
              <li
                style="display:none;"
                :class="ActiveTab == 6 ? 'ActiveLi' : ''"
                @click="ChangeTab(6)"
              >
                补充协议
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="ContractMain">
        <div
          style="padding:100px 15px 80px 15px;"
          v-if="ActiveTab == 1"
          :class="{ yangben_bg: gmsg.ContractId == 7 }"
        >
          <div class="contractTitle">一、声明</div>
          <p>当您签署此协议之前，请确保已清楚了解以下事宜：</p>
          <p>
            1、温馨提示：日语学习的过程中，学员的上课到勤率越高，教学成果会更好，学员达成课程学习目标的概率将会较高。
          </p>
          <p class="con_Suojin" style="color:red;">
            因此，请确保您已经认真了解过该门课程的学习内容、规划与学费事宜；已充分做好了各项学习准备，真正让自己做到上课到勤率达到90%以上，努力达成既定学习目标。
          </p>
          <p>
            2、您有一次在学习的任何阶段申请停课的权利。当您按要求正式办理相关停课手续之日起，12个月内，如无不可抗力事由，
            您必须从停课之日起按要求提出复课申请。您如未按要求复课，则视作学员主动放弃继续学习的权力，终止本课程协议。
          </p>
          <p>
            3、请您牢记全国官方唯一服务号码：028-6199-3633
          </p>
          <p>
            4、<span style="color:red;"
              >请您认真阅读并充分理解本协议内容后签署此协议，一旦签署则视为完全理解并同意该协议内容。</span
            >
          </p>
          <div class="contractTitle comTop">二、总则</div>
          <p>
            成都市锦江区甲鹤外语培训学校有限公司（以下简称“甲方”）与培训学员（以下简称“乙方”）根据《中华人民共和国合同法》等法律、法规规定，双方在平等、自愿、协商一致的基础上达成此协议。
            如乙方有同时学习两门或两门以上不同类别的课程要求，则乙方须分课程类别签订课程协议。
          </p>
          <div class="contractTitle comTop">三、课程费用</div>
          <p>1、费用总计：以乙方选择课程之时，即时公布的课程收费标准为准。</p>
          <div style="display:flex;margin-top:10px;">
            人民币（大写）：
            <div class="comConInput" style="width:60%">
              {{ dataList.CNYCaps }}
            </div>
          </div>
          <div style="display:flex;margin:10px 0;">
            人民币（小写）：
            <div class="comConInput" style="width:60%">
              {{ dataList.Money }}
            </div>
            元
          </div>
          <p>
            2、支付方式：<span style="color:red;"
              >现金、扫码支付（微信、支付宝）、POS机刷卡支付（信用卡，银行借记卡）、银行汇款/转账等公司支持的结算方式。缴纳的学费应通过公司帐户结算，禁止学费缴纳到非公司帐户的个人帐户，公司对缴费至私人帐户导致的纠纷概不负责。</span
            >
          </p>
          <p>
            3、支付截止日期提醒：正式确认报名之日起，乙方须在7个工作日内足额缴纳学费（正式确认报名的时间以乙方缴纳定金之日为准，若乙方未缴纳定金的，以正式开课日前七个工作日为准），因课程一旦开始，同班级学员将统一安排课表持续学习，为了不打乱正常的授课计划，乙方应按本协议约定时间内足额缴纳学费，因逾期缴费所造成的课程延误或课程进度缺失，乙方自行承担责任。甲方因乙方逾期缴费而造成的损失，由乙方承担。
          </p>
          <div class="contractTitle comTop">四、双方权利与义务</div>
          <p>1、甲方权利与义务</p>
          <p style="margin-left:10px;">1.1 甲方权利</p>
          <p class="con_Suojin">
            1.1.1 甲方按照甲方的教学管理制度规定对乙方实施培训管理。
          </p>
          <p class="con_Suojin">1.1.2 甲方按本协议约定向乙方收取课程费用。</p>
          <p class="con_Suojin">
            1.1.3
            如有乙方违反甲方的教学管理制度的行为，甲方有权要求乙方在规定时间内进行改正。
          </p>
          <p class="con_Suojin">
            1.1.4
            为达到更好的教学效果，甲方应根据班级成员状况、班级教学进度和教学情况，做好合理安排，监督并协助授课老师调整授课方式，必要时有权利为学员更换更适合的教师授课。
          </p>
          <p class="con_Suojin">
            1.1.5
            根据班级人数状况以及学员学习进度，甲方应主动提出更优的班级组成形式的建议，必要时，可适当调整乙方的班级管理
            （班级分组、授课形式、授课地点等）。
          </p>
          <p style="margin-left:10px;">1.2 甲方义务</p>
          <p class="con_Suojin">
            1.2.1
            甲方制定规范有效的培训计划，其中包括：教材和资料的确认；在合理期限内，通过完成教学课时，达成教学进度目标；定时测验，随时掌握班级学习情况；严格对教师和学员进行考核；甲方教师应对学员发布作业以及批改作业；甲方老师应按时协助学员安排好国际认证考试计划等。
          </p>
          <p class="con_Suojin">
            1.2.2 甲方依据本协议规定，指派任课教师，在合理的期限内完成教学服务。
          </p>
          <p class="con_Suojin">
            1.2.3
            甲方应当及时且有效的解决乙方通过当面咨询或拨打咨询电话等方式提出的在培训过程中遇到的与培训内容相关的问题。
          </p>
          <p class="con_Suojin">
            1.2.4
            甲方依据乙方学习的实际情况，在收到乙方的正式书面申请之日起，在10个工作日内为乙方开具在读证明或培训证明。
          </p>
          <p class="con_Suojin">
            1.2.5
            当乙方在修完所报课程，但未通过所报课程相对应级别的考试，且在参加国际认证考试之日起12个月内向甲方提出免费复学申请的，甲方应在收到乙方书面复学申请后1-2个月内安排乙方进行日语水平测试及确认复学课程，或者直接合理安排复学课程。
          </p>
          <p>2、乙方权利与义务</p>
          <p style="margin-left:10px;">2.1 乙方权利</p>
          <p class="con_Suojin">
            2.1.1
            乙方有权向甲方反应其任课教师情况，如出现甲方老师不按时上课、不按教学计划上课等，乙方有权向甲方反映，经甲方核实后决定是否更换教师或纠正教师的不当行为。
          </p>
          <p class="con_Suojin">
            2.1.2
            乙方修完所报课程，未通过所报课程相应级别的考试，有权在参加国际认证考试之日起12个月内向甲方书面提出一次免费复学申请。若乙方超出前述时限提出免费复学申请的，甲方有权拒绝。
          </p>
          <p style="margin-left:10px;">2.2 乙方义务</p>
          <p class="con_Suojin">
            2.2.1
            为保障乙方学习效果，乙方自愿遵守甲方在本协议内指定的教学培训管理规定。
          </p>
          <p class="con_Suojin">
            2.2.2
            为有针对性的给乙方提供更多且有效的升学、留学与就业服务机会，乙方须自愿服从甲方安排并参加相关国际认证考试；且乙方拿到国际认证考试成绩后，自愿将国际认证考试相关证书扫描件提交给甲方存档，并允许荣誉展示，作为学员见证资料。
          </p>
          <p class="con_Suojin">
            2.2.3
            为监督教学过程，促使乙方最终达成学习目标，乙方应自愿参加甲方组织的相关测试。
          </p>
          <p class="con_Suojin">
            2.2.4
            乙方应自觉遵守甲方制定的教学管理规定，因特殊原因确需请假的，必须遵守以下规定，否则将视为乙方主动放弃本阶段学习，如出现未达成考级目标的情况，乙方不再享受免费复学的权利：
          </p>
          <p style="margin-left:20px;">
            A、乙方应在上课前48小时以前，书面向甲方授课教师请假，并书面获准；
          </p>
          <p style="margin-left:20px;">
            B、乙方在连续3个月内，请假总时长累计不得超过6小时；
          </p>
          <p style="margin-left:20px;">
            C、乙方在请假后，应找授课教师或同学补习（可线上补习）课程，完成该阶段课程的到勤。
          </p>
          <p class="con_Suojin">
            乙方必须保证上课到勤率在90%以上，并亲自确认出勤签到记录，不得无故缺勤、迟到和早退，否则无故缺勤一次以上或迟到、早退三次及以上
            ，将视为乙方主动放弃本阶段学习，如出现未达成考级目标的情况，乙方不再享有免费复学的权利。
          </p>
          <p class="con_Suojin">
            2.2.5
            上课时，乙方应尊重甲方教师，不得出现接听电话、使用微信等、随意走动、饮食、抽烟、打牌或看与课程无关书籍资料等行为。
          </p>
          <p class="con_Suojin">
            2.2.6
            乙方无权将培训资料用作任何商业用途，否则，对造成甲方的直接或间接损失，乙方应当全额赔偿。
          </p>
          <p class="con_Suojin">
            2.2.7
            乙方优异成绩的取得与乙方的主动、努力的学习态度密不可分，乙方不应将学习成绩不佳或学习成绩差归责于甲方的教学；乙方未服从甲方的教学管理要求，导致安全事故的责任，由乙方自己承担。
          </p>
          <p class="con_Suojin">
            2.2.8
            乙方应按照本协议约定，按时足额缴纳学费，若乙方在开课后全额或部分延迟缴纳学费的，在7个工作日内，甲方有权要求乙方按照10元/天的标准支付违约金；若发生乙方延迟7个工作日以上未缴纳学费的情况下，甲方有权单方面解除本协议。由此导致的协议被解除，甲方无需退还乙方剩余学费且有权要求乙方按照200元/天的标准向甲方支付违约金。
          </p>
          <div class="contractTitle comTop">
            五、课程培训内容与服务的管理规定
          </div>
          <p>1、语言培训课程内容与考试要求</p>
          <p style="margin-left:10px;">
            1.1 甲方将按照本协议第三条“培训课程内容”为乙方提供教学服务
          </p>
          <p style="margin-left:10px;">
            1.2
            乙方通过参加甲方提供的教学服务后，应主动参加相关国际考试。考试内容为：
          </p>
          <p class="con_Suojin">
            A
            日语国际能力测试（JLPT）：初级（N5-N4）、中级（N3-N2）、高级（N1）；
          </p>
          <p class="con_Suojin">
            B 实用日本语鉴定考试（J.TEST）：初级（E-F级）、中高级（A-D级）；
          </p>
          <p class="con_Suojin">
            C 日本留学生考试（EJU）：文科（日语）、综合科目、数学。
          </p>
          <div style="margin-left:10px;display:flex;">
            1.3 乙方当前选择考试：
          </div>
          <div
            class="comConInput"
            style="width:98%;text-align:left;margin:10px auto;"
          >
            {{ dataList.Exam }}
          </div>
          <p>2、高级课程增值课程特别条款</p>
          <p style="margin-left:10px;">
            2.1 乙方在报名高级课程后，有机会参加以下增值课程：
          </p>
          <p class="con_Suojin">
            2.1.1
            乙方通过甲方面试后，有权申请参加甲方组织的“成长训练营培训”、“周末沙龙”等培训活动。
          </p>
          <p class="con_Suojin">
            2.1.2
            乙方达到所学语言的高级水平，并且通过甲方面试，有权申请参加甲方组织的“精品教师培训”、“精品导游培训”。
          </p>
          <p class="con_Suojin">
            2.1.3
            以上两种培训资格有效期为6个月，即乙方报名增值课程且面试通过之日起6个月之内有效。逾期将视为主动放弃上述学习机会。
          </p>
          <p style="margin-left:10px;">
            2.2
            该增值课程属于甲方有偿提供给高级课程学员的课程，乙方报名参加该增值课程后，不得因任何原因要求甲方返还增值课程费用。
          </p>
          <p style="margin-left:10px;">
            2.3
            乙方自愿选择参加甲方提供的增值课程，自甲方发布报名通知后的规定时间内，乙方应向甲方指定的工作人员报名，逾期未报名的视为放弃参加增值课程。
          </p>
          <p style="margin-left:10px;">
            2.4
            该增值课程可能涉及到户外活动，乙方在增值课程所涉户外活动中若发生任何意外事故，除非证明是甲方故意行为导致，否则均由乙方自行承担责任；乙方报名该增值课程后因个人身体原因不适合继续参加的，乙方有义务书面告知甲方实际情况，经甲方同意后方可退出，且甲方不承担与此相关的任何责任。
          </p>
          <p style="margin-left:10px;">
            2.5
            在该增值课程中，乙方应当服从甲方的组织和管理，非因甲方原因造成的乙方人身财产损害，甲方不承担任何责任；由于乙方原因导致甲方或第三方人身财产损害，甲方不承担任何责任，若甲方因乙方原因而对甲方或第三方承担责任的，甲方有权向乙方追偿。
          </p>
          <p style="margin-left:10px;">
            2.6 关于增值课程的最终解释权归甲方所有。
          </p>
          <div class="contractTitle comTop">
            六、插班、请假、复课、合并班的教学培训管理
          </div>
          <p>1、插班</p>
          <p class="con_Suojin">
            1.1插班是指乙方在甲方开班以后报名学习，插入班级上课。
          </p>
          <p class="con_Suojin">
            1.2因乙方自身原因跟不上进度，应及时向甲方老师报备，甲方根据乙方实际学习情况安排乙方到适合的班级上课。
          </p>
          <p class="con_Suojin">
            1.3乙方发现所插入班级，难易程度仍不适合本人，应立即与甲方沟通，甲方须及时再次合理安排，以两次为限。
          </p>
          <p>2、请假</p>
          <p>
            请假是指乙方因正当原因无法正常上课，可向甲方老师申请请假，正当原因仅限以下情形：
          </p>
          <p style="margin-left:10px;">
            2.1
            乙方因不可抗力因素如：自然灾害、国家政策调整、战争、政府禁令等造成的双方不能正常上课的；
          </p>
          <p style="margin-left:10px;">
            2.2 乙方因身体原因导致无法正常上课的（须开具正规医院相关证明）；
          </p>
          <p style="margin-left:10px;">
            2.3 所报课程上课时间与学校课程或者校方安排冲突的（须开具校方证明）；
          </p>
          <p style="margin-left:10px;">
            2.4
            乙方正常请假后，可要求甲方老师保留学习资料，并及时与老师协商进行补课安排。同时，乙方须按时参加甲方老师安排的补课，并且完成甲方老师布置的补课任务，完成到勤；
          </p>
          <p style="margin-left:10px;">
            2.5
            乙方未请假或者未按照要求请假的，甲方有权默认乙方已上课，有权拒绝提供请假期间的学习资料及补课要求。同时，请假期间课时按照正常上课进行计费。
          </p>
          <p>3、停课、复课</p>
          <p style="margin-left:10px;">
            3.1
            因乙方自身原因导致无法上课，乙方有权向甲方提出书面的停课申请，符合条件的，甲方允许乙方停课的，双方应签订停课协议，停课期限最长不得超过12个月，复课前，乙方须提前向甲方书面申请复课，甲方予以办理复课手续；停课期限届满未复课的，视为乙方主动放弃该课程学习，从停课之日起终止本课程协议，甲方不承担任何退课退费责任。
          </p>
          <p style="margin-left:10px;">
            3.2
            因乙方自身原因导致连续12个课时不按时出勤，乙方须书面向甲方申请停课，否则将视为乙方自动停课，甲方不承担任何退课退费的责任。自动停课日起12个月内，乙方如需复课，须书面向甲方提出复课申请，甲方予以办理复课。
          </p>
          <p style="margin-left:10px;">
            3.3
            乙方停课期间，甲方将以手机短信、微信、QQ等有效方式通知乙方复课，请乙方保持通讯畅通，如若更换联系方式时，乙方应立即书面通知甲方，否则因此导致的所有责任与后果由乙方自行承担。
          </p>
          <p style="margin-left:10px;">
            3.4
            乙方复课时，甲方根据乙方实际学习进度情况，安排乙方进入合适的班级学习。
          </p>
          <p style="margin-left:10px;">
            3.5
            乙方办理停课后，如因乙方自身原因在12个月后仍无法进行复课的，责任由乙方自行承担，甲方不承担任何责任。
          </p>
          <p>4、合并班</p>
          <p>
            甲方有权根据教学进度需要，班级进度，教师离职或转岗、进修等情况进行班级的合并与拆分，属于正常教学工作，甲方将尽力做好班级交接工作，乙方应予以积极的配合。
          </p>
          <div class="contractTitle comTop">七、退费条款</div>
          <p>
            1、因不可抗力因素如：自然灾害、国家政策调整、战争、政府禁令等造成的双方不能履行合同义务的，甲方将根据乙方实际上课情况计算费用，将剩余课程学费退还乙方。
          </p>
          <p>
            2、乙方如若办理停课或自动停课，可在首次自动停课之日起或学员申请停课之日起，12个月内办理复课，但无权申请退课、退费。
          </p>
          <p>
            3、若乙方在课程未结束时就通过课程对应的级别考试，并且取得相应证书，乙方可以选择继续完成后续课程学习，或者自动放弃后续课程学习，乙方无权申请退课、退费。
          </p>
          <p>
            4、若乙方出现转让课时或让其他人顶替上课的行为，一经甲方发现，甲方有权取消乙方学习资格，同时视为乙方自动放弃该课程，乙方无权申请退课、退费。
          </p>
          <p>
            5、因乙方自身原因导致无法上课，且有正当理由（正当理由是指：前述不可抗力因素、出国留学、不在本地学习、长期外地工作实习等，均需要提供相应证明），乙方有权提出终止合同，甲方须给乙方办理退课、退费（详见七条9款）。
          </p>
          <p>
            6、因乙方自身原因导致无法上课，但若非正当理由（正当理由是指：前述不可抗力因素、出国留学、不在本地学习、长期外地工作实习等，均需要提供相应证明），乙方无权申请退课、退费，但可向甲方申请办理停课，甲方根据实际情况提供妥善解决方案。
          </p>
          <p>
            7、若乙方在报名任意一门甲方提供的课程（见本协议抬头“培训课程信息”）。
          </p>
          <p style="margin-left:10px;">
            7.1
            享受了甲方提供的课程学费优惠活动、奖学金活动、学习优惠等，乙方无权申请退课、退费。
          </p>
          <p style="margin-left:10px;">
            7.2
            办理了甲方提供的境外学习等相关手续，需要家庭有一定的资信证明，如因个人原因不能出具相关证明，无法出境者，乙方无权申请退课、退费。
          </p>
          <p>
            8、若乙方报名甲方课程，在缴纳学费时已享受了学费优惠后，又申请退课、退费的，乙方必须符合以下情况方能作为正常退费要求：
          </p>
          <p style="margin-left:10px;">8.1 自然灾害等不可抗力的情况；</p>
          <p style="margin-left:10px;">
            8.2 出国留学的情况（需开具境外大学录取通知书及出行机票）；
          </p>
          <p style="margin-left:10px;">
            8.3 不在本地学习的情况（需开具相关证明）；
          </p>
          <p style="margin-left:10px;">
            8.4 长期外地工作实习的情况（需开具工作证明）。
          </p>
          <p>9、达到正常退费要求者，退费金额核算如下：</p>
          <p style="margin-left:10px;">
            9.1 从乙方合同执行之日起7日内，除了报名手续费500元（含咨询费和老师试听课费用）、校区运营成本2000元不可退还外，甲方收取的其它部分可以按以下约定退还。          
          </p>
          <p style="margin-left:10px;">
            9.2 未参加抽奖等额外减免活动者：应退学费=实收学费-报名手续费-校区运营成本-已上课时费-违约金（其中，已上课时费=原价学费÷总课时×已上课时；违约金=（实收学费-已上课时费）×10%。）；课程中附赠的口语课程、考前冲刺课程、真题讲解等课程不纳入退费课时，乙方无权针对该课程申请退费；班级课时剩余计算方法按照班级学费平均到每课时（45分钟）计算。          
          </p>
          <p style="margin-left:10px;">
            9.3 参加各项抽奖等优惠活动者，一律不予退费。
          </p>
          <p style="margin-left:10px;">
            9.4
            因乙方自身原因（如未达到留学或旅游所对应的语言水平，且非上述七.8条不可抗力因素）不能参加境外留学、游学或旅游项目的，不予退还境外服务费。
          </p>
          <p style="margin-left:10px;">
            满足正常退费要求的学员，境外留学、游学、旅游费用除去上述条款七.9.3外，余额部分应退还给乙方。
          </p>

          <div class="contractTitle comTop">八、其他责任</div>
          <p>
            1、乙方对甲方提供的培训服务不满意，要求改进教学方法或者更换培训老师的，甲方应考虑乙方要求的合理性，并根据其合理性提供相应解决方案，但因培训老师的个人差异，乙方应理解解决方案，不能完全满足乙方个人要求。
          </p>
          <p>
            2、乙方严重违反本协议约定的相关管理制度或干扰甲方教学培训管理规定时，甲方可单方面解除本协议，并且不退还任何费用。
          </p>
          <p>
            3、乙方同意甲方出于宣传学校或教学的目的需要，可以将含有乙方肖像、图像的照片及视频作广告发布之用。
          </p>
          <div class="contractTitle comTop">九、合同争议解决方式</div>
          <p>
            1、本合同在履行过程中发生争议的，由双方当事人协商解决；“凡因本合同产生的或与本合同有关的一切争议，均提交仲裁委员会仲裁。”
          </p>
          <p>
            2、本合同自乙方缴纳全额课程学费及签订协议之日起，24个月内有效，到期后本合同甲乙双方各项权益自动终止。
          </p>
          <p>
            3、本合同未尽事宜，由双方约定后签订补充协议等附件，补充协议及合同附件与本合同具有同等法律效力。
          </p>
          <p>
            4、本合同及其附件内，空格部分填写的文字与印刷文字具有同等法律效力。
          </p>
          <p>5、本合同正本一式两份，甲乙双方各持一份，具有同等法律效力。</p>
          <p>6、本合同自乙方缴纳全额课程学费及签订协议之日起正式生效。</p>
          <template v-if="dataList.CourseContracrInfo">
            <div class="contractTitle comTop">十、合同补充协议</div>
            <p>{{ dataList.CourseContracrInfo }}</p>
          </template>
          <p>
            <template
              v-if="
                dataList.CourseContracrInfo == '' ||
                  dataList.CourseContracrInfo == null
              "
              >7、</template
            >
            本合同协议部分到此为止，以下为空白。
          </p>
          <div style="margin:50px 0;position:relative;">
            甲方签字（盖章）：<img
              v-if="dataList.IsCompanySeal == 1 && dataList.GroupSealImg"
              :src="dataList.GroupSealImg"
              style="width:100px;position:absolute;top:-30px;"
            />
          </div>
          <p style="margin-top:20px;display:inline-block;">
            <span
              style="width:50px;display:inline-block;text-align:center;"
              class="comConInput"
              >{{ dataList.SealDateYear }}</span
            >年
            <span
              style="width:50px;display:inline-block;text-align:center;"
              class="comConInput"
              >{{ dataList.SealDateMonth }}</span
            >月
            <span
              style="width:50px;display:inline-block;text-align:center;"
              class="comConInput"
              >{{ dataList.SealDateDay }}</span
            >日
          </p>
          <div style="margin-top:100px;position:relative;">
            乙方签字（盖章）：<img
              v-if="dataList.Sign"
              :src="dataList.Sign"
              style="width:80px;position:absolute;top:-15px;"
            />
          </div>
          <p style="margin:40px 0 30px 0;">
            <span
              style="width:50px;display:inline-block;text-align:center;"
              class="comConInput"
              >{{ dataList.StuSignYear }}</span
            >年
            <span
              style="width:50px;display:inline-block;text-align:center;"
              class="comConInput"
              >{{ dataList.StuSignMonth }}</span
            >月
            <span
              style="width:50px;display:inline-block;text-align:center;"
              class="comConInput"
              >{{ dataList.StuSignDay }}</span
            >日
          </p>
        </div>
        <div style="padding:100px 0 80px 0;" v-if="ActiveTab == 2">
          <ul class="gzqzUl">
            <li>
              <el-row>
                <el-col :span="12">姓名</el-col>
                <el-col :span="12">{{ dataList.StudentName }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">出生日期</el-col>
                <el-col :span="12">{{ dataList.StuBirthStr }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">性别</el-col>
                <el-col :span="12">{{ dataList.StuSexStr }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">电话</el-col>
                <el-col :span="12">{{ dataList.StuTel }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">电子邮箱</el-col>
                <el-col :span="12">{{ dataList.StuEmail }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">住址</el-col>
                <el-col :span="12">{{ dataList.StuAddress }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row style="display:flex;align-items:center;">
                <el-col :span="12">身份证</el-col>
                <el-col :span="12">
                  <span v-if="dataList.StuIDCard">{{
                    dataList.StuIDCard
                  }}</span>
                  <el-input v-else v-model="StuIDCard"></el-input>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
        <div style="padding:100px 0 80px 0;" v-if="ActiveTab == 3">
          <ul class="gzqzUl">
            <li>
              <el-row>
                <el-col :span="12">家长姓名</el-col>
                <el-col :span="12">{{ dataList.ParentName }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">家长与学员关系</el-col>
                <el-col :span="12">{{ dataList.ParentRelation }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">家长联系电话</el-col>
                <el-col :span="12">{{ dataList.ParentTel }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">家长电子邮箱</el-col>
                <el-col :span="12">{{ dataList.ParentEmail }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">紧急联系人姓名</el-col>
                <el-col :span="12">{{ dataList.UrgentName }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">紧急联系人与学员关系</el-col>
                <el-col :span="12">{{ dataList.UrgentRelation }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">紧急联系人电话</el-col>
                <el-col :span="12">{{ dataList.UrgentTel }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">紧急联系人电子邮箱</el-col>
                <el-col :span="12">{{ dataList.UrgentEmail }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">监护人身份证后4位</el-col>
                <el-col :span="12">{{ dataList.GuardianIDCard }}</el-col>
              </el-row>
            </li>
          </ul>
        </div>
        <div style="padding:100px 0 80px 0;" v-if="ActiveTab == 4">
          <ul class="gzqzUl">
            <li>
              <el-row>
                <el-col :span="12">培训课程内容</el-col>
                <el-col :span="12">{{ dataList.CourseName }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">校区名称</el-col>
                <el-col :span="12">{{ dataList.SchoolName }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">校区负责人</el-col>
                <el-col :span="12">{{ dataList.SchoolPrincipal }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">起始级别</el-col>
                <el-col :span="12">{{ dataList.StartLevel }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">课程顾问</el-col>
                <el-col :span="12">{{ dataList.CourseConsultant }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">收藏人</el-col>
                <el-col :span="12">{{ dataList.Payee }}</el-col>
              </el-row>
            </li>
          </ul>
        </div>
        <div style="padding:100px 0 80px 0;" v-if="ActiveTab == 5">
          <ul class="gzqzUl">
            <li>
              <el-row>
                <el-col :span="12">第一期培训课时数</el-col>
                <el-col :span="12">{{ dataList.FirstClassHours }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期培训课时数</el-col>
                <el-col :span="12">{{ dataList.SecondClassHours }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期培训课时数</el-col>
                <el-col :span="12">{{ dataList.ThirdClassHours }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">总计</el-col>
                <el-col :span="12">{{ dataList.TotalClassHours }}</el-col>
              </el-row>
            </li>
            <li class="bgli"></li>
            <li>
              <el-row>
                <el-col :span="12">第一期培训课程费</el-col>
                <el-col :span="12">{{ dataList.FirstCourseFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期培训课程费</el-col>
                <el-col :span="12">{{ dataList.SecondCourseFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期培训课程费</el-col>
                <el-col :span="12">{{ dataList.ThirdCourseFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">总计</el-col>
                <el-col :span="12">{{ dataList.TotalCourseFee }}</el-col>
              </el-row>
            </li>
            <li class="bgli"></li>
            <li>
              <el-row>
                <el-col :span="12">第一期培训教材费</el-col>
                <el-col :span="12">{{ dataList.FirstBookFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期培训教材费</el-col>
                <el-col :span="12">{{ dataList.SecondBookFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期培训教材费</el-col>
                <el-col :span="12">{{ dataList.ThirdBookFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">总计</el-col>
                <el-col :span="12">{{ dataList.TotalBookFee }}</el-col>
              </el-row>
            </li>
            <li class="bgli"></li>
            <li>
              <el-row>
                <el-col :span="12">第一期培训课件费</el-col>
                <el-col :span="12">{{ dataList.FirstClassFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期培训课件费</el-col>
                <el-col :span="12">{{ dataList.SecondClassFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期培训课件费</el-col>
                <el-col :span="12">{{ dataList.ThirdClassFee }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">总计</el-col>
                <el-col :span="12">{{ dataList.TotalClassFee }}</el-col>
              </el-row>
            </li>
            <li class="bgli"></li>
            <li>
              <el-row>
                <el-col :span="12">第一期费用小计</el-col>
                <el-col :span="12">{{ dataList.FirstSubTotal }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期费用小计</el-col>
                <el-col :span="12">{{ dataList.SecondSubTotal }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期费用小计</el-col>
                <el-col :span="12">{{ dataList.ThirdSubTotal }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">总计</el-col>
                <el-col :span="12">{{ dataList.TotalSub }}</el-col>
              </el-row>
            </li>
            <li class="bgli"></li>
            <li>
              <el-row>
                <el-col :span="12">第一期折让价格</el-col>
                <el-col :span="12">{{ dataList.FirstDiscountMoney }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期折让价格</el-col>
                <el-col :span="12">{{ dataList.SecondDiscountMoney }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期折让价格</el-col>
                <el-col :span="12">{{ dataList.ThirdDiscountMoney }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">总计</el-col>
                <el-col :span="12">{{ dataList.TotalDiscountMoney }}</el-col>
              </el-row>
            </li>
            <li class="bgli"></li>
            <li>
              <el-row>
                <el-col :span="12">第一期费用总计</el-col>
                <el-col :span="12">{{ dataList.FirstMoney }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期费用总计</el-col>
                <el-col :span="12">{{ dataList.SecondMoney }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期费用总计</el-col>
                <el-col :span="12">{{ dataList.ThirdMoney }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">总计</el-col>
                <el-col :span="12">{{ dataList.TotalMoney }}</el-col>
              </el-row>
            </li>
            <li class="bgli"></li>
            <li>
              <el-row>
                <el-col :span="12">第一期支付日期</el-col>
                <el-col :span="12">{{ dataList.FirstPayDateStr }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第二期支付日期</el-col>
                <el-col :span="12">{{ dataList.SecondPayDateStr }}</el-col>
              </el-row>
            </li>
            <li>
              <el-row>
                <el-col :span="12">第三期支付日期</el-col>
                <el-col :span="12">{{ dataList.ThirdPayDateStr }}</el-col>
              </el-row>
            </li>
          </ul>
        </div>
        <div
          style="padding:100px 15px 80px 15px;font-size:1rem;"
          v-if="ActiveTab == 6"
        >
          <div class="con_Suojin" style="line-height:30px;">
            本人
            <div
              class="comConInput"
              style="width:70px;display:inline-block;"
            ></div>
            （以下为签名者）为
            <div
              class="comConInput"
              style="width:70px;display:inline-block;"
            ></div>
            学员（以下称“学员”）的监护人，本人为学员购买 了甲鹤教育
            <div
              class="comConInput"
              style="width:80px;display:inline-block;"
            ></div>
            课程共
            <div
              class="comConInput"
              style="width:50px;display:inline-block;"
            ></div>
            课时，并签署了合同编号为
            <div
              class="comConInput"
              style="width:80px;display:inline-block;"
            ></div>
            的《甲鹤教育课程协议》。
          </div>
          <div class="con_Suojin" style="line-height:30px;margin-top:20px;">
            本人知晓中国现行关于校外培训机构不得一次性收取超过三个月费用的规定，甲鹤工作人员也已经明确告知公司的收费政策，一次性只能收取三个月的费用。由于本人自身的原因，本人主动要求并坚持一次性支付合同编号为
            <div
              class="comConInput"
              style="width:80px;display:inline-block;"
            ></div>
            的《甲鹤教育课程协议》项下的所有费用。
          </div>
          <div class="con_Suojin" style="line-height:30px;margin-top:20px;">
            本人承诺，该一次性付款行为完全是由本人自主决定并要求的。除了付款事宜，本人、学员与甲鹤之间的权利义务按所签署的《甲鹤教育课程协议》履行。
          </div>
          <div style="margin-top:50px;">
            特此说明。
          </div>
          <div style="position:relative;margin:50px 0;">
            乙方学员签字（正楷）<img
              style="width:40px;position:absolute;top:-40px;"
              :src="dataList.Sign"
            />
          </div>
          <div style="margin:50px 0;">
            甲方签字（盖章）
          </div>
          <div style="margin:50px 0;">
            <div style="display:flex;">
              <div class="comConInput" style="width:50px;"></div>
              年
              <div class="comConInput" style="width:50px;"></div>
              月
              <div class="comConInput" style="width:50px;"></div>
              日
            </div>
          </div>
          <div style="margin:50px 0;">
            乙方监护人签字（正楷）
          </div>
          <div style="margin:50px 0;">
            <div style="display:flex;">
              <div class="comConInput" style="width:50px;"></div>
              年
              <div class="comConInput" style="width:50px;"></div>
              月
              <div class="comConInput" style="width:50px;"></div>
              日
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GetEducationContractInfo } from "../api/sale/contract";
import { Encrypt, Decrypt } from "../utils/encrypt";

export default {
  data() {
    return {
      dataList: [],
      dialogVisible: false,
      gmsg: {
        ContractId: 0
      },
      dataList: {},
      ActiveTab: 1,
      StuIDCard: ""
    };
  },
  created() {
    if (this.$route.query.a) {
      let ContractId = Decrypt(decodeURIComponent(this.$route.query.a));
      this.gmsg.ContractId = ContractId;
      this.getList();
    } else {
      this.gmsg.ContractId = 7;
      this.getList();
    }
  },
  methods: {
    //获取数据
    getList() {
      GetEducationContractInfo(this.gmsg).then(res => {
        if (res.Code == 1) {
          this.dataList = res.Data;
        }
      });
    },
    ChangeTab(num) {
      this.ActiveTab = num;
    },
    //跳转至合同签名
    goSign() {
      if (this.dataList.StuIDCard == "" || this.dataList.StuIDCard == null) {
        if (this.StuIDCard == "") {
          this.ActiveTab = 2;
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请输入身份证号`
          });
          return;
        }
      }
      this.$router.push({
        path: "/contractSign",
        query: {
          a: encodeURIComponent(Encrypt(this.gmsg.ContractId.toString())),
          Money: this.dataList.Money,
          StudentName: this.dataList.StudentName,
          StuIDCard: this.StuIDCard
        }
      });
    }
  },
  mounted() {}
};
</script>
