@fonixtree/magic-design 2.0.60 → 2.0.61

package/lib/utils/commonUtil.js

@@ -0,0 +1,951 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addZero = exports.addUrlQuery = void 0;
+exports.asyncDataURLtoImage = asyncDataURLtoImage;
+exports.checkFileName = exports.calcLastTime = exports.asyncNextTick = void 0;
+exports.commonFetch = commonFetch;
+exports.convertCount = exports.compatibleNewPageData = void 0;
+exports.convertImageUrl = convertImageUrl;
+exports.convertToRem = void 0;
+exports.copy2ClipBoard = copy2ClipBoard;
+exports.covertKey = covertKey;
+exports.dragSource = exports.downloadBase64Image = void 0;
+exports.ensure = ensure;
+exports.getGAData = exports.getColorRgba = void 0;
+exports.getPageDataMap = getPageDataMap;
+exports.onListenTouch = exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
+exports.pushGA = pushGA;
+exports.pxToRem = void 0;
+exports.shareFacebook = shareFacebook;
+exports.shareLinkedin = shareLinkedin;
+exports.shareTwitter = shareTwitter;
+exports.sleep = sleep;
+exports.styleStringify = void 0;
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _lodash = require("lodash");
+
+var _uuid = require("uuid");
+
+var _qs = _interopRequireDefault(require("qs"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
+  var _ = {
+    label: 0,
+    sent: function sent() {
+      if (t[0] & 1) throw t[1];
+      return t[1];
+    },
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+
+    while (_) {
+      try {
+        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+        if (y = 0, t) op = [op[0] & 2, t.value];
+
+        switch (op[0]) {
+          case 0:
+          case 1:
+            t = op;
+            break;
+
+          case 4:
+            _.label++;
+            return {
+              value: op[1],
+              done: false
+            };
+
+          case 5:
+            _.label++;
+            y = op[1];
+            op = [0];
+            continue;
+
+          case 7:
+            op = _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+
+          default:
+            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+              _ = 0;
+              continue;
+            }
+
+            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+              _.label = op[1];
+              break;
+            }
+
+            if (op[0] === 6 && _.label < t[1]) {
+              _.label = t[1];
+              t = op;
+              break;
+            }
+
+            if (t && _.label < t[2]) {
+              _.label = t[2];
+
+              _.ops.push(op);
+
+              break;
+            }
+
+            if (t[2]) _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+        }
+
+        op = body.call(thisArg, _);
+      } catch (e) {
+        op = [6, e];
+        y = 0;
+      } finally {
+        f = t = 0;
+      }
+    }
+
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+/* eslint-disable no-restricted-syntax */
+
+
+/**
+ * 安全获取数据
+ * @param {function} func 获取函数
+ * @param {any} defaults 默认值
+ */
+function ensure(func, defaults) {
+  try {
+    return func() || defaults;
+  } catch (error) {
+    return defaults;
+  }
+}
+/**
+ * fish fetch
+ * @param {*} url 请求地址
+ * @param {*} data 入参
+ * @param {*} method 请求方法
+ */
+
+
+function commonFetch(url, data, method) {
+  if (data === void 0) {
+    data = {};
+  }
+
+  if (method === void 0) {
+    method = 'GET';
+  }
+
+  var _method = method.toUpperCase();
+
+  return new Promise(function (resolve, reject) {
+    var _a, _b;
+
+    var credentials = localStorage.getItem('credentials');
+    var headers = {
+      'Content-Type': 'application/json; charset=UTF-8',
+      credentials: credentials,
+      accessToken: credentials
+    };
+
+    if (_method === 'GET') {
+      if ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.fetch) {
+        window.magicDesign.fetch(url, {
+          method: 'GET',
+          params: data
+        }).then(function (res) {
+          resolve(res);
+        })["catch"](function (err) {
+          reject(err);
+        });
+        return;
+      }
+
+      _axios["default"].get(url, {
+        params: data,
+        headers: headers
+      }).then(function (res) {
+        resolve(res.data);
+      })["catch"](function (err) {
+        reject(err.response.data);
+      });
+    }
+
+    if (_method === 'POST') {
+      if ((_b = window.magicDesign) === null || _b === void 0 ? void 0 : _b.fetch) {
+        window.magicDesign.fetch(url, {
+          method: 'POST',
+          data: data
+        }).then(function (res) {
+          resolve(res);
+        })["catch"](function (err) {
+          reject(err);
+        });
+        return;
+      }
+
+      _axios["default"].post(url, data, {
+        headers: headers
+      }).then(function (res) {
+        resolve(res.data);
+      })["catch"](function (err) {
+        reject(err.response.data);
+      });
+    }
+  });
+}
+
+var navigateTo = function navigateTo(url) {
+  if (!url) {
+    return;
+  }
+
+  if (url.startsWith('/')) {
+    if (window.magicDesign.history && !window.magicDesign.navigatePreUrl) {
+      window.magicDesign.history.push(url);
+    } else {
+      window.location.href = "" + window.magicDesign.navigatePreUrl + url;
+    }
+  } else {
+    window.location.href = url;
+  }
+};
+
+exports.navigateTo = navigateTo;
+
+var addUrlQuery = function addUrlQuery(url, queryObj) {
+  if (/\?/.test(url)) {
+    return url + '&' + _qs["default"].stringify(queryObj);
+  } else {
+    return url + '?' + _qs["default"].stringify(queryObj);
+  }
+};
+
+exports.addUrlQuery = addUrlQuery;
+
+var dragSource = function dragSource(source, from, to) {
+  var out = source.splice(from, 1);
+
+  if (from > to) {
+    source.splice(to, 0, out[0]);
+  } else {
+    source.splice(to, 0, out[0]);
+  }
+
+  return source;
+}; // 校验文件名称,不能存在 / \ ,
+
+
+exports.dragSource = dragSource;
+
+var checkFileName = function checkFileName(fileName) {
+  if (fileName === undefined || fileName === null || fileName === '') {
+    return false;
+  }
+
+  var reg = /[\\,/]+/;
+
+  if (reg.test(fileName)) {
+    return false;
+  }
+
+  return true;
+}; // 获取浏览器参数
+
+
+exports.checkFileName = checkFileName;
+
+var getUrlParams = function getUrlParams(name) {
+  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", 'i'); // 定义正则表达式
+
+  var r = ensure(function () {
+    return window.location.href.split('?')[1].match(reg);
+  }, null);
+  if (r != null) return unescape(r[2]);
+  return null;
+};
+/**
+ * 补0 函数
+ * @param {*} num 数字
+ */
+
+
+exports.getUrlParams = getUrlParams;
+
+var addZero = function addZero(num) {
+  return String(num).length === 1 ? "0" + String(num) : String(num);
+};
+/**
+ * 计算倒计时
+ * @param {number} lastTime 剩余时间 单位：毫秒
+ * @param {string?} type 'day' 以日为单位
+ * @returns
+ */
+
+
+exports.addZero = addZero;
+
+var calcLastTime = function calcLastTime(lastTime, type) {
+  if (lastTime <= 0) {
+    return 0;
+  }
+
+  var day = ~~(lastTime / 1000 / 60 / 60 / 24);
+  var hours = ~~(lastTime / 1000 / 60 / 60);
+  var mines = ~~(lastTime / 1000 / 60 % 60);
+  var second = ~~(lastTime / 1000 % 60);
+
+  if (type === 'day') {
+    hours = ~~(lastTime / 1000 / 60 / 60 % 24);
+    return day + "DAYS  " + addZero(hours) + ":" + addZero(mines) + ":" + addZero(second);
+  }
+
+  if (type === '_hour') {
+    return hours;
+  }
+
+  if (type === '_mines') {
+    return mines;
+  }
+
+  return addZero(hours) + ":" + addZero(mines) + ":" + addZero(second);
+};
+/**
+ * 获取图片URL
+ * @param {object} imageObj 图片对象
+ * @param {string?} type small | big
+ */
+
+
+exports.calcLastTime = calcLastTime;
+
+function convertImageUrl(imageObj, type) {
+  if (imageObj === void 0) {
+    imageObj = {};
+  }
+
+  if (!imageObj) return '';
+  var typeMap = {
+    small: 'smallImgUrl',
+    big: 'bigImgUrl'
+  }[type];
+  return ensure(function () {
+    return encodeURI(imageObj[typeMap] || imageObj.url);
+  }, '');
+}
+/** 序列化 style对象 */
+
+
+var styleStringify = function styleStringify(style, _a) {
+  var _b = (_a === void 0 ? {} : _a).suffix,
+      suffix = _b === void 0 ? 'px' : _b;
+  var numericProperties = ['height', 'width', 'top', 'left', 'right', 'bottom', 'fontSize', 'maxHeight', 'maxWidth', 'lineHeight', 'margin', 'marginTop', 'marginLeft', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'];
+  return Object.keys(style).reduce(function (styleStr, key) {
+    var value = style[key];
+    if (value == null) return styleStr;
+    var needSuffix = numericProperties.includes(key) && typeof value === 'number';
+    var newName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return "" + styleStr + newName + ": " + value + (needSuffix ? suffix : '') + "; ";
+  }, '');
+};
+/** 十六进制色值转换成rgba */
+
+
+exports.styleStringify = styleStringify;
+
+var getColorRgba = function getColorRgba(sHex, alpha) {
+  if (alpha === void 0) {
+    alpha = 1;
+  }
+
+  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  var sColor = sHex.toLowerCase();
+
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      var sColorNew = '#';
+
+      for (var i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+      }
+
+      sColor = sColorNew;
+    }
+
+    var sColorChange = [];
+
+    for (var i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
+    }
+
+    return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')';
+  } else {
+    return sColor;
+  }
+};
+/** url to image */
+
+
+exports.getColorRgba = getColorRgba;
+
+function asyncDataURLtoImage(dataUrl) {
+  return new Promise(function (resolve) {
+    var img = new Image();
+
+    img.onload = function () {
+      resolve(img);
+    };
+
+    img.onerror = function () {
+      console.error(dataUrl + ' img error');
+      resolve({});
+    };
+
+    img.src = dataUrl;
+  });
+}
+
+var importAsync = function importAsync(fileUrl, type) {
+  return new Promise(function (resolve, reject) {
+    if (/\.js/.test(fileUrl) || type == 'js') {
+      var domNode = document.createElement('script');
+      domNode.src = fileUrl;
+      domNode.addEventListener('load', resolve);
+      domNode.addEventListener('error', reject);
+      document.body.appendChild(domNode);
+    }
+
+    if (/\.css/.test(fileUrl) || type == 'css') {
+      var domNode = document.createElement('link');
+      domNode.rel = 'stylesheet';
+      domNode.type = 'text/css';
+      domNode.href = fileUrl;
+      domNode.addEventListener('load', resolve);
+      domNode.addEventListener('error', reject);
+      document.body.appendChild(domNode);
+    }
+  });
+};
+
+exports.importAsync = importAsync;
+
+function shareFacebook(_a) {
+  var url = _a.url,
+      image = _a.image,
+      title = _a.title,
+      description = _a.description;
+  window.open('http://www.facebook.com/sharer.php' + _qs["default"].stringify({
+    u: url,
+    t: title
+  }, {
+    addQueryPrefix: true
+  }));
+}
+
+function shareTwitter(_a) {
+  var url = _a.url,
+      image = _a.image,
+      title = _a.title,
+      description = _a.description;
+  window.open('http://twitter.com/share' + _qs["default"].stringify({
+    url: url,
+    text: title
+  }, {
+    addQueryPrefix: true
+  }));
+} // export function sharewhatsApp({ url, image, title, description }) {
+//   window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`, '_self');
+// }
+
+
+function shareLinkedin(_a) {
+  var url = _a.url,
+      image = _a.image,
+      title = _a.title,
+      description = _a.description;
+  window.open('http://www.linkedin.com/shareArticle' + _qs["default"].stringify({
+    mini: true,
+    url: url,
+    title: title
+  }, {
+    addQueryPrefix: true
+  }));
+}
+/**
+ * 复制到剪切板
+ * @param {*} text 复制内容
+ */
+
+
+function copy2ClipBoard(text) {
+  var tag = document.createElement('input');
+  tag.setAttribute('id', 'cp_hgz_input');
+  tag.value = text;
+  document.getElementsByTagName('body')[0].appendChild(tag);
+  document.getElementById('cp_hgz_input').select();
+  document.execCommand('copy');
+  document.getElementById('cp_hgz_input').remove();
+}
+
+function getPageDataMap() {
+  var elelmentMap = {};
+  window.magicDesignPageData.childNodes.forEach(function (item) {
+    Object.keys(item).forEach(function (key) {
+      var obj = item[key];
+
+      if (key === 'groupSource') {
+        obj.forEach(function (group) {
+          Object.keys(group).forEach(function (groupKey) {
+            var groupObj = group[groupKey];
+          });
+        });
+      } else {
+        if (obj.id) {
+          elelmentMap[obj.id] = {
+            tempName: '设计器',
+            pageId: window.magicDesignPageData.id,
+            moduleName: obj.type,
+            moduleId: obj.id,
+            groupName: '组名称',
+            groupId: '组id',
+            elementName: '元素名称',
+            elementId: '元素id'
+          };
+        }
+      }
+    });
+  });
+}
+/** GA上报 */
+
+
+function pushGA(data, eventName) {
+  if (eventName === void 0) {
+    eventName = 'designer_click';
+  }
+
+  try {
+    if (window.magicDesign.mode == 'renderer') {
+      var pageId = window.magicDesign.pageId || '';
+      var pageName = window.magicDesign.pageName || '';
+      var eventData = {
+        pageId: pageId,
+        pageName: pageName,
+        moduleId: data.moduleId,
+        moduleName: data.moduleName,
+        groupId: data.groupId,
+        groupName: data.groupName,
+        elementId: data.elementId,
+        elementName: data.elementName
+      };
+      console.log('GA push', eventName, eventData);
+      window.gtag('event', eventName, eventData);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+/** react key 计算 */
+
+
+function covertKey(data, func) {
+  var newData = (0, _lodash.cloneDeep)(data);
+  func(newData);
+  return JSON.stringify(newData);
+}
+
+var nextTick = function nextTick(func, interval, count) {
+  if (interval === void 0) {
+    interval = 100;
+  }
+
+  if (count === void 0) {
+    count = 5;
+  }
+
+  try {
+    func();
+  } catch (error) {
+    if (count == 0) {
+      console.error('nextTick 失败');
+      return;
+    }
+
+    setTimeout(function () {
+      nextTick(func, interval, count - 1);
+    }, interval);
+  }
+};
+
+exports.nextTick = nextTick;
+
+function sleep(timeout) {
+  if (timeout === void 0) {
+    timeout = 3000;
+  }
+
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, timeout);
+  });
+}
+
+var asyncNextTick = function asyncNextTick(asyncFunc, interval, count) {
+  if (interval === void 0) {
+    interval = 100;
+  }
+
+  if (count === void 0) {
+    count = 5;
+  }
+
+  return __awaiter(void 0, void 0, void 0, function () {
+    var error_1;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          _a.trys.push([0, 2,, 5]);
+
+          return [4
+          /*yield*/
+          , asyncFunc()];
+
+        case 1:
+          return [2
+          /*return*/
+          , _a.sent()];
+
+        case 2:
+          error_1 = _a.sent();
+
+          if (count == 0) {
+            console.error('nextTick 失败');
+            return [2
+            /*return*/
+            , null];
+          }
+
+          return [4
+          /*yield*/
+          , sleep(100)];
+
+        case 3:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , asyncNextTick(asyncFunc, interval, count - 1)];
+
+        case 4:
+          return [2
+          /*return*/
+          , _a.sent()];
+
+        case 5:
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+};
+
+exports.asyncNextTick = asyncNextTick;
+
+var convertToRem = function convertToRem(value) {
+  // return value; // PTO项目 解开注释
+  if (window.magicDesign.device === 'pc') {
+    return value + "px";
+  }
+
+  var baseFont = ensure(function () {
+    return window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize.replace('px', '');
+  }, 50);
+  var pxValue = parseFloat(value);
+  var remValue = pxValue / baseFont; // 假设1rem = 50px
+
+  return remValue + "rem";
+};
+/** px to rem */
+
+
+exports.convertToRem = convertToRem;
+
+var pxToRem = function pxToRem(styleObj) {
+  // return styleObj; // PTO项目 解开注释
+  if (window.magicDesign.device === 'pc') {
+    return styleObj;
+  }
+
+  var remObj = {};
+
+  for (var key in styleObj) {
+    if (styleObj.hasOwnProperty(key)) {
+      var value = styleObj[key];
+
+      if (typeof value === 'string' && value.endsWith('px')) {
+        remObj[key] = convertToRem(value.split('px')[0]);
+      } else if (typeof value === 'number') {
+        remObj[key] = ['opacity', 'lineHeight', 'zIndex', 'fontWeight'].includes(key) ? value : convertToRem(value);
+      } else if ((key === 'padding' || key === 'margin') && typeof value === 'string') {
+        var paddingValues = value.split(' ');
+        var remPaddingValues = paddingValues.map(function (paddingValue) {
+          return paddingValue.endsWith('px') ? convertToRem(paddingValue) : paddingValue;
+        });
+        remObj[key] = remPaddingValues.join(' ');
+      } else {
+        remObj[key] = value;
+      }
+    }
+  }
+
+  return remObj;
+};
+/**
+ * 处理新老数据兼容问题
+ * @param pageData 大JSON
+ */
+
+
+exports.pxToRem = pxToRem;
+
+var compatibleNewPageData = function compatibleNewPageData(pageData) {
+  if (pageData.childNodes && pageData.childNodes.length > 0) {
+    pageData.childNodes.forEach(function (child) {
+      // 兼容新功能：banner 轮播的 dots 点 区分pc 移动
+      if (child.type === 'BANNER') {
+        if (!child.setting.dots.color.pc || !child.setting.dots.hoverColor.pc || !child.setting.dots.size.pc) {
+          child.setting.dots = __assign(__assign({}, child.setting.dots), {
+            color: {
+              pc: '#fff',
+              mobile: '#fff'
+            },
+            hoverColor: {
+              pc: '#fff',
+              mobile: '#fff'
+            },
+            size: {
+              pc: 16,
+              mobile: 8
+            },
+            hoverSize: {
+              pc: 16,
+              mobile: 8
+            }
+          });
+        }
+      } // 兼容新开发的功能： video新增播放按钮 的设置
+
+
+      if (child.type === 'VIDEO') {
+        // console.log('--compatibleNewPageData -- video ');
+        child.groupSource.forEach(function (group) {
+          if (!group.playIcon) {
+            group.playIcon = {
+              open: true,
+              parentId: group.id,
+              id: (0, _uuid.v4)(),
+              type: 'PLAY',
+              size: 48,
+              pcSize: 60,
+              iconType: 'light-playicon-01',
+              iconColor: 'Light'
+            };
+          }
+        }); // console.log('--compatibleNewPageData -- video add group.playIcon ', child.groupSource);
+      } // 兼容新功能：SEARCH 新增控制购物车和消息图标的开关
+
+
+      if (child.type === 'SEARCH') {
+        if (!child.content.icon.cartIcon || !child.content.icon.messageIcon) {
+          child.content.icon.cartIcon = {
+            pc: true,
+            mobile: false
+          };
+          child.content.icon.messageIcon = {
+            pc: false,
+            mobile: true
+          };
+        }
+      }
+    });
+  }
+};
+
+exports.compatibleNewPageData = compatibleNewPageData;
+
+var getGAData = function getGAData(data) {
+  var _a;
+
+  return {
+    moduleId: data.id,
+    moduleName: data.moduleIndex + '.' + ((_a = _constants.compInfoMap[data.type]) === null || _a === void 0 ? void 0 : _a.name)
+  };
+};
+
+exports.getGAData = getGAData;
+
+var downloadBase64Image = function downloadBase64Image(base64String, filename) {
+  // 创建一个虚拟的链接元素
+  var link = document.createElement('a');
+  link.href = base64String;
+  link.download = filename; // 模拟点击下载
+
+  link.click();
+};
+
+exports.downloadBase64Image = downloadBase64Image;
+
+var convertCount = function convertCount(value) {
+  var newValue = value;
+
+  if (value >= 1000000) {
+    newValue = Number(value / 1000000).toFixed(1) + "M";
+  } else if (value >= 1000) {
+    newValue = Number(value / 1000).toFixed(1) + "K";
+  }
+
+  return newValue;
+};
+
+exports.convertCount = convertCount;
+
+var onListenTouch = function onListenTouch(cls, leftFunc, rightFunc) {
+  var box = document.querySelector(cls); // 监听对象
+
+  var startTime = ''; // 触摸开始时间
+
+  var startDistanceX = ''; // 触摸开始X轴位置
+
+  var startDistanceY = ''; // 触摸开始Y轴位置
+
+  var endTime = ''; // 触摸结束时间
+
+  var endDistanceX = ''; // 触摸结束X轴位置
+
+  var endDistanceY = ''; // 触摸结束Y轴位置
+
+  var moveTime = ''; // 触摸时间
+
+  var moveDistanceX = ''; // 触摸移动X轴距离
+
+  var moveDistanceY = ''; // 触摸移动Y轴距离
+
+  box.addEventListener('touchstart', function (e) {
+    startTime = new Date().getTime();
+    startDistanceX = e.touches[0].screenX;
+    startDistanceY = e.touches[0].screenY;
+  });
+  box.addEventListener('touchend', function (e) {
+    endTime = new Date().getTime();
+    endDistanceX = e.changedTouches[0].screenX;
+    endDistanceY = e.changedTouches[0].screenY;
+    moveTime = endTime - startTime;
+    moveDistanceX = startDistanceX - endDistanceX;
+    moveDistanceY = startDistanceY - endDistanceY; // 判断滑动距离超过40 且 时间小于500毫秒
+
+    if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
+      // 判断X轴移动的距离是否大于Y轴移动的距离
+      if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
+        // 左右
+        if (moveDistanceX > 0) leftFunc();else rightFunc();
+      } else {
+        // 上下
+        return moveDistanceY > 0 ? 'top' : 'bottom';
+      }
+    }
+  });
+  return null;
+};
+
+exports.onListenTouch = onListenTouch;