nuxtProject/pages/resources/index.vue

<template>
  <div class="client-platform-page client-resources-page">

    <!-- 题库资源页 banner栏 -->
    <div class="client-platform-banner">
      <div  :style="{backgroundImage: `url(${require(`~/static/images/client/resources/resources-banner-background.jpg`)})`}" class="client-platform-banner"></div>
    </div>
    <!--  企业通用岗位培训方案 -->
    <div class="client-container">
      <h4 class="client-title">企业通用岗位培训方案</h4>
      <ul class="train-scheme-list">
        <li><div><i></i><span>职业素养</span></div></li>
        <li><div><i></i><span>领导能力</span></div></li>
        <li><div><i></i><span>人力资源</span></div></li>
        <li><div><i></i><span>市场营销</span></div></li>
        <li><div><i></i><span>行政管理</span></div></li>
        <li><div><i></i><span>财务管理</span></div></li>
        <li><div><i></i><span>客服服务</span></div></li>
        <li><div><i></i><span>产品运营</span></div></li>

      </ul>
    </div>
    <div class="platform-products-services">
      <ul>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <h4 class="client-title">为企业培训打造学习矩阵</h4>
              <img :src="trainAdvantagesImg1" alt="完善的课程学习体系" />
              <div class="products-services-content">
                <p>
                  课程总数近<span class="blue-big-size">5000门</span><br>
                  涵盖<span class="blue-big-size">2000个</span>知识要点<br>
                  提供<span class="blue-big-size">8大通用岗位</span>培训方案<br>
                  课程资源<span class="blue-big-size">每月持续更新</span><br>
                </p>
                <div>
                  <a class="client-default-Btn" @click="applyFun" >申请方案</a>
                  <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>

    </div>
    <!--  情景动画 -->
    <div class="course-learn-box">
      <h4 class="client-title">课程内容形式多样</h4>
      <div class="client-container tc">
        <ul class="learn-box-list">
          <li>
            <a href="https://spdb.mtavip.com/sv/4f2e3958-17880e826df/4f2e3958-17880e826df.mp4"></a>
            <div>
              <span><img :src="courseVideoImg19" alt="FLASH动画课程"><i @click="playVideo(0)"></i></span>
              <p>FLASH动画课程</p>
              <p class="course-explain-black">主要以图文动画的形式表现教学者的作用和教与学之间的关系，从而改变学习的本质</p>
            </div>
          </li>
          <li>
            <a href="https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4"></a>
            <div>
              <span><img :src="courseVideoImg8" alt="视频课程"><i @click="playVideo(1)"></i></span>
              <p>视频课程</p>
              <p class="course-explain-black">把教师视频与PowerPoint课件一并摄制下来，生成为视频课件</p>
            </div>
          </li>
          <li>
            <a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a>
            <div><span><img :src="courseVideoImg6" alt="名师讲堂"><i @click="playVideo(2)"></i></span>
              <p>名师讲堂</p>
              <p class="course-explain-black">各行各业讲师汇聚一堂，为不同专属领域打造明星级课堂</p>
            </div>
          </li>
        </ul>
        <div class="platform-products-services">
          <a class="client-default-Btn" @click="applyFun" >申请方案</a>
          <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
        </div>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="platform-news-information">
      <div class="client-container">
        <h4 class="client-title">新闻资讯</h4>
        <ul>
          <li style="font-size: 16px" v-for="(item, index) in topCarousels">
            <div>
              <img :src="item.pic" alt="新闻资讯" />
              <h4 @click="checkInfo(item)">{{ item.title }}</h4>
              <span>发布时间：{{item.yyyy }}-{{ item.mmdd }}</span>
              <p>{{ item.intro }}</p>
            </div>
          </li>
        </ul>
      </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>
      </el-form>
      <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
      <span>免费热线：18642628327</span><a href="http://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011" target="_blank">在线客服</a>
    </el-dialog>
  </div>
