wxdaya/src/views/protocol.vue

<template>
    <div class="protocol">
        <!-- <header> 
            <svg t="1565680265421" class="icon back" @click="goback" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1100" width="200" height="200"><path d="M672 928c-8 0-16-3.2-22.4-9.6l-384-384c-12.8-12.8-12.8-32 0-44.8l384-384c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L332.8 512l361.6 361.6c12.8 12.8 12.8 32 0 44.8-6.4 6.4-14.4 9.6-22.4 9.6z" p-id="1101"></path></svg>
            领用协议</header> -->

        <div class="container" v-if="proto.payMethod == 26 || proto.payMethod == 22">
            <h1>《课程服务协议》</h1>
            甲方：深圳大雅乐盟网络教育股份有限公司 <br/>
            <div style="display: flex;">乙方：
                <div style="flex: 1 auto;">
                    <div class="iInfo">
                        <span>家长姓名 {{ proto.patriarchName }}</span>
                        <span>电话：{{ proto.patriarchPhone }}</span>
                    </div>
                    <div class="iInfo">
                        <span>学生姓名：{{ proto.stuName }}</span>
                        <span>所在班级：{{ proto.grade }}</span>
                    </div>
                    <div class="iInfo">
                        <span>所在声部：{{ proto.subName }}</span>
                    </div>
                </div>
            </div>  
            为进一步提升器乐教学质量和服务品质，保证学员学习进度，明确培训各方的权责，经甲、乙双方协商一致，特订立本协议，以便共同遵守。

            <h2>一、课程信息</h2>
            
            <div class="iInfo">
                <span>授课内容：乐团课</span>
                <span>缴费金额：￥{{ proto.classAmount }}</span>
            </div>

            <h2>二、行为规范</h2>
            乙方在选择甲方各类提高课程并签署本协议时视为乙方已经仔细阅读并同意遵守如下事项：
                <h3>1．报名</h3>
            1.1无论是否源自指导老师或教务老师的建议，乙方选择参加甲方的课程，包括对授课形式、授课内容的选择，均为乙方自主意愿的表达及独立自主的选择。<br/>
            1.2乙方应在所选课程开始前完成相应课程缴费，并完成报名手续。
            <h3>2．上课</h3>
            2.1乙方应按时到达甲方指定上课地点，作好课前准备；如发生迟到、或因自身原因早退等情况的，为避免影响老师后续课程的正常进行，授课老师除完成原定时间安排的授课外，将不再提供额外延长课时。<br/>
            2.2乙方（含学员，下同）不得携带任何食品进入教室，所有进食应在课前完成；进入教室后，不得大声喧哗、追逐嬉戏，应当听从授课老师的安排；乙方应爱护公共财产和教学设施，严禁在桌椅上刻、划、涂、写等不文明行为；乙方未经授课老师同意，不得擅自使用教室内的乐器、音响、电视、空调等器材、设施，如造成此类器材、设施损坏的，乙方应照价赔偿。<br/>
            2.3未经授课老师同意，乙方家长不得进入课堂，以免影响老师和学员上课；为保证训练质量及进度，学员应保证按照指导老师或教务老师所提出的要求在家练习，遇到专业问题应及时向指导老师请教，非专业问题可随时向教务老师反映。<br/>
            2.4乙方家长应教育及监督学员务必注意个人安全，妥善保管个人财物，对于非甲方原因造成的人身安全事故或财物损失，由责任人自行承担。
            <h3>3请假、休会及扣费</h3>
            3.1基于教学进度和质量保证，本课程对于课程的延续性有严格要求，因此乙方应尽量避免请假。<br/>
            3.2一对一课程有特殊情况需要请假的，应提前24小时以上以书面形式告知对应的授课老师，以便及时调整时间安排；一对多课程，不接受任何个人单独请假，如果集体请假，应提前24小时以上以书面形式告知对应的授课老师，未按本协议约定请假则当次课程视同已经教授，系统将自动结算课时并扣除相应费用。乙方请假后，应尽快预约补课时间完成补课。<br/>
            3.3一对一课程以及一对二课程，乙方如遇特殊情况时，可向甲方或授课老师】申请办理临时休课。乙方可在6个月内申请复学，超过6个月未申请复课的，甲方有权按自动退会处理。一对二课程申请临时休课的，还需征得同组学员同意后方可申请休课。<br/>
            3.4每期课程相对应的有效期，乙方应在有效期内完成课程，10次课一期的，自交费之日起4个月内有效；20次课一期的，自交费之日起8个月内有效；40次课一期的，自交费之日起16个月内有效。如果由于指导老师请假等原因造成课程不能如期完成的，课程有效期将顺延；如课程超出有效期限，乙方所缴纳的课程费用将自动扣除逾期未完成的课时后自动清零。<br/>

            <h2>三、退费</h2>
            1、一对一课程开课后，乙方要求退费的，乙方应在课程有效期内提出申请，甲方扣除报名费及未授课部分对应学费的20％后，将余款（不计息，下同）退还给乙方；如果乙方报名时享受打折优惠的，甲方先按照原价计算当期已上课时学费，再扣除报名费及未授课部分学费的20%后，将余款退还给乙方。<br/>
            2、一对二课程开课后，乙方要求退费的，乙方应在课程有效期内提出申请，甲方扣除报名费及未授课部分的学费30％后，将余款退还给乙方；如果乙方报名时享受了打折优惠的，甲方先按照原价计算当期已上课时学费，再扣除报名费及未授课部分学费的30%后，将余款退还给乙方。<br/>
            3、除一对一课程以及一对二课程之外的其他课程，课程开课后，甲方不接受任何原因的退款申请。<br/>
            4、甲方所有收费，均向乙方开具加盖公司印章的收款凭据，乙方务必妥善保管，乙方按照本协议约定退费时，应向甲方出具该收费凭据原件方可办理。<br/>

            <h2>四、违约责任</h2>
            1、当事人一方不履行合同义务或者履行合同义务不符合约定的，均构成违约，守约方有权以书面通知的方式要求违约方纠正其违约行为并采取及时、有效的补救措施消除违约后果，并赔偿守约方因违约方之违约行为而遭致的损失。若违约方在收到守约方的上述通知后5日内未纠正其违约行为的，守约方有权在做出书面通知的情况下，单方解除本协议，违约方应赔偿守约方因此遭致的全部损失。<br/>
            2、乙方应始终维护甲方的知识产权以及品牌形象，本协议期间以及本协议因任何原因失效、被撤销、解除或终止后，均不得直接或间接通过任何公众媒体（包括但不限于传统大众媒体，以及微信、微博、博客、直播平台等社交平台）发表损害甲方（包括但不限于其产品、服务及甲方授课老师）声誉的言论或实施任何类似行为，否则乙方应赔偿甲方因此遭受的全部损失。<br/>

            <h2>五、保密条款</h2>
            1、双方对本协议的条款、本协议的签订及履行情况以及通过签订和履行本协议而获知的对方及对方关联公司的任何信息均负有保密义务。任何一方不得以任何形式透露给第三方（有关法律法规要求和甲乙双方的法律、会计顾问、授权雇员除外），也不得擅自使用。<br/>
            2、本保密义务期限不受本协议期限的限制。本协议失效、被撤销、解除或终止等任何情况下，双方均应遵守本保密义务。<br/>

            <h2>六、不可抗力</h2>
            1、一方遇到不可抗力事件（指甲乙双方无法控制、无法预见或即使预见也无法避免的事件，该事件妨碍、影响或延误任何一方履行本协议的全部或部分义务，该事件包括但不限于自然灾害（如水灾、地震等）、火灾、政府行为、法律或政策变化（含学校合作变化）、战争或其他任何类似事件）时，受影响方应当立即书面通知对方，并告知该不可抗力事件对本协议可能产生的影响，并在该不可抗力事件发生后5日内向对方提供该事件的详细信息及由有关机构出具的解释受影响方因此无法履行本协议项下全部或部分义务的相关证明。<br/>
            2、由于上述不可抗力事件致使受影响方无法履行或无法按时履行本协议项下全部或部分义务的，双方于彼此间均不承担违约责任，但双方应在相互信任的基础上协商解决，尽力减少不可抗力事件对本协议的影响，并采取合理方式进行调整（包括但不限于另行签订补充协议等），尽量避免损失的扩大。<br/>
            3、不可抗力事件消失或结束后，除双方另行协商一致外，受到不可抗力影响的一方应当立即采取措施继续履行本协议，如不可抗力事件持续30日以上的，则任何一方有权以书面通知对方的方式单方解除本协议。<br/>

            <h2>七、适用法律及争议解决方式</h2>
            1、本协议的订立、效力、履行、解释及争议解决均适用中华人民共和国法律。<br/>
            2、因履行本协议发生的一切争议，甲乙双方应友好协商解决；如双方在发生争议后30日内无法通过协商解决时，任何一方有权向甲方所在地有管辖权的人民法院提起诉讼解决。<br/>

            <h2>八、其他</h2>
            1、乙方同意，甲方有权在乙方学习和活动期间对其拍摄照片、视频，甲方对所拍摄的照片、视频有永久免费使用权。<br/>
            2、未经甲方事先书面同意，乙方不得将本课程转让给乙方以外的任何第三方。<br/>
            3、双方确认并同意，本协议的电子版本与纸质版本具有同等法律效力。双方发生争议时，电子合同打印件可作为证据提交。双方通过网络以在线方式签订本协议的 ，则以乙方点击“确认”或“同意”等相关按钮或以电子签名的方式作为对合同内容的同意、确认以及本协议的签署；如双方签订纸质版本协议的，则本协议壹式贰份，甲方盖公章或合同专用章并且乙方签字作为有效签署方式，并且双方各执壹份，每份具有同等法律效力。<br/>
            4、本协议自双方按照本协议约定方式签署之日起生效，有效期至双方履行完本协议约定的全部义务时止。<br/>
            5、本协议未尽事宜或对本协议的任何修改、补充，有双方另行协商后以签订补充协议的方式解决，补充协议与本协议具有同等法律效力；双方没有约定也没有协商一致的，遵照相关法律法规规定执行。<br/>
            双方因履行本协议而相互发出或者提供的所有通知、文件、资料，均以本协议中所列明的电话、APP推送消息送达，乙方如果变更电话号码的，应当自变更后1日内通知甲方且获得甲方确认，甲方通过电话、APP方式无法联系乙方或者甲方认为必要时，甲方也可以通过特快专递至乙方住址的方式向乙方发出上述任何通知、文件、资料等，并在甲方寄出特快专递后第5日视为送达成功。<br/>

            <div class="signature">
                <div class="sign">甲方签章 <img class="cachet" src="../assets/cachet.png" alt=""> 
                    <span>{{nowDate}}</span>
                </div>
                <div class="sign">乙方签字：{{ proto.stuName }}
                    <span> {{ nowDate }} </span>
                </div>
            </div>
        </div>

        <div v-if="proto.payMethod == 26 || proto.payMethod == 22">
            <br />
            <br />
            <hr />
        </div>

        <div class="container" v-if="proto.payMethod == 26 ||proto.payMethod == 25">
            <h1>《乐器借用协议》</h1>
            甲方：深圳大雅乐盟网络教育股份有限公司 <br/>
            <div style="display: flex;">乙方：
                <div style="flex: 1 auto;">
                    <div class="iInfo">
                        <span>家长姓名 {{ proto.patriarchName }}</span>
                        <span>电话：{{ proto.patriarchPhone }}</span>
                    </div>
                    <div class="iInfo">
                        <span>学生姓名：{{ proto.stuName }}</span>
                        <span>所在班级：{{ proto.grade }}</span>
                    </div>
                    <div class="iInfo">
                        <span>所在声部：{{ proto.subName }}</span>
                    </div>
                </div>
            </div>  	                   
            
            为了促进学校乐团健康、持续发展，让更多的学生在校园拥有良好的器乐学习机会，甲方基于公益普惠的原则，决定提供价值{{ proto.marketPrice }}元的KEY品牌全新乐器供乙方在学校乐团期间免费使用。现根据《中华人民共和国合同法》等法律法规规定，为明确甲乙双方权利义务，经协商一致，就乙方借用乐器事宜达成如下协议：
            <h2>一、甲方权利与义务：</h2>
            1、乙方所借用的乐器为甲方资产，乐器所有权归属甲方所有，甲方有权在必要时向乙方收回借用乐器并退还押金。<br/>
            2、甲方所提供乐器为全新的KEY品牌乐器。在乙方签订本协议、交纳乐器使用押金后，甲方即将乐器交付给乙方供其在学校乐团期间免费使用。<br/>
            3、乙方归还乐器时，双方当面当场验收，经甲方维修技师检验确认乐器无人为损坏、可正常使用后，甲方在七个工作日内全额不计息退还乙方已交纳的押金。<br/>
            4、如乙方已购买甲方乐器保养服务，甲方需在乙方借用期间协助乙方处理乐器维修和保养问题。
            <h2>二、乙方权利与义务：</h2>
            1、乙方在签订本协议、交纳乐器使用押金￥{{ proto.payMethod == 25 ? 0 : (proto.amountType == 1 ? 800 : 1500)}}元（大写人民币{{ proto.payMethod == 25 ? '零' : '捌佰'}}元整）后，享有所借用乐器在学校乐团期间的免费使用权。乙方应当爱惜乐器并妥善保管，不得将该乐器转租、借用、出售、典当、质押或抵押，也不得将乐器交于非专业人士使用。乐器借用政策，每位团员仅可享受一次，退团后再次加入乐团的，将无法享受乐器借用政策。<br/>
            2、乐器日常维护由乙方自行完成，每次练习完毕后需按老师要求对乐器进行擦拭并装箱保管。如因人为原因（包括但不限于磕、碰、摔等）造成乐器损坏的，乙方需自行承担维修费用；如因非甲方原因导致乐器无法正常使用（正常使用磨损除外）或乐器毁损、灭失、遗失的，乙方须按本协议中明示的乐器团购价格进行赔付。<br/>
            3、当乙方决定不再继续乐团学习时，应在退团之日起1日内将其借用的乐器归还甲方，双方当面当场验收，经甲方维修技师检验确认乐器无人为损坏、可正常使用后，乙方可按照本协议约定获得已交纳的押金；经甲方维修技师检验，乐器存在损坏的，乙方应承担相应的维修费用，如乐器已经无法正常使用的，乙方须按本协议中明示的乐器团购价格进行赔付，甲方有权从应退还乙方的押金中先行扣除维修费用、赔付费用，如甲方扣除押金后仍然不足以弥补维修费用、赔付费用的，甲方有权继续要求乙方支付剩余费用。<br/>
            4、乙方终止乐团学习2个月内，仍未将乐器归还给甲方的，则视为乙方违约，乙方所交押金甲方有权不予退还，同时乙方须按乐器团购价格进行赔付。
            <h2>三、乐器标准：</h2> 
            <div class="iInfo">
                <span>名称：{{ proto.voicyPart }}</span>
                <span>品牌：key</span>  
            </div>
            <div class="iInfo">
                <span>型号：{{ proto.name }}</span>
                <span>团购价格：￥{{ proto.referencePrice }}</span>
            </div>

            <h2>四、违约责任</h2>  
            1、当事人一方不履行合同义务或者履行合同义务不符合约定的，均构成违约，守约方有权以书面通知的方式要求违约方纠正其违约行为并采取及时、有效的补救措施消除违约后果，并赔偿守约方因违约方之违约行为而遭致的损失。若违约方在收到守约方的上述通知后5日内未纠正其违约行为的，守约方有权在做出书面通知的情况下，单方解除本协议，违约方应赔偿守约方因此遭致的全部损失。<br/>
            2、乙方应始终维护甲方的知识产权以及品牌形象，本协议期间以及本协议因任何原因失效、被撤销、解除或终止后，均不得直接或间接通过任何公众媒体（包括但不限于传统大众媒体，以及微信、微博、博客、直播平台等社交平台）发表损害甲方（包括但不限于其产品、服务或甲方授课老师）声誉的言论或实施任何类似行为，否则乙方应赔偿甲方因此遭受的全部损失。
            <h2>五、保密条款</h2>
            1、双方对本协议的条款、本协议的签订及履行情况以及通过签订和履行本协议而获知的对方及对方关联公司的任何信息均负有保密义务。任何一方不得以任何形式透露给第三方（有关法律法规要求和甲乙双方的法律、会计顾问、授权雇员除外），也不得擅自使用。
            2、本保密义务期限不受本协议期限的限制。本协议失效、被撤销、解除或终止等任何情况下，双方均应遵守本保密义务。
            <h2>六、不可抗力</h2>
            1、一方遇到不可抗力事件（指甲乙双方无法控制、无法预见或即使预见也无法避免的事件，该事件妨碍、影响或延误任何一方履行本协议的全部或部分义务，该事件包括但不限于自然灾害（如水灾、地震等）、火灾、政府行为、法律或政策变化（含学校合作变化）、战争或其他任何类似事件）时，受影响方应当立即书面通知对方，并告知该不可抗力事件对本协议可能产生的影响，并在该不可抗力事件发生后5日内向对方提供该事件的详细信息及由有关机构出具的解释受影响方因此无法履行本协议项下全部或部分义务的相关证明。<br/>
            2、由于上述不可抗力事件致使受影响方无法履行或无法按时履行本协议项下全部或部分义务的，双方于彼此间均不承担违约责任，但双方应在相互信任的基础上协商解决，尽力减少不可抗力事件对本协议的影响，并采取合理方式进行调整（包括但不限于另行签订补充协议等），尽量避免损失的扩大。<br/>
            3、不可抗力事件消失或结束后，除双方另行协商一致外，受到不可抗力影响的一方应当立即采取措施继续履行本协议，如不可抗力事件持续30日以上的，则任何一方有权以书面通知对方的方式单方解除本协议。
            <h2>七、适用法律及争议解决方式</h2>
            1、本协议的订立、效力、履行、解释及争议解决均适用中华人民共和国法律。<br/>
            2、因履行本协议发生的一切争议，甲乙双方应友好协商解决；如双方在发生争议后30日内无法通过协商解决时，任何一方有权向甲方所在地有管辖权的人民法院提起诉讼解决。
            <h2>八、其他</h2>
            1、本协议自双方按照本协议约定方式签署之日起生效，有效期至双方履行完本协议约定的全部义务时止。<br/>
            2、双方确认并同意，本协议的电子版本与纸质版本具有同等法律效力。双方发生争议时，电子合同打印件可作为证据提交。双方通过网络以在线方式签订本协议的 ，则以乙方点击“确认”或“同意”等相关按钮或以电子签名的方式作为对合同内容的同意、确认以及本协议的签署；如双方签订纸质版本协议的，则本协议壹式贰份，甲方盖公章或合同专用章并且乙方签字作为有效签署方式，并且双方各执壹份，每份具有同等法律效力。<br/>
            3、本协议未尽事宜或对本协议的任何修改、补充，由双方另行协商后以签订补充协议的方式解决，补充协议与本协议具有同等法律效力；双方没有约定也没有协商一致的，遵照相关法律法规规定执行。<br/>
            4、双方因履行本协议而相互发出或者提供的所有通知、文件、资料，均以本协议中所列明的电话、APP推送消息送达，乙方如果变更电话号码的，应当自变更后1日内通知甲方且获得甲方确认，甲方通过电话、APP方式无法联系乙方或者甲方认为必要时，甲方也可以通过特快专递至乙方住址的方式向乙方发出上述任何通知、文件、资料等，并在甲方寄出特快专递后第5日视为送达成功。


            <div class="signature">
                <div class="sign">甲方签章 <img class="cachet" src="../assets/cachet.png" alt=""> 
                    <span>{{nowDate}}</span>
                </div>
                <div class="sign">乙方签字：{{ proto.stuName }}
                    <span> {{ nowDate }} </span>
                </div>
            </div>

            
        </div>
        <div @click="goback">
            <div class="btnback">我同意</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'protocol',
    props: ['proto'],
    data() {
        return {
            params: this.proto,
            dataList: {},
            nowDate: ''
        }
    },
    mounted() {
        let tempDate = new Date()
        this.nowDate = tempDate.getFullYear() + '年' + (tempDate.getMonth() + 1) + '月' + tempDate.getDate() + '日'

    },
    methods: {
        goback() {
            this.$emit('popupclose', false)
        },
        classForm(number) {
            let resultStr
            switch(number) {
                case 1001:
                    resultStr = '1V1'
                break;
                case 2002:
                    resultStr = '1V2'
                break;
                case 3003:
                    resultStr = '1V3'
                break;
                case 4004:
                    resultStr = '1V4'
                break;
                case 5005:
                    resultStr = '1V5'
                break;
                case 6020:
                    resultStr = '小组课'
                break;
                case 21099:
                    resultStr = '大课'
                break;
                case 999999:
                    resultStr = '团体课'
                break;
            }
            return resultStr
        }
    }
}
</script>

