From 0029fe5ee0c2543bf029341835f36d90795e6cce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 23 Aug 2018 13:37:31 +0800 Subject: [PATCH 01/51] add form-btn --- src/mip-258-form-btn/README.md | 42 +++++++++++++++++ src/mip-258-form-btn/mip-258-form-btn.js | 57 ++++++++++++++++++++++++ src/mip-258-form-btn/package.json | 12 +++++ 3 files changed, 111 insertions(+) create mode 100644 src/mip-258-form-btn/README.md create mode 100644 src/mip-258-form-btn/mip-258-form-btn.js create mode 100644 src/mip-258-form-btn/package.json diff --git a/src/mip-258-form-btn/README.md b/src/mip-258-form-btn/README.md new file mode 100644 index 000000000..2bdd9505b --- /dev/null +++ b/src/mip-258-form-btn/README.md @@ -0,0 +1,42 @@ +# mip-258-form-btn ajax请求 + +ajax请求 + +标题|内容 +----|---- +类型|通用 +支持布局|N/S +## 示例 + +### 基本使用 + +```html + +
+ + + + +
+ + +``` +### url + +说明：必须是 HTTP(S) 或 // 开头的地址 +必选项: 是 + +### method + +说明：请求方法 +必选项: 是 + +### redirect + +说明：必须是 HTTP(S) 或 // 开头的地址 +必选项: 否 + + + + + diff --git a/src/mip-258-form-btn/mip-258-form-btn.js b/src/mip-258-form-btn/mip-258-form-btn.js new file mode 100644 index 000000000..3effdd9f4 --- /dev/null +++ b/src/mip-258-form-btn/mip-258-form-btn.js @@ -0,0 +1,57 @@ +/** + * @file mip-ajax-button 组件 + * + * @author chen + * @time 2018.8.21 + */ +define(function (require) { + var customElement = require('customElement').create(); + var util = require('util'); + var zepto = require('zepto'); + /** + * [build build函数] + */ + customElement.prototype.build = function () { + var element = this.element; + var url = $(element).attr('url'); + var method = $(element).attr('method'); + + var button = $(element).find('button'); + + var redirect = $(element).attr('redirect'); + + // var m_data = JSON.parse( document.querySelector('script[type="application/json"]').textContent.toString()); + var form = $(element).find('form').get(0); + + var formData = new FormData(form); + + button.click(function(){ + + fetch(url, { + method: method, + mode: "cors", + body: formData, + }).then(function(res) { + res.json().then(function(data){ + console.log(data) + if(data.status == 1) + { + $(element).find('span.success').text(data.msg).show(); + // if(redirect){ + // window.location.; + // } + window.location.reload(); + }else{ + $(element).find('span.error').text(data.msg).show(); + } + }); + + }).catch(function(e) { + //500; + }); + + }); + }; + return customElement; + +}); diff --git a/src/mip-258-form-btn/package.json b/src/mip-258-form-btn/package.json new file mode 100644 index 000000000..99a1851f7 --- /dev/null +++ b/src/mip-258-form-btn/package.json @@ -0,0 +1,12 @@ +{ + "name": "mip-258-form-btn", + "version": "1.0.0", + "description":"按钮ajax请求。", + "author": { + "name": "chen", + "email": "chenweilin@258c.com" + }, + "engines": { + "mip": ">=1.0.0" + } +} \ No newline at end of file From da31ff44bf73746ce80b8948fc3ca5898fc55cd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 23 Aug 2018 14:07:29 +0800 Subject: [PATCH 02/51] =?UTF-8?q?=E4=BF=AE=E6=94=B9RELOAD'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form-btn/README.md | 8 +++++++- src/mip-258-form-btn/mip-258-form-btn.js | 12 ++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/mip-258-form-btn/README.md b/src/mip-258-form-btn/README.md index 2bdd9505b..2b9eb6d7e 100644 --- a/src/mip-258-form-btn/README.md +++ b/src/mip-258-form-btn/README.md @@ -11,7 +11,7 @@ ajax请求 ### 基本使用 ```html - +
@@ -36,6 +36,12 @@ ajax请求 说明：必须是 HTTP(S) 或 // 开头的地址 必选项: 否 +### reload + +说明：string 默认false, 请求成功后,是否页面刷新 +必选项: 否 + + diff --git a/src/mip-258-form-btn/mip-258-form-btn.js b/src/mip-258-form-btn/mip-258-form-btn.js index 3effdd9f4..cb05fcf1e 100644 --- a/src/mip-258-form-btn/mip-258-form-btn.js +++ b/src/mip-258-form-btn/mip-258-form-btn.js @@ -17,6 +17,7 @@ define(function (require) { var method = $(element).attr('method'); var button = $(element).find('button'); + var reload = $(element).attr('reload'); var redirect = $(element).attr('redirect'); @@ -37,10 +38,13 @@ define(function (require) { if(data.status == 1) { $(element).find('span.success').text(data.msg).show(); - // if(redirect){ - // window.location.; - // } - window.location.reload(); + if(redirect){ + window.location.href= redirect; + } + if(reload === 'true'){ + window.location.reload(); + } + }else{ $(element).find('span.error').text(data.msg).show(); } From 50f2aacab42e3d6eb288f996005cdeb163478377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 24 Aug 2018 11:52:32 +0800 Subject: [PATCH 03/51] =?UTF-8?q?=E4=BF=AE=E6=94=B9form-btn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form-btn/README.md | 13 ++---- src/mip-258-form-btn/mip-258-form-btn.js | 59 ++++++++++-------------- 2 files changed, 29 insertions(+), 43 deletions(-) diff --git a/src/mip-258-form-btn/README.md b/src/mip-258-form-btn/README.md index 2b9eb6d7e..6548b6cd8 100644 --- a/src/mip-258-form-btn/README.md +++ b/src/mip-258-form-btn/README.md @@ -12,12 +12,10 @@ ajax请求 ```html - - - - - - + + + + ``` @@ -38,11 +36,10 @@ ajax请求 ### reload -说明：string 默认false, 请求成功后,是否页面刷新 +说明：boolean值 默认false, 请求成功后是否页面刷新 必选项: 否 - diff --git a/src/mip-258-form-btn/mip-258-form-btn.js b/src/mip-258-form-btn/mip-258-form-btn.js index cb05fcf1e..139a74bd3 100644 --- a/src/mip-258-form-btn/mip-258-form-btn.js +++ b/src/mip-258-form-btn/mip-258-form-btn.js @@ -1,3 +1,4 @@ + /** * @file mip-ajax-button 组件 * @@ -6,56 +7,44 @@ */ define(function (require) { var customElement = require('customElement').create(); - var util = require('util'); - var zepto = require('zepto'); - /** - * [build build函数] - */ + var $ = require('zepto'); customElement.prototype.build = function () { var element = this.element; var url = $(element).attr('url'); var method = $(element).attr('method'); - var button = $(element).find('button'); var reload = $(element).attr('reload'); - var redirect = $(element).attr('redirect'); + var input = $(element).find('input'); + var formData = new FormData(); + $.each(input, function (index, item) { + var filed = $(item).attr('name'); + var val = $.trim($(item).val()); + formData.append(filed, val); + }); + button.click(function () { + ajaxBox(); + }); - // var m_data = JSON.parse( document.querySelector('script[type="application/json"]').textContent.toString()); - var form = $(element).find('form').get(0); - - var formData = new FormData(form); - - button.click(function(){ - - fetch(url, { - method: method, - mode: "cors", - body: formData, - }).then(function(res) { - res.json().then(function(data){ - console.log(data) - if(data.status == 1) - { + // tijiao + function ajaxBox() { + fetch(url, {method: method, mode: 'cors', body: formData}).then(function (res) { + res.json().then(function (data) { + if (data.status === 1) { $(element).find('span.success').text(data.msg).show(); - if(redirect){ - window.location.href= redirect; + if (redirect) { + window.top.location.href = redirect; } - if(reload === 'true'){ - window.location.reload(); + if (reload === 'true') { + window.top.location.reload(); } - - }else{ + } else { $(element).find('span.error').text(data.msg).show(); } }); - - }).catch(function(e) { - //500; + }).catch(function (e) { }); - - }); + } }; return customElement; - }); From 8efdfd8208c5a2a919bf44ebb13397c24b29e936 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 27 Aug 2018 17:11:23 +0800 Subject: [PATCH 04/51] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/README.md | 58 ++++ src/mip-product-form/mip-product-form-fn.js | 327 ++++++++++++++++++++ src/mip-product-form/mip-product-form.js | 19 ++ src/mip-product-form/package.json | 12 + 4 files changed, 416 insertions(+) create mode 100644 src/mip-product-form/README.md create mode 100644 src/mip-product-form/mip-product-form-fn.js create mode 100644 src/mip-product-form/mip-product-form.js create mode 100644 src/mip-product-form/package.json diff --git a/src/mip-product-form/README.md b/src/mip-product-form/README.md new file mode 100644 index 000000000..c881fa37d --- /dev/null +++ b/src/mip-product-form/README.md @@ -0,0 +1,58 @@ +# mip-product-form + +fetch请求 + +标题|内容 +----|---- +类型|通用 +支持布局|N/S +## 示例 + +### 基本使用 + +```html + + + +
+ +
+
+ +
+ + +``` +### url + +说明：必须是 HTTP(S) 或 // 开头的地址 +必选项: 是 + +### method +说明：请求方法 ,默认post +必选项: 无 + +### on + +说明：可以被触发的事件 +必选项: 否 +服务端返回的数据格式 : +{ + status: 1, + msg: '', + data: [], +} +status -1 代表服务器响应成功,但处理结果为失败。可以触发使用fail事件 +status 1 代表服务器响应成功,处理结果为成功。可以触发使用success事件 +若服务器异常，则触发error事件 + + + + + + diff --git a/src/mip-product-form/mip-product-form-fn.js b/src/mip-product-form/mip-product-form-fn.js new file mode 100644 index 000000000..5d1d8f05d --- /dev/null +++ b/src/mip-product-form/mip-product-form-fn.js @@ -0,0 +1,327 @@ +/** + * @file mip-form-fn.js + * @description mip-form函数 + * @author miper + */ + +define(function (require) { + var templates = require('templates'); + var util = require('util'); + var viewer = require('viewer'); + var windowInIframe = viewer.isIframed; + var evt; + var REGS = { + EMAIL: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, + PHONE: /^1\d{10}$/, + IDCAR: /^\d{15}|\d{18}$/ + }; + + return { + + /** + * 处理fetch请求逻辑 + * + * @param {string} url 请求url + */ + fetchUrl: function (url) { + var me = this; + util.css([me.successEle, me.failElem, me.errorEle], {display: 'none'}); + var formD = me.ele.querySelector('form'); + var options = { + method: 'POST', + body: new FormData(formD), + // 使用Accept，用来判断异步 + headers: { + 'content-type': 'application/json', + 'Accept': 'application/json' + } + }; + // 判断域名，是否跨域.测试使用 + var localhost = location.host; + if (url.indexOf(localhost) === -1) { + options.mode = 'cors'; + options.credentials = 'omit'; + } + // 数据请求处理 + fetch(url, options).then(function (res) { + if (res.ok) { + return res.json(); + } + }).then(function (response) { + + if (response.status === 1) { + me.successHandle(); + } + if (response.status === -1) { + util.css(me.failEle, {display: 'block'}); + me.renderTpl(me.failEle, {failmsg: response.msg}); + me.failHandle(); + } + // 表单验证不通过 + if (response.status === -2) { + + me.invalidHandle(); + } + }).catch(function (err) { + + me.errorHandle(); + me.fetchReject(err); + }); + }, + + /** + * fetch出错逻辑处理 + * + * @param {Object} err 错误对象 + */ + fetchReject: function (err) { + var me = this; + util.css(me.errorEle, {display: 'block'}); + me.renderTpl(me.errorEle, err); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 模板父节点 + * @param {Object} data 模板渲染数据 + */ + renderTpl: function (ele, data) { + var me = this; + templates.render(ele, data).then(function (html) { + var tempTarget = me.tempHTML(ele); + tempTarget.innerHTML = html; + }); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 渲染后模板父节点 + * @return {HTMLElement} target 新建DOM节点 + */ + + tempHTML: function (ele) { + ele = ele || document; + var target = ele.querySelector('[mip-mustache-rendered]'); + if (!target) { + target = util.dom.create('
'); + ele.appendChild(target); + } + return target; + }, + + /** + * createDom 创建 form 节点 + * + * @param {HTMLElement} element 组件节点 + */ + createDom: function (element) { + var me = this; + var url = element.getAttribute('url'); + var target = element.getAttribute('target'); + var form = document.createElement('form'); + var method = (element.getAttribute('method') || 'GET').toUpperCase(); + form.action = url; + form.method = method; + target = target ? target : '_blank'; + form.target = viewer.isIframed && target !== '_blank' ? '_top' : target; + element.appendChild(form); + util.dom.insert(form, element.children); + + // 按钮提交 + var curEles = element.querySelectorAll('form'); + Array.prototype.forEach.call(curEles, function (item) { + item.addEventListener('submit', function (event) { + event.preventDefault(); + evt = event; + me.onSubmit(element, event); + }); + }); + + // 部分浏览器回车不触发submit, + element.addEventListener('keydown', function (event) { + if (event.keyCode === 13) { + // 为了使余下浏览器不多次触发submit, 使用prevent + evt = event; + event.preventDefault(); + me.onSubmit(this); + } + }, false); + }, + + /** + * 事件通信 + * + * @description 在 input focus 或 blur 时向iframe外层文档发送数据，iframe外层文档返回设置预览头部为 absolute + * @param {Object} event 事件对象 + */ + sendFormMessage: function (event) { + if (windowInIframe) { + // mip_video_jump 为写在外层的承接方法 + viewer.sendMessage('input-' + event, {}); + } + }, + + /** + * 事件发送处理 + * + * @description 给 input 绑定事件，向 SF 发送数据，为了解决 ios 的 UC 浏览器在iframe外层文档悬浮头部 fixed 位置混乱问题 + * @param {HTMLElement} element mip 组件标签 + */ + initMessageEvents: function (element) { + var me = this; + var inputAll = element.querySelectorAll('input'); + Array.prototype.forEach.call(inputAll, function (item, index) { + item.addEventListener('focus', function () { + me.sendFormMessage('focus'); + }, false); + + item.addEventListener('blur', function () { + me.sendFormMessage('blur'); + }, false); + }); + }, + + /** + * 文案格式验证 + * + * @param {string} type 验证类型 + * @param {string} value 需要验证的文案 + * @return {boolean} 是否符合自定义校验 + */ + verification: function (type, value) { + return (type === 'must') ? !(value === '') : REGS[type.toUpperCase()].test(value); + }, + + /** + * 点击提交按钮事件处理函数 + * + * @param {HTMLElement} element form节点 + */ + onSubmit: function (element) { + var me = this; + var preventSubmit = false; + var inputs = element.querySelectorAll('input, textarea, select'); + var url = element.getAttribute('url') || ''; + var getUrl = url.toLowerCase(); + var isHttp = getUrl.match('http://'); + var valueJson = ''; + var hasFetch = element.getAttribute('fetch-url') || ''; + me.method = (element.getAttribute('method') || 'GET').toUpperCase(); + var isGet = me.method === 'GET'; + this.ele = element; + this.successEle = element.querySelector('[submit-success]'); + this.failEle = element.querySelector('[submit-fail]'); + this.errorEle = element.querySelector('[submit-error]'); + // 执行提交句柄 + me.submitHandle(); + // 校验输入内容是否合法 + Array.prototype.forEach.call(inputs, function (item) { + var type = item.getAttribute('validatetype'); + var target = item.getAttribute('validatetarget'); + var regval = item.getAttribute('validatereg'); + var value = item.value; + var reg; + + if (item.type === 'submit') { + return; + } + else if (item.type === 'checkbox' || item.type === 'radio') { + value = item.checked ? item.value : ''; + } + + valueJson += '&' + item.name + '=' + value; + if (type) { + if (regval) { + reg = value === '' ? false : (new RegExp(regval)).test(value); + } + else { + reg = me.verification(type, value); + } + util.css(element.querySelectorAll('div[target="' + target + '"]'), + {display: (!reg ? 'block' : 'none')}); + preventSubmit = !reg ? true : preventSubmit; + } + }); + + if (preventSubmit) { + return; + } + + // 在iframe下使用mibm-jumplink，跳转显示手百框。 http-GET请求交给外层跳转 + if (window.parent !== window && isHttp && isGet) { + var messageUrl = ''; + if (getUrl.match('\\?')) { + // eg. getUrl == 'http://www.mipengine.org?we=123' + messageUrl = getUrl + valueJson; + } + else { + // eg. getUrl == 'http://www.mipengine.org' + valueJson = valueJson.substring(1); + messageUrl = getUrl + '?' + valueJson; + } + var message = { + event: 'mibm-jumplink', + data: { + url: messageUrl + } + }; + window.parent.postMessage(message, '*'); + } + else if (hasFetch.trim()) { + me.fetchUrl(hasFetch); + } + else { + // https请求 或 post请求 或 非iframe下不做处理 + element.getElementsByTagName('form')[0].submit(); + } + }, + + /** + * 提交时的事件 + * + * @param {HTMLElement} element form节点 + */ + submitHandle: function () { + viewer.eventAction.execute('submit', evt.target, evt); + }, + + /** + * 提交成功调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + successHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('success', evt.target, evt); + }, + + /** + * 提交成功，但处理结果为失败，调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + failHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('fail', evt.target, evt); + }, + + + /** + * 提交失败调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + errorHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('error', evt.target, evt); + } + }; +}); diff --git a/src/mip-product-form/mip-product-form.js b/src/mip-product-form/mip-product-form.js new file mode 100644 index 000000000..b8863e4ac --- /dev/null +++ b/src/mip-product-form/mip-product-form.js @@ -0,0 +1,19 @@ + +/** + * @file mip-ajax-button 组件 + * + * @author chen + * @time 2018.8.21 + */ +define(function (require) { + var customElement = require('customElement').create(); + var form = require('./mip-product-form-fn'); + customElement.prototype.build = function () { + var element = this.element; + form.createDom(element); + + + form.initMessageEvents(element); + }; + return customElement; +}); diff --git a/src/mip-product-form/package.json b/src/mip-product-form/package.json new file mode 100644 index 000000000..64f08a470 --- /dev/null +++ b/src/mip-product-form/package.json @@ -0,0 +1,12 @@ +{ + "name": "mip-product-form", + "version": "1.0.0", + "description":"自定义表单", + "author": { + "name": "chen", + "email": "chenweilin@258.com" + }, + "engines": { + "mip": ">=1.0.0" + } +} \ No newline at end of file From dc01f018aebc6deaeb4de934612987f35434b499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 27 Aug 2018 17:27:07 +0800 Subject: [PATCH 05/51] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/README.md | 31 ++++++++++- src/mip-product-form/mip-product-form.less | 65 ++++++++++++++++++++++ 2 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 src/mip-product-form/mip-product-form.less diff --git a/src/mip-product-form/README.md b/src/mip-product-form/README.md index c881fa37d..45d8c2bd7 100644 --- a/src/mip-product-form/README.md +++ b/src/mip-product-form/README.md @@ -13,7 +13,7 @@ fetch请求 ```html - + + + +
    + + +
  • 报价产品：我的产品
    • +
  • + 元/件 +
    请填写正确的金额
    +
    • +
  • + +
    请填写正确的手机号
    +
    • +
  • + +
    联系人为2-8位数字字母或中文
    +
    • +
