From 5e47dd1240078902f6df40c02baf938f8575dd3b Mon Sep 17 00:00:00 2001
From: cuijie <cuijie@safefw.com>
Date: Fri, 5 Jun 2020 17:01:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E6=B1=A0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/flexible.js                        | 118 +++++++++++++++++++++++++
 src/main.js                            |   3 +-
 src/pages/shop/IncreaseWelcomeList.vue |   2 +-
 3 files changed, 120 insertions(+), 3 deletions(-)
 create mode 100644 src/flexible.js

diff --git a/src/flexible.js b/src/flexible.js
new file mode 100644
index 0000000..3e046c7
--- /dev/null
+++ b/src/flexible.js
@@ -0,0 +1,118 @@
+
+;(function(win, lib) {
+  var doc = win.document;
+  var docEl = doc.documentElement;
+  var metaEl = doc.querySelector('meta[name="viewport"]');
+  var flexibleEl = doc.querySelector('meta[name="flexible"]');
+  var dpr = 0;
+  var scale = 0;
+  var tid;
+  var flexible = lib.flexible || (lib.flexible = {});
+
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例');
+    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
+    if (match) {
+      scale = parseFloat(match[1]);
+      dpr = parseInt(1 / scale);
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content');
+    if (content) {
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    var isAndroid = win.navigator.appVersion.match(/android/gi);
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+    var devicePixelRatio = win.devicePixelRatio;
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3;
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
+        dpr = 2;
+      } else {
+        dpr = 1;
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1;
+    }
+    scale = 1 / dpr;
+  }
+
+  docEl.setAttribute('data-dpr', dpr);
+  if (!metaEl) {
+    metaEl = doc.createElement('meta');
+    metaEl.setAttribute('name', 'viewport');
+    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl);
+    } else {
+      var wrap = doc.createElement('div');
+      wrap.appendChild(metaEl);
+      doc.write(wrap.innerHTML);
+    }
+  }
+
+  function refreshRem(){
+    var width = docEl.getBoundingClientRect().width;
+    if (width / dpr > 540) {
+      width = width * dpr;
+    }
+    var rem = width / 10;
+    docEl.style.fontSize = rem + 'px';
+    flexible.rem = win.rem = rem;
+  }
+
+  win.addEventListener('resize', function() {
+    clearTimeout(tid);
+    tid = setTimeout(refreshRem, 300);
+  }, false);
+  win.addEventListener('pageshow', function(e) {
+    if (e.persisted) {
+      clearTimeout(tid);
+      tid = setTimeout(refreshRem, 300);
+    }
+  }, false);
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px';
+  } else {
+    doc.addEventListener('DOMContentLoaded', function(e) {
+      doc.body.style.fontSize = 12 * dpr + 'px';
+    }, false);
+  }
+
+
+  refreshRem();
+
+  flexible.dpr = win.dpr = dpr;
+  flexible.refreshRem = refreshRem;
+  flexible.rem2px = function(d) {
+    var val = parseFloat(d) * this.rem;
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px';
+    }
+    return val;
+  }
+  flexible.px2rem = function(d) {
+    var val = parseFloat(d) / this.rem;
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem';
+    }
+    return val;
+  }
+
+})(window, window['lib'] || (window['lib'] = {}));
diff --git a/src/main.js b/src/main.js
index 0f8ceaa..a2e4a34 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,14 +7,13 @@ import axios from "axios";
 import QS from "qs";
 import "./iview";
 import "./vcharts";
-import "lib-flexible/flexible";
+import "./flexible";
 import _ from "lodash";
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$qs = QS;
 Vue.prototype.$moment = moment;
 Vue.config.productionTip = false;
-Vue.prototype.$moment = moment;
 Vue.prototype._ = _;
 
 import echarts from "echarts";
diff --git a/src/pages/shop/IncreaseWelcomeList.vue b/src/pages/shop/IncreaseWelcomeList.vue
index ca09543..326ac2e 100644
--- a/src/pages/shop/IncreaseWelcomeList.vue
+++ b/src/pages/shop/IncreaseWelcomeList.vue
@@ -204,6 +204,6 @@ export default {
   height: 30px;
 }
 button:hover {
-  background: inherit !important;
+  /*background: inherit !important;*/
 }
 </style>