nuxtProject/pages/courseware/index.vue

<template>
  <div class="client-course-page">
    <!-- 课程开发页 banner栏 -->
    <div class="client-course-banner">
      <div class="client-container">
        <!--  banner文字区域 -->
        <div class="course-course-container">
          <h4>10年多媒体设计经验</h4>
          <p>让创意与视觉效果完美结合</p>
          <a @click="applyFun">申请方案</a>
        </div>
      </div>
    </div>

    <!--  课程定制开发 -->
    <div class="course-made-box">
      <h4 class="client-title">课程定制开发</h4>
      <div class="client-container">
          <div class="course-made-content">
            <p>企业需要定制适合自己的个性化课程，将隐性、零散的企业知识显性化和系统化，使企业多年积累的经验得以有效沉淀和传承。栋科创建12年，凭借创新的技术、高效的服务响应和强大的战略执行，为客户打造专业优质的课程定制服务</p>
            <a  @click="applyFun">申请方案</a>
          </div>
          <img :src="courseMadeImg" alt="课程定制开发">
        </div>
    </div>

    <!--  E-learning课程 -->
    <div class="course-learn-box">
      <h4 class="client-title">E-learning课程</h4>
      <h5 class="client-subtitle-title">公司于2007年成立，我们凭借创新的技术、高效的服务响应和强大的战略执行，为用户打造可靠、优质、安全易用的教育软件产品及优质专业的内容制作服务</h5>
      <div class="client-container tc">
          <ul class="learn-box-list">
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cce7bfa5285890792886060567/v.f30.mp4"></a><div><span><img :src="courseVideoImg1" alt="两分屏类E-Learning课程"><i @click="playVideo(0)"></i></span><p>两分屏类E-Learning课程</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ccefbfc5285890792886061298/v.f30.mp4"></a><div><span><img :src="courseVideoImg2" alt="三分屏类E-Learning课程"><i @click="playVideo(1)"></i></span><p>三分屏类E-Learning课程</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i @click="playVideo(2)"></i></span><p>电子杂志类E-Learning课程</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i @click="playVideo(3)"></i></span><p>FLASH图文类E-Learning课程</p></div></li>
            <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" @click="applyFun" >申请方案</a>
      </div>
    </div>

    <!--  微课程 -->
    <div class="course-learn-box course-micro-box">
      <h4 class="client-title">微课程</h4>
      <h5 class="client-subtitle-title">该类课程主要有：长图文、视频、H5交互等多种形式。内容短小精悍，利用碎片化时间，随时随地轻松学习</h5>
      <div class="client-container tc">
        <ul class="learn-box-list">
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4"></a><div><span><img :src="courseVideoImg7" alt="长图文类微课"><i @click="playVideo(6)"></i></span><p>长图文类微课</p></div></li>
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cf441145285890792886083160/v.f30.mp4"></a><div><span><img :src="courseVideoImg8" alt="视频类微课"><i @click="playVideo(7)"></i></span><p>视频类微课</p></div></li>
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4"></a><div><span><img :src="courseVideoImg9" alt="H5交互微课"><i @click="playVideo(8)"></i></span><p>H5交互微课</p></div></li>
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4"></a><div><span><img :src="courseVideoImg10" alt="情景动画类微课"><i @click="playVideo(9)"></i></span><p>情景动画类微课</p></div></li>
          <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" @click="applyFun">申请方案</a>
      </div>
    </div>

    <!--  宣传片 -->
    <div class="course-learn-box">
      <h4 class="client-title">宣传片</h4>
      <h5 class="client-subtitle-title">宣传片主要有：手绘动画、MG动画、视频实拍等多种形式。用于企业形象宣传、广告推广等</h5>
      <div class="client-container tc">
        <ul class="learn-box-list">
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce2c5775285890792886074523/v.f30.mp4"></a><div><span><img :src="courseVideoImg13" alt="手绘动画类宣传片"><i @click="playVideo(12)"></i></span><p>手绘动画类宣传片</p></div></li>
          <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" @click="applyFun">申请方案</a>
      </div>
    </div>

    <!--  情景动画 -->
    <div class="course-learn-box course-micro-box">
      <h4 class="client-title">情景动画</h4>
      <h5 class="client-subtitle-title">情景动画形式丰富多样，游戏化教学和精美动画相结合，激发学习者兴趣</h5>
      <div class="client-container tc">
        <ul class="learn-box-list">
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4"></a><div><span><img :src="courseVideoImg16" alt="儿歌动画"><i @click="playVideo(15)"></i></span><p>儿歌动画</p></div></li>
          <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" @click="applyFun">申请方案</a>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="client-industry-information">
      <h4 class="client-title">最新动态</h4>
      <div class="information-carousel-box">
        <el-carousel :interval="4000" arrow="always">
          <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
            <div
              class="industry-img-box"
              :style="{ backgroundImage: 'url(' + item.pic + ')' }"
            ></div>
            <div class="industry-content-box">
              <h5>{{ item.title }}</h5>
              <p>{{ item.intro }}</p>
              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="videoDialogFlag"
      @close="closeVideoDialog"
      class="course-video-dialog"
      center>
      <video controls :src="source" class="course-video-box"></video>
      <p>{{footerText}}</p>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="telDl"
      @close="delDlClose"
      class="application-scheme-dialog"
      center>
      <i></i>
      <p>免费获得课程开发解决方案</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>
        </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" class="dialog-code-btn">{{btnText}}</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
      <span>免费热线：400-052-2130</span><a>在线客服</a>
    </el-dialog>



  </div>