</template>

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


      let [res1, res2] = await Promise.all([
                                             await $axios.$post(`/home/banner/list`, { 'code': 3 }).then(res => {
                                               return res;
                                             }),
                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'培训' }).then(res => {
                                               return res;
                                             })
                                           ]);
      return {
        bannerList: res1.data.data||[],
        topCarousels: res2.data.data||[],

      };
    },
    data() {
      return {
        trainAdvantagesImg1:  require(`~/static/images/client/resources/train-scheme-img.png`),
        courseVideoImg19:  require(`~/static/images/client/course/course-video-img19.png`),
        courseVideoImg8:  require(`~/static/images/client/course/course-video-img8.png`),
        courseVideoImg6:  require(`~/static/images/client/course/course-video-img6.png`),
        videoArray:[
          {
            url:'https://spdb.mtavip.com/sv/4f2e3958-17880e826df/4f2e3958-17880e826df.mp4',
            fotterText:'主要以图文动画的形式表现教学者的作用和教与学之间的关系，从而改变学习的本质',
            title:'FLASH动画课程',
          },
          {
            url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
            fotterText:'把教师视频与PowerPoint课件一并摄制下来，生成为视频课件',
            title:'视频课程',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/359ee794-17470899bcf-0006-732a-c93-687b7.mp4',
            fotterText:'各行各业讲师汇聚一堂，为不同专属领域打造明星级课堂',
            title:'名师讲堂',
          },
        ],
        videoDialogFlag:false,
        source:'',
        footerText:'',
        title:'',

        btnTextDisabled: false,
        telDl: false,
        btnText:         '获取验证码',
        countdown:       60, // 60秒倒计时
        sliderData:      {},
        appKey:          'FFFF0N00000000007EC0',
        telChangeDate:   {},
        telRules:        {
          tel:          [
            { trigger: 'blur', required: true, message: '请输入手机号' },
          ],
        },



      };
    },
    head(){
      return {
        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
        title: '课程资源_学习平台_精品课程资源开发建设_学习平台开发建设',
        meta: [
          {
            name: 'keywords',
            content: '学习平台开发,学习平台建设'
          },
          {
            name:'description',
            content:'沈阳久创锐康公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是沈阳久创锐康始终不渝的核心价值观。'
          }
        ],
      }
    },
    computed: {},
    methods:  {
      // 判断是否为移动端
      getSystemWidth(){
        var browserWidth=document.documentElement.clientWidth;
        if(browserWidth <= 768){
          this.SystemWidthFlag = true;
        }else{
          this.SystemWidthFlag = false;
        }

      },


      applyFun() {
        this.getSystemWidth();
        if(this.SystemWidthFlag){
          this.$router.push({ name: 'CourseDevelopPhone', query: {pageName: 'resources',} });
        }else {
          this.telDl = true;
        }
      },
      delDlClose(){
        this.telDl  =false
        this.$refs.ruleTelForm.resetFields();



      },

      /**
       * 串联加载指定的脚本
       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
       * 全部加载完成后执行回调
       * @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);
      },


      dialogSave(){
        this.$refs.ruleTelForm.validate((valid) => {
          if (valid) {
            // 请求后台
            const options = {
              phone:  this.telChangeDate.tel
            };
            if (!/^1[3-9]\d{9}$/.test(this.telChangeDate.tel)) {
              this.$message.error('手机号格式错误');
              return false;
            }
            this.$axios.$post('/develop/add',options).then(res=>{
              if (res.code === 0 && res.data) {
                this.telDl = false;
                this.$message.success('申请成功');
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        });

      },


      // 倒计时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) {
          this.$message.error('人机交互未通过');
          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 {
                this.$message.error(res.msg||'手机号已存在');
              }
            })
          } else {
            this.$message.error(res.msg||'手机号已存在');
            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 = '';
      },
      goIntroductionPage(){
        this.$router.push({ name: 'introduction' });
      },
      checkInfo(data) {
        const opt = {
          id: data.code,
        };
        this.$router.push({ name: 'news-id', params: opt });
      },
      clickBanner(data){
        if(data){
          window.open(data)
        }
      },
    },
    created() {

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

</style>