页面修改

src/pages/contractView.vue

@@ -9,9 +9,9 @@
   }
 
   .comTitle {
-    width: 97%;
     border: 2px solid #808080;
     padding: 5px;
+    margin: auto;
     background-color: #fff;
   }
 
@@ -104,13 +104,62 @@
   .conTable td {
     height: 40px;
   }
-  .ConTract_Line .commonContent{
+
+  .ConTract_Line .commonContent {
     line-height: 35px;
   }
+
+  .firstPage {
+    margin: 30px;
+  }
+
+  .contractNum {
+    font-size: 25px;
+  }
+
+  .contractCompany {
+    font-size: 20px;
+    margin-top: 50px;
+  }
+
+  .operationAgree {
+    font-size: 40px;
+    letter-spacing: 20px;
+    width: 100%;
+    text-align: center;
+    margin: 600px 0;
+  }
+
+  .operationDate {
+    font-size: 20px;
+    text-align: right;
+    margin-bottom: 300px;
+  }
+
+  .contractBuchong .commonContent {
+    font-size: 18px;
+    line-height: 32px;
+  }
+
 </style>
 <template>
   <div class="contractView">
-    <div class="comTitle">
+    <div class="firstPage">
+      <div class="contractNum">合同编号：<span style="font-weight:bold;">{{dataList.ContractNo}}</span></div>
+      <div class="contractCompany">
+        甲方：成都市锦江区甲鹤外语培训学校有限公司
+      </div>
+      <div class="contractCompany">
+        乙方：<div class="contractInput" style="width:360px;"></div>
+      </div>
+      <div class="operationAgree">甲鹤日语课程协议</div>
+      <div class="operationDate">
+        <span>年</span>
+        <span style="margin-left:50px;">月</span>
+        <span style="margin-left:50px;">日</span>
+      </div>
+    </div>
+    <div class="comTitle" style="margin:0 30px;">
       <div class="comTiInner">
         <div class="comTLeft">甲鹤日语课程协议</div>
         <div class="comTRight"></div>
@@ -121,29 +170,29 @@
       <div class="comflex">
         <div>
           <span class="comLeftTile">姓名</span>
-          <div class="contractInput"></div>
+          <div class="contractInput">{{dataList.StudentName}}</div>
         </div>
         <div>
           <span class="comLeftTile">出生日期</span>
-          <div class="contractInput"></div>
+          <div class="contractInput">{{dataList.StuBirthStr}}</div>
         </div>
         <div>
           <span class="comLeftTile">性别</span>
-          <div class="contractInput"></div>
+          <div class="contractInput">{{dataList.StuSex==0?'男':'女'}}</div>
         </div>
       </div>
       <div class="comflex">
         <div>
           <span class="comLeftTile">住址</span>
-          <div class="contractInput"></div>
+          <div class="contractInput">{{dataList.StuAddress}}</div>
         </div>
         <div>
           <span class="comLeftTile">电话</span>
-          <div class="contractInput"></div>
+          <div class="contractInput">{{dataList.StuTel}}</div>
         </div>
         <div>
           <span class="comLeftTile">电子邮箱</span>
-          <div class="contractInput"></div>
+          <div class="contractInput">{{dataList.StuEmail}}</div>
         </div>
       </div>
       <table class="conTable" style="margin:20px 0">
@@ -158,40 +207,40 @@
         <tr>
           <td>姓名</td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.ParentName}}</div>
           </td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.UrgentName}}</div>
           </td>
           <td rowspan="4">
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.GuardianIDCard}}</div>
           </td>
         </tr>
         <tr>
           <td>与学员的关系</td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.ParentRelation}}</div>
           </td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.UrgentRelation}}</div>
           </td>
         </tr>
         <tr>
           <td>联系电话</td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.ParentTel}}</div>
           </td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.UrgentTel}}</div>
           </td>
         </tr>
         <tr>
           <td>电子邮箱</td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.ParentEmail}}</div>
           </td>
           <td>
-            <div class="contractInput input2"></div>
+            <div class="contractInput input2">{{dataList.UrgentEmail}}</div>
           </td>
         </tr>
       </table>
@@ -211,37 +260,37 @@
         <tr>
           <td>培训课程内容</td>
           <td>