+
+ +
+ + + ``` ### url diff --git a/src/mip-product-form/mip-product-form.less b/src/mip-product-form/mip-product-form.less new file mode 100644 index 000000000..cc5c1f84e --- /dev/null +++ b/src/mip-product-form/mip-product-form.less @@ -0,0 +1,65 @@ +mip-product-form { + position: relative; + #mip-form-cross { + position: absolute; + display: block; + padding: 6px; + width: 20px; + height: 20px; + right: 0; + background: url(//m.baidu.com/static/search/clear.png) no-repeat center; + z-index: 100; + background-size: 100% 100%; + background-origin: content-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); + tap-highlight-color: rgba(0, 0, 0, 0.4) + } + input, textarea, select { + border: 1px solid #f1f1f1; + padding: 6px; + display: block; + box-sizing: border-box; + -webkit-box-sizing: border-box; + resize: none; + font-size: 16px; + } + input[type='text'], + input[type='input'], + input[type='datetime'], + input[type='email'], + input[type='number'], + input[type='tel'], + input[type='url'] { + padding-right: 30px; + + } + form { + position: relative; + } + input[type='radio'] { + display: inline + } + label { + display: block + } + div { + display: none; + color: #ec1f5c; + font-size: 12px; + text-align: left; + padding: 0 10% 0 3% + } + div[mip-mustache-rendered] { + display: block; + } + input[type='submit'] { + border: 1px solid #f1f1f1; + border-radius: 5px; + color: #333; + background-color: #d8d7d7 + } + [submit-success], [submit-fail], [submit-error] { + display: none; + } +} + From 9779d9372c44a1e731c2af5000eea3857cf796ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 15:12:27 +0800 Subject: [PATCH 06/51] =?UTF-8?q?=E7=94=9F=E6=88=90=E7=8E=AF=E5=A2=83?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/README.md | 34 ++---- src/mip-product-form/mip-product-form-fn.js | 109 ++++++++++---------- src/mip-product-form/mip-product-form.less | 8 +- 3 files changed, 72 insertions(+), 79 deletions(-) diff --git a/src/mip-product-form/README.md b/src/mip-product-form/README.md index 45d8c2bd7..cf5d83bf9 100644 --- a/src/mip-product-form/README.md +++ b/src/mip-product-form/README.md @@ -13,46 +13,30 @@ fetch请求 ```html - - - +
    - - -
  • 报价产品：我的产品
    • + + +
  • 报价产品：产品名
  • - 元/件 + 元/件
    请填写正确的金额
  • - +
    请填写正确的手机号
  • - +
    联系人为2-8位数字字母或中文
