nuxtProject/components/common/chanPinTiYan.vue

<template>
  <div>
    <ul class="experience-ul-box mta-hidden-xs">
      <li>
        <div @mouseenter="enterCode" @mouseleave="leaveCode">
          <h5>手机学员端</h5>
          <img src="#">
          <p>用手机扫描二维码，考生30秒体验答卷</p>
          <a style="cursor: default">扫码试用</a>
          <span ref="codeBtn" v-if="youkeFlag"><em></em></span>
          <div ref="codeBtn" v-if="!youkeFlag">系统升级中...</div>
        </div>
      </li>
      <li><div><h5>电脑管理端</h5><img src="#"><p>欢迎体验青谷系统后台，三步轻松组织一场考试</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
      <li><div><h5>电脑学员端</h5><img src="#"><p>支持市面各种主流浏览器，支持十万量级的考试并发</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</a></div></li>
    </ul>
    <!-- 手机轮播 -->
    <div class="experience-swiper-box mta-hidden-sm">
      <div v-swiper:mySwiper="swiperOption" class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="experience-content-box">
              <h5>手机学员端</h5>
              <img src="#">
              <p>用手机扫描二维码，考生30秒体验答卷</p>
              <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="experience-content-box">
              <h5>电脑管理端</h5>
              <img src="#">
              <p>欢迎体验青谷系统后台，三步轻松组织一场考试</p>
              <a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="experience-content-box">
              <img src="#">
              <h5>电脑学员端</h5>
              <p>支持市面各种主流浏览器，支持十万量级的考试并发</p>
              <a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</a></div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-style"></div>
        <p class="experience-swiper-tip">←左右滑动查看更多→</p>
      </div>
    </div>
    <!--  系统维护  -->
    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
  </div>

</template>

<script>
export default {
  name: "chanPinTiYan",
  data() {
    return {
      youkeFlag:false,// 控制游客系统是否维护中
      systemMaintainDl: false,
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
          bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
          clickable: true, // 点击当前滑块切换到对应的轮播图片
        },
        autoplay: {
          delay: 5000,
        },
        paginationClickable: true,
        speed: 800,
        loop: true,
        observer: true,
        observeParents: true,
      },
    }
  },
  methods: {
    enterCode() {
      if(this.youkeFlag){
        this.$refs.codeBtn.style.bottom ='90px';
      }else{
        this.$refs.codeBtn.style.bottom ='0';
      }
    },
    leaveCode() {
      this.$refs.codeBtn.style.bottom ='305px';
    },
    ykFreeTrial() {
      if(this.youkeFlag){
        // 没升级
        window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
      }else{
        // 升级中
        this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
      }
    },
    // 判断是否为移动端
    isH5(){
      var browserWidth=document.documentElement.clientWidth;
      if(browserWidth <= 768){
        return true;
      }else{
        return false;
      }
    },
    KsTyBtn(btnUrl) {
      if(this.youkeFlag) {
        if(this.isH5()){
          this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
        }else {
          window.open(btnUrl);
        }
      }else{
        if(this.isH5()){
          // 升级中
          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
        }else{
          this.systemMaintainDl = true;
        }
      }
    },
  },
  created() {
    // 页面初始化
    this.$axios.$post('/home/youke/stop').then(res=>{
      if (res.data === '1') {
        this.youkeFlag = false;
      }else{
        this.youkeFlag = true;
      }
    });
  },
}
</script>

<style scoped>

</style>