首页免费注册开发

components/registerDialog.vue

@@ -3,12 +3,12 @@
     :close-on-click-modal="false"
     :visible.sync="telDl"
     @close="delDlClose"
-    class="application-scheme-dialog"
+    class="register-free-dialog"
     center>
     <i></i>
     <h4>为帮助您更好的使用产品，请先验证手机信息</h4>
-    <p v-if="systemType==='ks'">今日已有<span>34789</span>人  体验了考试系统</p>
-    <p v-if="systemType==='px'">今日已有<span>34789</span>人  体验了培训系统</p>
+    <p v-if="systemType==='ks'">今日已有<span>{{kaoshiCnt}}</span>人  体验了考试系统</p>
+    <p v-if="systemType==='px'">今日已有<span>{{peixunCnt}}</span>人  体验了培训系统</p>
     <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
       <el-form-item  prop="tel">
         <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
@@ -62,6 +62,8 @@
             { trigger: 'blur', required: true, message: '请输入验证码' },
           ],
         },
+        kaoshiCnt:0,// 考试人数
+        peixunCnt:0,// 培训人数
       };
     },
     computed: {
@@ -276,6 +278,13 @@
 
       },
     },
+    created() {
+      // 页面初始化
+      this.$axios.$post('/user/tiyan/info').then(res=>{
+        this.kaoshiCnt = res.data.kaoshiCnt;
+        this.peixunCnt = res.data.kaoshiCnt;
+      });
+    },
   };
 </script>
 

pages/index.vue

@@ -26,7 +26,7 @@
       <div class="client-container">
         <ul>
           <li><a @click="goExamPage"><i></i><div><span>在线考试系统</span><p>让考试变得更轻松</p></div></a></li>
-          <li><a @click="goPeixunPage"><i></i><div><span>在线培训系统</span><p>为企业解决培训痛点</p></div></a></li>
+          <li><a @click="onlineFun"><i></i><div><span>在线培训系统</span><p>为企业解决培训痛点</p></div></a></li>
           <li><a @click="goKechengPage"><i></i><div><span>课程定制开发</span><p>打造专业定制化服务</p></div></a></li>
           <li><a @click="goKechengZyPage"><i></i><div><span>通用课程资源</span><p>企业构建自主课程体系</p></div></a></li>
         </ul>
@@ -66,7 +66,7 @@
               <p class="p-before-circle">人员管理：支持手动、批量导入人员及部门多层级管理功能，解决企业人员多且分散的问题</p>
               <p class="p-before-circle">智能组卷：六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难易程度抽题</p>
               <p class="p-before-circle">节约成本：支持客观题自动判分，主观题后台人工阅卷。有效减少人力成本，提升时间效率，降低费用成本</p>
-              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="applyFun('kaoshi')">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
+              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial('ks')">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
           </div>
         </div>
         <div class="products-services-box">
@@ -80,7 +80,7 @@
               <p class="p-before-circle">多平台学习：支持电脑端、移动端随时随地在线培训学习、考试，从而不再受时间地点的约束</p>
               <p class="p-before-circle">标准化学习：支持课程、学时、学分、考试、练习、证书等，让企业培训标准化统一</p>
               <p class="p-before-circle">大数据分析：深层分析学情，帮助企业实现人才发掘、测评、培养、考核、任用一体化</p>
-              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="applyFun('peixun')">免费试用</div><span class="client-default-Btn" @click="goPeixunPage">在线咨询</span></div>
+              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial('px')">免费试用</div><span class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
             </div>
         </div>
         <div class="products-services-box products-contrary-box">
@@ -92,7 +92,7 @@
             <div class="products-services-content">
               <h5>数字内容定制开发服务</h5>
               <p>企业需要定制适合自己的个性化课程，将隐性、零散的企业知识显性化和系统化，使企业多年积累的经验得以有效沉淀和传承。久创锐康，凭借创新的技术、高效的服务响应和强大的战略执行，为客户打造专业优质的课程定制服务</p>