</template>

<script>
  export default {
    name:       'courseware',
    layout:'templateB',
    async asyncData({ $axios, store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/courseware');

      let [res1,res2] =  await Promise.all([
                                             await $axios.$post(`/home/news/carousel`,{'newsClassifyId':2}).then(res=>{
                                               return res
                                             }),
                                           ])
      return {topCarousels : res1.data.data,

      }
    },
    components: {
    },
    props:      {
    },
    data() {
      return {
        courseMadeImg:  require(`~/static/images/client/course/course-made-img.png`),
        courseVideoImg1:  require(`~/static/images/client/course/course-video-img1.png`),
        courseVideoImg2:  require(`~/static/images/client/course/course-video-img2.png`),
        courseVideoImg3:  require(`~/static/images/client/course/course-video-img3.png`),
        courseVideoImg4:  require(`~/static/images/client/course/course-video-img4.png`),
        courseVideoImg5:  require(`~/static/images/client/course/course-video-img5.png`),
        courseVideoImg6:  require(`~/static/images/client/course/course-video-img6.png`),
        courseVideoImg7:  require(`~/static/images/client/course/course-video-img7.png`),
        courseVideoImg8:  require(`~/static/images/client/course/course-video-img8.png`),
        courseVideoImg9:  require(`~/static/images/client/course/course-video-img9.png`),
        courseVideoImg10:  require(`~/static/images/client/course/course-video-img10.png`),
        courseVideoImg11:  require(`~/static/images/client/course/course-video-img11.png`),
        courseVideoImg12:  require(`~/static/images/client/course/course-video-img12.png`),
        courseVideoImg13:  require(`~/static/images/client/course/course-video-img13.png`),
        courseVideoImg14:  require(`~/static/images/client/course/course-video-img14.png`),
        courseVideoImg15:  require(`~/static/images/client/course/course-video-img15.png`),
        courseVideoImg16:  require(`~/static/images/client/course/course-video-img16.png`),
        courseVideoImg17:  require(`~/static/images/client/course/course-video-img17.png`),
        courseVideoImg18:  require(`~/static/images/client/course/course-video-img18.png`),
        videoDialogFlag:false,
        source:'',
        footerText:'',
        title:'',
        videoArray:[
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cce7bfa5285890792886060567/v.f30.mp4',
            fotterText:'教师视频与讲课PowerPoint课件一并摄制下来生成的课件，因此被称为‘二分屏’课件。',
            title:'两分屏类E-Learning课程',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ccefbfc5285890792886061298/v.f30.mp4',
            fotterText:'是把教师视频与PowerPoint课件一并摄制下来，生成电脑格式的文件，通过Windows系统里的IE浏览器进行播放',
            title:'三分屏类E-Learning课程',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4',
            fotterText:'兼具了平面与互联网两者的特点，且融入了图像、文字、声音、视频、游戏等相互动态结合来呈现给读者',
            title:'电子杂志类E-Learning课程',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4',
            fotterText:'主要以图片的形式表现教学者的作用和教与学之间的关系，从而改变教育的本质',
            title:'FLASH图文类E-Learning课程',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc1569e5285890792886059626/v.f30.mp4',
            fotterText:'是可以操作互动的教学，简单的比较，交互式是游戏',
            title:'FLASH交互类E-Learning课程',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4',
            fotterText:'以视频的形式表现出要授予的课程内容',
            title:'视频类E-Learning课程',
          },
          //微课程
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4',
            fotterText:'是通过图片发布文字信息的一种形式',
            title:'长图文类微课',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cf441145285890792886083160/v.f30.mp4',
            fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
            title:'视频类微课',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4',
            fotterText:'指页面内可以包含图片、链接，甚至音乐、程序等非文字元素互动教学',
            title:'H5交互微课',
          },

          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4',
            fotterText:'以故事情景引出产品内容的介绍',
            title:'情景动画类微课',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4',
            fotterText:'主要以图片的形式表现，图片有手绘原素相结合，更加明确的展示了课程的内容',
            title:'图文类微课',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4',
            fotterText:'主要是以教师根据教学内容PPT进行假想授课',
            title:'PPT微课',
          },



          //宣传片
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce2c5775285890792886074523/v.f30.mp4',
            fotterText:'一张张手绘画出来制作合成动画形式',
            title:'手绘动画类宣传片',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cbfaddf5285890792886056576/v.f30.mp4',
            fotterText:'是平面设计与动画片之间的一种产物，MG的重点是非叙述性非具象化的视觉表现形式，节奏感更强，动画的流畅与每屏之前的衔接性更好',
            title:'MG动画类宣传片',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eed5aaf5285890792886130531/v.f30.mp4',
            fotterText:'以拍摄视频的形式呈现出企业的介绍和产品宣传',
            title:'视频类宣传片',
          },
          // 情景动画
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4',
            fotterText:'以经典儿歌结合动画表达出课程要讲授的内容',
            title:'儿歌动画',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4',
            fotterText:'是教师在课堂上根据所讲授的内容穿插些相关的简明、短小故事、以说明注解强调所讲内容',
            title:'故事教学',
          },
          {
            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4',
            fotterText:'以情景动画形式丰富多样，游戏化教学和精美动画相结合',
            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();
      },

      dialogSave(){
        this.$refs.ruleTelForm.validate((valid) => {
          if (valid) {
            // 请求后台
            const options = {
              phone:  this.telChangeDate.tel,
              code: this.telChangeDate.verification,
            };

            this.$axios.$post('/develop/add',options).then(res=>{
              if (res.code === 0 && res.data) {
                this.telDl = false;
                this.$message.success('申请成功');
              } else {
                this.$message.error('申请失败');
              }
            });
          }
        });

      },


      delDlClose(){
        this.telDl  =false
        this.$refs.ruleTelForm.resetFields();
        __nc.reset();


      },

      /**
       * 串联加载指定的脚本
       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
       * 全部加载完成后执行回调
       * @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(':');
        console.log(nc_token);
        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,
            });
            console.log( this.sliderData);
          },
        };
        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() {
        if (this.sliderData.appkey === undefined) {
          return;
        }
        this.$axios.$post(`/develop/exists`,{  phone: this.telChangeDate.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,
              'type':      0,
            }
            this.$axios.$post('/sendCode',req).then(res=>{
              if (res.code === 0 && res.data) {
                this.setTime();
              }
            })
          } else {
            debugger;
            this.$message.error('手机号已存在');
            return false;
          }

        })
      },






      playVideo(index){
        this.videoDialogFlag = true
        this.source = this.videoArray[index].url
        this.footerText = this.videoArray[index].fotterText
        this.title = this.videoArray[index].title
      },

      closeVideoDialog(){

        this.videoDialogFlag = false;
        this.source = '';
        this.footerText = '';
        this.title = '';
      }
    },
    created() {

    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>