nuxtProject/pages/tiyanCenter/index.vue

<template>
  <div class="client-platform-page tiyan-center-page">
    <!-- 体验中心 banner栏 --><!--style="url('/static/images/client/exam/exam-banner-background.png')" -->
    <div class="client-platform-banner">
      <div :style="{backgroundImage: `url(${tiyanCenterImg})`}"></div>
    </div>
    <!--  麦塔在线考试系统体验版 -->
    <div class="platform-products-experience client-container">
      <h4 class="client-title">在线考试系统体验版</h4>
      <ul class="experience-ul-box">
        <li>
          <div>
            <i></i><h4>考试电脑管理端</h4><a @click="FreeTrial('ksAdmin')">立即体验</a><p><span>{{kaoshiCnt}}</span>人正在体验学员端</p>
          </div>
        </li>
        <li>
          <div>
            <i></i><h4>考试电脑学员端</h4><a @click="FreeTrial('ksClient')">立即体验</a><p><span>{{kaoshiCnt}}</span>人正在体验管理端</p>
          </div>
        </li>
        <li>
          <div>
            <i></i><h4>考试一键安装包</h4><a href="https://mta3.oss-cn-qingdao.aliyuncs.com/kaoshi%20v3.8.3_190618.zip" @click="userRegister">免费下载</a><p><span>{{ksDownLoadCnt}}</span>人已下载安装</p>
          </div>
        </li>

      </ul>
    </div>
    <!--  麦塔在线培训系统 -->
    <div class="platform-products-experience client-container">
      <h4 class="client-title">麦塔在线培训系统体验版</h4>
      <ul class="experience-ul-box peixun-ul-box">
        <li>
          <div>
            <i></i><h4>培训电脑管理端</h4><a @click="FreeTrial('pxAdmin')">立即体验</a><p><span>{{peixunCnt}}</span>人正在体验学员端</p>
          </div>
        </li>
        <li>
          <div>
            <i></i><h4>培训电脑学员端</h4><a @click="FreeTrial('pxClient')">立即体验</a><p><span>{{peixunCnt}}</span>人正在体验管理端</p>
          </div>
        </li>
        <li>
          <div>
            <i></i><h4>培训一键安装包</h4><a href="https://mta3.oss-cn-qingdao.aliyuncs.com/peixun%20v3.8.3_190618.zip" @click="userRegister">免费下载</a><p><span>{{pxDownLoadCnt}}</span>人已下载安装</p>
          </div>
        </li>

      </ul>
    </div>

    <!--  立即注册弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="registerDl"
      class="register-now-dialog"
      center>
      <div class="register-now-box">
        <p>企业考培,就用麦塔</p>
        <p>现在注册立享30人纯免费版本3年使用权限</p>
        <div class="system-box">
          <a href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i><p>考试系统</p></a>
          <span></span>
          <a href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i><p>培训系统</p></a>
        </div>
        <span>免费咨询电话：<span class="tel-code">400-052-2130</span></span>
      </div>
    </el-dialog>
    <!-- 系统维护-->
    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
    <!-- 免费试用弹窗-->
    <reg-dialog :dialogVisible="regDialogFlag"  :systemType="systemCode" @changeShow="showRegDialogUpdate"></reg-dialog>
  </div>
</template>

<script>
  import regDialog from '~/components/registerDialog';
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    name:     'tiyanCenter',
    layout:   'templateB',
    components: {
      regDialog,
    },
    async asyncData({ $axios,store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/tiyanCenter');
    },
    data() {
      return {
        // 发展现状img
        tiyanCenterImg: require(`~/static/images/client/tiyanCenter/tiyanCenterImg.png`),
        registerDl:false,
        youkeFlag:false,// 控制游客系统是否维护中
        systemMaintainDl:false,// 系统维护弹窗
        kaoshiCnt:0,
        peixunCnt:0,
        ksDownLoadCnt:0,
        pxDownLoadCnt:0,
        systemCode:'ksClient',
        regDialogFlag:false,// 免费试用弹窗
      };
    },
    head(){
      return {
        title: '久创考试系统免费体验_久创培训系统免费体验',
        meta:  [
          {
            description: '凭借可靠的开发技术，久创考试系统、培训系统-专业的企业考培软件应运而生，现在注册可免费获得30人体验版SaaS考试系统使用账号；久创在线培训系统—专业的企业考培软件工具。',
            keywords:    '久创考试系统,久创培训系统',
          },
        ],
      };
    },
    methods:  {
      // 弹窗关闭
      showRegDialogUpdate(data){
        this.regDialogFlag  = !data
        if(data === 'false'){
          this.regDialogFlag = false
        }else{
          this.regDialogFlag = true
        }
      },
      // 免费试用
      FreeTrial(data){
        this.regDialogFlag = true;
        this.systemCode = data;
      },
      // 用户注册接口（帮助后台计算）
      userRegister(){
        const options = {
          tel:  '下载记录',
          code: '123123',
          company:  "LLISOFT",
        };
        this.$axios.$post('/user/tiyan/add',options).then(res=>{});
      },
      // 考试体验按钮
      KsTyBtn(btnUrl){
        if(this.youkeFlag) {
          if(this.SystemWidthFlag){
            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
          }else {
            window.open(btnUrl);
          }
        }else{
          if(this.SystemWidthFlag){
            // 升级中
            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
          }else{
            this.systemMaintainDl = true;
          }
        }
      },
      // 培训学员端体验
      pxTyBtn(btnUrl){
        if(this.youkeFlag) {
          if(this.SystemWidthFlag){
            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
          }else {
            window.open(btnUrl);
          }
        }else{
          if(this.SystemWidthFlag){
            // 升级中
            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
          }else{
            this.systemMaintainDl = true;
          }

        }
      },

    },
    created() {
      // 页面初始化
      this.$axios.$post('/user/tiyan/info').then(res=>{
          this.kaoshiCnt = res.data.kaoshiCnt;
          this.peixunCnt = res.data.kaoshiCnt;
          this.ksDownLoadCnt = res.data.ksDownLoadCnt;
          this.pxDownLoadCnt = res.data.pxDownLoadCnt;
      });
    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>