Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

新增mip-gzpd-alert业务组件 #1256

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

新增mip-gzpd-alert业务组件 #1256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fc6434f
新增mip-gzpd-alert业务组件
jfdsies Sep 26, 2018
d6409eb
组件bug修正
jfdsies Sep 26, 2018
6ee250b
问题修正
jfdsies Sep 26, 2018
ca96551
Revert "组件bug修正"
jfdsies Sep 26, 2018
e518cb6
Revert "Revert "组件bug修正""
jfdsies Sep 26, 2018
9f27bb1
样式调整
jfdsies Sep 26, 2018
c1ecc02
代码规范处理
jfdsies Sep 27, 2018
990ae6b
根据审核组件要求规范处理
jfdsies Sep 27, 2018
037a3ab
登陆验证bug修正
jfdsies Sep 27, 2018
d4175e5
根据审核组件要求规范处理
jfdsies Sep 27, 2018
51c8866
业务代码更新 ,按照要求修改代码.
jfdsies Oct 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions mip-gzpd-alert/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# mip-gzpd-alert

提示组件

标题|内容
----|----
类型|业务
支持布局|N/S
所需脚本|https://mipcache.bdstatic.com/static/v1/mip-___/mip-___.js

## 示例

### 基本使用

```html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<mip-gzpd-alert>
<script id="mip-gzpd-alert-data" type="application/json">
{
"id": 105,
"kefu": "kefu-8002",
"cookieKey": "scan_ok",
"cookieTtl": 86400,
"showBox": [true, false],
"alert": {
"title": "用户服务",
"art": "登陆并支付后使用",
"detail": ["", ""],
"btn": "跳转查看",
"service": "联系客服"
},
"alertFree": {
"title": "",
"detail": [""],
"placeholder": "",
"btn": "确认"
},
"alertWx": {
"title": "付费提醒",
"detail": ["微信支付:", "9.9元"]
},
"alertOk": {
"title": "支付成功",
"detail": ["获得使用权限"]
},
"alertCopy": {
"title": "执行成功"
}
}
</script>
<div class="content">
<h1>文章标题</h1>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
<p>bala bala bala... bala bala bala... bala bala bala...</p>
</div>
</mip-gzpd-alert>
```
204 changes: 204 additions & 0 deletions mip-gzpd-alert/mip-gzpd-alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
/**
* @file mip-gzpd-alert.js
* @description mip-gzpd-alert函数
* @author jfdsies
*/