- - + ``` ### url diff --git a/src/mip-product-form/mip-product-form-fn.js b/src/mip-product-form/mip-product-form-fn.js index 5d1d8f05d..94f8d52e9 100644 --- a/src/mip-product-form/mip-product-form-fn.js +++ b/src/mip-product-form/mip-product-form-fn.js @@ -5,12 +5,12 @@ */ define(function (require) { - var templates = require('templates'); - var util = require('util'); - var viewer = require('viewer'); - var windowInIframe = viewer.isIframed; - var evt; - var REGS = { + let templates = require('templates'); + let util = require('util'); + let viewer = require('viewer'); + let windowInIframe = viewer.isIframed; + let evt; + let REGS = { EMAIL: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, PHONE: /^1\d{10}$/, IDCAR: /^\d{15}|\d{18}$/ @@ -23,13 +23,18 @@ define(function (require) { * * @param {string} url 请求url */ - fetchUrl: function (url) { - var me = this; + fetchUrl(url) { + let me = this; util.css([me.successEle, me.failElem, me.errorEle], {display: 'none'}); - var formD = me.ele.querySelector('form'); - var options = { + let formD = me.ele.querySelector('form'); + let formData = new FormData(formD); + let data = {}; + for (let item of formData.entries()) { + data[item[0]] = item[1]; + } + let options = { method: 'POST', - body: new FormData(formD), + body: JSON.stringify(data), // 使用Accept，用来判断异步 headers: { 'content-type': 'application/json', @@ -37,7 +42,7 @@ define(function (require) { } }; // 判断域名，是否跨域.测试使用 - var localhost = location.host; + let localhost = location.host; if (url.indexOf(localhost) === -1) { options.mode = 'cors'; options.credentials = 'omit'; @@ -74,8 +79,8 @@ define(function (require) { * * @param {Object} err 错误对象 */ - fetchReject: function (err) { - var me = this; + fetchReject(err) { + let me = this; util.css(me.errorEle, {display: 'block'}); me.renderTpl(me.errorEle, err); }, @@ -86,10 +91,10 @@ define(function (require) { * @param {HTMLElement} ele 模板父节点 * @param {Object} data 模板渲染数据 */ - renderTpl: function (ele, data) { - var me = this; + renderTpl(ele, data) { + let me = this; templates.render(ele, data).then(function (html) { - var tempTarget = me.tempHTML(ele); + let tempTarget = me.tempHTML(ele); tempTarget.innerHTML = html; }); }, @@ -101,9 +106,9 @@ define(function (require) { * @return {HTMLElement} target 新建DOM节点 */ - tempHTML: function (ele) { + tempHTML(ele) { ele = ele || document; - var target = ele.querySelector('[mip-mustache-rendered]'); + let target = ele.querySelector('[mip-mustache-rendered]'); if (!target) { target = util.dom.create('
'); ele.appendChild(target); @@ -116,12 +121,12 @@ define(function (require) { * * @param {HTMLElement} element 组件节点 */ - createDom: function (element) { - var me = this; - var url = element.getAttribute('url'); - var target = element.getAttribute('target'); - var form = document.createElement('form'); - var method = (element.getAttribute('method') || 'GET').toUpperCase(); + createDom(element) { + let me = this; + let url = element.getAttribute('url'); + let target = element.getAttribute('target'); + let form = document.createElement('form'); + let method = (element.getAttribute('method') || 'GET').toUpperCase(); form.action = url; form.method = method; target = target ? target : '_blank'; @@ -130,7 +135,7 @@ define(function (require) { util.dom.insert(form, element.children); // 按钮提交 - var curEles = element.querySelectorAll('form'); + let curEles = element.querySelectorAll('form'); Array.prototype.forEach.call(curEles, function (item) { item.addEventListener('submit', function (event) { event.preventDefault(); @@ -156,7 +161,7 @@ define(function (require) { * @description 在 input focus 或 blur 时向iframe外层文档发送数据，iframe外层文档返回设置预览头部为 absolute * @param {Object} event 事件对象 */ - sendFormMessage: function (event) { + sendFormMessage(event) { if (windowInIframe) { // mip_video_jump 为写在外层的承接方法 viewer.sendMessage('input-' + event, {}); @@ -169,9 +174,9 @@ define(function (require) { * @description 给 input 绑定事件，向 SF 发送数据，为了解决 ios 的 UC 浏览器在iframe外层文档悬浮头部 fixed 位置混乱问题 * @param {HTMLElement} element mip 组件标签 */ - initMessageEvents: function (element) { - var me = this; - var inputAll = element.querySelectorAll('input'); + initMessageEvents(element) { + let me = this; + let inputAll = element.querySelectorAll('input'); Array.prototype.forEach.call(inputAll, function (item, index) { item.addEventListener('focus', function () { me.sendFormMessage('focus'); @@ -190,7 +195,7 @@ define(function (require) { * @param {string} value 需要验证的文案 * @return {boolean} 是否符合自定义校验 */ - verification: function (type, value) { + verification(type, value) { return (type === 'must') ? !(value === '') : REGS[type.toUpperCase()].test(value); }, @@ -199,17 +204,17 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - onSubmit: function (element) { - var me = this; - var preventSubmit = false; - var inputs = element.querySelectorAll('input, textarea, select'); - var url = element.getAttribute('url') || ''; - var getUrl = url.toLowerCase(); - var isHttp = getUrl.match('http://'); - var valueJson = ''; - var hasFetch = element.getAttribute('fetch-url') || ''; + onSubmit(element) { + let me = this; + let preventSubmit = false; + let inputs = element.querySelectorAll('input, textarea, select'); + let url = element.getAttribute('url') || ''; + let getUrl = url.toLowerCase(); + let isHttp = getUrl.match('http://'); + let valueJson = ''; + let hasFetch = element.getAttribute('fetch-url') || ''; me.method = (element.getAttribute('method') || 'GET').toUpperCase(); - var isGet = me.method === 'GET'; + let isGet = me.method === 'GET'; this.ele = element; this.successEle = element.querySelector('[submit-success]'); this.failEle = element.querySelector('[submit-fail]'); @@ -218,11 +223,11 @@ define(function (require) { me.submitHandle(); // 校验输入内容是否合法 Array.prototype.forEach.call(inputs, function (item) { - var type = item.getAttribute('validatetype'); - var target = item.getAttribute('validatetarget'); - var regval = item.getAttribute('validatereg'); - var value = item.value; - var reg; + let type = item.getAttribute('validatetype'); + let target = item.getAttribute('validatetarget'); + let regval = item.getAttribute('validatereg'); + let value = item.value; + let reg; if (item.type === 'submit') { return; @@ -251,7 +256,7 @@ define(function (require) { // 在iframe下使用mibm-jumplink，跳转显示手百框。 http-GET请求交给外层跳转 if (window.parent !== window && isHttp && isGet) { - var messageUrl = ''; + let messageUrl = ''; if (getUrl.match('\\?')) { // eg. getUrl == 'http://www.mipengine.org?we=123' messageUrl = getUrl + valueJson; @@ -261,7 +266,7 @@ define(function (require) { valueJson = valueJson.substring(1); messageUrl = getUrl + '?' + valueJson; } - var message = { + let message = { event: 'mibm-jumplink', data: { url: messageUrl @@ -283,7 +288,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - submitHandle: function () { + submitHandle() { viewer.eventAction.execute('submit', evt.target, evt); }, @@ -292,7 +297,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - successHandle: function () { + successHandle() { if (!evt) { return; } @@ -304,7 +309,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - failHandle: function () { + failHandle() { if (!evt) { return; } @@ -317,7 +322,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - errorHandle: function () { + errorHandle() { if (!evt) { return; } diff --git a/src/mip-product-form/mip-product-form.less b/src/mip-product-form/mip-product-form.less index cc5c1f84e..651ea2662 100644 --- a/src/mip-product-form/mip-product-form.less +++ b/src/mip-product-form/mip-product-form.less @@ -14,7 +14,9 @@ mip-product-form { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); tap-highlight-color: rgba(0, 0, 0, 0.4) } - input, textarea, select { + input, + textarea, + select { border: 1px solid #f1f1f1; padding: 6px; display: block; @@ -58,7 +60,9 @@ mip-product-form { color: #333; background-color: #d8d7d7 } - [submit-success], [submit-fail], [submit-error] { + [submit-success], + [submit-fail], + [submit-error] { display: none; } } From b71afa3d32b3753c7c8f4e1fbe4b415ddb775351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 15:19:58 +0800 Subject: [PATCH 07/51] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/mip-product-form.less | 28 ++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/mip-product-form/mip-product-form.less b/src/mip-product-form/mip-product-form.less index 651ea2662..59b45ec1f 100644 --- a/src/mip-product-form/mip-product-form.less +++ b/src/mip-product-form/mip-product-form.less @@ -14,8 +14,24 @@ mip-product-form { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); tap-highlight-color: rgba(0, 0, 0, 0.4) } - input, - textarea, + input { + border: 1px solid #f1f1f1; + padding: 6px; + display: block; + box-sizing: border-box; + -webkit-box-sizing: border-box; + resize: none; + font-size: 16px; + } + textarea { + border: 1px solid #f1f1f1; + padding: 6px; + display: block; + box-sizing: border-box; + -webkit-box-sizing: border-box; + resize: none; + font-size: 16px; + } select { border: 1px solid #f1f1f1; padding: 6px; @@ -60,8 +76,12 @@ mip-product-form { color: #333; background-color: #d8d7d7 } - [submit-success], - [submit-fail], + [submit-success] { + display: none; + } + [submit-fail] { + display: none; + } [submit-error] { display: none; } From 87cbc2da3a4a847e34e65adbb5323b50e82c324b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 15:23:31 +0800 Subject: [PATCH 08/51] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/mip-product-form.less | 28 ++++------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/src/mip-product-form/mip-product-form.less b/src/mip-product-form/mip-product-form.less index 59b45ec1f..651ea2662 100644 --- a/src/mip-product-form/mip-product-form.less +++ b/src/mip-product-form/mip-product-form.less @@ -14,24 +14,8 @@ mip-product-form { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); tap-highlight-color: rgba(0, 0, 0, 0.4) } - input { - border: 1px solid #f1f1f1; - padding: 6px; - display: block; - box-sizing: border-box; - -webkit-box-sizing: border-box; - resize: none; - font-size: 16px; - } - textarea { - border: 1px solid #f1f1f1; - padding: 6px; - display: block; - box-sizing: border-box; - -webkit-box-sizing: border-box; - resize: none; - font-size: 16px; - } + input, + textarea, select { border: 1px solid #f1f1f1; padding: 6px; @@ -76,12 +60,8 @@ mip-product-form { color: #333; background-color: #d8d7d7 } - [submit-success] { - display: none; - } - [submit-fail] { - display: none; - } + [submit-success], + [submit-fail], [submit-error] { display: none; } From 6d23c9f4b7499f74d25333bceecab499dc086b63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 16:05:00 +0800 Subject: [PATCH 09/51] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/README.md | 31 ++++++++++++------------ src/mip-product-form/mip-product-form.js | 9 +++++++ 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/mip-product-form/README.md b/src/mip-product-form/README.md index cf5d83bf9..4d627daa4 100644 --- a/src/mip-product-form/README.md +++ b/src/mip-product-form/README.md @@ -13,7 +13,8 @@ fetch请求 ```html - + +
    @@ -44,23 +45,23 @@ fetch请求 说明：必须是 HTTP(S) 或 // 开头的地址 必选项: 是 -### method -说明：请求方法 ,默认post -必选项: 无 +### method +说明：请求方法 ,默认post +必选项: 无 ### on -说明：可以被触发的事件 -必选项: 否 -服务端返回的数据格式 : -{ - status: 1, - msg: '', - data: [], -} -status -1 代表服务器响应成功,但处理结果为失败。可以触发使用fail事件 -status 1 代表服务器响应成功,处理结果为成功。可以触发使用success事件 -若服务器异常，则触发error事件 +说明：可以被触发的事件 +必选项: 否 +服务端返回的数据格式 : +{ + status: 1, + msg: '', + data: [], +} +status -1 代表服务器响应成功,但处理结果为失败。可以触发使用fail事件 +status 1 代表服务器响应成功,处理结果为成功。可以触发使用success事件 +若服务器异常，则触发error事件 diff --git a/src/mip-product-form/mip-product-form.js b/src/mip-product-form/mip-product-form.js index b8863e4ac..69d1cc18b 100644 --- a/src/mip-product-form/mip-product-form.js +++ b/src/mip-product-form/mip-product-form.js @@ -15,5 +15,14 @@ define(function (require) { form.initMessageEvents(element); }; + customElement.prototype.firstInviewCallback = function () { + this.addEventAction('reload', function(event, str) { + // 页面刷新操作 + srt = str ? 500 : praseInt(str); + setTimeout(function () { + window.top.location.reload(); + }, str); + }); + }; return customElement; }); From d443fbccecff3c2c1d9cd07133cbeb3394ef63d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 16:06:22 +0800 Subject: [PATCH 10/51] =?UTF-8?q?=E4=BF=AE=E6=94=B9readme=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mip-product-form/package.json b/src/mip-product-form/package.json index 64f08a470..b6f3ff341 100644 --- a/src/mip-product-form/package.json +++ b/src/mip-product-form/package.json @@ -1,6 +1,6 @@ { "name": "mip-product-form", - "version": "1.0.0", + "version": "1.0.1", "description":"自定义表单", "author": { "name": "chen", From fdb1a44a3dba459f19992332559b84f77b3d9b34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 16:23:34 +0800 Subject: [PATCH 11/51] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=A0=BC=E5=BC=8F=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/mip-product-form-fn.js | 2 +- src/mip-product-form/mip-product-form.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/mip-product-form/mip-product-form-fn.js b/src/mip-product-form/mip-product-form-fn.js index 94f8d52e9..4628fa2fd 100644 --- a/src/mip-product-form/mip-product-form-fn.js +++ b/src/mip-product-form/mip-product-form-fn.js @@ -1,7 +1,7 @@ /** * @file mip-form-fn.js * @description mip-form函数 - * @author miper + * @author chen */ define(function (require) { diff --git a/src/mip-product-form/mip-product-form.js b/src/mip-product-form/mip-product-form.js index 69d1cc18b..b3f2c9457 100644 --- a/src/mip-product-form/mip-product-form.js +++ b/src/mip-product-form/mip-product-form.js @@ -1,6 +1,6 @@ /** - * @file mip-ajax-button 组件 + * @file mip-button-form 组件 * * @author chen * @time 2018.8.21 @@ -16,11 +16,11 @@ define(function (require) { form.initMessageEvents(element); }; customElement.prototype.firstInviewCallback = function () { - this.addEventAction('reload', function(event, str) { + this.addEventAction('reload', function (event, str) { // 页面刷新操作 - srt = str ? 500 : praseInt(str); + str = str ? 500 : parseInt(str, 10); setTimeout(function () { - window.top.location.reload(); + window.top.location.reload(); }, str); }); }; From 94d98b765a116ac993279e800aa3d2e5b59fe46e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 17:29:11 +0800 Subject: [PATCH 12/51] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BAes5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/mip-product-form-fn.js | 127 +++++++++++--------- 1 file changed, 71 insertions(+), 56 deletions(-) diff --git a/src/mip-product-form/mip-product-form-fn.js b/src/mip-product-form/mip-product-form-fn.js index 4628fa2fd..5a74bbacb 100644 --- a/src/mip-product-form/mip-product-form-fn.js +++ b/src/mip-product-form/mip-product-form-fn.js @@ -5,12 +5,12 @@ */ define(function (require) { - let templates = require('templates'); - let util = require('util'); - let viewer = require('viewer'); - let windowInIframe = viewer.isIframed; - let evt; - let REGS = { + var templates = require('templates'); + var util = require('util'); + var viewer = require('viewer'); + var windowInIframe = viewer.isIframed; + var evt; + var REGS = { EMAIL: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, PHONE: /^1\d{10}$/, IDCAR: /^\d{15}|\d{18}$/ @@ -23,26 +23,32 @@ define(function (require) { * * @param {string} url 请求url */ - fetchUrl(url) { - let me = this; + fetchUrl: function (url) { + var me = this; util.css([me.successEle, me.failElem, me.errorEle], {display: 'none'}); - let formD = me.ele.querySelector('form'); - let formData = new FormData(formD); - let data = {}; - for (let item of formData.entries()) { - data[item[0]] = item[1]; + var formD = me.ele.querySelector('form'); + var data = {}; + for (var i = 0; i < formD.elements.length; i++) { + var item = formD.elements[i]; + // 获取表单数据类型元素 + if (['INPUT', 'SELECT', 'TEXTAREA'].indexOf(item.tagName) !== -1) { + var key = me.trim(item.name); + var val = me.trim(item.value); + data[key] = val; + } } - let options = { + + var options = { method: 'POST', body: JSON.stringify(data), // 使用Accept，用来判断异步 headers: { - 'content-type': 'application/json', + 'content-type': 'application/json;charset=UTF-8', 'Accept': 'application/json' } }; // 判断域名，是否跨域.测试使用 - let localhost = location.host; + var localhost = location.host; if (url.indexOf(localhost) === -1) { options.mode = 'cors'; options.credentials = 'omit'; @@ -74,13 +80,22 @@ define(function (require) { }); }, + /** + * trim 字符串前后空格 + * @param {string} str 需要trim的字符串 + * @return {string} 过滤完成的字符串 + */ + trim: function (str) { + return str.replace(/(^\s*)|(\s*$)/g, ''); + }, + /** * fetch出错逻辑处理 * * @param {Object} err 错误对象 */ - fetchReject(err) { - let me = this; + fetchReject: function (err) { + var me = this; util.css(me.errorEle, {display: 'block'}); me.renderTpl(me.errorEle, err); }, @@ -91,10 +106,10 @@ define(function (require) { * @param {HTMLElement} ele 模板父节点 * @param {Object} data 模板渲染数据 */ - renderTpl(ele, data) { - let me = this; + renderTpl: function (ele, data) { + var me = this; templates.render(ele, data).then(function (html) { - let tempTarget = me.tempHTML(ele); + var tempTarget = me.tempHTML(ele); tempTarget.innerHTML = html; }); }, @@ -106,9 +121,9 @@ define(function (require) { * @return {HTMLElement} target 新建DOM节点 */ - tempHTML(ele) { + tempHTML: function (ele) { ele = ele || document; - let target = ele.querySelector('[mip-mustache-rendered]'); + var target = ele.querySelector('[mip-mustache-rendered]'); if (!target) { target = util.dom.create('
    '); ele.appendChild(target); @@ -121,12 +136,12 @@ define(function (require) { * * @param {HTMLElement} element 组件节点 */ - createDom(element) { - let me = this; - let url = element.getAttribute('url'); - let target = element.getAttribute('target'); - let form = document.createElement('form'); - let method = (element.getAttribute('method') || 'GET').toUpperCase(); + createDom: function (element) { + var me = this; + var url = element.getAttribute('url'); + var target = element.getAttribute('target'); + var form = document.createElement('form'); + var method = (element.getAttribute('method') || 'GET').toUpperCase(); form.action = url; form.method = method; target = target ? target : '_blank'; @@ -135,7 +150,7 @@ define(function (require) { util.dom.insert(form, element.children); // 按钮提交 - let curEles = element.querySelectorAll('form'); + var curEles = element.querySelectorAll('form'); Array.prototype.forEach.call(curEles, function (item) { item.addEventListener('submit', function (event) { event.preventDefault(); @@ -161,7 +176,7 @@ define(function (require) { * @description 在 input focus 或 blur 时向iframe外层文档发送数据，iframe外层文档返回设置预览头部为 absolute * @param {Object} event 事件对象 */ - sendFormMessage(event) { + sendFormMessage: function (event) { if (windowInIframe) { // mip_video_jump 为写在外层的承接方法 viewer.sendMessage('input-' + event, {}); @@ -174,9 +189,9 @@ define(function (require) { * @description 给 input 绑定事件，向 SF 发送数据，为了解决 ios 的 UC 浏览器在iframe外层文档悬浮头部 fixed 位置混乱问题 * @param {HTMLElement} element mip 组件标签 */ - initMessageEvents(element) { - let me = this; - let inputAll = element.querySelectorAll('input'); + initMessageEvents: function (element) { + var me = this; + var inputAll = element.querySelectorAll('input'); Array.prototype.forEach.call(inputAll, function (item, index) { item.addEventListener('focus', function () { me.sendFormMessage('focus'); @@ -195,7 +210,7 @@ define(function (require) { * @param {string} value 需要验证的文案 * @return {boolean} 是否符合自定义校验 */ - verification(type, value) { + verification: function (type, value) { return (type === 'must') ? !(value === '') : REGS[type.toUpperCase()].test(value); }, @@ -204,17 +219,17 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - onSubmit(element) { - let me = this; - let preventSubmit = false; - let inputs = element.querySelectorAll('input, textarea, select'); - let url = element.getAttribute('url') || ''; - let getUrl = url.toLowerCase(); - let isHttp = getUrl.match('http://'); - let valueJson = ''; - let hasFetch = element.getAttribute('fetch-url') || ''; + onSubmit: function (element) { + var me = this; + var preventSubmit = false; + var inputs = element.querySelectorAll('input, textarea, select'); + var url = element.getAttribute('url') || ''; + var getUrl = url.toLowerCase(); + var isHttp = getUrl.match('http://'); + var valueJson = ''; + var hasFetch = element.getAttribute('fetch-url') || ''; me.method = (element.getAttribute('method') || 'GET').toUpperCase(); - let isGet = me.method === 'GET'; + var isGet = me.method === 'GET'; this.ele = element; this.successEle = element.querySelector('[submit-success]'); this.failEle = element.querySelector('[submit-fail]'); @@ -223,11 +238,11 @@ define(function (require) { me.submitHandle(); // 校验输入内容是否合法 Array.prototype.forEach.call(inputs, function (item) { - let type = item.getAttribute('validatetype'); - let target = item.getAttribute('validatetarget'); - let regval = item.getAttribute('validatereg'); - let value = item.value; - let reg; + var type = item.getAttribute('validatetype'); + var target = item.getAttribute('validatetarget'); + var regval = item.getAttribute('validatereg'); + var value = item.value; + var reg; if (item.type === 'submit') { return; @@ -256,7 +271,7 @@ define(function (require) { // 在iframe下使用mibm-jumplink，跳转显示手百框。 http-GET请求交给外层跳转 if (window.parent !== window && isHttp && isGet) { - let messageUrl = ''; + var messageUrl = ''; if (getUrl.match('\\?')) { // eg. getUrl == 'http://www.mipengine.org?we=123' messageUrl = getUrl + valueJson; @@ -266,7 +281,7 @@ define(function (require) { valueJson = valueJson.substring(1); messageUrl = getUrl + '?' + valueJson; } - let message = { + var message = { event: 'mibm-jumplink', data: { url: messageUrl @@ -288,7 +303,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - submitHandle() { + submitHandle: function () { viewer.eventAction.execute('submit', evt.target, evt); }, @@ -297,7 +312,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - successHandle() { + successHandle: function () { if (!evt) { return; } @@ -309,7 +324,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - failHandle() { + failHandle: function () { if (!evt) { return; } @@ -322,7 +337,7 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - errorHandle() { + errorHandle: function () { if (!evt) { return; } From 52e844b0e3f5cc47363b35ecd0d18bf662fc8b4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 28 Aug 2018 17:49:27 +0800 Subject: [PATCH 13/51] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E6=95=B0=E6=8D=AEcontenttype?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/README.md | 2 +- src/mip-product-form/mip-product-form-fn.js | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/mip-product-form/README.md b/src/mip-product-form/README.md index 4d627daa4..a148a182b 100644 --- a/src/mip-product-form/README.md +++ b/src/mip-product-form/README.md @@ -14,7 +14,7 @@ fetch请求 - +
      diff --git a/src/mip-product-form/mip-product-form-fn.js b/src/mip-product-form/mip-product-form-fn.js index 5a74bbacb..c661a9448 100644 --- a/src/mip-product-form/mip-product-form-fn.js +++ b/src/mip-product-form/mip-product-form-fn.js @@ -27,23 +27,22 @@ define(function (require) { var me = this; util.css([me.successEle, me.failElem, me.errorEle], {display: 'none'}); var formD = me.ele.querySelector('form'); - var data = {}; + var data = []; for (var i = 0; i < formD.elements.length; i++) { var item = formD.elements[i]; // 获取表单数据类型元素 if (['INPUT', 'SELECT', 'TEXTAREA'].indexOf(item.tagName) !== -1) { - var key = me.trim(item.name); - var val = me.trim(item.value); - data[key] = val; + var segment = me.trim(item.name) + '=' + me.trim(item.value); + data.push(segment); } } - + data = data.join('&'); var options = { method: 'POST', - body: JSON.stringify(data), + body: data, // 使用Accept，用来判断异步 headers: { - 'content-type': 'application/json;charset=UTF-8', + 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8', 'Accept': 'application/json' } }; From af746ccd0ccf97e9a403f09f7c0dfc5e4fc7f60a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Wed, 29 Aug 2018 23:31:22 +0800 Subject: [PATCH 14/51] =?UTF-8?q?fetch=E4=BD=BF=E7=94=A8=E8=87=AA=E5=8A=A8?= =?UTF-8?q?content-type,=E5=B9=B6=E6=B7=BB=E5=8A=A0cookie=E4=BC=A0?= =?UTF-8?q?=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/mip-product-form-fn.js | 13 ++----------- src/mip-product-form/package.json | 2 +- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/mip-product-form/mip-product-form-fn.js b/src/mip-product-form/mip-product-form-fn.js index c661a9448..dba35dcb7 100644 --- a/src/mip-product-form/mip-product-form-fn.js +++ b/src/mip-product-form/mip-product-form-fn.js @@ -27,22 +27,13 @@ define(function (require) { var me = this; util.css([me.successEle, me.failElem, me.errorEle], {display: 'none'}); var formD = me.ele.querySelector('form'); - var data = []; - for (var i = 0; i < formD.elements.length; i++) { - var item = formD.elements[i]; - // 获取表单数据类型元素 - if (['INPUT', 'SELECT', 'TEXTAREA'].indexOf(item.tagName) !== -1) { - var segment = me.trim(item.name) + '=' + me.trim(item.value); - data.push(segment); - } - } - data = data.join('&'); + var data = new FormData(formD); var options = { method: 'POST', body: data, + credentials: 'include', // 使用Accept，用来判断异步 headers: { - 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8', 'Accept': 'application/json' } }; diff --git a/src/mip-product-form/package.json b/src/mip-product-form/package.json index b6f3ff341..bb4bd453b 100644 --- a/src/mip-product-form/package.json +++ b/src/mip-product-form/package.json @@ -1,6 +1,6 @@ { "name": "mip-product-form", - "version": "1.0.1", + "version": "1.0.2", "description":"自定义表单", "author": { "name": "chen", From fb9f6ed9308f118f5ed2d16ce65064fd83ba2024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 10:40:15 +0800 Subject: [PATCH 15/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E8=A1=A8?= =?UTF-8?q?=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/README.md | 108 ++++++++ src/mip-258-form1/mip-258-form1-fn.js | 344 ++++++++++++++++++++++++++ src/mip-258-form1/mip-258-form1.css | 1 + src/mip-258-form1/mip-258-form1.js | 78 ++++++ src/mip-258-form1/mip-258-form1.less | 74 ++++++ src/mip-258-form1/package.json | 14 ++ 6 files changed, 619 insertions(+) create mode 100644 src/mip-258-form1/README.md create mode 100644 src/mip-258-form1/mip-258-form1-fn.js create mode 100644 src/mip-258-form1/mip-258-form1.css create mode 100644 src/mip-258-form1/mip-258-form1.js create mode 100644 src/mip-258-form1/mip-258-form1.less create mode 100644 src/mip-258-form1/package.json diff --git a/src/mip-258-form1/README.md b/src/mip-258-form1/README.md new file mode 100644 index 000000000..80ae24c10 --- /dev/null +++ b/src/mip-258-form1/README.md @@ -0,0 +1,108 @@ +# mip-258-form1 + +mip-258-form1 表单组件 + +标题|内容 +----|---- +类型|通用 +支持布局|fixed +所需脚本|https://c.mipcdn.com/static/v1/mip-258-form1/mip-258-form1.js + +## 示例 +### 基本使用 + +```html + + +
      获取验证码
      +
      59秒后重新获取
      +
      请输入正确的电话
      + +
      年龄不能为空
      +
      + +
      +
      + +
      + +       +``` +## 属性 + +### method + +说明：表单提交方法 +必选项：是 + +### controlId + +说明：需要控制的id +必选项：否 + +### from + +说明：来自那张表单 +必选项：否 + +### url + +说明：必须是 HTTP(S) 或 // 开头的地址 +必选项: 是 + +### validatetarget + +说明: 验证提示对应 tag，用于对应错误时的提示显示元素的查找 +必选项：否 + +### validatetype + +说明：验证类型, 用于支持简单的验证。目前提供 `email`, `phone`, `idcar`, `custom`。当为 `custom` 时则需要填写 `validatereg` +必选项：否 + +### validatereg + +说明: 自定义验证，补充站长个性化的验证规则。如果 `validatetype` 为 `custom` 时需填写相应验证规则 +必选项：否 + +### fetch-url + +说明: 有此属性则可以开启异步请求数据逻辑，组件会并根据数据返回状态来按`submit-success`，`submit-error`块中的模板刷新局部信息。 +需要注意的几个点： + +- 方法支持。 +- 请求结果请返回 JSON 对象。 +- 数据状态只有在成功（2xx）的时候触发 `submit-success` 的逻辑，其他的均触发 `submit-error` 逻辑。 + +必选项：否 + +### pid + +说明: 用来绑定产品id +必选项: 否 + +### cid + +说明: 用来绑定公司id +必选项: 否 + +- 方法支持。 +- 请求结果请返回 JSON 对象。 +- 数据状态只有在成功（2xx）的时候触发 `submit-success` 的逻辑，其他的均触发 `submit-error` 逻辑。 + +必选项：否 + +### on + +说明: 添加事件清空表单 +必选项: 否 + + +## 注意事项 + +1. 表单提交方法如果为 `post`，应使用 HTTPS 地址。避免 MIP-Cache HTTPS 环境提交到 HTTP，导致浏览器报错。 +2. 使用 fetch 功能时，请求使用 cors 时不能配置为 *。 diff --git a/src/mip-258-form1/mip-258-form1-fn.js b/src/mip-258-form1/mip-258-form1-fn.js new file mode 100644 index 000000000..82234534b --- /dev/null +++ b/src/mip-258-form1/mip-258-form1-fn.js @@ -0,0 +1,344 @@ +/** + * @file mip-form-fn.js + * @description mip-form函数 + * @author miper + */ + +define(function (require) { + var templates = require('templates'); + var util = require('util'); + var viewer = require('viewer'); + var $ = require('zepto'); + var windowInIframe = viewer.isIframed; + var evt; + var REGS = { + EMAIL: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, + PHONE: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, + IDCAR: /^\d{15}|\d{18}$/ + }; + return { + + /** + * 处理fetch请求逻辑 + * + * @param {string} url 请求url + */ + fetchUrl: function (url) { + var me = this; + util.css([me.successEle, me.failEle, me.errorEle], {display: 'none'}); + var fetchData = { + method: me.method, + credentials: 'include' + }; + if (me.method === 'POST') { + var formD = me.ele.querySelector('form'); + var data = $(formD).serializeArray(); + if (formD) { + fetchData = util.fn.extend({}, fetchData, { + body: me.formToJson(data) + }); + } + } + + // 数据请求处理 + fetch(url, fetchData).then(function (res) { + if (res.ok) { + me.submitSuccessHandle(); + res.json().then(function (data) { + if (data.status === 1) { + util.css(me.successEle, {display: 'block'}); + me.renderTpl(me.successEle, data.msg); + me.action(me.ele); + } + if (data.status === -1) { + util.css(me.failEle, {display: 'block'}); + me.renderTpl(me.failEle, data.msg); + me.submitFailHandle(); + } + }).catch(function (err) { + me.fetchReject(err); + }); + } + else { + me.submitErrorHandle(); + me.fetchReject(data.msg); + } + }).catch(function (err) { + me.submitErrorHandle(); + me.fetchReject(err); + }); + }, + + /** + * fetch出错逻辑处理 + * + * @param {Object} err 错误对象 + */ + fetchReject: function (err) { + var me = this; + util.css(me.errorEle, {display: 'block'}); + me.renderTpl(me.errorEle, err); + }, + + /** + * fetch成功动作处理 + * + * @param {Object} dom 结构 + */ + action: function (dom) { + var from = $(dom).attr('from'); + var actionDom = $(dom).attr('controlId'); + if (from === 'comment') { + setTimeout(function () { + window.top.location.href = window.location.href; + }, 2000); + } + $(actionDom).addClass('mip-active'); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 模板父节点 + * @param {Object} data 模板渲染数据 + */ + renderTpl: function (ele, data) { + var me = this; + alert(data); + templates.render(ele, data).then(function (html) { + var tempTarget = me.tempHTML(ele); + tempTarget.innerHTML = html; + }); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 渲染后模板父节点 + * @return {HTMLElement} target 新建DOM节点 + */ + tempHTML: function (ele) { + ele = ele || document; + var target = ele.querySelector('[mip-mustache-rendered]'); + if (!target) { + target = util.dom.create('
      '); + ele.appendChild(target); + } + return target; + }, + + /** + * createDom 创建 form 节点 + * + * @param {HTMLElement} element 组件节点 + */ + createDom: function (element) { + var me = this; + var url = element.getAttribute('url'); + var target = element.getAttribute('target'); + var form = document.createElement('form'); + var method = (element.getAttribute('method') || 'GET').toUpperCase(); + form.action = url; + form.method = method; + target = target ? target : '_blank'; + form.target = viewer.isIframed && target !== '_blank' ? '_top' : target; + element.appendChild(form); + util.dom.insert(form, element.children); + + // 按钮提交 + var curEles = element.querySelectorAll('form'); + Array.prototype.forEach.call(curEles, function (item) { + item.addEventListener('submit', function (event) { + event.preventDefault(); + evt = event; + me.onSubmit(element, event); + }); + }); + + // 部分浏览器回车不触发submit, + element.addEventListener('keydown', function (event) { + if (event.keyCode === 13) { + + // 为了使余下浏览器不多次触发submit, 使用prevent + evt = event; + event.preventDefault(); + me.onSubmit(this); + } + }, false); + }, + + /** + * 事件通信 + * + * @description 在 input focus 或 blur 时向iframe外层文档发送数据，iframe外层文档返回设置预览头部为 absolute + * @param {Object} event 事件对象 + */ + sendFormMessage: function (event) { + if (windowInIframe) { + // mip_video_jump 为写在外层的承接方法 + viewer.sendMessage('input-' + event, {}); + } + }, + + /** + * 事件发送处理 + * + * @description 给 input 绑定事件，向 SF 发送数据，为了解决 ios 的 UC 浏览器在iframe外层文档悬浮头部 fixed 位置混乱问题 + * @param {HTMLElement} element mip 组件标签 + */ + initMessageEvents: function (element) { + var me = this; + var inputAll = element.querySelectorAll('input'); + Array.prototype.forEach.call(inputAll, function (item, index) { + item.addEventListener('focus', function () { + me.sendFormMessage('focus'); + }, false); + + item.addEventListener('blur', function () { + me.sendFormMessage('blur'); + }, false); + }); + }, + + /** + * 文案格式验证 + * + * @param {string} type 验证类型 + * @param {string} value 需要验证的文案 + * @return {boolean} 是否符合自定义校验 + */ + verification: function (type, value) { + return (type === 'must') ? !(value === '') : REGS[type.toUpperCase()].test(value); + }, + + /** + * 点击提交按钮事件处理函数 + * + * @param {HTMLElement} element form节点 + */ + onSubmit: function (element) { + var me = this; + var preventSubmit = false; + var inputs = element.querySelectorAll('input, textarea, select'); + var url = element.getAttribute('url') || ''; + var getUrl = url.toLowerCase(); + var isHttp = getUrl.match('http://'); + var valueJson = ''; + var hasFetch = element.getAttribute('fetch-url') || ''; + me.method = (element.getAttribute('method') || 'GET').toUpperCase(); + var isGet = me.method === 'GET'; + + this.ele = element; + this.successEle = element.querySelector('[submit-success]'); + this.successEle = element.querySelector('[submit-fail]'); + this.errorEle = element.querySelector('[submit-error]'); + // 执行提交句柄 + me.submitHandle(); + // 校验输入内容是否合法 + Array.prototype.forEach.call(inputs, function (item) { + var type = item.getAttribute('validatetype'); + var target = item.getAttribute('validatetarget'); + var regval = item.getAttribute('validatereg'); + var value = item.value; + var reg; + + if (item.type === 'submit') { + return; + } + else if (item.type === 'checkbox' || item.type === 'radio') { + value = item.checked ? item.value : ''; + } + + valueJson += '&' + item.name + '=' + value; + if (type) { + if (regval) { + reg = value === '' ? false : (new RegExp(regval)).test(value); + } + else { + reg = me.verification(type, value); + } + util.css(element.querySelectorAll('div[target="' + target + '"]'), + {display: (!reg ? 'block' : 'none')}); + preventSubmit = !reg ? true : preventSubmit; + } + }); + + if (preventSubmit) { + return; + } + + // 在iframe下使用mibm-jumplink，跳转显示手百框。 http-GET请求交给外层跳转 + if (window.parent !== window && isHttp && isGet) { + var messageUrl = ''; + if (getUrl.match('\\?')) { + // eg. getUrl == 'http://www.mipengine.org?we=123' + messageUrl = getUrl + valueJson; + } + else { + // eg. getUrl == 'http://www.mipengine.org' + valueJson = valueJson.substring(1); + messageUrl = getUrl + '?' + valueJson; + } + var message = { + event: 'mibm-jumplink', + data: { + url: messageUrl + } + }; + window.parent.postMessage(message, '*'); + } + else if (hasFetch.trim()) { + me.fetchUrl(hasFetch); + } + else { + // https请求 或 post请求 或 非iframe下不做处理 + element.getElementsByTagName('form')[0].submit(); + } + }, + + /** + * 提交时的事件 + * + * @param {HTMLElement} element form节点 + */ + submitHandle: function () { + viewer.eventAction.execute('submit', evt.target, evt); + }, + + /** + * 提交成功调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + submitSuccessHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('submitSuccess', evt.target, evt); + }, + + /** + * 提交成功调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + submitFailHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('submitFail', evt.target, evt); + }, + + /** + * 提交失败调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + submitErrorHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('submitError', evt.target, evt); + } + }; +}); diff --git a/src/mip-258-form1/mip-258-form1.css b/src/mip-258-form1/mip-258-form1.css new file mode 100644 index 000000000..8b2c90262 --- /dev/null +++ b/src/mip-258-form1/mip-258-form1.css @@ -0,0 +1 @@ +mip-258-form{position:relative}mip-258-form .btnCode{display:block;padding:10px;color:#fff}mip-258-form #mip-form-cross{position:absolute;display:block;padding:6px;width:20px;height:20px;right:0;background:url(//m.baidu.com/static/search/clear.png) no-repeat center;z-index:100;background-size:100% 100%;background-origin:content-box;-webkit-tap-highlight-color:rgba(0,0,0,.4);tap-highlight-color:rgba(0,0,0,.4)}mip-258-form input,mip-258-form textarea,mip-258-form select{border:1px solid #f1f1f1;padding:6px;display:block;box-sizing:border-box;-webkit-box-sizing:border-box;resize:none;font-size:16px}mip-258-form input[type=text],mip-258-form input[type=input],mip-258-form input[type=datetime],mip-258-form input[type=email],mip-258-form input[type=number],mip-258-form input[type=tel],mip-258-form input[type=url]{padding-right:30px}mip-258-form form{position:relative}mip-258-form input[type=radio]{display:inline}mip-258-form label{display:block}mip-258-form .error{display:none;color:#ec1f5c;font-size:12px;text-align:left;line-height:22px;padding:0 10% 0 3%}mip-258-form .error[mip-mustache-rendered]{display:block}mip-258-form input[type=submit]{border:1px solid #f1f1f1;border-radius:5px;color:#333;background:#d8d7d7}mip-258-form [submit-success],mip-258-form [submit-error]{display:none} \ No newline at end of file diff --git a/src/mip-258-form1/mip-258-form1.js b/src/mip-258-form1/mip-258-form1.js new file mode 100644 index 000000000..1ebb0200e --- /dev/null +++ b/src/mip-258-form1/mip-258-form1.js @@ -0,0 +1,78 @@ +/** + * @file mip-258-form 组件 + * @author + */ + +define(function (require) { + var customElement = require('customElement').create(); + var form = require('./mip-258-form1-fn'); + var $ = require('zepto'); + + customElement.prototype.build = function () { + var element = this.element; + var url = $(element).attr('fetch-url'); + + + // 获取验证码事件 + + $(element).find('.btnCode').click(function () { + var url = $(this).attr('btn-url'); + var mobile = $(element).find('.inquiryMobile').val(); + getInquiryMobileCode(mobile, 60, url); + }); + + function getInquiryMobileCode(mobile, second, url) { + if (mobile === '' || isNaN(mobile)) { + alert('请输入手机号码'); + return false; + } + else if (mobile.length !== 11) { + alert('请输入正确的手机号码'); + return false; + } + $(element).find('.btnCode').hide(); + if (second <= 1) { + $(element).find('.waitInquiry').html(59); + $(element).find('.getInquiryCode').show(); + $(element).find('.waitInquiryCode').addClass('hide'); + $(element).find('.btnCode').show(); + return true; + } + if (second >= 60) { + $.ajax({ + type: 'POST', + url: url, + data: 'mobile=' + mobile, + async: true, + success: function (data) { + alert(data.info); + } + }); + $(element).find('.getInquiryCode').hide(); + $(element).find('.waitInquiryCode').removeClass('hide'); + } + second--; + $(element).find('.waitInquiry').html(second); + setTimeout(function () { + getInquiryMobileCode(mobile, second); + }, 1000); + } + form.createDom(element); + form.initMessageEvents(element); + }; + customElement.prototype.firstInviewCallback = function () { + this.addEventAction('reload', function (event, str) { + // 页面刷新操作 + str = str ? 500 : parseInt(str, 10); + setTimeout(function () { + window.top.location.reload(); + }, str); + }); + + this.addEventAction('reset', function (event, str) { + // 页面刷新操作 + event.target.reset(); + }); + }; + return customElement; +}); diff --git a/src/mip-258-form1/mip-258-form1.less b/src/mip-258-form1/mip-258-form1.less new file mode 100644 index 000000000..6d1aa0f97 --- /dev/null +++ b/src/mip-258-form1/mip-258-form1.less @@ -0,0 +1,74 @@ +mip-258-form1 { + position: relative; + .btnCode { + display: block; + padding: 10px; + color: #fff; + } + #mip-form-cross { + position: absolute; + display: block; + padding: 6px; + width: 20px; + height: 20px; + right: 0; + background: url('//m.baidu.com/static/search/clear.png') no-repeat center; + z-index: 100; + background-size: 100% 100%; + background-origin: content-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); + tap-highlight-color: rgba(0, 0, 0, 0.4) + } + input, + textarea, + select { + border: 1px solid #f1f1f1; + padding: 6px; + display: block; + box-sizing: border-box; + -webkit-box-sizing: border-box; + resize: none; + font-size: 16px; + } + input[type='text'], + input[type='input'], + input[type='datetime'], + input[type='email'], + input[type='number'], + input[type='tel'], + input[type='url'] { + padding-right: 30px; + } + form { + position: relative; + } + input[type='radio'] { + display: inline + } + label { + display: block + } + .error { + display: none; + color: #ec1f5c; + font-size: 12px; + text-align: left; + line-height: 22px; + padding: 0 10% 0 3% + } + .error[mip-mustache-rendered] { + display: block; + } + input[type='submit'] { + border: 1px solid #f1f1f1; + border-radius: 5px; + color: #333; + background: #d8d7d7; + } + [submit-success], + [submit-fail], + [submit-error] { + display: none; + } +} + diff --git a/src/mip-258-form1/package.json b/src/mip-258-form1/package.json new file mode 100644 index 000000000..4862ab68c --- /dev/null +++ b/src/mip-258-form1/package.json @@ -0,0 +1,14 @@ +{ + "name": "mip-258-form1", + "version": "1.0.0", + "description": "258表单提交", + "contributors": [ + { + "name": "teemor", + "email": "232957726@qq.com" + } + ], + "engines": { + "mip": ">=1.1.0" + } +} From 8e046e18a9ef0de9c791a97940cc3b395e1822f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 10:49:50 +0800 Subject: [PATCH 16/51] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/mip-258-form1-fn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mip-258-form1/mip-258-form1-fn.js b/src/mip-258-form1/mip-258-form1-fn.js index 82234534b..b3d712c90 100644 --- a/src/mip-258-form1/mip-258-form1-fn.js +++ b/src/mip-258-form1/mip-258-form1-fn.js @@ -35,7 +35,7 @@ define(function (require) { var data = $(formD).serializeArray(); if (formD) { fetchData = util.fn.extend({}, fetchData, { - body: me.formToJson(data) + body: new FormData(formD) }); } } From ffce8969f67a2cd352495f95f71ea1b38639a908 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 11:00:10 +0800 Subject: [PATCH 17/51] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/mip-258-form1-fn.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/mip-258-form1/mip-258-form1-fn.js b/src/mip-258-form1/mip-258-form1-fn.js index b3d712c90..8ce56dfed 100644 --- a/src/mip-258-form1/mip-258-form1-fn.js +++ b/src/mip-258-form1/mip-258-form1-fn.js @@ -47,12 +47,12 @@ define(function (require) { res.json().then(function (data) { if (data.status === 1) { util.css(me.successEle, {display: 'block'}); - me.renderTpl(me.successEle, data.msg); - me.action(me.ele); + me.renderTpl(me.successEle, {successmsg: data.msg}); + // me.action(me.ele); } if (data.status === -1) { util.css(me.failEle, {display: 'block'}); - me.renderTpl(me.failEle, data.msg); + me.renderTpl(me.failEle, {failmsg: data.msg}); me.submitFailHandle(); } }).catch(function (err) { @@ -61,7 +61,7 @@ define(function (require) { } else { me.submitErrorHandle(); - me.fetchReject(data.msg); + me.fetchReject({}); } }).catch(function (err) { me.submitErrorHandle(); @@ -104,7 +104,6 @@ define(function (require) { */ renderTpl: function (ele, data) { var me = this; - alert(data); templates.render(ele, data).then(function (html) { var tempTarget = me.tempHTML(ele); tempTarget.innerHTML = html; From 2159d4fcc71b1bb427034ddb1024c46e365f3a83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 11:04:26 +0800 Subject: [PATCH 18/51] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/mip-258-form1-fn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mip-258-form1/mip-258-form1-fn.js b/src/mip-258-form1/mip-258-form1-fn.js index 8ce56dfed..1dd0deae0 100644 --- a/src/mip-258-form1/mip-258-form1-fn.js +++ b/src/mip-258-form1/mip-258-form1-fn.js @@ -229,7 +229,7 @@ define(function (require) { this.ele = element; this.successEle = element.querySelector('[submit-success]'); - this.successEle = element.querySelector('[submit-fail]'); + this.failEle = element.querySelector('[submit-fail]'); this.errorEle = element.querySelector('[submit-error]'); // 执行提交句柄 me.submitHandle(); From 4bd0d80e31af32eea45719a4d5e7f0dd41479106 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 11:09:51 +0800 Subject: [PATCH 19/51] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/mip-258-form1-fn.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/mip-258-form1/mip-258-form1-fn.js b/src/mip-258-form1/mip-258-form1-fn.js index 1dd0deae0..c13f76851 100644 --- a/src/mip-258-form1/mip-258-form1-fn.js +++ b/src/mip-258-form1/mip-258-form1-fn.js @@ -43,12 +43,11 @@ define(function (require) { // 数据请求处理 fetch(url, fetchData).then(function (res) { if (res.ok) { - me.submitSuccessHandle(); res.json().then(function (data) { if (data.status === 1) { util.css(me.successEle, {display: 'block'}); me.renderTpl(me.successEle, {successmsg: data.msg}); - // me.action(me.ele); + me.submitSuccessHandle(); } if (data.status === -1) { util.css(me.failEle, {display: 'block'}); From 50d8d4da4c0ec44b862a6e65b4754b4b7a0184cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 11:35:16 +0800 Subject: [PATCH 20/51] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=AD=97=E6=AE=B5?= =?UTF-8?q?=E8=BF=94=E5=9B=9Einfo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-product-form/README.md | 4 ++-- src/mip-product-form/mip-product-form-fn.js | 2 +- src/mip-product-form/mip-product-form.js | 5 +++++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/mip-product-form/README.md b/src/mip-product-form/README.md index a148a182b..b8ed6339d 100644 --- a/src/mip-product-form/README.md +++ b/src/mip-product-form/README.md @@ -13,8 +13,8 @@ fetch请求 ```html - - + +
        diff --git a/src/mip-product-form/mip-product-form-fn.js b/src/mip-product-form/mip-product-form-fn.js index dba35dcb7..e5f104cbb 100644 --- a/src/mip-product-form/mip-product-form-fn.js +++ b/src/mip-product-form/mip-product-form-fn.js @@ -55,7 +55,7 @@ define(function (require) { } if (response.status === -1) { util.css(me.failEle, {display: 'block'}); - me.renderTpl(me.failEle, {failmsg: response.msg}); + me.renderTpl(me.failEle, {failinfo: response.info}); me.failHandle(); } // 表单验证不通过 diff --git a/src/mip-product-form/mip-product-form.js b/src/mip-product-form/mip-product-form.js index b3f2c9457..61da498ed 100644 --- a/src/mip-product-form/mip-product-form.js +++ b/src/mip-product-form/mip-product-form.js @@ -23,6 +23,11 @@ define(function (require) { window.top.location.reload(); }, str); }); + + this.addEventAction('reset', function (event, str) { + // 页面刷新操作 + event.target.reset(); + }); }; return customElement; }); From 7102141b5593a71e9401708ebd058bdc0f7d3f64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 12:29:25 +0800 Subject: [PATCH 21/51] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/README.md | 11 ++++++++--- src/mip-258-form1/mip-258-form1-fn.js | 4 ++-- src/mip-258-form1/mip-258-form1.css | 2 +- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/mip-258-form1/README.md b/src/mip-258-form1/README.md index 80ae24c10..7e084d40a 100644 --- a/src/mip-258-form1/README.md +++ b/src/mip-258-form1/README.md @@ -12,7 +12,7 @@ mip-258-form1 表单组件 ### 基本使用 ```html - +
        获取验证码
        59秒后重新获取
        @@ -21,7 +21,12 @@ mip-258-form1 表单组件
        年龄不能为空
        +
        +
        +
        @@ -105,4 +110,4 @@ mip-258-form1 表单组件 ## 注意事项 1. 表单提交方法如果为 `post`，应使用 HTTPS 地址。避免 MIP-Cache HTTPS 环境提交到 HTTP，导致浏览器报错。 -2. 使用 fetch 功能时，请求使用 cors 时不能配置为 *。 +2. 使用 fetch 功能时，请求使用 cors 时不能配置为 *。 \ No newline at end of file diff --git a/src/mip-258-form1/mip-258-form1-fn.js b/src/mip-258-form1/mip-258-form1-fn.js index c13f76851..297267c44 100644 --- a/src/mip-258-form1/mip-258-form1-fn.js +++ b/src/mip-258-form1/mip-258-form1-fn.js @@ -46,12 +46,12 @@ define(function (require) { res.json().then(function (data) { if (data.status === 1) { util.css(me.successEle, {display: 'block'}); - me.renderTpl(me.successEle, {successmsg: data.msg}); + me.renderTpl(me.successEle, {successinfo: data.info}); me.submitSuccessHandle(); } if (data.status === -1) { util.css(me.failEle, {display: 'block'}); - me.renderTpl(me.failEle, {failmsg: data.msg}); + me.renderTpl(me.failEle, {failinfo: data.info}); me.submitFailHandle(); } }).catch(function (err) { diff --git a/src/mip-258-form1/mip-258-form1.css b/src/mip-258-form1/mip-258-form1.css index 8b2c90262..7e461c5ea 100644 --- a/src/mip-258-form1/mip-258-form1.css +++ b/src/mip-258-form1/mip-258-form1.css @@ -1 +1 @@ -mip-258-form{position:relative}mip-258-form .btnCode{display:block;padding:10px;color:#fff}mip-258-form #mip-form-cross{position:absolute;display:block;padding:6px;width:20px;height:20px;right:0;background:url(//m.baidu.com/static/search/clear.png) no-repeat center;z-index:100;background-size:100% 100%;background-origin:content-box;-webkit-tap-highlight-color:rgba(0,0,0,.4);tap-highlight-color:rgba(0,0,0,.4)}mip-258-form input,mip-258-form textarea,mip-258-form select{border:1px solid #f1f1f1;padding:6px;display:block;box-sizing:border-box;-webkit-box-sizing:border-box;resize:none;font-size:16px}mip-258-form input[type=text],mip-258-form input[type=input],mip-258-form input[type=datetime],mip-258-form input[type=email],mip-258-form input[type=number],mip-258-form input[type=tel],mip-258-form input[type=url]{padding-right:30px}mip-258-form form{position:relative}mip-258-form input[type=radio]{display:inline}mip-258-form label{display:block}mip-258-form .error{display:none;color:#ec1f5c;font-size:12px;text-align:left;line-height:22px;padding:0 10% 0 3%}mip-258-form .error[mip-mustache-rendered]{display:block}mip-258-form input[type=submit]{border:1px solid #f1f1f1;border-radius:5px;color:#333;background:#d8d7d7}mip-258-form [submit-success],mip-258-form [submit-error]{display:none} \ No newline at end of file +mip-258-form1{position:relative}mip-258-form1 .btnCode{display:block;padding:10px;color:#fff}mip-258-form1 #mip-form-cross{position:absolute;display:block;padding:6px;width:20px;height:20px;right:0;background:url(//m.baidu.com/static/search/clear.png) no-repeat center;z-index:100;background-size:100% 100%;background-origin:content-box;-webkit-tap-highlight-color:rgba(0,0,0,.4);tap-highlight-color:rgba(0,0,0,.4)}mip-258-form1 input,mip-258-form1 textarea,mip-258-form1 select{border:1px solid #f1f1f1;padding:6px;display:block;box-sizing:border-box;-webkit-box-sizing:border-box;resize:none;font-size:16px}mip-258-form1 input[type=text],mip-258-form1 input[type=input],mip-258-form1 input[type=datetime],mip-258-form1 input[type=email],mip-258-form1 input[type=number],mip-258-form1 input[type=tel],mip-258-form1 input[type=url]{padding-right:30px}mip-258-form1 form{position:relative}mip-258-form1 input[type=radio]{display:inline}mip-258-form1 label{display:block}mip-258-form1 .error{display:none;color:#ec1f5c;font-size:12px;text-align:left;line-height:22px;padding:0 10% 0 3%}mip-258-form1 .error[mip-mustache-rendered]{display:block}mip-258-form1 input[type=submit]{border:1px solid #f1f1f1;border-radius:5px;color:#333;background:#d8d7d7}mip-258-form1 [submit-success],mip-258-form1 [submit-error]{display:none} \ No newline at end of file From 2bd5f4c821baa38bf680342a35babe07bdbbfef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 18:18:45 +0800 Subject: [PATCH 22/51] =?UTF-8?q?=E6=8F=90=E4=BA=A4tool?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-tool/README.md | 27 +++++++++++++++++++++++++++ src/mip-258-tool/mip-258-tool.js | 32 ++++++++++++++++++++++++++++++++ src/mip-258-tool/package.json | 12 ++++++++++++ 3 files changed, 71 insertions(+) create mode 100644 src/mip-258-tool/README.md create mode 100644 src/mip-258-tool/mip-258-tool.js create mode 100644 src/mip-258-tool/package.json diff --git a/src/mip-258-tool/README.md b/src/mip-258-tool/README.md new file mode 100644 index 000000000..22cef122f --- /dev/null +++ b/src/mip-258-tool/README.md @@ -0,0 +1,27 @@ +# mip-258-test ajax请求 + +ajax请求 + +标题|内容 +----|---- +类型|通用 +支持布局|N/S +## 示例 + +### 基本使用 + +```html + + + +``` +### on + +说明：添加reload、alert、history.back事件 ,分别对应reload,alert,goback事件 +必选项: 否 + + + + + + diff --git a/src/mip-258-tool/mip-258-tool.js b/src/mip-258-tool/mip-258-tool.js new file mode 100644 index 000000000..c83847575 --- /dev/null +++ b/src/mip-258-tool/mip-258-tool.js @@ -0,0 +1,32 @@ + +/** + * @file mip-ajax-button 组件 + * + * @author chen + * @time 2018.8.21 + */ +define(function (require) { + var customElement = require('customElement').create(); + + customElement.prototype.build = function () { + + }; + + customElement.prototype.firstInviewCallback = function (event, str) { + // 添加页面刷新事件 + this.addEventAction('reload', function (event , str) { + str = str ? 500 : parseInt(str, 10); + setTimeout(function () { + window.top.location.reload(); + }, str); + }); + // 添加alert提示事件 + this.addEventAction('alert', function (event , str) { + alert(str); + }); + this.addEventAction('goback', function (event , str) { + window.top.history.back(); + }); + }; + return customElement; +}); diff --git a/src/mip-258-tool/package.json b/src/mip-258-tool/package.json new file mode 100644 index 000000000..e7424602d --- /dev/null +++ b/src/mip-258-tool/package.json @@ -0,0 +1,12 @@ +{ + "name": "mip-258-tool", + "version": "1.0.0", + "description":"简单的js事件工具。", + "author": { + "name": "chen", + "email": "chenweilin@258c.com" + }, + "engines": { + "mip": ">=1.0.0" + } +} \ No newline at end of file From 71b81af950f7dcefc0ebed244fa1e8530f0ad75a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 20:22:57 +0800 Subject: [PATCH 23/51] =?UTF-8?q?=E7=AE=80=E5=8D=95js=E5=B7=A5=E5=85=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-tool/README.md | 12 +++++++----- src/mip-258-tool/mip-258-tool.js | 9 ++++++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/mip-258-tool/README.md b/src/mip-258-tool/README.md index 22cef122f..4540ab40c 100644 --- a/src/mip-258-tool/README.md +++ b/src/mip-258-tool/README.md @@ -1,4 +1,4 @@ -# mip-258-test ajax请求 +# mip-258-tool ajax请求 @@ -11,14 +11,16 @@ ajax请求 ### 基本使用 ```html - - ``` ### on -说明：添加reload、alert、history.back事件 ,分别对应reload,alert,goback事件 -必选项: 否 +说明：goback事件对应window.history.back()事件 +reload(100)事件对应window.reload()事件，传入毫秒数，用于刷新等待 +alert()事件对应window.alert()事件 +必选项: 否 + + diff --git a/src/mip-258-tool/mip-258-tool.js b/src/mip-258-tool/mip-258-tool.js index c83847575..6ae661384 100644 --- a/src/mip-258-tool/mip-258-tool.js +++ b/src/mip-258-tool/mip-258-tool.js @@ -14,17 +14,20 @@ define(function (require) { customElement.prototype.firstInviewCallback = function (event, str) { // 添加页面刷新事件 - this.addEventAction('reload', function (event , str) { + this.addEventAction('reload', function (event, str) { str = str ? 500 : parseInt(str, 10); setTimeout(function () { window.top.location.reload(); }, str); }); // 添加alert提示事件 - this.addEventAction('alert', function (event , str) { + this.addEventAction('alert', function (event, str) { alert(str); }); - this.addEventAction('goback', function (event , str) { + this.addEventAction('goback', function (event, str) { + if (window.top.history.length === 0) { + window.top.location.href = str; + } window.top.history.back(); }); }; From 12db6d6c7030fc10c702e32047cf300056ddfb98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 30 Aug 2018 20:46:01 +0800 Subject: [PATCH 24/51] =?UTF-8?q?=E7=AE=80=E5=8D=95js=E5=B7=A5=E5=85=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-tool/README.md | 1 + src/mip-258-tool/mip-258-tool.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/mip-258-tool/README.md b/src/mip-258-tool/README.md index 4540ab40c..c90a02cf1 100644 --- a/src/mip-258-tool/README.md +++ b/src/mip-258-tool/README.md @@ -11,6 +11,7 @@ ajax请求 ### 基本使用 ```html + ``` ### on diff --git a/src/mip-258-tool/mip-258-tool.js b/src/mip-258-tool/mip-258-tool.js index 6ae661384..01e0567a4 100644 --- a/src/mip-258-tool/mip-258-tool.js +++ b/src/mip-258-tool/mip-258-tool.js @@ -22,7 +22,7 @@ define(function (require) { }); // 添加alert提示事件 this.addEventAction('alert', function (event, str) { - alert(str); + window.top.alert(str); }); this.addEventAction('goback', function (event, str) { if (window.top.history.length === 0) { From 28bfeb14d1d6f264cb91eb4634f4fd8237cde2c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 17:52:22 +0800 Subject: [PATCH 25/51] =?UTF-8?q?=E6=B7=BB=E5=8A=A0csrf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/mip-258-form1.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/mip-258-form1/mip-258-form1.js b/src/mip-258-form1/mip-258-form1.js index 1ebb0200e..f80791062 100644 --- a/src/mip-258-form1/mip-258-form1.js +++ b/src/mip-258-form1/mip-258-form1.js @@ -38,6 +38,11 @@ define(function (require) { $(element).find('.btnCode').show(); return true; } + $.ajaxSetup({ + headers: { + 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') + } + }); if (second >= 60) { $.ajax({ type: 'POST', From 4251645a55245069b8fe8f1624d8864d1448864a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 18:09:28 +0800 Subject: [PATCH 26/51] =?UTF-8?q?=E6=B7=BB=E5=8A=A0csrf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-258-form1/mip-258-form1.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/mip-258-form1/mip-258-form1.js b/src/mip-258-form1/mip-258-form1.js index f80791062..14cc1fc1c 100644 --- a/src/mip-258-form1/mip-258-form1.js +++ b/src/mip-258-form1/mip-258-form1.js @@ -38,11 +38,7 @@ define(function (require) { $(element).find('.btnCode').show(); return true; } - $.ajaxSetup({ - headers: { - 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') - } - }); + if (second >= 60) { $.ajax({ type: 'POST', @@ -51,6 +47,9 @@ define(function (require) { async: true, success: function (data) { alert(data.info); + }, + headers: { + 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(element).find('.getInquiryCode').hide(); From a03424c35822f8ae5cf75225807aadd2255e3e33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 22:32:46 +0800 Subject: [PATCH 27/51] =?UTF-8?q?youbao=E8=A1=A8=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/README.md | 90 ++++++ src/mip-youbao-form/mip-youbao-form-fn.js | 326 ++++++++++++++++++++++ src/mip-youbao-form/mip-youbao-form.css | 1 + src/mip-youbao-form/mip-youbao-form.js | 82 ++++++ src/mip-youbao-form/mip-youbao-form.less | 74 +++++ src/mip-youbao-form/package.json | 14 + 6 files changed, 587 insertions(+) create mode 100644 src/mip-youbao-form/README.md create mode 100644 src/mip-youbao-form/mip-youbao-form-fn.js create mode 100644 src/mip-youbao-form/mip-youbao-form.css create mode 100644 src/mip-youbao-form/mip-youbao-form.js create mode 100644 src/mip-youbao-form/mip-youbao-form.less create mode 100644 src/mip-youbao-form/package.json diff --git a/src/mip-youbao-form/README.md b/src/mip-youbao-form/README.md new file mode 100644 index 000000000..9f83b8075 --- /dev/null +++ b/src/mip-youbao-form/README.md @@ -0,0 +1,90 @@ +# mip-youbao-form + +mip-youbao-form 表单组件 + +标题|内容 +----|---- +类型|通用 +支持布局|fixed +所需脚本|https://c.mipcdn.com/static/v1/mip-youbao-form/mip-youbao-form.js + +## 示例 +### 基本使用 + +```html + + +
        请输入正确的电话
        + +
        年龄不能为空
        +
        + +
        +
        + +
        +
        + +
        + +         +``` +## 属性 + +### method + +说明：表单提交方法 +必选项：是 + +### from + +说明：来自那张表单 +必选项：否 + +### url + +说明：必须是 HTTP(S) 或 // 开头的地址 +必选项: 是 + +### validatetarget + +说明: 验证提示对应 tag，用于对应错误时的提示显示元素的查找 +必选项：否 + +### validatetype + +说明：验证类型, 用于支持简单的验证。目前提供 `email`, `phone`, `idcar`, `custom`。当为 `custom` 时则需要填写 `validatereg` +必选项：否 + +### validatereg + +说明: 自定义验证，补充站长个性化的验证规则。如果 `validatetype` 为 `custom` 时需填写相应验证规则 +必选项：否 + +### fetch-url + +说明: 有此属性则可以开启异步请求数据逻辑，组件会并根据数据返回状态来按`submit-success`，`submit-error`块中的模板刷新局部信息。 +需要注意的几个点： + +- 方法支持。 +- 请求结果请返回 JSON 对象。 +- 数据状态只有在成功（2xx）的时候触发 `submit-success` 的逻辑，其他的均触发 `submit-error` 逻辑。 + +必选项：否 + + +### on + +说明: 添加事件清空表单 +必选项: 否 + + +## 注意事项 + +1. 表单提交方法如果为 `post`，应使用 HTTPS 地址。避免 MIP-Cache HTTPS 环境提交到 HTTP，导致浏览器报错。 +2. 使用 fetch 功能时，请求使用 cors 时不能配置为 *。 \ No newline at end of file diff --git a/src/mip-youbao-form/mip-youbao-form-fn.js b/src/mip-youbao-form/mip-youbao-form-fn.js new file mode 100644 index 000000000..31fdaee5f --- /dev/null +++ b/src/mip-youbao-form/mip-youbao-form-fn.js @@ -0,0 +1,326 @@ +/** + * @file mip-form-fn.js + * @description mip-form函数 + * @author miper + */ + +define(function (require) { + var templates = require('templates'); + var util = require('util'); + var viewer = require('viewer'); + var $ = require('zepto'); + var windowInIframe = viewer.isIframed; + var evt; + var REGS = { + EMAIL: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, + PHONE: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, + IDCAR: /^\d{15}|\d{18}$/ + }; + return { + + /** + * 处理fetch请求逻辑 + * + * @param {string} url 请求url + */ + fetchUrl: function (url) { + var me = this; + util.css([me.successEle, me.failEle, me.errorEle], {display: 'none'}); + var fetchData = { + method: me.method, + credentials: 'include' + }; + if (me.method === 'POST') { + var formD = me.ele.querySelector('form'); + var data = $(formD).serializeArray(); + if (formD) { + fetchData = util.fn.extend({}, fetchData, { + body: new FormData(formD) + }); + } + } + + // 数据请求处理 + fetch(url, fetchData).then(function (res) { + if (res.ok) { + res.json().then(function (data) { + if (data.status === 1) { + util.css(me.successEle, {display: 'block'}); + me.renderTpl(me.successEle, {successinfo: data.info}); + me.submitSuccessHandle(); + } + if (data.status === -1) { + util.css(me.failEle, {display: 'block'}); + me.renderTpl(me.failEle, {failinfo: data.info}); + me.submitFailHandle(); + } + }).catch(function (err) { + me.fetchReject(err); + }); + } + else { + me.submitErrorHandle(); + me.fetchReject({}); + } + }).catch(function (err) { + me.submitErrorHandle(); + me.fetchReject(err); + }); + }, + + /** + * fetch出错逻辑处理 + * + * @param {Object} err 错误对象 + */ + fetchReject: function (err) { + var me = this; + util.css(me.errorEle, {display: 'block'}); + me.renderTpl(me.errorEle, err); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 模板父节点 + * @param {Object} data 模板渲染数据 + */ + renderTpl: function (ele, data) { + var me = this; + templates.render(ele, data).then(function (html) { + var tempTarget = me.tempHTML(ele); + tempTarget.innerHTML = html; + }); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 渲染后模板父节点 + * @return {HTMLElement} target 新建DOM节点 + */ + tempHTML: function (ele) { + ele = ele || document; + var target = ele.querySelector('[mip-mustache-rendered]'); + if (!target) { + target = util.dom.create('
        '); + ele.appendChild(target); + } + return target; + }, + + /** + * createDom 创建 form 节点 + * + * @param {HTMLElement} element 组件节点 + */ + createDom: function (element) { + var me = this; + var url = element.getAttribute('url'); + var target = element.getAttribute('target'); + var form = document.createElement('form'); + var method = (element.getAttribute('method') || 'GET').toUpperCase(); + form.action = url; + form.method = method; + target = target ? target : '_blank'; + form.target = viewer.isIframed && target !== '_blank' ? '_top' : target; + element.appendChild(form); + util.dom.insert(form, element.children); + + // 按钮提交 + var curEles = element.querySelectorAll('form'); + Array.prototype.forEach.call(curEles, function (item) { + item.addEventListener('submit', function (event) { + event.preventDefault(); + evt = event; + me.onSubmit(element, event); + }); + }); + + // 部分浏览器回车不触发submit, + element.addEventListener('keydown', function (event) { + if (event.keyCode === 13) { + + // 为了使余下浏览器不多次触发submit, 使用prevent + evt = event; + event.preventDefault(); + me.onSubmit(this); + } + }, false); + }, + + /** + * 事件通信 + * + * @description 在 input focus 或 blur 时向iframe外层文档发送数据，iframe外层文档返回设置预览头部为 absolute + * @param {Object} event 事件对象 + */ + sendFormMessage: function (event) { + if (windowInIframe) { + // mip_video_jump 为写在外层的承接方法 + viewer.sendMessage('input-' + event, {}); + } + }, + + /** + * 事件发送处理 + * + * @description 给 input 绑定事件，向 SF 发送数据，为了解决 ios 的 UC 浏览器在iframe外层文档悬浮头部 fixed 位置混乱问题 + * @param {HTMLElement} element mip 组件标签 + */ + initMessageEvents: function (element) { + var me = this; + var inputAll = element.querySelectorAll('input'); + Array.prototype.forEach.call(inputAll, function (item, index) { + item.addEventListener('focus', function () { + me.sendFormMessage('focus'); + }, false); + + item.addEventListener('blur', function () { + me.sendFormMessage('blur'); + }, false); + }); + }, + + /** + * 文案格式验证 + * + * @param {string} type 验证类型 + * @param {string} value 需要验证的文案 + * @return {boolean} 是否符合自定义校验 + */ + verification: function (type, value) { + return (type === 'must') ? !(value === '') : REGS[type.toUpperCase()].test(value); + }, + + /** + * 点击提交按钮事件处理函数 + * + * @param {HTMLElement} element form节点 + */ + onSubmit: function (element) { + var me = this; + var preventSubmit = false; + var inputs = element.querySelectorAll('input, textarea, select'); + var url = element.getAttribute('url') || ''; + var getUrl = url.toLowerCase(); + var isHttp = getUrl.match('http://'); + var valueJson = ''; + var hasFetch = element.getAttribute('fetch-url') || ''; + me.method = (element.getAttribute('method') || 'GET').toUpperCase(); + var isGet = me.method === 'GET'; + + this.ele = element; + this.successEle = element.querySelector('[submit-success]'); + this.failEle = element.querySelector('[submit-fail]'); + this.errorEle = element.querySelector('[submit-error]'); + // 执行提交句柄 + me.submitHandle(); + // 校验输入内容是否合法 + Array.prototype.forEach.call(inputs, function (item) { + var type = item.getAttribute('validatetype'); + var target = item.getAttribute('validatetarget'); + var regval = item.getAttribute('validatereg'); + var value = item.value; + var reg; + + if (item.type === 'submit') { + return; + } + else if (item.type === 'checkbox' || item.type === 'radio') { + value = item.checked ? item.value : ''; + } + + valueJson += '&' + item.name + '=' + value; + if (type) { + if (regval) { + reg = value === '' ? false : (new RegExp(regval)).test(value); + } + else { + reg = me.verification(type, value); + } + util.css(element.querySelectorAll('div[target="' + target + '"]'), + {display: (!reg ? 'block' : 'none')}); + preventSubmit = !reg ? true : preventSubmit; + } + }); + + if (preventSubmit) { + return; + } + + // 在iframe下使用mibm-jumplink，跳转显示手百框。 http-GET请求交给外层跳转 + if (window.parent !== window && isHttp && isGet) { + var messageUrl = ''; + if (getUrl.match('\\?')) { + // eg. getUrl == 'http://www.mipengine.org?we=123' + messageUrl = getUrl + valueJson; + } + else { + // eg. getUrl == 'http://www.mipengine.org' + valueJson = valueJson.substring(1); + messageUrl = getUrl + '?' + valueJson; + } + var message = { + event: 'mibm-jumplink', + data: { + url: messageUrl + } + }; + window.parent.postMessage(message, '*'); + } + else if (hasFetch.trim()) { + me.fetchUrl(hasFetch); + } + else { + // https请求 或 post请求 或 非iframe下不做处理 + element.getElementsByTagName('form')[0].submit(); + } + }, + + /** + * 提交时的事件 + * + * @param {HTMLElement} element form节点 + */ + submitHandle: function () { + viewer.eventAction.execute('submit', evt.target, evt); + }, + + /** + * 提交成功调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + submitSuccessHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('submitSuccess', evt.target, evt); + }, + + /** + * 提交成功调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + submitFailHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('submitFail', evt.target, evt); + }, + + /** + * 提交失败调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + submitErrorHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('submitError', evt.target, evt); + } + }; +}); diff --git a/src/mip-youbao-form/mip-youbao-form.css b/src/mip-youbao-form/mip-youbao-form.css new file mode 100644 index 000000000..af2d33710 --- /dev/null +++ b/src/mip-youbao-form/mip-youbao-form.css @@ -0,0 +1 @@ +mip-youbao-form{position:relative}mip-youbao-form .btnCode{display:block;padding:10px;color:#fff}mip-youbao-form #mip-form-cross{position:absolute;display:block;padding:6px;width:20px;height:20px;right:0;background:url(//m.baidu.com/static/search/clear.png) no-repeat center;z-index:100;background-size:100% 100%;background-origin:content-box;-webkit-tap-highlight-color:rgba(0,0,0,.4);tap-highlight-color:rgba(0,0,0,.4)}mip-youbao-form input,mip-youbao-form textarea,mip-youbao-form select{border:1px solid #f1f1f1;padding:6px;display:block;box-sizing:border-box;-webkit-box-sizing:border-box;resize:none;font-size:16px}mip-youbao-form input[type=text],mip-youbao-form input[type=input],mip-youbao-form input[type=datetime],mip-youbao-form input[type=email],mip-youbao-form input[type=number],mip-youbao-form input[type=tel],mip-youbao-form input[type=url]{padding-right:30px}mip-youbao-form form{position:relative}mip-youbao-form input[type=radio]{display:inline}mip-youbao-form label{display:block}mip-youbao-form .error{display:none;color:#ec1f5c;font-size:12px;text-align:left;line-height:22px;padding:0 10% 0 3%}mip-youbao-form .error[mip-mustache-rendered]{display:block}mip-youbao-form input[type=submit]{border:1px solid #f1f1f1;border-radius:5px;color:#333;background:#d8d7d7}mip-youbao-form [submit-success],mip-youbao-form [submit-error]{display:none} \ No newline at end of file diff --git a/src/mip-youbao-form/mip-youbao-form.js b/src/mip-youbao-form/mip-youbao-form.js new file mode 100644 index 000000000..4e290e4b9 --- /dev/null +++ b/src/mip-youbao-form/mip-youbao-form.js @@ -0,0 +1,82 @@ +/** + * @file mip-258-form 组件 + * @author + */ + +define(function (require) { + var customElement = require('customElement').create(); + var form = require('./mip-youbao-form-fn'); + var $ = require('zepto'); + + customElement.prototype.build = function () { + var element = this.element; + var url = $(element).attr('fetch-url'); + + + // 获取验证码事件 + + $(element).find('.btnCode').click(function () { + var url = $(this).attr('btn-url'); + var mobile = $(element).find('.inquiryMobile').val(); + getInquiryMobileCode(mobile, 60, url); + }); + + function getInquiryMobileCode(mobile, second, url) { + if (mobile === '' || isNaN(mobile)) { + alert('请输入手机号码'); + return false; + } + else if (mobile.length !== 11) { + alert('请输入正确的手机号码'); + return false; + } + $(element).find('.btnCode').hide(); + if (second <= 1) { + $(element).find('.waitInquiry').html(59); + $(element).find('.getInquiryCode').show(); + $(element).find('.waitInquiryCode').addClass('hide'); + $(element).find('.btnCode').show(); + return true; + } + + if (second >= 60) { + $.ajax({ + type: 'POST', + url: url, + data: 'mobile=' + mobile, + async: true, + success: function (data) { + alert(data.info); + }, + headers: { + 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') + } + }); + $(element).find('.getInquiryCode').hide(); + $(element).find('.waitInquiryCode').removeClass('hide'); + } + second--; + $(element).find('.waitInquiry').html(second); + setTimeout(function () { + getInquiryMobileCode(mobile, second); + }, 1000); + } + form.createDom(element); + form.initMessageEvents(element); + }; + customElement.prototype.firstInviewCallback = function () { + this.addEventAction('reload', function (event, str) { + // 页面刷新操作 + str = str ? 500 : parseInt(str, 10); + setTimeout(function () { + window.top.location.reload(); + }, str); + }); + + this.addEventAction('reset', function (event, str) { + // 页面刷新操作 + event.target.reset(); + }); + }; + return customElement; +}); diff --git a/src/mip-youbao-form/mip-youbao-form.less b/src/mip-youbao-form/mip-youbao-form.less new file mode 100644 index 000000000..b6062239d --- /dev/null +++ b/src/mip-youbao-form/mip-youbao-form.less @@ -0,0 +1,74 @@ +mip-youbao-form { + position: relative; + .btnCode { + display: block; + padding: 10px; + color: #fff; + } + #mip-form-cross { + position: absolute; + display: block; + padding: 6px; + width: 20px; + height: 20px; + right: 0; + background: url('//m.baidu.com/static/search/clear.png') no-repeat center; + z-index: 100; + background-size: 100% 100%; + background-origin: content-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); + tap-highlight-color: rgba(0, 0, 0, 0.4) + } + input, + textarea, + select { + border: 1px solid #f1f1f1; + padding: 6px; + display: block; + box-sizing: border-box; + -webkit-box-sizing: border-box; + resize: none; + font-size: 16px; + } + input[type='text'], + input[type='input'], + input[type='datetime'], + input[type='email'], + input[type='number'], + input[type='tel'], + input[type='url'] { + padding-right: 30px; + } + form { + position: relative; + } + input[type='radio'] { + display: inline + } + label { + display: block + } + .error { + display: none; + color: #ec1f5c; + font-size: 12px; + text-align: left; + line-height: 22px; + padding: 0 10% 0 3% + } + .error[mip-mustache-rendered] { + display: block; + } + input[type='submit'] { + border: 1px solid #f1f1f1; + border-radius: 5px; + color: #333; + background: #d8d7d7; + } + [submit-success], + [submit-fail], + [submit-error] { + display: none; + } +} + diff --git a/src/mip-youbao-form/package.json b/src/mip-youbao-form/package.json new file mode 100644 index 000000000..c59be345d --- /dev/null +++ b/src/mip-youbao-form/package.json @@ -0,0 +1,14 @@ +{ + "name": "mip-youbao-form", + "version": "1.0.0", + "description": "youbao表单提交", + "contributors": [ + { + "name": "teemor", + "email": "232957726@qq.com" + } + ], + "engines": { + "mip": ">=1.1.0" + } +} From e367e2345dfa6c3cea3d91d7b3ca7777098edae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 22:33:29 +0800 Subject: [PATCH 28/51] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E7=9F=AD=E4=BF=A1?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/README.md | 49 ++++ src/mip-code-button/mip-code-button-fn.js | 288 ++++++++++++++++++++++ src/mip-code-button/mip-code-button.js | 28 +++ src/mip-code-button/mip-code-button.less | 11 + src/mip-code-button/package.json | 12 + 5 files changed, 388 insertions(+) create mode 100644 src/mip-code-button/README.md create mode 100644 src/mip-code-button/mip-code-button-fn.js create mode 100644 src/mip-code-button/mip-code-button.js create mode 100644 src/mip-code-button/mip-code-button.less create mode 100644 src/mip-code-button/package.json diff --git a/src/mip-code-button/README.md b/src/mip-code-button/README.md new file mode 100644 index 000000000..756f628b6 --- /dev/null +++ b/src/mip-code-button/README.md @@ -0,0 +1,49 @@ +# mip-code-button ajax请求 + +ajax请求 + +标题|内容 +----|---- +类型|通用 +支持布局|N/S +## 示例 + +### 基本使用 + +```html + + + + +
        + +
        秒后重新获取
        +
        +         + +``` +### url + +说明： 必须是 HTTP(S) 或 // 开头的地址 +必选项: 是 + +### fetch-button + +说明：提交触发选择器属性 +必选项: 是 + +### time-count +说明： 时间倒计时选择器属性 +必选项: 是 +注意: 时间数值必须包裹在firstElementChild里面 + +### timeout +说明 ： 倒计时超时时间 +默认值: 60 +必选项: 否 + + + + + + diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js new file mode 100644 index 000000000..acc5625c6 --- /dev/null +++ b/src/mip-code-button/mip-code-button-fn.js @@ -0,0 +1,288 @@ +/** + * @file mip-code-button.js + * @description mip-form函数 + * @author chen + */ + +define(function (require) { + var templates = require('templates'); + var util = require('util'); + var viewer = require('viewer'); + var evt; + var fetchData = {}; + return { + + /** + * 处理fetch请求逻辑 + * + * @param {string} url 请求url + */ + fetchUrl: function (url) { + var me = this; + var data = new FormData(); + + for (var index in me.fetchData) { + data.append(index, me.fetchData[index]); + } + + var url = me.url; + // 获取CSRF-TOKEN + var tokenDom = document.querySelector('meta[name="csrf-token"]'); + if (tokenDom) { + var token = tokenDom.getAttribute('content'); + } + + var options = { + method: 'POST', + body: data, + // 使用Accept，用来判断异步 + headers: { + 'Accept': 'application/json', + 'X-CSRF-TOKEN': token ? token : '' + } + }; + // 判断域名，是否跨域.测试使用 + var localhost = location.host; + if (url.indexOf(localhost) === -1) { + options.mode = 'cors'; + options.credentials = 'omit'; + } + // 数据请求处理 + fetch(url, options).then(function (res) { + if (res.ok) { + return res.json(); + } + }).then(function (response) { + + if (response.status === 1) { + + me.successHandle(); + } + if (response.status === -1) { + + me.failHandle(); + } + }).catch(function (err) { + + me.errorHandle(); + // me.fetchReject(err); + }); + }, + + /** + * trim 字符串前后空格 + * @param {string} str 需要trim的字符串 + * @return {string} 过滤完成的字符串 + */ + trim: function (str) { + return str.replace(/(^\s*)|(\s*$)/g, ''); + }, + + /** + * 设置fetch 数据 + * @param {string} key 对象键 + * @param {string, number} val 对象值 + */ + setFetchData: function (key ,val) { + if (!this.fetchData) { + this.fetchData = {}; + } + this.fetchData[key] = val; + }, + + + /** + * fetch出错逻辑处理 + * + * @param {Object} err 错误对象 + */ + fetchReject: function (err) { + var me = this; + // util.css(me.errorEle, {display: 'block'}); + // me.renderTpl(me.errorEle, err); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 模板父节点 + * @param {Object} data 模板渲染数据 + */ + renderTpl: function (ele, data) { + var me = this; + templates.render(ele, data).then(function (html) { + var tempTarget = me.tempHTML(ele); + tempTarget.innerHTML = html; + }); + }, + + /** + * 处理模板渲染 + * + * @param {HTMLElement} ele 渲染后模板父节点 + * @return {HTMLElement} target 新建DOM节点 + */ + + tempHTML: function (ele) { + ele = ele || document; + var target = ele.querySelector('[mip-mustache-rendered]'); + if (!target) { + target = util.dom.create('
        '); + ele.appendChild(target); + } + return target; + }, + + /** + * createDom 创建 form 节点 + * + * @param {HTMLElement} element 组件节点 + */ + createDom: function (element) { + var me = this; + me.fetchData = {}; + me.url = element.getAttribute('url'); + + me.method = (element.getAttribute('method') || 'GET').toUpperCase(); + + var submitBtn = element.querySelector('[fetch-button]'); + // 添加点击事件监听 + submitBtn.addEventListener('click', function (event) { + me.onSubmit(element); + evt = event; + }); + }, + + + /** + * 点击提交按钮事件处理函数 + * + * @param {HTMLElement} element form节点 + */ + onSubmit: function (element) { + var me = this; + // 定时器已存在不允许再次触发点击 + if (me.timer) { + return; + } + var url = element.getAttribute('url') || ''; + if (!url) { + return; + } + + var mobile = this.fetchData.mobile; + var reg = mobile && (/^1[3578]\d{9}$/.test(mobile)); + // 手机验证通过 + + if (!reg) { + me.invalidHandle('mobile'); + return; + } else { + me.validHandle('mobile'); + } + + // 获取时间限制 + var timeout = element.getAttribute('timeout') || 60; + // 开始计时 + me.timeEle = element.querySelector('[time-count]'); + me.submitBtn = element.querySelector('[fetch-button]'); + + // 设置初始值，然后再show + me.timeEle.firstElementChild.innerHTML = timeout + util.css(me.submitBtn, {display: 'none'}); + util.css( me.timeEle, {display: 'block'}); + + + me.timer = setInterval(function () { + + me.timeEle.firstElementChild.innerHTML = timeout--; + if (timeout <= 0) { + me.clearTimer(); + util.css(me.submitBtn, {display: 'block'}); + util.css(me.timeEle, {display: 'none'}); + } + }, 1000); + + this.ele = element; + + // 执行数据请求 + this.fetchUrl(url); + }, + + /** + * 清除定时器 + * + * @param {HTMLElement} element form节点 + */ + + clearTimer: function () { + if (this.timer) { + clearInterval(this.timer); + this.timer = null; + } + }, + + /** + * 输出表单错误信息 + * @param {HTMLElement} element form节点 + */ + invalidHandle: function () { + viewer.eventAction.execute('invalid', evt.target, evt); + } + + /** + * 隐藏表单错误信息 + * @param {HTMLElement} element form节点 + */ + invalidHandle: function () { + viewer.eventAction.execute('valid', evt.target, evt); + } + + + /** + * 提交时的事件 + * + * @param {HTMLElement} element form节点 + */ + submitHandle: function () { + viewer.eventAction.execute('submit', evt.target, evt); + }, + + /** + * 提交成功调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + successHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('success', evt.target, evt); + }, + + /** + * 提交成功，但处理结果为失败，调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + failHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('fail', evt.target, evt); + }, + + + /** + * 提交失败调用的在html on里使用的事件 + * + * @param {HTMLElement} element form节点 + */ + errorHandle: function () { + if (!evt) { + return; + } + viewer.eventAction.execute('error', evt.target, evt); + } + }; +}); diff --git a/src/mip-code-button/mip-code-button.js b/src/mip-code-button/mip-code-button.js new file mode 100644 index 000000000..849111988 --- /dev/null +++ b/src/mip-code-button/mip-code-button.js @@ -0,0 +1,28 @@ +/** + * @file mip-code-button 组件 + * + * @author chen + * @time 2018.8.28 + */ + + define(function (require) { + var customElement = require('customElement').create(); + var initJs = require('./mip-code-button-fn'); + customElement.prototype.build = function () { + var element = this.element; + // 初始化 + initJs.createDom(element); + } + + customElement.prototype.firstInviewCallback = function () { + // 添加绑定手机号事件 + this.addEventAction('bind', function(event, str) { + if (event.target.tagName === 'INPUT') { + + initJs.setFetchData(str, event.target.value.trim()); + } + + }); + } + return customElement; + }); \ No newline at end of file diff --git a/src/mip-code-button/mip-code-button.less b/src/mip-code-button/mip-code-button.less new file mode 100644 index 000000000..f088e604c --- /dev/null +++ b/src/mip-code-button/mip-code-button.less @@ -0,0 +1,11 @@ +mip-code-button { + position: relative; + .btnCode { + display: block; + padding: 10px; + color: #fff; + } + [time-count] { + display: none; + } +} \ No newline at end of file diff --git a/src/mip-code-button/package.json b/src/mip-code-button/package.json new file mode 100644 index 000000000..9e2f78455 --- /dev/null +++ b/src/mip-code-button/package.json @@ -0,0 +1,12 @@ +{ + "name": "mip-code-button", + "version": "1.0.0", + "description":"验证码获取。", + "author": { + "name": "chen", + "email": "chenweilin@258c.com" + }, + "engines": { + "mip": ">=1.0.0" + } +} \ No newline at end of file From 13d2f4e1c8751259f8260d5b5eeae0d3ae4f4c86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 22:38:46 +0800 Subject: [PATCH 29/51] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E7=9F=AD=E4=BF=A1?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/README.md | 8 +------- src/mip-code-button/mip-code-button-fn.js | 4 ++-- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/mip-code-button/README.md b/src/mip-code-button/README.md index 756f628b6..2a0495716 100644 --- a/src/mip-code-button/README.md +++ b/src/mip-code-button/README.md @@ -1,6 +1,4 @@ -# mip-code-button ajax请求 - -ajax请求 +# mip-code-button 标题|内容 ----|---- @@ -11,16 +9,12 @@ ajax请求 ### 基本使用 ```html - - -
        秒后重新获取
         - ``` ### url diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index acc5625c6..80362669c 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -228,7 +228,7 @@ define(function (require) { */ invalidHandle: function () { viewer.eventAction.execute('invalid', evt.target, evt); - } + }, /** * 隐藏表单错误信息 @@ -236,7 +236,7 @@ define(function (require) { */ invalidHandle: function () { viewer.eventAction.execute('valid', evt.target, evt); - } + }, /** From 5ccf2e458a60b603e3d70f0a13f46a8ae363aecd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 22:43:11 +0800 Subject: [PATCH 30/51] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E7=9F=AD=E4=BF=A1?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 80362669c..41c7d9b8f 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -148,8 +148,8 @@ define(function (require) { var submitBtn = element.querySelector('[fetch-button]'); // 添加点击事件监听 submitBtn.addEventListener('click', function (event) { - me.onSubmit(element); evt = event; + me.onSubmit(element); }); }, @@ -227,6 +227,7 @@ define(function (require) { * @param {HTMLElement} element form节点 */ invalidHandle: function () { + viewer.eventAction.execute('invalid', evt.target, evt); }, @@ -234,7 +235,7 @@ define(function (require) { * 隐藏表单错误信息 * @param {HTMLElement} element form节点 */ - invalidHandle: function () { + validHandle: function () { viewer.eventAction.execute('valid', evt.target, evt); }, From ac65469d1de5de4e64b7fe67fea6185919811163 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 23:11:06 +0800 Subject: [PATCH 31/51] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81?= =?UTF-8?q?=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/README.md | 1 + src/mip-youbao-form/mip-youbao-form-fn.js | 42 +++++++++++++- src/mip-youbao-form/mip-youbao-form.js | 68 +++++------------------ 3 files changed, 55 insertions(+), 56 deletions(-) diff --git a/src/mip-youbao-form/README.md b/src/mip-youbao-form/README.md index 9f83b8075..78e7044d6 100644 --- a/src/mip-youbao-form/README.md +++ b/src/mip-youbao-form/README.md @@ -81,6 +81,7 @@ mip-youbao-form 表单组件 ### on 说明: 添加事件清空表单 +参数使用: reload事件，传入数值控制页面刷新等待事件， reset表单数据重置事件 必选项: 否 diff --git a/src/mip-youbao-form/mip-youbao-form-fn.js b/src/mip-youbao-form/mip-youbao-form-fn.js index 31fdaee5f..a352fd941 100644 --- a/src/mip-youbao-form/mip-youbao-form-fn.js +++ b/src/mip-youbao-form/mip-youbao-form-fn.js @@ -11,6 +11,7 @@ define(function (require) { var $ = require('zepto'); var windowInIframe = viewer.isIframed; var evt; + var formEle; var REGS = { EMAIL: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, PHONE: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, @@ -115,6 +116,7 @@ define(function (require) { * @param {HTMLElement} element 组件节点 */ createDom: function (element) { + formEle = element; var me = this; var url = element.getAttribute('url'); var target = element.getAttribute('target'); @@ -239,8 +241,15 @@ define(function (require) { else { reg = me.verification(type, value); } - util.css(element.querySelectorAll('div[target="' + target + '"]'), - {display: (!reg ? 'block' : 'none')}); + + // 显示表单错误信息 + if (reg) { + me.validHandle(target); + } + else { + me.invalidHandle(target); + } + preventSubmit = !reg ? true : preventSubmit; } }); @@ -278,6 +287,35 @@ define(function (require) { } }, + /** + * 显示对应字段的错误信息 + * + * @param {string} 表单name对应的字段名 节点 + */ + invalidHandle: function (target) { + var targetEle = formEle.querySelectorAll('div[target="' + target + '"]'); + if (!targetEle) { + console.log('验证对象target不存在'); + returnl + } + util.css(targetEle, {display: 'block'}); + }, + + /** + * 显示对应字段的错误信息 + * + * @param {string} 表单name对应的字段名 + */ + validHandle: function (target) { + var targetEle = formEle.querySelectorAll('div[target="' + target + '"]'); + if (!targetEle) { + console.log('验证对象target不存在'); + returnl + } + util.css(targetEle, {display: 'none'}); + }, + + /** * 提交时的事件 * diff --git a/src/mip-youbao-form/mip-youbao-form.js b/src/mip-youbao-form/mip-youbao-form.js index 4e290e4b9..667cb0379 100644 --- a/src/mip-youbao-form/mip-youbao-form.js +++ b/src/mip-youbao-form/mip-youbao-form.js @@ -6,77 +6,37 @@ define(function (require) { var customElement = require('customElement').create(); var form = require('./mip-youbao-form-fn'); - var $ = require('zepto'); customElement.prototype.build = function () { var element = this.element; - var url = $(element).attr('fetch-url'); - - - // 获取验证码事件 - - $(element).find('.btnCode').click(function () { - var url = $(this).attr('btn-url'); - var mobile = $(element).find('.inquiryMobile').val(); - getInquiryMobileCode(mobile, 60, url); - }); - - function getInquiryMobileCode(mobile, second, url) { - if (mobile === '' || isNaN(mobile)) { - alert('请输入手机号码'); - return false; - } - else if (mobile.length !== 11) { - alert('请输入正确的手机号码'); - return false; - } - $(element).find('.btnCode').hide(); - if (second <= 1) { - $(element).find('.waitInquiry').html(59); - $(element).find('.getInquiryCode').show(); - $(element).find('.waitInquiryCode').addClass('hide'); - $(element).find('.btnCode').show(); - return true; - } - - if (second >= 60) { - $.ajax({ - type: 'POST', - url: url, - data: 'mobile=' + mobile, - async: true, - success: function (data) { - alert(data.info); - }, - headers: { - 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') - } - }); - $(element).find('.getInquiryCode').hide(); - $(element).find('.waitInquiryCode').removeClass('hide'); - } - second--; - $(element).find('.waitInquiry').html(second); - setTimeout(function () { - getInquiryMobileCode(mobile, second); - }, 1000); - } form.createDom(element); form.initMessageEvents(element); }; customElement.prototype.firstInviewCallback = function () { + + // 页面刷新事件 this.addEventAction('reload', function (event, str) { - // 页面刷新操作 str = str ? 500 : parseInt(str, 10); setTimeout(function () { window.top.location.reload(); }, str); }); + // 表单数据重置事件 this.addEventAction('reset', function (event, str) { - // 页面刷新操作 event.target.reset(); }); + + //验证错误事件 + this.addEventAction('invalid', function (event, target) { + + form.invalidHandle(target); + }); + + this.addEventAction('valid', function (event, target) { + + form.validHandle(target); + }); }; return customElement; }); From bbb219c205b528121d9187b8dfe479690295b043 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 23:12:05 +0800 Subject: [PATCH 32/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 41c7d9b8f..703cc2aa9 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -227,7 +227,7 @@ define(function (require) { * @param {HTMLElement} element form节点 */ invalidHandle: function () { - + console.log('mobile字段格式不正确'); viewer.eventAction.execute('invalid', evt.target, evt); }, @@ -236,6 +236,7 @@ define(function (require) { * @param {HTMLElement} element form节点 */ validHandle: function () { + console.log('mobile字段格式验证通过'); viewer.eventAction.execute('valid', evt.target, evt); }, From 34e6eebe094868e10c86328ae23fcab57e9f2bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Thu, 6 Sep 2018 23:43:52 +0800 Subject: [PATCH 33/51] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=AA=8C=E8=AF=81?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/README.md | 4 ++-- src/mip-youbao-form/mip-youbao-form.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/mip-youbao-form/README.md b/src/mip-youbao-form/README.md index 78e7044d6..705a63750 100644 --- a/src/mip-youbao-form/README.md +++ b/src/mip-youbao-form/README.md @@ -13,7 +13,7 @@ mip-youbao-form 表单组件 ```html - +
        请输入正确的电话
        年龄不能为空
        @@ -81,7 +81,7 @@ mip-youbao-form 表单组件 ### on 说明: 添加事件清空表单 -参数使用: reload事件，传入数值控制页面刷新等待事件， reset表单数据重置事件 +参数使用: reload事件，传入数值控制页面刷新等待事件， reset表单数据重置事件 tagInvalid(target)目标对象字段验证不通过 tagValid(target)目标对象字段验证通过 必选项: 否 diff --git a/src/mip-youbao-form/mip-youbao-form.js b/src/mip-youbao-form/mip-youbao-form.js index 667cb0379..dad822d18 100644 --- a/src/mip-youbao-form/mip-youbao-form.js +++ b/src/mip-youbao-form/mip-youbao-form.js @@ -28,12 +28,12 @@ define(function (require) { }); //验证错误事件 - this.addEventAction('invalid', function (event, target) { + this.addEventAction('invalidTag', function (event, target) { form.invalidHandle(target); }); - this.addEventAction('valid', function (event, target) { + this.addEventAction('validTag', function (event, target) { form.validHandle(target); }); From 0c803e2021a0761cd41084dbb7e8aeea06a0ace9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 7 Sep 2018 16:32:41 +0800 Subject: [PATCH 34/51] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dradio=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E9=AA=8C=E8=AF=81bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/README.md | 9 ++++++- src/mip-youbao-form/mip-youbao-form-fn.js | 31 +++++++++++++++-------- src/mip-youbao-form/mip-youbao-form.js | 5 ++-- 3 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/mip-youbao-form/README.md b/src/mip-youbao-form/README.md index 705a63750..470b78239 100644 --- a/src/mip-youbao-form/README.md +++ b/src/mip-youbao-form/README.md @@ -17,6 +17,13 @@ mip-youbao-form 表单组件
        请输入正确的电话
        年龄不能为空
        + + +
        请选择性别
        @@ -81,7 +88,7 @@ mip-youbao-form 表单组件 ### on 说明: 添加事件清空表单 -参数使用: reload事件，传入数值控制页面刷新等待事件， reset表单数据重置事件 tagInvalid(target)目标对象字段验证不通过 tagValid(target)目标对象字段验证通过 +参数使用: reload事件，传入数值控制页面刷新等待事件， reset表单数据重置事件 invalidTag(target)目标对象字段验证不通过 validTag(target)目标对象字段验证通过 必选项: 否 diff --git a/src/mip-youbao-form/mip-youbao-form-fn.js b/src/mip-youbao-form/mip-youbao-form-fn.js index a352fd941..35f8545cd 100644 --- a/src/mip-youbao-form/mip-youbao-form-fn.js +++ b/src/mip-youbao-form/mip-youbao-form-fn.js @@ -8,7 +8,6 @@ define(function (require) { var templates = require('templates'); var util = require('util'); var viewer = require('viewer'); - var $ = require('zepto'); var windowInIframe = viewer.isIframed; var evt; var formEle; @@ -33,7 +32,6 @@ define(function (require) { }; if (me.method === 'POST') { var formD = me.ele.querySelector('form'); - var data = $(formD).serializeArray(); if (formD) { fetchData = util.fn.extend({}, fetchData, { body: new FormData(formD) @@ -189,9 +187,20 @@ define(function (require) { * * @param {string} type 验证类型 * @param {string} value 需要验证的文案 + * @param {HTMLElement} target dom元素 * @return {boolean} 是否符合自定义校验 */ - verification: function (type, value) { + verification: function (type, value, target) { + if (target.type === 'radio') { + var sameRadio = this.ele.querySelectorAll('input[type="radio"][name="' + target.name + '"]'); + var checked = false; + for (var i in sameRadio) { + if (sameRadio[i].checked) { + checked = true; + } + } + return checked; + } return (type === 'must') ? !(value === '') : REGS[type.toUpperCase()].test(value); }, @@ -239,13 +248,13 @@ define(function (require) { reg = value === '' ? false : (new RegExp(regval)).test(value); } else { - reg = me.verification(type, value); + reg = me.verification(type, value, item); } // 显示表单错误信息 if (reg) { me.validHandle(target); - } + } else { me.invalidHandle(target); } @@ -289,14 +298,15 @@ define(function (require) { /** * 显示对应字段的错误信息 - * - * @param {string} 表单name对应的字段名 节点 + * + * @param {string} target 表单验证目标 + * @return {void} 无返回值 */ invalidHandle: function (target) { var targetEle = formEle.querySelectorAll('div[target="' + target + '"]'); if (!targetEle) { console.log('验证对象target不存在'); - returnl + return; } util.css(targetEle, {display: 'block'}); }, @@ -304,13 +314,14 @@ define(function (require) { /** * 显示对应字段的错误信息 * - * @param {string} 表单name对应的字段名 + * @param {string} target 表单验证目标 + * @return {void} 无返回值 */ validHandle: function (target) { var targetEle = formEle.querySelectorAll('div[target="' + target + '"]'); if (!targetEle) { console.log('验证对象target不存在'); - returnl + return; } util.css(targetEle, {display: 'none'}); }, diff --git a/src/mip-youbao-form/mip-youbao-form.js b/src/mip-youbao-form/mip-youbao-form.js index dad822d18..556985e25 100644 --- a/src/mip-youbao-form/mip-youbao-form.js +++ b/src/mip-youbao-form/mip-youbao-form.js @@ -27,14 +27,13 @@ define(function (require) { event.target.reset(); }); - //验证错误事件 + // 验证错误事件 this.addEventAction('invalidTag', function (event, target) { - form.invalidHandle(target); }); + // mip?尼玛B,我34行哪里多空格了，艹。5min写东西，10min调格式 this.addEventAction('validTag', function (event, target) { - form.validHandle(target); }); }; From c23a7e99d236720371e455b058949d74f0aaf401 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 10 Sep 2018 09:14:59 +0800 Subject: [PATCH 35/51] =?UTF-8?q?=E9=82=AE=E7=BC=96=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0xmlHttpRequest=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/mip-youbao-form-fn.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/mip-youbao-form/mip-youbao-form-fn.js b/src/mip-youbao-form/mip-youbao-form-fn.js index 35f8545cd..8ea073a5c 100644 --- a/src/mip-youbao-form/mip-youbao-form-fn.js +++ b/src/mip-youbao-form/mip-youbao-form-fn.js @@ -26,9 +26,21 @@ define(function (require) { fetchUrl: function (url) { var me = this; util.css([me.successEle, me.failEle, me.errorEle], {display: 'none'}); + + // 获取CSRF-TOKEN + var tokenDom = document.querySelector('meta[name="csrf-token"]'); + if (tokenDom) { + var token = tokenDom.getAttribute('content'); + } + var fetchData = { method: me.method, - credentials: 'include' + credentials: 'include', + headers: new Headers({ + 'XMLHttpRequest': 'X-Requested-With', + 'Accept': 'application/json', + 'X-CSRF-TOKEN': token ? token : '' + }) }; if (me.method === 'POST') { var formD = me.ele.querySelector('form'); From 05a1c55832f842922a12281e67f69804bbde0849 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 10 Sep 2018 09:21:02 +0800 Subject: [PATCH 36/51] =?UTF-8?q?=E6=B7=BB=E5=8A=A0ajax=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/README.md | 3 +- src/mip-code-button/mip-code-button-fn.js | 52 ++++++++--------------- src/mip-code-button/mip-code-button.js | 39 +++++++++-------- src/mip-code-button/mip-code-button.less | 2 +- 4 files changed, 39 insertions(+), 57 deletions(-) diff --git a/src/mip-code-button/README.md b/src/mip-code-button/README.md index 2a0495716..adb82995e 100644 --- a/src/mip-code-button/README.md +++ b/src/mip-code-button/README.md @@ -9,9 +9,10 @@ ### 基本使用 ```html +
        - +
        秒后重新获取
         diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 703cc2aa9..51b2ceb1b 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -9,7 +9,6 @@ define(function (require) { var util = require('util'); var viewer = require('viewer'); var evt; - var fetchData = {}; return { /** @@ -22,10 +21,10 @@ define(function (require) { var data = new FormData(); for (var index in me.fetchData) { - data.append(index, me.fetchData[index]); + if (me.fetchData.hasOwnProperty(index)) { + data.append(index, me.fetchData[index]); + } } - - var url = me.url; // 获取CSRF-TOKEN var tokenDom = document.querySelector('meta[name="csrf-token"]'); if (tokenDom) { @@ -36,10 +35,11 @@ define(function (require) { method: 'POST', body: data, // 使用Accept，用来判断异步 - headers: { + headers: new Headers({ 'Accept': 'application/json', + 'XMLHttpRequest': 'X-Requested-With', 'X-CSRF-TOKEN': token ? token : '' - } + }) }; // 判断域名，是否跨域.测试使用 var localhost = location.host; @@ -47,6 +47,7 @@ define(function (require) { options.mode = 'cors'; options.credentials = 'omit'; } + // 数据请求处理 fetch(url, options).then(function (res) { if (res.ok) { @@ -68,29 +69,13 @@ define(function (require) { // me.fetchReject(err); }); }, - - /** - * trim 字符串前后空格 - * @param {string} str 需要trim的字符串 - * @return {string} 过滤完成的字符串 - */ - trim: function (str) { - return str.replace(/(^\s*)|(\s*$)/g, ''); - }, - - /** - * 设置fetch 数据 - * @param {string} key 对象键 - * @param {string, number} val 对象值 - */ - setFetchData: function (key ,val) { - if (!this.fetchData) { + setFetchData: function (key, val) { + if (!this.fetchData) { this.fetchData = {}; } this.fetchData[key] = val; }, - /** * fetch出错逻辑处理 * @@ -98,8 +83,8 @@ define(function (require) { */ fetchReject: function (err) { var me = this; - // util.css(me.errorEle, {display: 'block'}); - // me.renderTpl(me.errorEle, err); + util.css(me.errorEle, {display: 'block'}); + me.renderTpl(me.errorEle, err); }, /** @@ -162,7 +147,7 @@ define(function (require) { onSubmit: function (element) { var me = this; // 定时器已存在不允许再次触发点击 - if (me.timer) { + if (me.timer) { return; } var url = element.getAttribute('url') || ''; @@ -173,11 +158,11 @@ define(function (require) { var mobile = this.fetchData.mobile; var reg = mobile && (/^1[3578]\d{9}$/.test(mobile)); // 手机验证通过 - if (!reg) { me.invalidHandle('mobile'); return; - } else { + } + else { me.validHandle('mobile'); } @@ -188,13 +173,11 @@ define(function (require) { me.submitBtn = element.querySelector('[fetch-button]'); // 设置初始值，然后再show - me.timeEle.firstElementChild.innerHTML = timeout + me.timeEle.firstElementChild.innerHTML = timeout; util.css(me.submitBtn, {display: 'none'}); - util.css( me.timeEle, {display: 'block'}); + util.css(me.timeEle, {display: 'block'}); - me.timer = setInterval(function () { - me.timeEle.firstElementChild.innerHTML = timeout--; if (timeout <= 0) { me.clearTimer(); @@ -214,13 +197,12 @@ define(function (require) { * * @param {HTMLElement} element form节点 */ - clearTimer: function () { if (this.timer) { clearInterval(this.timer); this.timer = null; } - }, + }, /** * 输出表单错误信息 diff --git a/src/mip-code-button/mip-code-button.js b/src/mip-code-button/mip-code-button.js index 849111988..f851a046d 100644 --- a/src/mip-code-button/mip-code-button.js +++ b/src/mip-code-button/mip-code-button.js @@ -5,24 +5,23 @@ * @time 2018.8.28 */ - define(function (require) { - var customElement = require('customElement').create(); - var initJs = require('./mip-code-button-fn'); - customElement.prototype.build = function () { - var element = this.element; - // 初始化 - initJs.createDom(element); - } +define(function (require) { + var customElement = require('customElement').create(); + var initJs = require('./mip-code-button-fn'); + customElement.prototype.build = function () { + var element = this.element; + // 初始化 + initJs.createDom(element); + }; - customElement.prototype.firstInviewCallback = function () { - // 添加绑定手机号事件 - this.addEventAction('bind', function(event, str) { - if (event.target.tagName === 'INPUT') { - - initJs.setFetchData(str, event.target.value.trim()); - } - - }); - } - return customElement; - }); \ No newline at end of file + // 缩进不能用tab，就这么喜欢标新立异？ + customElement.prototype.firstInviewCallback = function () { + // 添加绑定手机号事件 + this.addEventAction('bind', function (event, str) { + if (event.target.tagName === 'INPUT') { + initJs.setFetchData(str, event.target.value.trim()); + } + }); + }; + return customElement; +}); diff --git a/src/mip-code-button/mip-code-button.less b/src/mip-code-button/mip-code-button.less index f088e604c..565700003 100644 --- a/src/mip-code-button/mip-code-button.less +++ b/src/mip-code-button/mip-code-button.less @@ -6,6 +6,6 @@ mip-code-button { color: #fff; } [time-count] { - display: none; + display: none; } } \ No newline at end of file From f6af2412e2fb1a40fe0cecf87a07365191bbf839 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 10 Sep 2018 09:29:57 +0800 Subject: [PATCH 37/51] =?UTF-8?q?=E6=B7=BB=E5=8A=A0ajax=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 51b2ceb1b..57163c530 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -37,7 +37,7 @@ define(function (require) { // 使用Accept，用来判断异步 headers: new Headers({ 'Accept': 'application/json', - 'XMLHttpRequest': 'X-Requested-With', + 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': token ? token : '' }) }; From 41d6dfa7309828351009ad3c95450318806b494a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 10 Sep 2018 09:30:26 +0800 Subject: [PATCH 38/51] =?UTF-8?q?=E6=B7=BB=E5=8A=A0ajax=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/mip-youbao-form-fn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mip-youbao-form/mip-youbao-form-fn.js b/src/mip-youbao-form/mip-youbao-form-fn.js index 8ea073a5c..8872ff873 100644 --- a/src/mip-youbao-form/mip-youbao-form-fn.js +++ b/src/mip-youbao-form/mip-youbao-form-fn.js @@ -37,7 +37,7 @@ define(function (require) { method: me.method, credentials: 'include', headers: new Headers({ - 'XMLHttpRequest': 'X-Requested-With', + 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-TOKEN': token ? token : '' }) From 38f7657f3dc75d099e86b8ad2745d506ae2cab8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 10 Sep 2018 11:18:48 +0800 Subject: [PATCH 39/51] =?UTF-8?q?checkbox=E8=A1=A8=E5=8D=95=E9=AA=8C?= =?UTF-8?q?=E8=AF=81=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/mip-youbao-form-fn.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/mip-youbao-form/mip-youbao-form-fn.js b/src/mip-youbao-form/mip-youbao-form-fn.js index 8872ff873..09c973ae2 100644 --- a/src/mip-youbao-form/mip-youbao-form-fn.js +++ b/src/mip-youbao-form/mip-youbao-form-fn.js @@ -203,11 +203,11 @@ define(function (require) { * @return {boolean} 是否符合自定义校验 */ verification: function (type, value, target) { - if (target.type === 'radio') { - var sameRadio = this.ele.querySelectorAll('input[type="radio"][name="' + target.name + '"]'); + if (target.type === 'radio' || target.type === 'checkbox') { + var sameEle = this.ele.querySelectorAll('input[type="' + target.type + '"][name="' + target.name + '"]'); var checked = false; - for (var i in sameRadio) { - if (sameRadio[i].checked) { + for (var i in sameEle) { + if (sameEle[i].checked) { checked = true; } } From dc400292a31e1a1c3a624c788e12df6c60a0cea4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 10 Sep 2018 11:37:33 +0800 Subject: [PATCH 40/51] redirect --- src/mip-258-tool/README.md | 3 ++- src/mip-258-tool/mip-258-tool.js | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/mip-258-tool/README.md b/src/mip-258-tool/README.md index c90a02cf1..d6ad7bac0 100644 --- a/src/mip-258-tool/README.md +++ b/src/mip-258-tool/README.md @@ -11,7 +11,7 @@ ajax请求 ### 基本使用 ```html - + ``` ### on @@ -19,6 +19,7 @@ ajax请求 说明：goback事件对应window.history.back()事件 reload(100)事件对应window.reload()事件，传入毫秒数，用于刷新等待 alert()事件对应window.alert()事件 +redirect('url,time_wait') 对应window.location.href事件 必选项: 否 diff --git a/src/mip-258-tool/mip-258-tool.js b/src/mip-258-tool/mip-258-tool.js index 01e0567a4..f60f3930d 100644 --- a/src/mip-258-tool/mip-258-tool.js +++ b/src/mip-258-tool/mip-258-tool.js @@ -13,6 +13,7 @@ define(function (require) { }; customElement.prototype.firstInviewCallback = function (event, str) { + // 添加页面刷新事件 this.addEventAction('reload', function (event, str) { str = str ? 500 : parseInt(str, 10); @@ -20,16 +21,32 @@ define(function (require) { window.top.location.reload(); }, str); }); + // 添加alert提示事件 this.addEventAction('alert', function (event, str) { window.top.alert(str); }); + + // 添加后退事件 this.addEventAction('goback', function (event, str) { if (window.top.history.length === 0) { window.top.location.href = str; } window.top.history.back(); }); + + // 添加重定向事件 + this.addEventAction('redirect', function (event, url) { + var params = url.split(','); + url = params[0]; + var timeWait = params[1] ? Number.parseInt(params[1], 10) : 0; + + if (url) { + setTimeout(function () { + window.top.location.href = url; + }, timeWait); + } + }); }; return customElement; }); From c2b28d7c634e18b403aa4ead6684f06e1a36c60c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Mon, 10 Sep 2018 11:44:56 +0800 Subject: [PATCH 41/51] =?UTF-8?q?checkbox=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-youbao-form/mip-youbao-form-fn.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/mip-youbao-form/mip-youbao-form-fn.js b/src/mip-youbao-form/mip-youbao-form-fn.js index 09c973ae2..ab41329c7 100644 --- a/src/mip-youbao-form/mip-youbao-form-fn.js +++ b/src/mip-youbao-form/mip-youbao-form-fn.js @@ -204,7 +204,8 @@ define(function (require) { */ verification: function (type, value, target) { if (target.type === 'radio' || target.type === 'checkbox') { - var sameEle = this.ele.querySelectorAll('input[type="' + target.type + '"][name="' + target.name + '"]'); + var selector = 'input[type="' + target.type + '"][name="' + target.name + '"]'; + var sameEle = this.ele.querySelectorAll(selector); var checked = false; for (var i in sameEle) { if (sameEle[i].checked) { From 9a1bdadcf93def646e5766e2effc0a2a9e618ba3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Tue, 11 Sep 2018 09:10:31 +0800 Subject: [PATCH 42/51] =?UTF-8?q?=E6=B7=BB=E5=8A=A0fetch=20include?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 57163c530..b44f572f5 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -33,6 +33,7 @@ define(function (require) { var options = { method: 'POST', + credentials: 'include', body: data, // 使用Accept，用来判断异步 headers: new Headers({ From ef2a8ea7ce189ccc86509af618ba1644b6f122eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 15:38:43 +0800 Subject: [PATCH 43/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index b44f572f5..c4dfd421d 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -182,8 +182,6 @@ define(function (require) { me.timeEle.firstElementChild.innerHTML = timeout--; if (timeout <= 0) { me.clearTimer(); - util.css(me.submitBtn, {display: 'block'}); - util.css(me.timeEle, {display: 'none'}); } }, 1000); @@ -199,8 +197,11 @@ define(function (require) { * @param {HTMLElement} element form节点 */ clearTimer: function () { + if (this.timer) { clearInterval(this.timer); + util.css(this.submitBtn, {display: 'block'}); + util.css(this.timeEle, {display: 'none'}); this.timer = null; } }, @@ -254,6 +255,7 @@ define(function (require) { if (!evt) { return; } + this.clearTimer(); viewer.eventAction.execute('fail', evt.target, evt); }, From 48b014f3e703b506faaf674d41e6f78712879ac0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 15:52:16 +0800 Subject: [PATCH 44/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index c4dfd421d..8cdad2bac 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -199,6 +199,7 @@ define(function (require) { clearTimer: function () { if (this.timer) { + console.dir(this); clearInterval(this.timer); util.css(this.submitBtn, {display: 'block'}); util.css(this.timeEle, {display: 'none'}); From 09fb5fc2f8551846ffd92a316de0c3dcc650b5b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 15:54:56 +0800 Subject: [PATCH 45/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 8cdad2bac..9398d1b1d 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -55,7 +55,8 @@ define(function (require) { return res.json(); } }).then(function (response) { - + console.log(response.status); + console.log(response.status === -1); if (response.status === 1) { me.successHandle(); @@ -253,6 +254,7 @@ define(function (require) { * @param {HTMLElement} element form节点 */ failHandle: function () { + console.log('fail'); if (!evt) { return; } From f2664909e090c7b35643362d1ce1bc3a33621841 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 15:58:57 +0800 Subject: [PATCH 46/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 9398d1b1d..cf19f0c06 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -55,13 +55,12 @@ define(function (require) { return res.json(); } }).then(function (response) { - console.log(response.status); - console.log(response.status === -1); - if (response.status === 1) { + var status = parseInt(response.status, 10); + if (status === 1) { me.successHandle(); } - if (response.status === -1) { + if (status === -1) { me.failHandle(); } From 37f7a97e07cd449f6779026dc59a791732cce4ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 16:40:05 +0800 Subject: [PATCH 47/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/README.md | 1 - src/mip-code-button/mip-code-button-fn.js | 9 +++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/mip-code-button/README.md b/src/mip-code-button/README.md index adb82995e..01251c9f7 100644 --- a/src/mip-code-button/README.md +++ b/src/mip-code-button/README.md @@ -9,7 +9,6 @@ ### 基本使用 ```html -
        diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index cf19f0c06..7b467fafc 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -59,11 +59,12 @@ define(function (require) { if (status === 1) { me.successHandle(); - } - if (status === -1) { - + } else { + // 设置错误信息绑定，字段名定死为fail_tip_info + MIP.setData({fail_tip_info: response.info}); me.failHandle(); } + }).catch(function (err) { me.errorHandle(); @@ -253,7 +254,7 @@ define(function (require) { * @param {HTMLElement} element form节点 */ failHandle: function () { - console.log('fail'); + if (!evt) { return; } From 9969e20f316b738285ae8ed342b6ffae868ead22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 17:03:15 +0800 Subject: [PATCH 48/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/README.md | 6 +++++- src/mip-code-button/mip-code-button-fn.js | 13 +++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/mip-code-button/README.md b/src/mip-code-button/README.md index 01251c9f7..9f665e509 100644 --- a/src/mip-code-button/README.md +++ b/src/mip-code-button/README.md @@ -9,7 +9,7 @@ ### 基本使用 ```html - +
        秒后重新获取
        @@ -36,6 +36,10 @@ 默认值: 60 必选项: 否 +### fail-info-id +说明 ： 获取失败错误信息提示元素 +必选项: 否 + diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 7b467fafc..2132c9dc3 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -60,8 +60,14 @@ define(function (require) { me.successHandle(); } else { - // 设置错误信息绑定，字段名定死为fail_tip_info - MIP.setData({fail_tip_info: response.info}); + // 处理错误提示 + if (me.failInfoId) { + var failInfoEl = document.getElementById(me.failInfoId); + if (failInfoEl) { + failInfoEl.innerHTML = response.info; + } + } + me.failHandle(); } @@ -132,6 +138,7 @@ define(function (require) { me.method = (element.getAttribute('method') || 'GET').toUpperCase(); + me.failInfoId = element.getAttribute('fail-info-id'); var submitBtn = element.querySelector('[fetch-button]'); // 添加点击事件监听 submitBtn.addEventListener('click', function (event) { @@ -200,8 +207,6 @@ define(function (require) { clearTimer: function () { if (this.timer) { - console.dir(this); - clearInterval(this.timer); util.css(this.submitBtn, {display: 'block'}); util.css(this.timeEle, {display: 'none'}); this.timer = null; From a79f1fc092cf3b42f3820186ade089f6595432ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 17:12:24 +0800 Subject: [PATCH 49/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 27 +++++++++++++++++------ 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index 2132c9dc3..f3f8bded1 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -61,13 +61,7 @@ define(function (require) { me.successHandle(); } else { // 处理错误提示 - if (me.failInfoId) { - var failInfoEl = document.getElementById(me.failInfoId); - if (failInfoEl) { - failInfoEl.innerHTML = response.info; - } - } - + me.showFailInfo(response.info); me.failHandle(); } @@ -77,6 +71,23 @@ define(function (require) { // me.fetchReject(err); }); }, + hideFailInfo: function () { + if (me.failInfoId) { + var failInfoEl = document.getElementById(me.failInfoId); + if (failInfoEl) { + util.css(failInfoEl, {display: 'none'}); + } + } + }, + showFailInfo: function (info) { + if (me.failInfoId) { + var failInfoEl = document.getElementById(me.failInfoId); + if (failInfoEl) { + failInfoEl.innerHTML = info; + util.css(failInfoEl, {display: 'block'}); + } + } + }, setFetchData: function (key, val) { if (!this.fetchData) { this.fetchData = {}; @@ -139,6 +150,7 @@ define(function (require) { me.method = (element.getAttribute('method') || 'GET').toUpperCase(); me.failInfoId = element.getAttribute('fail-info-id'); + me.hideFailInfo(); var submitBtn = element.querySelector('[fetch-button]'); // 添加点击事件监听 submitBtn.addEventListener('click', function (event) { @@ -154,6 +166,7 @@ define(function (require) { * @param {HTMLElement} element form节点 */ onSubmit: function (element) { + me.hideFailInfo(); var me = this; // 定时器已存在不允许再次触发点击 if (me.timer) { From 511c4d3258d902efb85a51a5790a12ffa2e70568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 17:15:16 +0800 Subject: [PATCH 50/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index f3f8bded1..a3801bb31 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -72,16 +72,16 @@ define(function (require) { }); }, hideFailInfo: function () { - if (me.failInfoId) { - var failInfoEl = document.getElementById(me.failInfoId); + if (this.failInfoId) { + var failInfoEl = document.getElementById(this.failInfoId); if (failInfoEl) { util.css(failInfoEl, {display: 'none'}); } } }, showFailInfo: function (info) { - if (me.failInfoId) { - var failInfoEl = document.getElementById(me.failInfoId); + if (this.failInfoId) { + var failInfoEl = document.getElementById(this.failInfoId); if (failInfoEl) { failInfoEl.innerHTML = info; util.css(failInfoEl, {display: 'block'}); @@ -166,8 +166,8 @@ define(function (require) { * @param {HTMLElement} element form节点 */ onSubmit: function (element) { - me.hideFailInfo(); var me = this; + me.hideFailInfo(); // 定时器已存在不允许再次触发点击 if (me.timer) { return; From 64fd90a1a56767b5a92eefc42be81f44c95c2175 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=A8=81=E6=9E=97?= Date: Fri, 14 Sep 2018 17:32:30 +0800 Subject: [PATCH 51/51] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-code-button/mip-code-button-fn.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/mip-code-button/mip-code-button-fn.js b/src/mip-code-button/mip-code-button-fn.js index a3801bb31..a4b190aa8 100644 --- a/src/mip-code-button/mip-code-button-fn.js +++ b/src/mip-code-button/mip-code-button-fn.js @@ -149,7 +149,7 @@ define(function (require) { me.method = (element.getAttribute('method') || 'GET').toUpperCase(); - me.failInfoId = element.getAttribute('fail-info-id'); + me.failInfoId = element.getAttribute('fail-info-id'); me.hideFailInfo(); var submitBtn = element.querySelector('[fetch-button]'); // 添加点击事件监听 @@ -220,6 +220,7 @@ define(function (require) { clearTimer: function () { if (this.timer) { + clearInterval(this.timer); util.css(this.submitBtn, {display: 'block'}); util.css(this.timeEle, {display: 'none'}); this.timer = null;