-            <div class="contractInput input3"></div>
+            <div class="contractInput input3">{{dataList.CourseName}}</div>
           </td>
           <td>
             校区名称
           </td>
           <td>
-            <div class="contractInput input3"></div>
+            <div class="contractInput input3">{{dataList.SchoolName}}</div>
           </td>
           <td>
             校区负责人
           </td>
           <td>
-            <div class="contractInput input3"></div>
+            <div class="contractInput input3">{{dataList.SchoolPrincipal}}</div>
           </td>
         </tr>
         <tr>
           <td>起始级别</td>
           <td>
-            <div class="contractInput input3"></div>
+            <div class="contractInput input3">{{dataList.StartLevel}}</div>
           </td>
           <td>
             课程顾问
           </td>
           <td>
-            <div class="contractInput input3"></div>
+            <div class="contractInput input3">{{dataList.CourseConsultant}}</div>
           </td>
           <td>
             收款人
           </td>
           <td>
-            <div class="contractInput input3"></div>
+            <div class="contractInput input3">{{dataList.Payee}}</div>
           </td>
         </tr>
       </table>
@@ -266,61 +315,61 @@
         <tr>
           <td>培训课时数</td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.FirstClassHours}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.SecondClassHours}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.ThirdClassHours}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">总课时</div>
           </td>
         </tr>
         <tr>
           <td>培训课程费</td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.FirstCourseFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.SecondCourseFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.ThirdCourseFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">总课程费</div>
           </td>
         </tr>
         <tr>
           <td>培训教材费</td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.FirstBookFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.SecondBookFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.ThirdBookFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">总教材费</div>
           </td>
         </tr>
         <tr>
           <td>培训课件费</td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.FirstClassFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.SecondClassFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.ThirdClassFee}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">总课件费</div>
           </td>
         </tr>
         <tr>
@@ -341,16 +390,16 @@
         <tr>
           <td>折让价格</td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.FirstDiscountMoney}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.SecondDiscountMoney}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.ThirdDiscountMoney}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">总优惠</div>
           </td>
         </tr>
         <tr>
@@ -358,13 +407,13 @@
             <span style="color:red;">费用总计</span>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.FirstMoney}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.SecondMoney}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.ThirdMoney}}</div>
           </td>
           <td>
             <div class="contractInput"></div>
@@ -373,13 +422,13 @@
         <tr>
           <td>支付日期</td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.FirstPayDateStr}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.SecondPayDateStr}}</div>
           </td>
           <td>
-            <div class="contractInput"></div>
+            <div class="contractInput">{{dataList.ThirdPayDateStr}}</div>
           </td>
           <td>
             <div class="contractInput"></div>
@@ -402,7 +451,6 @@
           <div class="commonContent">
             2、您有一次在学习的任何阶段申请停课的权利。当您按要求正式办理相关停课手续之日起，12个月内，如无不可抗力事由，您必须从停课之日起按要求提出复课申请。您如未按要求复课，则视作学员主动放弃继续学习的权力，终止本课程协议。
           </div>
-
         </div>
         <div class="conTractInner">
           <div class="commonContent">3、请您牢记全国官方唯一服务号码：028-6199-3633</div>
@@ -419,10 +467,10 @@
           <div class="commonTitle1">三、课程费用</div>
           <div class="commonContent">1、费用总计：以乙方选择课程之时，即时公布的课程收费标准为准。</div>
           <div>
-            人民币（大写）：<div class="contractInput" style="width:150px;"></div> 圆
+            人民币（大写）：<div class="contractInput" style="width:150px;">{{dataList.CNYCaps}}</div> 圆
           </div>
           <div style="margin-top:20px;">
-            人民币（小写）：<div class="contractInput" style="width:150px;"></div> 元
+            人民币（小写）：<div class="contractInput" style="width:150px;">{{dataList.Money}}</div> 元
           </div>
           <div class="commonContent">
             2、支付方式：<span style="color:red;">扫码支付（微信、支付宝）、POS机刷卡支付（信用卡，银行借记卡）、银行汇款/转账。</span>
@@ -433,7 +481,7 @@
           <div class="commonTitle1">四、双方权利与义务</div>
         </div>
       </div>
-      <div class="comTitle">
+      <div class="comTitle" style="margin-top:40px;">
         <div class="comTiInner">
           <div class="comTLeft">甲鹤日语课程协议</div>
           <div class="comTRight"></div>