define(function (require) {
var $ = require('zepto');
var util = require('util');
var CustomStorage = util.customStorage;
var storage = new CustomStorage(0);
var customElem = require('customElement').create();
var buyInterval;
var copyTimeout;

var marksHtml = function (config) {
var payUrl = 'https://my.yjbys.com/company/wxpay/native_middle.php?mip&id=' + config.id + '&rd=' + encodeURI(window.location.href.split('?')[0]);
var freeboxDetail = config.alertFree.detail.map(function (item) {
return '<p>' + item + '</p>';
}).join('');
return '<div class="mip-gzpd-alert-marks">'
+ '<div class="alert-box mip-gzpd-alert-bounceIn">'
+ '<div class="claos"></div>'
+ '<div class="paybox"' + (!config.showBox[0] ? ' style="display:none"' : '') + '>'
+ ' <div class="paybox-title">' + config.alert.title + '</div>'
+ ' <div class="paybox-img">'
+ ' <a href="' + payUrl + '">'
+ ' <mip-img class="qrimg" src="//static.yjbys.com/qrcode/pay.jpg"></mip-img></a></div>'
+ ' <div class="paybox-money">'
+ ' <span>' + config.alert.detail[0] + '</span>'
+ ' <span>' + config.alert.detail[1] + '</span></div>'
+ ' <a class="paybox-bottom-a" href="' + payUrl + '">'
+ ' <div class="paybox-bottom">' + config.alert.btn + '</div></a>'
+ '</div>'
+ '<div class="freebox"' + (!config.showBox[1] ? ' style="display:none"' : '') + '>'
+ ' <div class="freebox-title">' + config.alertFree.title + '</div>'
+ ' <div class="freebox-description">' + freeboxDetail + '</div>'
+ ' <div class="freebox-code">'
+ ' <input type="text" placeholder="' + config.alertFree.placeholder + '" class="freebox-input">'
+ ' <input type="button" value="' + config.alertFree.btn + '" class="freebox-btn">'
+ ' </div>'
+ '</div>'
+ '<div class="paybox-cservice">' + config.alert.service + '</div>'
+ '</div></div>';
};
var payAlertHtml = function (config) {
return '<div class="mip-gzpd-alert-marks-wxpay">'
+ ' <div class="wx_pic_img mip-gzpd-alert-bounceIn">'
+ ' <div class="wx_top"><span>' + config.alertWx.title + '</span></div>'
+ ' <div class="cg"><mip-img class="cg-img" src="https://static.yjbys.com/img/company/pay/zhifu_cg.png"></mip-img></div>'
+ ' <div class="payqr_box">'
+ ' <div class="hc" style="display: block;">'
+ ' <mip-img class="hc-img" src="https://static.yjbys.com/img/my/company/wxzhifu_load.gif"></mip-img></div>'
+ ' <div class="zhifu">'
+ ' <div class="sm">' + config.alertWx.detail[0]
+ ' <span>' + config.alertWx.detail[1] + '</span></div>'
+ ' </div>'
+ ' </div>'
+ ' <div class="payqr_success_box">'
+ ' <div class="payqr_success_text">'
+ '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1629">'
+ '<path d="M511.993344 0.002048C229.260838 0.002048 0 229.261862 0 511.998464c0 282.732506 229.259814'
+ ' 511.990272 511.993344 511.990272C794.73097 1023.987712 1023.988736 794.73097 1023.988736'
+ ' 511.998464c0-282.736602-229.257766-511.996416-511.995392-511.996416zM788.582942 397.083376L475.699087'
+ ' 709.96723C464.321548 721.341697 449.189043 727.145665 434.1702 727.145665c-15.018843'
+ ' 0-30.036662-5.687233-41.527863-17.177411l-157.23859-157.241662c-22.982403-22.865668-22.982403-60.072299'
+ ' 0-83.054702 22.982403-22.982403 60.074347-22.86874 83.05675 0l115.823366 115.710727'
+ ' 271.352919-271.357015c22.871812-22.86874 60.074347-22.86874 83.05675 0 22.871812 22.983427 22.871812'
+ ' 60.189034-0.11059 83.057774z" fill="" p-id="1630"></path></svg>'
+ ' <span class="text">' + config.alertOk.title + '</span>'
+ ' <span class="text small">' + config.alertOk.detail[0] + '</span>'
+ ' <button class="btn">确定</button>'
+ ' </div>'
+ ' </div>'
+ ' </div>'
+ '</div>';
};
var copySuccessHtml = function (config) {
return '<div class="mip-gzpd-alert-success mip-gzpd-alert-bounceIn">'
+ '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1271">'
+ '<path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248'
+ ' 512-512 512z m0-938.666667C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667'
+ ' 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333'
+ ' 512 85.333333z m-10.368 625.365334a42.624 42.624 0 0 1-60.330667 0 41.130667 41.130667 0 0'
+ ' 1-7.381333-11.136L275.413333 536.32a42.666667 42.666667 0 1 1 61.056-59.605333l137.216 141.269333'
+ ' 262.016-262.016a42.666667 42.666667 0 0 1 60.330667 60.330667l-294.4 294.4z" p-id="1272"></path></svg>'
+ '<span>' + config.alertCopy.title + '</span></div>';
};
var customerServiceHtml = function (config) {
return '<div class="mip-gzpd-alert-cservice-marks">'
+ '<div class="mip-gzpd-alert-cservice mip-gzpd-alert-bounceIn">'
+ ' <div class="claos"></div>'
+ ' <div class="phone-pic">'
+ ' <h1 class="kefu-name">客服微信号: ' + config.kefu + '</h1>'
+ ' <span class="copy-txt-btn"><a href="weixin://">打开微信</a></span>'
+ ' </div>'
+ ' <div class="phone-art">'
+ ' <span style="color:#ff6600;">付费成功后，若无法使用请联系客服</span>'
+ ' <span>在线时间：周一至周五</span>'
+ ' <span>8:30~12:30 14:00~18:00</span>'
+ ' <input type="text" value="' + config.kefu + '" id="kefu-name-input">'
+ ' </div>'
+ '</div>'
+ '</div>';
};

// build 方法，元素插入到文档时执行，仅会执行一次
customElem.prototype.firstInviewCallback = function () {
var ele = this.element;

var configEle = ele.querySelectorAll('#mip-gzpd-alert-data')[0];
var config = JSON.parse($(configEle).html());

var marks = marksHtml(config);
var payAlert = payAlertHtml(config);
var copySuccess = copySuccessHtml(config);
var customerService = customerServiceHtml(config);

var content = ele.querySelectorAll('.content')[0];
$(content).append(marks + payAlert + copySuccess + customerService);

var cserviceMarks = ele.querySelectorAll('.mip-gzpd-alert-cservice-marks')[0];
var cserviceMarksCloseBtn = cserviceMarks.querySelectorAll('.claos')[0];

var alertMarks = ele.querySelectorAll('.mip-gzpd-alert-marks')[0];
var alertMarksCloseBtn = alertMarks.querySelectorAll('.claos')[0];
var alertMarksPayBox = alertMarks.querySelectorAll('.paybox-cservice')[0];

var alertWxpay = ele.querySelectorAll('.mip-gzpd-alert-marks-wxpay')[0];
var alertWxpaySuccessBtn = alertWxpay.querySelectorAll('.payqr_success_text .btn')[0];

var freeboxBtn = ele.querySelectorAll('.freebox-btn')[0];
var freeboxInput = ele.querySelectorAll('.freebox-input')[0];

document.addEventListener('copy', function (e) {
if (!storage.get(config.cookieKey)) {
if ($(alertMarks).css('display') !== 'block') {
e.clipboardData.setData('text/plain', '');
e.preventDefault();
}
$(alertMarks).css('display', 'block');
}
else {
window.clearTimeout(copyTimeout);
var alertSuccess = ele.querySelectorAll('.mip-gzpd-alert-success')[0];
$(alertSuccess).css('display', 'block');
copyTimeout = window.setTimeout(function () {
$(alertSuccess).css('display', 'none');
}, 1000);
}
});
if (window.location.href.indexOf('order=') > -1) {
var payBox = ele.querySelectorAll('.payqr_box')[0];
var payBoxSuccess = ele.querySelectorAll('.payqr_success_box')[0];
var wxTopSpan = ele.querySelectorAll('.wx_top span')[0];

$(alertWxpay).css('display', 'block');
$(payBox).css('display', 'block');
$(payBoxSuccess).css('display', 'none');
buyInterval = window.setInterval(function () {
$.getJSON('//my.yjbys.com/company/wxpay/trade_copy.php' + window.location.search, function (data) {
if (data.state === 'OK') {
$(alertMarksCloseBtn).css('display', 'none');
$(payBox).css('display', 'none');
$(payBoxSuccess).css('display', 'block');
$(wxTopSpan).text('支付成功');
storage.set(config.cookieKey, 1, config.cookieTtl * 1000);
window.clearInterval(buyInterval);
}
});
}, 1500);
}

$(cserviceMarksCloseBtn).click(function () {
$(cserviceMarks).css('display', 'none');
});

$(alertMarksCloseBtn).click(function () {
$(alertMarks).css('display', 'none');
});

$(alertMarksPayBox).click(function () {
$(cserviceMarks).css('display', 'block');
});

$(freeboxBtn).click(function () {
var userInput = parseInt($(freeboxInput).val(), 10);
if (userInput < 1000) {
alert('输入不正确!');
}

if (userInput > 8000 && userInput < 9999) {
storage.set(config.cookieKey, 1, config.cookieTtl * 1000);
$(alertMarks).css('display', 'none');
}
});

$(alertWxpaySuccessBtn).click(function () {
window.top.location.href = window.location.href.split('?')[0];
});
};

return customElem;
});
Loading