-              <div class="client-btn-box"><div class="client-default-Btn" @click="applyFun('kaoshi')">申请方案</div><span class="client-default-Btn" @click="goKechengPage">在线咨询</span></div>
+              <div class="client-btn-box"><div class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
             </div>
         </div>
         <div class="products-services-box">
@@ -104,7 +104,7 @@
           <div class="products-services-content">
             <h5>企业通用课程资源方案</h5>
             <p>基于岗位胜任力模型，久创锐康提供职业素养、领导能力、人力资源、市场营销、行政管理、财务管理、客服服务、产品运营、生产采购，9大模块通用岗位培训方案，满足企业对培训课程资源的应用需求</p>
-            <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="applyFun('kaoshi')">申请方案</div><span class="client-default-Btn" @click="goPeixunPage">在线咨询</span></div>
+            <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
           </div>
         </div>
       </div>
@@ -182,42 +182,45 @@
 
     </div>
 
+    <!-- 申请方案弹窗-->
     <el-dialog
       :close-on-click-modal="false"
-      :visible.sync="telDl"
-      @close="delDlClose"
+      :visible.sync="sqfaDl"
+      @close="sqfaDlClose"
       class="application-scheme-dialog"
       center>
       <i></i>
-      <h4>为帮助您更好的使用产品，请先验证手机信息</h4>
-      <p v-if="systemType==='kaoshi'">今日已有<span>34789</span>人  体验了考试系统</p>
-      <p v-if="systemType==='peixun'">今日已有<span>34789</span>人  体验了培训系统</p>
-      <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
+      <p>免费获得课程开发解决方案</p>
+      <el-form :model="sqfaDialogDate" status-icon :rules="sqfaTelRules" ref="ruleTelForm" class="application-scheme-form">
         <el-form-item  prop="tel">
-          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
+          <el-input v-model="sqfaDialogDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
         </el-form-item>
         <div id="your-dom-id" class="nc-container"></div>
         <el-form-item prop="verification">
           <div class="verification">
-            <el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
-            <el-button  @click="checkVerification" :disabled="btnTextDisabled" type="primary" class="jcrk-primary-btn">{{btnText}}</el-button>
+            <el-input v-model="sqfaDialogDate.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
+            <el-button  @click="checkVerification" :disabled="sqfaBtnDisabled" class="dialog-code-btn">{{sqfaBtnText}}</el-button>
           </div>
         </el-form-item>
-        <el-form-item  prop="company">
-          <el-input v-model="telChangeDate.company" placeholder="请输入公司名称" class="dialog-input-tel"></el-input>
-        </el-form-item>
       </el-form>
-      <div class="application-scheme-btn" @click="dialogSave">进入使用</div>
+      <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
+      <span>免费热线：400-052-2130</span><a href="http://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011" target="_blank">在线客服</a>
     </el-dialog>
 
+    <!-- 免费试用弹窗-->
+    <reg-dialog :dialogVisible="regDialogFlag"  :systemType="systemCode" @changeShow="showRegDialogUpdate"></reg-dialog>
   </div>
 </template>
 
 <script>