<style lang="less" scoped>
    .protocol {
        position: relative;
    }
    header {
        height: .40rem;
        line-height: .40rem;
        color: #000;
        font-size: .17rem;
        background: #fff;
        box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
        text-align: center;

        .back {
            width: .2rem;
            height: .2rem;
            position: absolute;
            left: .12rem;
            top: .1rem;
        }
    }
    .container {
        padding: .22rem .2rem .3rem;
        font-size: .14rem;
        h1 {
            font-size: .16rem;
            text-align: center;
        }

        h2 {
            font-size: .16rem;
            font-weight: bold;
            padding-top: .15rem;
        }
        h3 {
            font-size: .14rem;
            font-weight: bold;
        }


        .signature {
            display: flex;
            padding-top: .5rem;
            .sign {
                flex: 1;
                position: relative;
            }
            span {
                display: block;
                padding-left: .2rem;
            }

            .cachet {
                position: absolute;
                top: -.6rem;
                left: 0;
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }

    .iInfo {
        display: flex;
        span {
            flex: 1;
        }
    }

    .btnback {
        display: inline-block;
        font-size: 0.18rem;
        color: #fff;
        background: #F1111B;
        border-radius: 0.04rem;
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
        padding: 0.08rem 0;
        width: 90%;
        margin: 0.3rem 5% ;
        text-align: center;
    }
</style>