cwg-crm
/
cwg_crm_person_front_vu_realse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线客服</title>
  <!-- uni webview SDK -->
  <script src="./js/uni.webview.1.5.8.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, sans-serif;
    }

    .container {
      width: 100%;
      min-height: 100vh;
      background-color: #fff;
    }

    /* ========================
       四色旋转 Loading（和PDF同款）
    ======================== */
    .loading-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      transition: opacity 0.3s ease;
    }

    .loading2 {
      width: 30px;
      height: 30px;
      position: relative;
      transform: rotate(10deg);
    }

    .loading2 .shape {
      border-radius: 5px;
    }

    .shape {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 1px;
    }

    .shape.shape1 {
      left: 0;
      background-color: #1890FF;
    }

    .shape.shape2 {
      right: 0;
      background-color: #91CB74;
    }

    .shape.shape3 {
      bottom: 0;
      background-color: #FAC858;
    }

    .shape.shape4 {
      bottom: 0;
      right: 0;
      background-color: #EE6666;
    }

    /* 动画 */
    .loading2 {
      animation: rotation 1s infinite linear;
    }

    .loading2 .shape1 {
      animation: animation2shape1 0.5s ease 0s infinite alternate;
    }

    .loading2 .shape2 {
      animation: animation2shape2 0.5s ease 0s infinite alternate;
    }

    .loading2 .shape3 {
      animation: animation2shape3 0.5s ease 0s infinite alternate;
    }

    .loading2 .shape4 {
      animation: animation2shape4 0.5s ease 0s infinite alternate;
    }

    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes animation2shape1 {
      from {
        transform: translate(0, 0);
      }

      to {
        transform: translate(20px, 20px);
      }
    }

    @keyframes animation2shape2 {
      from {
        transform: translate(0, 0);
      }

      to {
        transform: translate(-20px, 20px);
      }
    }

    @keyframes animation2shape3 {
      from {
        transform: translate(0, 0);
      }

      to {
        transform: translate(20px, -20px);
      }
    }

    @keyframes animation2shape4 {
      from {
        transform: translate(0, 0);
      }

      to {
        transform: translate(-20px, -20px);
      }
    }
  </style>
</head>

<body>

  <!-- 全屏 Loading -->
  <div class="loading-container" id="loading">
    <div class="loading2">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
      <div class="shape shape4"></div>
    </div>
  </div>

  <div class="container"></div>

  <script>
    window.__lc = window.__lc || {};
    window.__lc.license = 18945964;

    // 隐藏 loading
    function hideLoading() {
      const el = document.getElementById('loading');
      if (el) {
        el.style.opacity = '0';
        setTimeout(() => {
          el.style.display = 'none';
        }, 300);
      }
    }

    (function (n, t, c) {
      function i(n) { return e._h ? e._h.apply(null, n) : e._q.push(n) }
      var e = {
        _q: [], _h: null, _v: "2.0",
        on: function () { i(["on", c.call(arguments)]) },
        once: function () { i(["once", c.call(arguments)]) },
        off: function () { i(["off", c.call(arguments)]) },
        get: function () {
          if (!e._h) throw new Error("[LiveChatWidget] You can't use getters before load.");
          return i(["get", c.call(arguments)])
        },
        call: function () { i(["call", c.call(arguments)]) },
        init: function () {
          var n = t.createElement("script");
          n.async = !0;
          n.type = "text/javascript";
          n.src = "https://cdn.livechatinc.com/tracking.js";
          t.head.appendChild(n);
        }
      };

      !n.__lc.asyncInit && e.init();
      n.LiveChatWidget = n.LiveChatWidget || e;

      // 等待 SDK 加载完成 → 打开客服并隐藏 loading
      setTimeout(() => {
        LiveChatWidget.call('maximize');
      }, 300);

      // 关闭客服 → 返回上一页
      LiveChatWidget.on('visibility_changed', (data) => {
        if (data.visibility === 'maximized') {
          hideLoading();
        }
        if (data.visibility === 'closed' || data.visibility === 'minimized') {
          try {
            uni.navigateBack();
          } catch (e) {
            history.back();
          }
        }
      });
    })(window, document, [].slice);
  </script>
</body>

</html>