课程开发 弹窗

pages/courseware/index.vue

@@ -7,7 +7,7 @@
         <div class="course-course-container">
           <h4>10年多媒体设计经验</h4>
           <p>让创意与视觉效果完美结合</p>
-          <a>申请方案</a>
+          <a @click="applyFun">申请方案</a>
         </div>
       </div>
     </div>
@@ -37,7 +37,7 @@
             <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc1569e5285890792886059626/v.f30.mp4"></a><div><span><img :src="courseVideoImg5" alt="FLASH交互类E-Learning课程"><i @click="playVideo(4)"></i></span><p>FLASH交互类E-Learning课程</p></div></li>
             <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a><div><span><img :src="courseVideoImg6" alt="视频类E-Learning课程"><i @click="playVideo(5)"></i></span><p>视频类E-Learning课程</p></div></li>
           </ul>
-          <a class="course-apply-btn">申请方案</a>
+          <a class="course-apply-btn" @click="applyFun" >申请方案</a>
       </div>
     </div>
 
@@ -54,7 +54,7 @@
           <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4"></a><div><span><img :src="courseVideoImg11" alt="图文类微课"><i @click="playVideo(10)"></i></span><p>图文类微课</p></div></li>
           <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4"></a><div><span><img :src="courseVideoImg12" alt="PPT微课"><i @click="playVideo(11)"></i></span><p>PPT微课</p></div></li>
         </ul>
-        <a class="course-apply-btn">申请方案</a>
+        <a class="course-apply-btn" @click="applyFun">申请方案</a>
       </div>
     </div>
 
@@ -68,7 +68,7 @@
           <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cbfaddf5285890792886056576/v.f30.mp4"></a><div><span><img :src="courseVideoImg14" alt="MG动画类宣传片"><i @click="playVideo(13)"></i></span><p>MG动画类宣传片</p></div></li>
           <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eed5aaf5285890792886130531/v.f30.mp4"></a><div><span><img :src="courseVideoImg15" alt="视频类宣传片"><i @click="playVideo(14)"></i></span><p>视频类宣传片</p></div></li>
         </ul>
-        <a class="course-apply-btn">申请方案</a>
+        <a class="course-apply-btn" @click="applyFun">申请方案</a>
       </div>
     </div>
 
@@ -82,7 +82,7 @@
           <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4"></a><div><span><img :src="courseVideoImg17" alt="故事教学"><i @click="playVideo(16)"></i></span><p>故事教学</p></div></li>
           <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4"></a><div><span><img :src="courseVideoImg18" alt="过场动画"><i @click="playVideo(17)"></i></span><p>过场动画</p></div></li>
         </ul>
-        <a class="course-apply-btn">申请方案</a>
+        <a class="course-apply-btn" @click="applyFun">申请方案</a>
       </div>
     </div>
 
@@ -115,6 +115,36 @@
       <video controls width="300px" height="200px" :src="source"></video>
       <span>{{footerText}}</span>
     </el-dialog>
+
+    <el-dialog
+      :close-on-click-modal="false"
+      title="请绑定手机号"
+      :visible.sync="telDl"
+      @close="delDlClose"
+      class="response-small-dialog"
+      center>
+      <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" label-width="80px"
+               class="demo-ruleForm response-dialog-form-input">
+        <el-form-item label="手机号：" prop="tel">
+          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号"></el-input>
+        </el-form-item>
+        <div id="your-dom-id" class="nc-container"></div>
+        <el-form-item label="验证码：" prop="verification">
+          <div class="verification">
+            <el-input v-model="telChangeDate.verification" placeholder="请输入验证码"></el-input>
+            <el-button size="small" @click="checkVerification" :disabled="btnTextDisabled">{{btnText}}
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <p class="tips-p"><i class="el-icon-warning"></i><span
+        style="margin-left: 10px;">您的手机号将作为手机端账号使用，未经授权不会主动公开，请放心</span>
+      </p>
+      <p class="tips-p">每个手机号只能绑定一个账号</p>
+    </el-dialog>
+
+
+
   </div>
 
 
@@ -265,11 +295,177 @@
             title:'过场动画',
           },
         ],