+  import regDialog from '~/components/registerDialog';
   import { mapGetters } from 'vuex';
   export default {
     name:       'index',
     layout:     'templateA',
+    components: {
+      regDialog,
+    },
     watchQuery: true,
     async fetch({ $axios, store, query }) {
       try {
@@ -249,6 +252,7 @@
     },
     data() {
       return {
+        systemCode:'ks',
         SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
         topCarousels2:  [],
         // 产品和服务
@@ -295,14 +299,16 @@
         customerImg20:  require(`~/static/images/client/index/index-customer-img20.png`),
         activeIndex:    '首页',
         activeName:     'first',// tab页签
-        btnTextDisabled: false,
-        telDl: false,
-        btnText:         '获取验证码',
-        countdown:       60, // 60秒倒计时
-        sliderData:      {},
-        appKey:          'FFFF0N00000000007EC0',
-        telChangeDate:   {},
-        telRules:        {
+        regDialogFlag:false,
+        sqfaDl:false,// 申请方案弹窗
+        sqfaDialogDate:   {},
+
+        sqfaBtnDisabled: false,
+        sqfaBtnText:         '获取验证码',
+        sqfaCountdown:       60, // 60秒倒计时
+        sqfaSliderData:      {},
+        sqfaAppKey:          'FFFF0N00000000007EC0',
+        sqfaTelRules:        {
           tel:          [
             { trigger: 'blur', required: true, message: '请输入手机号' },
           ],
@@ -310,9 +316,6 @@
             { trigger: 'blur', required: true, message: '请输入验证码' },
           ],
         },
-        systemType:'kaoshi',
-
-
       };
 
 
@@ -357,69 +360,37 @@
       }
     },
     methods:    {
-      // 移动端跳转详情页
-      goDetailsPage(data){
-        this.$router.push({ name: data});
-      },
-      // 判断是否为移动端
-      getSystemWidth(){
-        var browserWidth=document.documentElement.clientWidth;
-        if(browserWidth <= 768){
-          this.SystemWidthFlag = true;
+      // 弹窗关闭
+      showRegDialogUpdate(data){
+        this.regDialogFlag  = !data
+        if(data === 'false'){
+          this.regDialogFlag = false
         }else{
-          this.SystemWidthFlag = false;
+          this.regDialogFlag = true
         }
-
       },
-      clickBanner(data){
-      /*  console.log(data);
-
-*/      if(data.url){
-          window.open(data.url)
-        }
-        // this.$router.push({ name: 'indexEducation' });
-      },
-
       // 免费试用
-      FreeTrial(type){
-        var registerType = type;
-        this.getSystemWidth();
-        if(this.SystemWidthFlag){
-          if(registerType===1) {
-            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
-          }else {
-            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
-          }
+      FreeTrial(data){
+        this.regDialogFlag = true;
+        if(data === 'ks'){
+          this.systemCode = 'ks'
         }else{
-          if(registerType===1){
-            window.open('https://cdnks.mtavip.com/a/register?flug=1')
-          }else{
-            window.open('https://cdnks.mtavip.com/a/register?flug=2')
-          }
-
+          this.systemCode = 'px'
         }
       },
-      // 申请方案
-      applyFun(type) {
-        this.systemType = type;
-        this.sliderFun();
-        this.telDl = true;
-
-      },
 
       dialogSave(){
         this.$refs.ruleTelForm.validate((valid) => {
           if (valid) {
             // 请求后台
             const options = {
-              tel:  this.telChangeDate.tel,
-              code: this.telChangeDate.verification,
-              company:  this.telChangeDate.company,
+              phone:  this.sqfaDialogDate.tel,
+              code: this.sqfaDialogDate.verification,
             };
 
-            this.$axios.$post('/user/tiyan/add',options).then(res=>{
+            this.$axios.$post('/develop/add',options).then(res=>{
               if (res.code === 0 && res.data) {
-                this.telDl = false;
+                this.sqfaDl = false;
                 this.$message.success('申请成功');
               } else {
                 this.$message.error('申请失败');
@@ -431,12 +402,10 @@
       },
 
 
-      delDlClose(){
-        this.telDl  =false
+      sqfaDlClose(){
+        this.sqfaDl  =false
         this.$refs.ruleTelForm.resetFields();
         __nc.reset();
-
-
       },
 
       /**
@@ -474,13 +443,13 @@
       },
       // 滑块
       sliderFun() {
-        const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
+        const nc_token = [this.sqfaAppKey, (new Date()).getTime(), Math.random()].join(':');
         console.log(nc_token);
         const NC_Opt = {
           //声明滑动验证需要渲染的目标元素ID。
           renderTo:    '#your-dom-id',
           //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
-          appkey:      this.appKey,
+          appkey:      this.sqfaAppKey,
           //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
           scene:       'nc_message',
           //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
@@ -514,11 +483,11 @@
           },
           //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
           callback:    (data) => {
-            this.sliderData = Object.assign({}, data, {
-              appkey: NC_Opt.appkey,
+            this.sqfaSliderData = Object.assign({}, data, {
+              sqfaAppKey: NC_Opt.appkey,
               scene:  NC_Opt.scene,
             });
-            console.log( this.sliderData);
+            console.log( this.sqfaSliderData);
           },
         };
         let date11 = () => {
@@ -551,14 +520,14 @@
 
       // 倒计时60秒
       setTime() {
-        if (this.countdown === 0) {
-          this.btnTextDisabled = false;
-          this.btnText = '免费获取验证码';
-          this.countdown = 60;
+        if (this.sqfaCountdown === 0) {
+          this.sqfaBtnDisabled = false;
+          this.sqfaBtnText = '免费获取验证码';
+          this.sqfaCountdown = 60;
         } else {
-          this.btnTextDisabled = true;
-          this.btnText = '重新发送(' + this.countdown + 's)';
-          this.countdown--;
+          this.sqfaBtnDisabled = true;
+          this.sqfaBtnText = '重新发送(' + this.sqfaCountdown + 's)';
+          this.sqfaCountdown--;
           setTimeout(() => {
             this.setTime();
           }, 1000);
@@ -566,25 +535,25 @@
       },
       // 验证码
       checkVerification() {
-        if (this.telChangeDate.tel === undefined) {
+        if (this.sqfaDialogDate.tel === undefined) {
           this.$message.error('请输入手机号');
           return;
         }
-        if (this.sliderData.appkey === undefined) {
+        if (this.sqfaSliderData.sqfaAppKey === undefined) {
           this.$message.error('请先进行滑块校验');
           return;
         }
-        this.$axios.$post(`/develop/exists`,{  phone: this.telChangeDate.tel}).then(res=>{
+        this.$axios.$post(`/develop/exists`,{  phone: this.sqfaDialogDate.tel}).then(res=>{
 
           if (res.code === 0 && res.data) {
 
             let req = {
-              'appkey':    this.sliderData.appkey,
-              'phone':     this.telChangeDate.tel,
-              'scene':     this.sliderData.scene,
-              'sessionid': this.sliderData.csessionid,
-              'sig':       this.sliderData.sig,
-              'token':     this.sliderData.token,
+              'appkey':    this.sqfaSliderData.sqfaAppKey,
+              'phone':     this.sqfaDialogDate.tel,
+              'scene':     this.sqfaSliderData.scene,
+              'sessionid': this.sqfaSliderData.csessionid,
+              'sig':       this.sqfaSliderData.sig,
+              'token':     this.sqfaSliderData.token,
               'type':      0,
             }
             this.$axios.$post('/sendCode',req).then(res=>{
@@ -593,6 +562,7 @@
               }
             })
           } else {
+            console.log('手机号已存在')
             this.$message.error('手机号已存在');
             return false;
           }
@@ -600,14 +570,36 @@
         })
       },
 
+      // 判断是否为移动端
+      getSystemWidth(){
+        var browserWidth=document.documentElement.clientWidth;
+        if(browserWidth <= 768){
+          this.SystemWidthFlag = true;
+        }else{
+          this.SystemWidthFlag = false;
+        }
 
+      },
+      clickBanner(data){
+      /*  console.log(data);
+
+*/      if(data.url){
+          window.open(data.url)
+        }
+        // this.$router.push({ name: 'indexEducation' });
+      },
 
+      // 申请方案
+      applyFun() {
+        this.sqfaDl = true;
+        this.sliderFun();
+      },
 
       goExamPage(){
         this.$router.push({ name: 'examsystem' });
       },
-      goPeixunPage(){
-        this.$router.push({ name: 'trainsystem' });
+      onlineFun(){
+        window.open('https://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011')
       },
       goKechengPage(){
         this.$router.push({ name: 'courseware' });