@@ -453,26 +501,287 @@
             主动提出更优的班级组成形式的建议，必要时，可适当调整乙方的班级管理 （班级分组、授课形式、授课地点等）。
           </div>
           <div class="commonContent">1.2 甲方义务</div>
-          <div class="commonContent">1.2.1 甲方制定规范有效的培训计划，其中包括：教材和资料的确认；在合理期限内，通过完成教学课时，达成教学进度目标；定时测验，随时掌握班级学习情况；严格对教师和学员进行考核；甲方教师应对学员发布作业以及批改作业；甲方老师应按时协助学员安排好国际认证考试计划等。</div>
+          <div class="commonContent">1.2.1
+            甲方制定规范有效的培训计划，其中包括：教材和资料的确认；在合理期限内，通过完成教学课时，达成教学进度目标；定时测验，随时掌握班级学习情况；严格对教师和学员进行考核；甲方教师应对学员发布作业以及批改作业；甲方老师应按时协助学员安排好国际认证考试计划等。
+          </div>
           <div class="commonContent">1.2.2 甲方依据本协议规定，指派任课教师，在合理的期限内完成教学服务。</div>
           <div class="commonContent">1.2.3 甲方应当及时且有效的解决乙方通过当面咨询或拨打咨询电话等方式提出的在培训过程中遇到的与培训内容相关的问题。</div>
           <div class="commonContent">1.2.4 甲方依据乙方学习的实际情况，在收到乙</div>
         </div>
         <div class="conTractInner ConTract_Line">
           <div class="commonContent">方的正式书面申请之日起，在10个工作日内为乙方开具在读证明或培训证明。</div>
-          <div class="commonContent">1.2.5 当乙方在修完所报课程，但未通过所报课程相对应级别的考试，且在参加国际认证考试之日起12个月内向甲方提出免费复学申请的，甲方应在收到乙方书面复学申请后1-2个月内安排乙方进行日语水平测试及确认复学课程，或者直接合理安排复学课程。</div>
+          <div class="commonContent">1.2.5
+            当乙方在修完所报课程，但未通过所报课程相对应级别的考试，且在参加国际认证考试之日起12个月内向甲方提出免费复学申请的，甲方应在收到乙方书面复学申请后1-2个月内安排乙方进行日语水平测试及确认复学课程，或者直接合理安排复学课程。
+          </div>
           <div class="commonContent">2、乙方权利与义务</div>
           <div class="commonContent">2.1 乙方权利</div>
-          <div class="commonContent">2.1.1 乙方有权向甲方反应其任课教师情况，如出现甲方老师不按时上课、不按教学计划上课等，乙方有权向甲方反映，经甲方核实后决定是否更换教师或纠正教师的不当行为。</div>
-          <div class="commonContent">2.1.2 乙方修完所报课程，未通过所报课程相应级别的考试，有权在参加国际认证考试之日起12个月内向甲方书面提出一次免费复学申请。若乙方超出前述时限提出免费复学申请的，甲方有权拒绝。</div>
+          <div class="commonContent">2.1.1 乙方有权向甲方反应其任课教师情况，如出现甲方老师不按时上课、不按教学计划上课等，乙方有权向甲方反映，经甲方核实后决定是否更换教师或纠正教师的不当行为。
+          </div>
+          <div class="commonContent">2.1.2
+            乙方修完所报课程，未通过所报课程相应级别的考试，有权在参加国际认证考试之日起12个月内向甲方书面提出一次免费复学申请。若乙方超出前述时限提出免费复学申请的，甲方有权拒绝。</div>
           <div class="commonContent">2.2 乙方义务</div>
           <div class="commonContent">2.2.1 为保障乙方学习效果，乙方自愿遵守甲方在本协议内指定的教学培训管理规定。</div>
           <div class="commonContent">
-            2.2.2 为有针对性的给乙方提供更多且有效的升学、留学与就业服务机会，乙方须自愿服从甲方安排并参加相关国际认证考试；且乙方拿到国际认证考试成绩后，自愿将国际认证考试相关证书扫描件提交给甲方存档，并允许荣誉展示，作为学员见证资料。
+            2.2.2
+            为有针对性的给乙方提供更多且有效的升学、留学与就业服务机会，乙方须自愿服从甲方安排并参加相关国际认证考试；且乙方拿到国际认证考试成绩后，自愿将国际认证考试相关证书扫描件提交给甲方存档，并允许荣誉展示，作为学员见证资料。
           </div>