+        btnTextDisabled: false,
+        telDl: false,
+        btnText:         '获取验证码',
+        countdown:       60, // 60秒倒计时
+        sliderData:      {},
+        appKey:          'FFFF0N00000000007EC0',
+        telChangeDate:   {},
+        telRules:        {
+          tel:          [
+            { trigger: 'blur', required: true, message: '请输入手机号' },
+          ],
+          verification: [
+            { trigger: 'blur', required: true, message: '请输入验证码' },
+          ],
+        },
 
       };
     },
     computed:   {},
     methods:    {
+      applyFun() {
+        this.telDl = true;
+        this.sliderFun();
+      },
+
+      saveTelword(){
+
+      },
+
+
+      delDlClose(){
+        this.telDl  =false
+        setTimeout(()=>{
+          __nc.reset();
+        },100)
+
+      },
+
+      /**
+       * 串联加载指定的脚本
+       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
+       * 全部加载完成后执行回调
+       * @param array|string 指定的脚本们
+       * @param function 成功后回调的函数
+       * @return array 所有生成的脚本元素对象数组
+       * 异步加载js后运行回调函数callback / scripts 为数组或字符串
+       */
+      seriesLoadScripts(scripts, callback) {
+        if (typeof (scripts) != 'object') {
+          var scripts = [scripts];
+        }
+        var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
+        var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
+          s[i] = document.createElement('script');
+          s[i].setAttribute('type', 'text/javascript');
+          s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
+            if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
+              this.onload = this.onreadystatechange = null;
+              this.parentNode.removeChild(this);
+              if (i != last) {
+                recursiveLoad(i + 1);
+              } else if (typeof (callback) == 'function') {
+                callback();
+              }
+            }
+          };
+          s[i].setAttribute('src', scripts[i]);
+          HEAD.appendChild(s[i]);
+        };
+        recursiveLoad(0);
+      },
+      // 滑块
+      sliderFun() {
+        const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
+        const NC_Opt = {
+          //声明滑动验证需要渲染的目标元素ID。
+          renderTo:    '#your-dom-id',
+          //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
+          appkey:      this.appKey,
+          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
+          scene:       'nc_message',
+          //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
+          token:       nc_token,
+          //滑动条的宽度。
+          customWidth: 300,
+          //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
+          trans:       { 'key1': 'code0' },
+          //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
+          elementID:   ['usernameID'],
+          //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
+          is_Opt:      0,
+          //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
+          language:    'cn',
+          //是否启用。一般情况，保持默认值（true）即可。
+          isEnabled:   true,
+          //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
+          timeout:     3000,
+          //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
+          times:       5,
+          //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
+          apimap:      {
+            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
+            // 'get_captcha': '//b.com/get_captcha/ver3',
+            // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
+            // 'get_img': '//c.com/get_img',
+            // 'checkcode': '//d.com/captcha/checkcode.jsonp',
+            // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
+            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
+            // 'umid_serUrl': 'https://g.com/service/um.json'
+          },
+          //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
+          callback:    (data) => {
+            this.sliderData = Object.assign({}, data, {
+              appkey: NC_Opt.appkey,
+              scene:  NC_Opt.scene,
+            });
+          },
+        };
+        let date11 = () => {
+
+          let _date = new Date();
+          let year = _date.getFullYear().toString();
+          let month = _date.getMonth().toString();
+          let day = _date.getDate().toString();
+          let a = _date.getHours().toString();
+          let b = _date.getMinutes().toString();
+          let c = _date.getSeconds().toString();
+
+          return year + month + day + a + b + c;
+        };
+        let c = date11();
+        const scripts = [
+          `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
+        ];
+        this.seriesLoadScripts(scripts, function () {
+          var nc = new noCaptcha(NC_Opt);
+          nc.upLang('cn', {
+            _startTEXT:    '请按住滑块，拖动到最右边',
+            _yesTEXT:      '验证通过',
+            _error300:     '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
+            _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
+          });
+        });
+
+      },
+
+      // 倒计时60秒
+      setTime() {
+        if (this.countdown === 0) {
+          this.btnTextDisabled = false;
+          this.btnText = '免费获取验证码';
+          this.countdown = 60;
+        } else {
+          this.btnTextDisabled = true;
+          this.btnText = '重新发送(' + this.countdown + 's)';
+          this.countdown--;
+          setTimeout(() => {
+            this.setTime();
+          }, 1000);
+        }
+      },
+      // 验证码
+      checkVerification() {
+
+      },
+
+
+
+
+
+
       playVideo(index){
         this.videoDialogFlag = true
         this.source = this.videoArray[index].url