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

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

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

  .ContractMain {
    padding: 15px 15px 80px 15px;
    position: relative;
    background: #fff;
  }

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

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

  }

</style>
<template>
  <div class="TcConfirmMain">
    <div class="TCdiv_content" :class="dialogVisible?'CisHideen':''">
      <!-- 签字 -->
      <div class="signSpan">
        <div @click="dialogVisible=true" :class="dialogVisible?'CisHideen':''" class="sign">
          <span style="padding:0;"><i style="font-size:1.2rem" class="iconfont icon-qianming"></i></span>
          <span style="font-size:1.2rem" v-if="msg.Sign==''||msg.Sign==null">签字</span>
          <span style="font-size:1.2rem" v-else>重新签字</span>
        </div>
      </div>
      <div class="ContractMain">
        <div class="ContractName" style="font-size:1.8rem;font-weight:bold;">培训课程协议</div>
        <div class="ContractName" style="margin:10px 0;">
          {{dataList.ContractBranch}}
        </div>
        <div class="ContractName" style="text-align:left;margin-bottom:10px;font-size:1rem;">合同号：{{dataList.ContractNo}}
        </div>
        <div class="contractTitle">一、声明</div>
        <p>当您签署此协议之前，请确保已清楚了解以下事宜：</p>
        <p>1、温馨提示：日语学习的过程中，学员的上课到勤率越高，教学成果会更好，学员达成课程学习目标的概率将会较高。</p>
        <p class="con_Suojin">因此，请确保您已经认真了解过该门课程的学习内容、规划与学费事宜；已充分做好了各项学习准备，真正让自己做到上课到勤率达到90%以上，努力达成既定学习目标。</p>
        <p>2、您有一次在学习的任何阶段申请停课的权利。当您按要求正式办理相关停课手续之日起，12个月内，如无不可抗力事由，则必须按要求提出复课申请。如未按要求复课，则视作学员主动放弃继续学习的权力，终止本课程协议。
        </p>
        <p>
          3、请您牢记全国官方唯一服务号码：{{dataList.ContractTel}}
        </p>
        <p>4、请您认真阅读并充分理解本协议内容后签署此协议，一旦签署则视为完全理解并同意该协议内容。</p>
        <div class="contractTitle comTop">二、总则</div>
        <p>{{dataList.ContractBranch}}（以下简称“甲方”）与培训学员（以下简称“乙方”）根据《中华人民共和国合同法》等法律、法规规定，双方在平等、自愿、协商一致的基础上达成此协议。</p>
        <div class="contractTitle comTop">三、培训课程内容</div>
        <p>培训课程：<span class="conUnderLine">{{dataList.CourseName}}</span></p>
        <p>课程内容：<span class="conUnderLine">{{dataList.CourseContent}}</span></p>
        <p>
          如乙方有同时学习两门或两门以上不同类别的课程要求，则乙方须分课程类别签订课程协议。
        </p>
        <div class="contractTitle comTop">四、课程费用</div>
        <p>人民币（大写）：<span class="conUnderLine">{{dataList.CNYCaps}}</span>圆</p>
        <p>人民币（小写）：<span class="conUnderLine">{{dataList.Money}}</span>元</p>
        <p>2、支付方式：扫码支付（微信、支付宝）、POS机刷卡支付（信用卡，银行借记卡）、银行汇款/转账。</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">甲方按本协议约定向乙方收取课程费用</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
          甲方在收到乙方免费复学申请后，需在1-2个月内安排乙方进行水平测试和复学课程，或者直接合理安排复学课程。（重要说明：乙方只有在修完所报课程，但未通过所报课程相对应级别的考试，且在参加国际认证考试之日起12个月内才有资格提出免费复学申请。）
        </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 为监督教学过程，促使乙方最终达成学习目标，乙方应自愿参加甲方组织的相关测试，且正确率达到80%以上。</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 style="margin-left:20px;">D，乙方在请假后，应找授课教师或同学补习（可线上补习）课程，完成该阶段课程的到勤。</p>
        <p class="con_Suojin">2.2.5
          乙方必须保证上课到勤率在90%以上，并亲自确认签到情况，不得无故缺勤、迟到和早退，否则，将视为乙方主动放弃本阶段学习，如出现未达成考级目标的情况，乙方不再享有免费复学的权利。</p>
        <p class="con_Suojin">2.2.6 上课时，乙方应尊重甲方教师，不得出现接听电话、随意走动、饮食、抽烟、打牌或看与课程无关的书籍资料等行为。</p>
        <p class="con_Suojin">2.2.7 乙方无权将培训资料用作任何商业用途，否则，对造成甲方的直接或间接损失，乙方应当全额赔偿。</p>
        <p class="con_Suojin">2.2.8 非由甲方原因导致的乙方学习成绩未进步的后果，由乙方自己承担；乙方未服从甲方的教学管理要求，导致安全事故的责任后果，由乙方自己承担。</p>
        <p class="con_Suojin">2.2.9
          乙方应按照本协议约定，按时足额缴纳学费，开课后延迟支付的（未按时支付学费和支付部分学费均为延迟支付），在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>
        <p style="margin-left:10px;">1.3 乙方当前选择考试：{{dataList.Exam}}}</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 乙方达到所学语言的高级水平后，并且通过甲方面试，有权申请参加甲方组织的“精品教师培训”、“精品导游培训”。</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>
        <div class="contractTitle comTop">特别提示：本条款仅适用于报名参加“日语导游培训课程”的学员，因每年日语导游培训课程人数有限，报完为止。</div>
        <p>1、乙方报名日语导游培训课程，且缴清该课程全部学费之后，日语达到N3水平，有资格参加甲方安排的导游培训，如乙方不参加培训的，须书面向甲方提出申请，否则甲方视为其主动放弃培训机会，甲方不承担任何责任。</p>
        <p>2、乙方参加导游证培训，自报名之日起，有效期为一年，逾期视为乙方自动放弃学习机会，甲方不承担任何责任。</p>
        <p>3、日语导游证培训时间和课程安排由甲方指定，当乙方达到日语N3水平，甲方教师将会通知乙方相关培训与考试的具体时间和注意事项。</p>
        <p>4、日语导游培训课程仅限乙方本人申请参加导游证的培训，不得转让第三方，亦不得折现等。</p>
        <p>5、如果乙方在日语导游证考试中未取得相应证书，乙方可在考试后12个月内免费进行一次日语导游培训课程的复学。</p>
        <p>6、乙方同时满足以下条件时，在乙方自愿的情况下，甲方负责乙方在甲方公司获得就业机会，甲方为乙方缴纳社保及各项补助金。</p>
        <p style="margin-left:10px;">6.1 日语水平达到N2及以上；</p>
        <p style="margin-left:10px;">6.2 独立带团8次或以上；</p>
        <p style="margin-left:10px;">6.3 持有日语导游证；</p>
        <p style="margin-left:10px;">6.4 完整参加甲方安排的导游培训，且考试合格；</p>
        <p style="margin-left:10px;">6.5 自愿与甲方签订三年及以上劳动协议；</p>
        <p style="margin-left:10px;">6.6 乙方拿到甲方公司就业同意书，办理入职期限为甲方提供就业同意书之日起6个月内，乙方逾期办理则视为其主动放弃在甲方就业的机会，甲方不承担任何责任。</p>
        <p>7、关于日语导游培训课程的最终解释权归甲方所有。</p>
        <div class="contractTitle comTop">八、日本留学课程管理规定</div>
        <div class="contractTitle comTop">特别提示：本条款仅适用于报名参加“日本留学课程”的学员。</div>
        <p>
          1、日本留学课程是甲方根据乙方的留学学校及留学专业要求，结合乙方自身条件，协助乙方前往日本大学或优质语言学校进行学习的课程。该课程内容包含：
        </p>
        <p style="margin-left:10px;">A 大学或大学院入学考试辅导（若乙方申请为语言学校，该课程则为日本留学生考试—EJU课程辅导）</p>
        <p style="margin-left:10px;">B 面试辅导</p>
        <p>
          2、除课程内容外，甲方负责内容包含：学生入学规划、学校筛选、专业筛选、研究计划书辅导、导师沟通、面试稿编写（若需要）、取得研究生内定资格、出愿材料准备、材料审核、取得入学合格通知书、宿舍申请、在留资格资料的准备和审查、取得在留资格认证。乙方需自行承担往返机票费、签证费、入学金、乙方出境前从本城至机场的往返路费、到达日本后的交通费、住宿费等。
        </p>
        <p>
          本规定仅作为课程内容确认使用，留学服务具体细节请另行签订留学协议。
        </p>
        <p>
          3、关于日语导游培训课程的最终解释权归甲方所有。
        </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 style="margin-left:10px;">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 乙方停课期间，甲方每半年通知乙方复课一次，请乙方保持通讯畅通，如若更换联系方式时，乙方应立即通知甲方，否则因此导致的所有责任与后果由乙方自行承担。</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
          未参加抽奖等优惠活动者：应退学费=乙方已缴总学费-已上课程学费-（乙方已缴总学费-已上课程学费）×10%。其中“（乙方已缴总学费-已上课程学费）×10%”为违约金；课程中附赠的口语课程、考前冲刺课程、真题讲解等课程不纳入退费课时，乙方无权针对该课程申请退费；班级课时剩余计算方法按照班级学费平均到每小时计算。
        </p>
        <p style="margin-left:10px;">9.2 参加各项抽奖等优惠活动者，一律不予退费。</p>
        <p style="margin-left:10px;">9.3 因乙方自身原因（如未达到留学或旅游所对应的语言水平，且非上述十.8条不可抗力因素）不能参加境外留学、游学或旅游项目的，不予退还境外服务费。</p>
        <p style="margin-left:10px;">9.4 满足正常退费要求的学员，境外留学、游学、旅游费用除去上述条款十.9.3外，余额部分应退还给乙方。</p>
        <div class="contractTitle comTop">十一、其他责任</div>
        <p>1、乙方对甲方提供的培训服务不满意，要求改进教学方法或者更换培训老师的，甲方应考虑乙方要求的合理性，并提供相应解决方案，但因培训老师的个人差异，乙方应理解解决方案，不能完全满足个人要求。</p>
        <p>2、乙方严重违反本协议约定的相关管理制度或干扰甲方教学培训管理规定时，甲方可单方面解除本协议，并且不退还任何费用。</p>
        <div class="contractTitle comTop">十二、合同争议解决方式</div>
        <p>1、本合同在履行过程中发生争议的，由双方当事人协商解决；协商不成的，可向甲方公司注册地仲裁委员会申请仲裁。</p>
        <p>2、本合同自乙方缴纳全额课程学费及签订协议之日起，36个月内有效，到期后本合同甲乙双方各项权益自动终止。</p>
        <p>3、本合同未尽事宜，由双方约定后签订补充协议等附件，补充协议及合同附件与本合同具有同等法律效力。</p>
        <p>4、本合同及其附件内，空格部分填写的文字与印刷文字具有同等法律效力。</p>
        <p>5、本合同正本一式两份，甲乙双方各持一份，具有同等法律效力。</p>
        <p>6、本合同自乙方缴纳全额课程学费及签订协议之日起正式生效。</p>
        <p>7、本合同协议部分到此为止，以下为空白。</p>
        <div style="margin:50px 0 10px 0;position:relative;">
          甲方签字（盖章）：<img style="width:90px;position:absolute;top:-37px;" :src="dataList.CompanySealImage" />
        </div>
        <div style="margin:10px 0;">{{dataList.SealDate}}</div>
        <div style="margin:30px 0 10px 0;position:relative;">
          乙方签字（盖章）： <img style="width:40px;position:absolute;top:-25px;" :src="dataList.Sign" />
        </div>
        <div>{{dataList.SignDate}}</div>
      </div>
    </div>
    <div class="CliSignDiv" :class="dialogVisible?'isShowSign':''" @touchmove.prevent>
      <div class="CliSignDiv" style="height:100%;background:#fff;z-index:100">
        <div class="CanvasDiv">
          <div class="dash">
            <div id="canvas" style="position:relative;top:0;">
            </div>
          </div>
        </div>
        <div class="bottom" style="text-align:center;height:60px;line-height:60px">
          <el-row>
            <el-col :span="12">
              <div style="width:100%;" @click="handelClearEl()">
                <span style="font-size:1.2rem;color:rgb(36, 173, 229)" class="iconfont icon-zhongzhi"></span>
                <span style="font-size:1.2rem">重置签名</span>
              </div>

            </el-col>
            <el-col :span="12">
              <div style="width:100%;" @click="handelSaveEl()">
                <span style="font-size:1.2rem;color:rgb(36, 173, 229)" class="iconfont icon-dagou"></span>
                <span style="font-size:1.2rem">完成签名</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  let canvas = document.createElement("canvas");
  let cxt = canvas.getContext("2d");
  import {
    SetEducationContractSign,
    GetEducationContractInfo
  } from '../api/sale/contract'

  export default {
    data() {
      return {
        dataList: [],
        dialogVisible: false,
        linewidth: 5, //线条粗细，选填
        color: "black", //线条颜色，选填
        background: "#fff", //线条背景，选填
        msg: {
          ContractId: 0,
          Sign: ''
        },
        gmsg: {
          ContractId: 0
        },
        dataList: {}
      };
    },
    created() {
      if (this.$route.query.ContractId) {
        this.gmsg.ContractId = this.$route.query.ContractId;
        this.getList();
      }

    },
    methods: {
      //获取数据
      getList() {
        GetEducationContractInfo(this.gmsg).then(res => {
          if (res.Code == 1) {
            console.log(res, '梳理');
            this.dataList = res.Data;
          }
        })
      },
      getCanvas() {
        let el = document.getElementById("canvas");
        el.appendChild(canvas);
        canvas.width = el.clientWidth;
        canvas.height = el.clientHeight;
        //cxt.fillStyle = this.background; //填充绘图的背景颜色
        cxt.fillStyle = 'rgba(255, 255, 255, 0)';
        cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形
        cxt.strokeStyle = this.color; //笔触的颜色
        cxt.lineCap = "round"; //线条末端线帽的样式
        let linewidth = this.linewidth;
        //开始绘制
        canvas.addEventListener(
          "touchstart",
          function (e) {
            cxt.beginPath();
            cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
            cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
          }.bind(this),
          false
        );
        //绘制中
        canvas.addEventListener(
          "touchmove",
          function (e) {
            cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
            cxt.stroke();
          }.bind(this),
          false
        );
        //结束绘制
        canvas.addEventListener(
          "touchend",
          function () {
            cxt.closePath();
          }.bind(this),
          false
        );
      },
      handelClearEl() {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
      },
      handelSaveEl() {
        let imgBase64 = canvas.toDataURL();
        this.msg.Sign = imgBase64;
        this.msg.ContractId = this.$route.query.ContractId;
        this.SaveMsg();
      },
      //提交数据
      SaveMsg() {
        SetEducationContractSign(this.msg).then(res => {
          if (res.Code == 1) {
            this.dialogVisible = false;
            this.getList();
          }
        })
      }
    },
    mounted() {
      this.getCanvas();
    }
  };

</script>