+        </div>
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">2.2.3 为监督教学过程，促使乙方最终达成学习目标，乙方应自愿参加甲方组织的相关测试。</div>
+          <div class="commonContent">2.2.4
+            乙方应自觉遵守甲方制定的教学管理规定，因特殊原因确需请假的，必须遵守以下规定，否则将视为乙方主动放弃本阶段学习，如出现未达成考级目标的情况，乙方不再享受免费复学的权利：</div>
+          <div class="commonContent">A、乙方应在上课前48小时以前，书面向甲方授课教师请假，并书面获准；</div>
+          <div class="commonContent">B、乙方在连续3个月内，请假总时长累计不得超过6小时；</div>
+          <div class="commonContent">C、乙方在请假后，应找授课教师或同学补习（可线上补习）课程，完成该阶段课程的到勤。</div>
+          <div class="commonContent"> 乙方必须保证上课到勤率在90%以上，并亲自确认出勤签到记录，不得无故缺勤、迟到和早退，否则无故缺勤一次以上或迟到、早退三次及以上
+            ，将视为乙方主动放弃本阶段学习，如出现未达成考级目标的情况，乙方不再享有免费复学的权利。</div>
+          <div class="commonContent">2.2.5 上课时，乙方应尊重甲方教师，不得出现接听电话、使用微信等、随意走动、饮食、抽烟、打牌或看与课程无关书籍资料等行为。</div>
+          <div class="commonContent">2.2.6 乙方无权将培训资料用作任何商业用途，否则，对造成甲方的直接或间接损失，乙方应当全额赔偿。</div>
+          <div class="commonContent">2.2.7
+            乙方优异成绩的取得与乙方的主动、努力的学习态度密不可分，乙方不应将学习成绩不佳或学习成绩差归责于甲方的教学；乙方未服从甲方的教学管理要求，导致安全事故的责任，由乙方自己承担。</div>
+          <div class="commonContent">2.2.8 乙方应按照本协议约定，按时足额缴纳学</div>
 
         </div>
       </div>
