engine.ejs 8.86 KB

Edit Raw Blame History

<!--
 * @Author: ly525
 * @Date: 2019-12-04 20:24:04
 * @LastEditors: ly525
 * @LastEditTime: 2020-05-03 14:30:37
 * @FilePath: /luban-h5/back-end/h5-api/views/engine.ejs
 * @Github: https://github.com/ly525/luban-h5
 * @Description: 手机端预览模板
 * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
 -->

<html>

<head>
  <meta charset="UTF-8">
  <title><%= work.title %></title>
  <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/dist/css/swiper.min.css">
  <script src="https://cdn.jsdelivr.net/npm/swiper/dist/js/swiper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper-animation@2.0.2/build/swiper-animation.min.js"></script>
  <!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" async></script> -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
  <script>window.__work = <%- JSON.stringify(work) %></script>
  <script src="/engine-assets/engine.umd.min.js"></script>
  <style>
    /*
      scss 文件，用来生成下面一段 style 中的 css
      css 在线转 css：https://www.sassmeister.com/
    */
    /* * {
      outline: none;
    }

    .bg-wrapper {
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
    }

    .preview-wrapper {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      width: <%= work.width %>px;
      height: 568px;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .phone-wrapper {
        position: absolute;
        width: <%= work.width %>px;
        height: 568px;
        display: inline-block;
        background: #fff;
        box-sizing: content-box;
        border: 10px solid #f6f6f6;
      }

      .float-shortcuts {
        position: absolute;
        top: 100px;
        right: 0;

        .page-controller {
          position: absolute;
          left: 0 !important;
          display: block;
          box-sizing: border-box;
          width: 22px;
          height: 60px;
          padding: 4px;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;

          cursor: pointer;
          background: #2096f9;
          font-size: 12px;
          border: 1px solid #2096f9;
          color: #fff;

          &.next {
            top: 80px;
          }
        }
      }

      .work-info {
        color: #4a4a4a;
        font-size: 14px;
        margin-left: 380px;

        .qrcode-wrapper {
          .qrcode-label {
          }

          .qrcode-img {
          }
        }
      }
    } */
  </style>
  <style>
    * {
      outline: none;
    }

    .bg-wrapper {
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
    }
    /* .swiper-container {
      width: 100%;
      height: 100vh;
    } */

    .preview-wrapper {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      width: <%= work.width %>px;
      height: 568px;
      /* position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto; */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .preview-wrapper .phone-wrapper {
      position: absolute;
      width: <%= work.width %>px;
      height: 568px;
      display: inline-block;
      background: #fff;
      box-sizing: content-box;
      border: 10px solid #f6f6f6;
    }
    .preview-wrapper .float-shortcuts {
      position: absolute;
      top: 100px;
      right: 0;
    }
    .preview-wrapper .float-shortcuts .page-controller {
      position: absolute;
      left: 0 !important;
      display: block;
      box-sizing: border-box;
      width: 22px;
      height: 60px;
      padding: 4px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      cursor: pointer;
      background: #2096f9;
      font-size: 12px;
      /* border: 1px solid #2096f9; */
      color: #fff;
    }
    .preview-wrapper .float-shortcuts .page-controller.next {
      top: 80px;
    }
    .preview-wrapper .work-info {
      color: #4a4a4a;
      font-size: 14px;
      margin-left: 380px;
    }

  </style>
</head>
<body>
  <div class="bg-wrapper"></div>
  <div class="preview-wrapper">
    <div class="phone-wrapper">
      <div class="float-shortcuts">
        <a class="page-controller swiper-button-prev prev">上一页</a>
        <a class="page-controller swiper-button-next next">下一页</a>
      </div>
      <div id="app">
        <engine />
      </div>
    </div>
    <div class="work-info">
      <div class="qrcode-wrapper">
        <div class="qrcode-label">
          <span>手机扫码分享给好友</span>
        </div>
        <div class="qrcode-img">
          <canvas style="float: left" id="qrcode-canvas"></canvas>
        </div>
      </div>
    </div>
  </div>
  <script>
    !function () {
      function isMobile() {
        var mobileDeviceReg = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i
        return mobileDeviceReg.test(navigator.userAgent) || window.innerWidth < 500
      }

      function updateViewport() {
        var scale = 1;
        var w = document.documentElement.clientWidth || <%= work.width %>;
        // var h = document.documentElement.clientHeight || 568;
        // scale = w/h >= <%= work.width %>/568 ? h/568 : w/<%= work.width %>;
        scale = w/<%= work.width %>;
        var viewport = "width=<%= work.width %>, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
        document.getElementById("viewport").setAttribute("content", viewport)
      }

      function doMobileActions () {
        updateViewport();
        var app = document.getElementById('app');
        document.body.innerHTML = '';
        document.body.appendChild(app);
      }

      var loadJS = function (url, callback, location) {
        location = location || document.head

        var scriptTag = document.createElement('script');
        scriptTag.onload = callback;
        // scriptTag.onreadystatechange = callback;
        scriptTag.src = url;
        location.appendChild(scriptTag);
      };

      function drawQRcode () {
        var canvas = document.getElementById('qrcode-canvas')
        QRCode.toCanvas(canvas, window.location.href, {
          scale: 4
        })
      }

      function doPCActions() {
        loadJS('https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js', drawQRcode);
      }

      isMobile() ? doMobileActions() : doPCActions();
    }();
  </script>
  <script>
    // Vue.component('engine', window.Engine)
    new Vue({
      el: '#app',
      data: {},
    });
  </script>
  <script>
    const swiperAnimation = new SwiperAnimation();

    var mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: false,
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
      on: {
        init: function () {
          swiperAnimation.init(this).animate();
        },
        slideChange: function () {
          swiperAnimation.init(this).animate();
        }
      }
    });

    function title(str) {
      if (str.length <= 1) return str.toUpperCase()
      return str.slice(0,1).toUpperCase() + str.slice(1)
    }

    function displayMessage ({ origin, data }) {
      if (['next', 'prev'].includes(data)  && origin === window.location.origin) {
        // 不采用下面的原因：在移动端和小屏幕上，会移除：.swiper-button-prev, .swiper-button-next 按钮
        // document.querySelector(`.swiper-button-${data}`).click()

        var action = `slide${title(data)}`
        mySwiper[action]()
      }
    }

    if (window.addEventListener) {
      window.addEventListener("message", displayMessage, false);
    } else {
      window.attachEvent("onmessage", displayMessage);
    }
  </script>
  <!-- build:js scripts/vendor.js -->
  <!-- endbuild -->
</body>

</html>