+      <div class="comTitle" style="margin-top:40px;">
+        <div class="comTiInner">
+          <div class="comTLeft">甲鹤日语课程协议</div>
+          <div class="comTRight"></div>
+        </div>
+      </div>
+      <div class="comflex" style="margin-top:40px;">
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">
+            费，若乙方在开课后全额或部分延迟缴纳学费的，在7个工作日内，甲方有权要求乙方按照10元/天的标准支付违约金；若发生乙方延迟7个工作日以上未缴纳学费的情况下，甲方有权单方面解除本协议。由此导致的协议被解除，甲方无需退还乙方剩余学费且有权要求乙方按照200元/天的标准向甲方支付违约金。
+          </div>
+          <div class="comFirstTitle">五、课程培训内容与服务的管理规定</div>
+          <div class="commonContent">1、语言培训课程内容与考试要求</div>
+          <div class="commonContent">1.1 甲方将按照本协议第三条“培训课程内容”为乙方提供教学服务</div>
+          <div class="commonContent">1.2 乙方通过参加甲方提供的教学服务后，应主动参加相关国际考试。考试内容为：</div>
+          <div class="commonContent">A 日语国际能力测试（JLPT）：初级（N5-N4）、中级（N3-N2）、高级（N1）；</div>
+          <div class="commonContent">B 实用日本语鉴定考试（J.TEST）：初级（E-F级）、中高级（A-D级）；</div>
+          <div class="commonContent">C 日本留学生考试（EJU）：文科（日语）、综合科目、数学。</div>
+          <div class="commonContent">1.3 乙方当前选择考试：</div>
+          <div class="contractInput" style="width:100%;">{{dataList.Exam}}</div>
+          <div class="commonContent">2、高级课程增值课程特别条款</div>
+          <div class="commonContent">2.1 乙方在报名高级课程后，有机会参加以下增值课程：</div>
+          <div class="commonContent">2.1.1 乙方通过甲方面试后，有权申请参加甲方组织的“成长训练营培训”、“周末沙龙”等培训活动。</div>
+          <div class="commonContent">2.1.2 乙方达到所学语言的高级水平，并且通过甲方面试，有权申请参加甲方组织的“精品教师</div>
+        </div>
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">培训”、“精品导游培训”。</div>
+          <div class="commonContent">2.1.3 以上两种培训资格有效期为6个月，即乙方报名增值课程且面试通过之日起6个月之内有效。逾期将视为主动放弃上述学习机会。</div>
+          <div class="commonContent">2.2 该增值课程属于甲方有偿提供给高级课程学员的课程，乙方报名参加该增值课程后，不得因任何原因要求甲方返还增值课程费用。</div>
+          <div class="commonContent">2.3 乙方自愿选择参加甲方提供的增值课程，自甲方发布报名通知后的规定时间内，乙方应向甲方指定的工作人员报名，逾期未报名的视为放弃参加增值课程。</div>
+          <div class="commonContent">2.4
+            该增值课程可能涉及到户外活动，乙方在增值课程所涉户外活动中若发生任何意外事故，除非证明是甲方故意行为导致，否则均由乙方自行承担责任；乙方报名该增值课程后因个人身体原因不适合继续参加的，乙方有义务书面告知甲方实际情况，经甲方同意后方可退出，且甲方不承担与此相关的任何责任。
+          </div>
+          <div class="commonContent">2.5
+            在该增值课程中，乙方应当服从甲方的组织和管理，非因甲方原因造成的乙方人身财产损害，甲方不承担任何责任；由于乙方原因导致甲方或第三方人身财产损害，甲方不承担任何责任，若甲方因乙方原因而对甲方或第三方承担责任的，甲方有权向乙方追偿。
+          </div>
+          <div class="commonContent">2.6 关于增值课程的最终解释权归甲方所有。</div>
+          <div class="commonContent">2.6 关于增值课程的最终解释权归甲方所有。</div>
+          <div class="commonTitle1">六、插班、请假、复课、合并班的教学培训管理</div>
+          <div class="commonContent">1、插班</div>
+          <div class="commonContent">1.1插班是指乙方在甲方开班以后报名学习，插入班级上课。</div>
+        </div>
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">1.2因乙方自身原因跟不上进度，应及时向甲方老师报备，甲方根据乙方实际学习情况安排乙方到适合的班级上课。</div>
+          <div class="commonContent">1.3乙方发现所插入班级，难易程度仍不适合本人，应立即与甲方沟通，甲方须及时再次合理安排，以两次为限。</div>
+          <div class="commonContent">2、请假</div>
+          <div class="commonContent">请假是指乙方因正当原因无法正常上课，可向甲方老师申请请假，正当原因仅限以下情形：</div>
+          <div class="commonContent">2.1 乙方因不可抗力因素如：自然灾害、国家政策调整、战争、政府禁令等造成的双方不能正常上课的；</div>
+          <div class="commonContent">2.2 乙方因身体原因导致无法正常上课的（须开具正规医院相关证明）；</div>
+          <div class="commonContent">2.3 所报课程上课时间与学校课程或者校方安排冲突的（须开具校方证明）；</div>
+          <div class="commonContent">2.4 乙方正常请假后，可要求甲方老师保留学习资料，并及时与老师协商进行补课安排。同时，乙方须按时参加甲方老师安排的补课，并且完成甲方老师布置的补课任务，完成到勤；
+          </div>
+          <div class="commonContent">2.5 乙方未请假或者未按照要求请假的，甲方有权默认乙方已上课，有权拒绝提供请假期间的学习资料及补课要求。同时，请假期间课时按照正常上课进行计费。</div>
+          <div class="commonContent">3、停课、复课</div>
+          <div class="commonContent">3.1
+            因乙方自身原因导致无法上课，乙方有权向甲方提出书面的停课申请，符合条件的，甲方允许乙方停课的，双方应签订停课协议，停课期限最长不得超过12个月，复课前，乙方须提前向甲</div>
+        </div>
+      </div>
+      <div class="comTitle" style="margin-top:40px;">
+        <div class="comTiInner">
+          <div class="comTLeft">甲鹤日语课程协议</div>
+          <div class="comTRight"></div>
+        </div>
+      </div>
+      <div class="comflex" style="margin-top:40px;">
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">方书面申请复课，甲方予以办理复课手续；停课期限届满未复课的，视为乙方主动放弃该课程学习，从停课之日起终止本课程协议，甲方不承担任何退课退费责任。</div>
+          <div class="commonContent">3.2
+            因乙方自身原因导致连续12个课时不按时出勤，乙方须书面向甲方申请停课，否则将视为乙方自动停课，甲方不承担任何退课退费的责任。自动停课日起12个月内，乙方如需复课，须书面向甲方提出复课申请，甲方予以办理复课。
+          </div>
+          <div class="commonContent">3.3
+            乙方停课期间，甲方将以手机短信、微信、QQ等有效方式通知乙方复课，请乙方保持通讯畅通，如若更换联系方式时，乙方应立即书面通知甲方，否则因此导致的所有责任与后果由乙方自行承担。</div>
+          <div class="commonContent">3.4 乙方复课时，甲方根据乙方实际学习进度情况，安排乙方进入合适的班级学习。</div>
+          <div class="commonContent">3.5 乙方办理停课后，如因乙方自身原因在12个月后仍无法进行复课的，责任由乙方自行承担，甲方不承担任何责任。</div>
+          <div class="commonContent">4、合并班</div>
+          <div class="commonContent">甲方有权根据教学进度需要，班级进度，教师离职或转岗、进修等情况进行班级的合并与拆分，属于正常教学工作，甲方将尽力做好班级交接工作，乙方应予以积极的配合。</div>
+          <div class="comFirstTitle">七、退费条款</div>
+          <div class="commonContent">1、因不可抗力因素如：自然灾害、国家政策调整、战争、政府禁令等造成的双方不能履行合同义务的，甲方将根据乙方实际上课情况计算费用，将剩余课程学费退还乙方。</div>
+        </div>
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">2、乙方如若办理停课或自动停课，可在首次自动停课之日起或学员申请停课之日起，12个月内办理复课，但无权申请退课、退费。</div>
+          <div class="commonContent">3、若乙方在课程未结束时就通过课程对应的级别考试，并且取得相应证书，乙方可以选择继续完成后续课程学习，或者自动放弃后续课程学习，乙方无权申请退课、退费。</div>
+          <div class="commonContent">4、若乙方出现转让课时或让其他人顶替上课的行为，一经甲方发现，甲方有权取消乙方学习资格，同时视为乙方自动放弃该课程，乙方无权申请退课、退费。</div>
+          <div class="commonContent">
+            5、因乙方自身原因导致无法上课，且有正当理由（正当理由是指：前述不可抗力因素、出国留学、不在本地学习、长期外地工作实习等，均需要提供相应证明），乙方有权提出终止合同，甲方须给乙方办理退课、退费（详见九条9款）。
+          </div>
+          <div class="commonContent">
+            6、因乙方自身原因导致无法上课，但若非正当理由（正当理由是指：前述不可抗力因素、出国留学、不在本地学习、长期外地工作实习等，均需要提供相应证明），乙方无权申请退课、退费，但可向甲方申请办理停课，甲方根据实际情况提供妥善解决方案。
+          </div>
+          <div class="commonContent">7、若乙方在报名任意一门甲方提供的课程见本协议第三条。</div>
+          <div class="commonContent">7.1 享受了甲方提供的课程学费优惠活动、奖学金活动、学习优惠等，乙方无权申请退课、退费。</div>
+          <div class="commonContent">7.2 办理了甲方提供的境外学习等相关手续，需要家庭有一定的资信证明，如因个人原因不能出</div>
+        </div>
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">具相关证明，无法出境者，乙方无权申请退课、退费。</div>
+          <div class="commonContent">8、若乙方报名甲方课程，在缴纳学费时已享受了学费优惠后，又申请退课、退费的，乙方必须符合以下情况方能作为正常退费要求：</div>
+          <div class="commonContent">8.1 自然灾害等不可抗力的情况；</div>
+          <div class="commonContent">8.2 出国留学的情况（需开具境外大学录取通知书及出行机票）；</div>
+          <div class="commonContent">8.3 不在本地学习的情况（需开具相关证明）；</div>
+          <div class="commonContent">8.4 长期外地工作实习的情况（需开具工作证明）。</div>
+          <div class="commonContent">9、达到正常退费要求者，退费金额核算如下：</div>
+          <div class="commonContent">9.1
+            未参加抽奖等优惠活动者：应退学费=乙方已缴总学费-已上课程学费-（乙方已缴总学费-已上课程学费）×10%。其中“（乙方已缴总学费-已上课程学费）×10%”为违约金；课程中附赠的口语课程、考前冲刺课程、真题讲解等课程不纳入退费课时，乙方无权针对该课程申请退费；班级课时剩余计算方法按照班级学费平均到每小时计算。
+          </div>
+          <div class="commonContent">9.2 参加各项抽奖等优惠活动者，一律不予退费。</div>
+          <div class="commonContent">9.3 因乙方自身原因（如未达到留学或旅游所对应的语言水平，且非上述七.8条不可抗力因素）不能参加境外留学、游学或旅游项目的，不予退还境外服务费。</div>
+          <div class="commonContent">满足正常退费要求的学员，境外留学、游学、旅游费用除去上述条款七.9.3外，余额部分应退还给乙方。</div>
+          <div class="comFirstTitle">八、其他责任</div>
+        </div>
+      </div>
+      <div class="comTitle" style="margin-top:40px;">
+        <div class="comTiInner">
+          <div class="comTLeft">甲鹤日语课程协议</div>
+          <div class="comTRight"></div>
+        </div>
+      </div>
+      <div class="comflex" style="margin-top:40px;justify-content:left;">
+        <div class="conTractInner ConTract_Line">
+          <div class="commonContent">
+            1、乙方对甲方提供的培训服务不满意，要求改进教学方法或者更换培训老师的，甲方应考虑乙方要求的合理性，并根据其合理性提供相应解决方案，但因培训老师的个人差异，乙方应理解解决方案，不能完全满足乙方个人要求。</div>
+          <div class="commonContent">2、乙方严重违反本协议约定的相关管理制度或干扰甲方教学培训管理规定时，甲方可单方面解除本协议，并且不退还任何费用。</div>
+          <div class="commonContent">3、乙方同意甲方出于宣传学校或教学的目的需要，可以将含有乙方肖像、图像的照片及视频作广告发布之用。</div>
+          <div class="comFirstTitle">九、合同争议解决方式</div>
+          <div class="commonContent">1、本合同在履行过程中发生争议的，由双方当事人协商解决；“凡因本合同产生的或与本合同有关的一切争议，均提交仲裁委员会仲裁。”</div>
+          <div class="commonContent">2、本合同自乙方缴纳全额课程学费及签订协议之日起，24个月内有效，到期后本合同甲乙双方各项权益自动终止。</div>
+          <div class="commonContent">3、本合同未尽事宜，由双方约定后签订补充协议等附件，补充协议及合同附件与本合同具有同等法律效力。</div>
+          <div class="commonContent">4、本合同及其附件内，空格部分填写的文字与印刷文字具有同等法律效力。</div>
+          <div class="commonContent">5、本合同正本一式两份，甲乙双方各持一份，具有同等法律效力。</div>
+          <div class="commonContent">6、本合同自乙方缴纳全额课程学费及签订协议之日起正式生效。</div>
+        </div>
+        <div class="conTractInner ConTract_Line" style="margin-left:5px;">
+          <div class="comFirstTitle">乙方已阅读并充分了解和理解甲方制定的培训相关的全部规章管理制度，并承诺严格执行。</div>
+          <div class="comFirstTitle" style="width:100%;text-align:left;margin-bottom:10px;">（乙方在此处需要单独手写一遍）</div>
+          <div class="contractInput" style="width:100%;margin-bottom:30px;"></div>
+          <div class="contractInput" style="width:100%;margin-bottom:30px;"></div>
+          <div class="contractInput" style="width:100%;margin-bottom:20px;"></div>
+          <div class="contractInput" style="width:100%;"></div>
+          <div class="commonContent" style="margin:20px 0 100px 0;">7、本合同协议部分到此为止，以下为空白。</div>
+          <div class="commonContent">甲方签字（盖章）：</div>
+          <div class="commonContent" style="text-align:right;margin-top:150px;">
+            <div class="contractInput" style="width:50px;"></div>年<div class="contractInput" style="width:50px;"></div>月
+            <div class="contractInput" style="width:50px;"></div>日
+          </div>
+          <div class="commonContent" style="margin-top:150px;">乙方签字（盖章）：</div>
+          <div class="commonContent" style="text-align:right;margin-top:150px;">
+            <div class="contractInput" style="width:50px;"></div>年<div class="contractInput" style="width:50px;"></div>月
+            <div class="contractInput" style="width:50px;"></div>日
+          </div>
+        </div>
+      </div>
+      <div class="comTitle" style="margin-top:40px;">
+        <div class="comTiInner">
+          <div class="comTLeft">甲鹤日语课程协议</div>
+          <div class="comTRight"></div>
+        </div>
+      </div>
+      <div style="margin:40px;font-size:16px;" class="contractBuchong">
+        <div class="commonContent" style="text-indent:20px;">
+          本人<div class="contractInput" style="width:100px;"></div>（以下为签名者）为
+          <div class="contractInput" style="width:100px;"></div>学员（以下称“学员”）的监护人，本人为学员购买
+          了甲鹤日语
+        </div>
+        <div class="commonContent">
+          <div class="contractInput" style="width:100px;"></div>课程共
+          <div class="contractInput" style="width:50px;"></div> 课时，并签署了合同编号为
+          <div class="contractInput" style="width:100px;"></div>的《甲鹤日语课程协议》。
+        </div>
+        <div class="commonContent" style="text-indent:20px;margin-top:30px;">
+          本人知晓中国现行关于校外培训机构不得一次性收取超过三个月费用的规定，甲鹤工作人员也已经明确告知公司的收费政策，一次性只能收取三个月的费用。由于本人自身的原因，本人主动要求并坚持一次性支付合同编号为
+          <div class="contractInput" style="width:100px;"></div>的《甲鹤日语课程协议》项下的所有费用。
+        </div>
+        <div class="commonContent" style="text-indent:20px;margin-top:30px;">
+          本人承诺，该一次性付款行为完全是由本人自主决定并要求的。除了付款事宜，本人、学员与甲鹤之间的权利义务按所签署的《甲鹤日语课程协议》履行。
+        </div>
+        <div class="commonContent" style="margin:200px 0;">
+          特此说明。
+        </div>
+        <div style="text-align:right;margin-bottom:200px;">
+          乙方学员签字（正楷）
+        </div>
+        <div style="margin:200px 0;display:flex;justify-content:space-between;">
+          <div>甲方签字（盖章）</div>
+          <div>乙方监护人签字（正楷） </div>
+        </div>
+        <div style=";display:flex;justify-content:space-between;">
+          <div>
+            年<span style="margin-left:50px;">月</span><span style="margin-left:50px;">日</span>
+          </div>
+          <div>
+            年<span style="margin-left:50px;">月</span><span style="margin-left:50px;">日</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
+<script>
+  import {
+    GetEducationContractInfo
+  } from '../api/sale/contract'
+
+  export default {
+    meta: {
+      title: "合同预览"
+    },
+    data() {
+      return {
+        dataList: {},
+        firstTotal: 0, // 培训课时数总计
+        secondTotal: 0, // 培训课程费总计
+        thirdTotal: 0, // 培训教材费总计
+        fourthTotal: 0, // 培训课件费总计
+        fifthTotal: 0, // 折让价格
+        sixthTotal: 0, // 费用总计
+      }
+    },
+    created() {},
+    mounted() {
+      if (this.$route.query.ContractId) {
+        this.getInfoList(this.$route.query.ContractId);
+      }
+    },
+    methods: {
+      //获取详情
+      getInfoList(ContractId) {
+        let msg = {
+          ContractId: ContractId
+        }
+        GetEducationContractInfo(msg).then(res => {
+          if (res.Code == 1) {
+            this.dataList = res.Data;
+          }
+        })
+      }
+    }
+  }
+
+</script>
+<style lang="sass">
+  @import url('~assets/css/table.sass')
+
+</style>

src/pages/sale/contractManage.vue

@@ -286,8 +286,8 @@
          let routeUrl = this.$router.resolve({
            path: "/contractView",
            query: {
-
-          }
+            ContractId:item.Id
+           }
          });
          window.open(routeUrl.href, '_blank');
       },