Add:添加支付宝支付页面

master
dulingling 5 years ago
parent 5ea3a11d87
commit 0404b35b1f

@ -9,7 +9,7 @@
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>manage</artifactId>
<version>1.3.12</version>
<version>1.3.13</version>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<jib-maven-plugin.version>1.4.0</jib-maven-plugin.version>

@ -0,0 +1,605 @@
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
div, span, p, ul, li {
box-sizing: border-box;
}
.warning-sm{
color:red;
font-size:10px;
transform-origin: left;
transform: scale(0.8);
}
.ff.key {
position: relative;
}
.weui_grid{
padding: 15px 10px;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.ff {
font-size: 26px;
color: #333333;
}
.ff img {
margin: 10px auto;
display: block;
width: 34px;
}
div.wait {
top: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: absolute;
vertical-align: middle;
text-align: center;
bottom: 0;
opacity: .5;
background-color: gray;
z-index: 10000;
}
.bisnam {
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.rmbcurrency {
font-size: 18px;
color: #888888;
vertical-align: text-bottom;
line-height: 38px;
}
.static .rmbcurrency {
font-size: 14px;
line-height: 30px;
}
.rmbvalue {
font-size: 24px;
color: #888888;
vertical-align: text-bottom;
float: right;
}
.rmbvalue:before {
content: '≈¥';
font-size: 16px;
}
.paydetail {
float: right;
margin-top: 5px;
margin-left: 5px;
}
.static .rmbvalue {
font-size: 18px;
}
.currency {
font-size: 40px;
color: #000;
line-height: 66px;
vertical-align: text-bottom;
margin-right: 10px;
}
.static .currency {
color: #555555;
font-size: 25px;
}
.value {
font-size: 40px;
line-height: 66px;
color: #000;
margin-left: -5px;
vertical-align: text-bottom;
padding-right: 10px;
}
.static .value {
color: #333333;
font-size: 24px;
}
input.value {
background: transparent;
border: none;
line-height: 50px;
}
input.value:active {
background: transparent;
}
input.value:focus {
border: none;
outline: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.pp {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
background-color: #fbf9fe;
}
.row {
width: 100%;
padding: 0 20px;
background: white;
}
.hidden {
display: none;
}
.hide-keyboard-btn {
width: 100%;
}
.hide-keyboard-btn:after {
content: '';
transform: rotate(45deg);
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
width: 30px;
height: 30px;
transform-origin: center;
display: block;
margin: auto;
}
.remark-box.visible {
display: block;
}
.remark-box.visible .remark-input {
font-size: 1.4em;
border: none;
background: #fff;
}
.white-box {
background: #fff;
width: 96%;
margin: 10px auto;
display: block;
position: relative;
padding: 0 10px;
box-sizing: border-box;
}
.white-box.full {
width: 100%;
}
.logo-box .banner {
width: 100%;
display: block;
}
.logo {
margin: auto;
display: block;
margin-top: 20px;
max-height: 60px;
max-width: 80%;
}
.logo-box {
margin-bottom: 50px;
}
.logo-small {
max-height: 100px;
}
.currencyrow {
box-sizing: border-box;
padding: 0px 20px;
text-align: left;
background: #fff;
}
.currencyrow:after {
content: '';
display: block;
clear: both;
}
.currencyrow > * {
display: inline-block;
vertical-align: bottom;
margin-bottom: 0;
box-sizing: border-box;
}
.currencyrow > .remark-btn {
float: right;
display: block;
width: 30px;
height: 30px;
margin-top: 17px;
background: url(../../../images/remark_btn.png) no-repeat;
background-size: cover;
}
.remark-input {
width: 100%;
font-size: 16px;
border-radius: 0;
outline: none;
border: 0px;
height: 50px;
border-top: 1px solid #eee;
padding: 10px 0px;
margin-bottom: 20px;
}
.remark-box {
display: none;
}
.remark-box .remark-mask {
text-align: center;
height: 50px;
font-size: 0.9em;
line-height: 35px;
color: #ccc;
}
.remark-label {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
z-index: 1;
font-weight: bold;
color: #0d6aad;
}
.coupons {
width: 100%;
margin-top: -1px;
background: #fff;
max-height: 350px;
overflow: auto;
padding: 0 10px;
border-radius: 0 0 6px 6px;
}
.coupons > li {
display: block;
width: 100%;
float: none;
color: #888888;
border-radius: 6px;
padding: 10px;
margin: 15px 0;
background: #fff;
box-shadow: 0 0 10px #aaa;
}
.coupons > li:after {
content: '';
clear: both;
display: block
}
.coupons > li:last-child {
border: none;
border-radius: 0 15px 15px 0;
}
.coupons > li .coupon-content {
position: relative;
width: 100%;
border-radius: 4px;
border: 1px dashed #aaa;
padding: 10px 15px;
}
.coupons .title, .coupons .desc, .coupons label {
display: block;
}
.coupons .coupon-content {
display: block;
float: left;
}
.coupons .title {
font-weight: bold;
font-size: 1em;
color: #000000;
position: relative;
}
.coupon-background-image {
width: 100%;
}
.coupon-logo {
height: 25px;
padding-right: 5px;
position: relative;
top: 6px;
}
.coupon-image {
width: 100%;
position: relative;
display: block;
}
.coupon-box-title .coupon-image {
margin: 0;
}
.coupons .use-check {
position: absolute;
display: block;
top: 0;
background-size: cover;
width: 34px;
height: 34px;
right: 0;
}
.coupons .use-check.checked {
background-image: url(/static/images/coupon_checked@3x.png);
}
.coupons .use-check.unchecked {
background-image: url(/static/images/coupon_unchecked@2x.png);
}
.coupons .use-check.disabled {
background-image: url(/static/images/coupon_disabled@2x.png) !important;
}
.coupons .desc {
font-size: 13px;
color: #323200;
margin-top: 5px;
letter-spacing: 0px;
position: relative;
line-height: 18px;
}
.weui-wepay-logos {
background: transparent;
}
.row.weui_grids:before, .row.weui_grids .weui_grid:before, .row.weui_grids .weui_grid:after {
display: none;
}
.keyboard-grids {
padding: 0;
margin-top: 10px;
background: #fff;
bottom: 0;
}
.keyboard-grids:after {
display: block;
content: '';
clear: both;
}
.keyboard-grids .key {
float: left;
position: relative;
width: 25%;
text-align: center;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-right: -1px;
margin-bottom: -1px;
height: 60px;
line-height: 60px;
}
.keyboard-grids .key.del > img {
height: 24px;
display: block;
position: relative;
margin: 19px auto;
}
.keyboard-grids .key.paynow {
height: 180px;
float: right;
background: #108ee9;
color: #fff;
}
.keyboard-grids .key.paynow.alipay {
background: #108ee9;
}
.keyboard-grids .key.paynow.rpay {
background: #FF2D55;
}
.alipay {
color: #108ee9;
}
.wechat {
color: #09bb07;
}
.keyboard-grids .key.paynow > .label {
display: block;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
.keyboard-grids .key.zero-btn {
width: 50%;
}
.pay-brands {
text-align: center;
line-height: 20px;
font-size: 24px;
/* position: fixed; */
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
bottom: 240px;
color: #dddddd;
background: #fbf9fe;
margin-left: -25px;
}
.pay-brands img {
height: 18px;
}
.pay-brands img.wechat-logo {
height: 14px;
}
.weui_dialog_bd .final {
font-weight: bold;
}
#coupon-box-toggle {
padding: 0 20px;
margin-top: 10px;
text-align: right;
font-size: 12px;
cursor: pointer;
}
.coupons-container {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
display: none;
}
.coupons-container.show {
display: block;
}
.coupons-container > .coupons-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
z-index: 1;
}
.coupons-container > .coupon-box {
position: fixed;
z-index: 4;
left: 50%;
top: 50%;
width: 95%;
transform: translate(-50%, -50%);
}
.coupons-container .coupon-box-title {
width: 100%;
display: block;
position: relative;
}
.coupons-container .coupon-box-title:after {
content: '';
display: block;
clear: both;
}
.coupon-close-image {
width: 30px;
}
.coupons-container .coupon-box-title > .title {
display: block;
text-align: center;
font-size: 18px;
color: #FFFFFF;
position: absolute;
width: 100%;
bottom: 34%;
}
.coupons-container .coupon-box-title > #close-coupon-box {
color: #700;
position: absolute;
display: block;
cursor: pointer;
top: -40px;
right: 0;
}
.actCharity{
display: inline;
}
.title_client_name{
padding: 15px 0px 20px 20px;
background: white;
}
.bank_button{
background-color: #eee;
border: 0px;
color: white;
padding: 28px 13%;
margin: 15px 10px;
line-height: 5px;
border-radius: 7px;
font-size: 16px;
}
.pay_button{
background-color: #eee;
border: 0px;
color: white;
padding: 28px 13%;
margin: 15px 0px;
line-height: 5px;
border-radius: 7px;
font-size: 16px;
}

@ -0,0 +1,448 @@
/**
* Created by yixian on 2017-05-08
*/
$(function () {
'use strict';
// document.querySelector('body').addEventListener('touchmove', function(e) {
// if (!document.querySelector('.coupons').contains(e.target)) {
// e.preventDefault();
// }
// });
var dataCache = {price: '0', coupons: [], coupon_groups: {}};
var exchangeRate = 'CNY' == window.currency ? 1 : parseFloat(window.exchange_rate);
dataCache.paying = false;
var ctrl = {};
if (window.AlipayJSBridge) {
AlipayJSBridge.call('hideOptionMenu');
} else {
document.addEventListener('AlipayJSBridgeReady', function () {
AlipayJSBridge.call('hideOptionMenu');
}, false);
}
dataCache.paying = false;
var ctrl = {};
$('.ff.key').bind('touchstart', function () {
if (dataCache.paying) {
return;
}
var char = $(this).attr('data-char');
appendChar(char);
});
$('.coupons .use-check').click(function () {
if ($(this).hasClass('disabled')) {
return;
}
var couponId = $(this).attr('data-coupon-id');
var couponGroup = $(this).attr('data-coupon-group');
if (couponGroup) {
var prevCouponId = dataCache.coupon_groups[couponGroup];
if (prevCouponId) {
var prevIdx = dataCache.coupons.indexOf(prevCouponId);
if (prevIdx >= 0) {
dataCache.coupons.splice(prevIdx, 1);
}
if (prevCouponId != couponId) {
$('.coupons .use-check[data-coupon-id="' + prevCouponId + '"]').removeClass('checked').addClass('unchecked');
dataCache.coupon_groups[couponGroup] = couponId;
} else {
dataCache.coupon_groups[couponGroup] = null;
}
} else {
dataCache.coupon_groups[couponGroup] = couponId;
}
}
if ($(this).is('.checked')) {
$(this).removeClass('checked').addClass('unchecked');
} else {
$(this).removeClass('unchecked').addClass('checked');
}
var checked = $(this).is('.checked');
if (checked) {
dataCache.coupons.push(couponId);
updatePrice();
} else {
var idx = dataCache.coupons.indexOf(couponId);
dataCache.coupons.splice(idx, 1);
updatePrice();
}
});
$('.cb_bankpay').click(function () {
$.ajax({
url: '/sys/partners/' + window.client_moniker + '/jump/link',
method: 'GET',
success: function (res) {
location.href = res;
},
error: function (resp) {
var config = {
template: resp
};
showWeuiDialog(config);
}
})
});
$('#key_B').bind('touchstart', function () {
backspace();
});
function updatePoundage(price) {
if (window.extensions.indexOf('customerrate') >= 0 && window.rateValue != null) {
if (window.use_customised_rate) {
var rate = new Decimal(100).plus(window.rateValue).div(100);
var poundageValue = new Decimal(dataCache.price).mul(rate).sub(dataCache.price);
} else {
var rateRemain = new Decimal(100).sub(window.rateValue).div(100);
poundageValue = new Decimal(dataCache.price).div(rateRemain).sub(dataCache.price);
}
dataCache.poundageValue = poundageValue.toFixed(2, Decimal.ROUND_HALF_UP);
return poundageValue.plus(price).toFixed(2, Decimal.ROUND_HALF_UP);
}
return price;
}
function updatePrice() {
$('#audVal').html(dataCache.price);
var realPrice = dataCache.price;
$('#audValReal').html(realPrice);
var surchargeData = calculateSurcharge(realPrice);
var price = surchargeData.newPrice || realPrice;
var priceBeforeDiscount = price;
dataCache.discounts = [];
dataCache.tax = surchargeData.tax;
dataCache.surcharge = surchargeData.surcharge;
$(window.coupons).each(function () {
price = this.handleDiscount(price, dataCache.price, dataCache.discounts, dataCache.coupons);
});
dataCache.finalPrice = new Decimal(price).toFixed(2, Decimal.ROUND_FLOOR);
var rate = 'CNY' == window.currency ? 1 : exchangeRate;
var cnyVal = Decimal.mul(price, rate).toFixed(2, Decimal.ROUND_FLOOR);
dataCache.currencyPrice = 'CNY' == window.currency ? Decimal.div(priceBeforeDiscount, exchangeRate).toFixed(2, Decimal.ROUND_FLOOR) : priceBeforeDiscount;
$('#cnyVal').html(cnyVal)
}
function backspace() {
dataCache.price = dataCache.price.substring(0, dataCache.price.length - 1);
if (dataCache.price.length == 0) {
dataCache.price = '0';
}
updatePrice();
updatePoundageStatus();
}
function appendChar(char) {
var pointLocation = dataCache.price.indexOf('.');
if (pointLocation >= 0 || char == '.' || dataCache.price.length < 5) {
if (pointLocation >= 0 && char == '.') {
return;
}
if (pointLocation >= 0 && pointLocation <= dataCache.price.length - 3) {
return;
}
if (dataCache.price == '0' && char != '.') {
dataCache.price = '';
}
dataCache.price += char;
updatePrice();
updatePoundageStatus();
}
}
function updatePoundageStatus() {
$(window.coupons).each(function () {
var coupon = this;
var couponId = coupon.couponId();
if (coupon.isEnable(dataCache.currencyPrice || 0)) {
$('.coupons .use-check[data-coupon-id=' + couponId + ']').removeClass('disabled');
} else {
var dom = $('.coupons .use-check[data-coupon-id=' + couponId + ']').addClass('disabled');
var couponGroup = dom.attr('data-coupon-group');
if (couponGroup) {
if (dataCache.coupon_groups[couponGroup] == couponId) {
dataCache.coupon_groups[couponGroup] = null;
}
}
var idx = dataCache.coupons.indexOf(couponId);
if (idx >= 0) {
dataCache.coupons.splice(idx, 1);
}
dom.removeClass('checked').addClass('unchecked');
}
})
}
updatePoundageStatus();
$('#coupon-box-toggle').click(function () {
$('.coupons-container').addClass('show');
});
$('.coupons-container>.coupons-mask,.coupons-container #close-coupon-box').click(function () {
$(this).parents('.coupons-container').removeClass('show');
});
$('.paydetail').click(function () {
var config = {
title: 'Payment Detail',
template: '',
initialize: function (dialog) {
var bd = $('.weui_dialog_bd', dialog);
var currencySymbol = window.currency == 'CNY' ? '¥' : '$';
$('<p></p>').html('Input Price 输入金额:' + currencySymbol + dataCache.price).appendTo(bd);
if (parseFloat(dataCache.surcharge) > 0) {
$('<p></p>').html('Surcharge 手续费(' + window.rateValue + '%):+' + currencySymbol + dataCache.surcharge).appendTo(bd);
}
if (parseFloat(dataCache.tax) > 0) {
$('<p></p>').html('GST(10%):' + currencySymbol + dataCache.tax).appendTo(bd);
}
$(dataCache.discounts).each(function () {
$('<p></p>').html(this.title + ':-' + currencySymbol + this.amount).appendTo(bd);
});
$('<p></p>').addClass('final').html('Final 支付金额:' + currencySymbol + (dataCache.finalPrice || 0)).appendTo(bd);
}
};
showWeuiDialog(config);
});
$('#key_P').click(function () {
if (window.requireRemark) {
if (!dataCache.remark) {
var config = {
title: '请先输入备注',
template: ''
};
showWeuiDialog(config);
}
}
});
function addBlurListen() {
$('.remark-input').on('blur', function (event) {
dataCache.remark = $('textarea[name="remark"]').val();
});
}
addBlurListen();
$('#audVal').bind('DOMNodeInserted', function(e) {
if(dataCache.price==0){
$('.pay_button').css({"background-color":"#eee",}).attr('disabled',true);
$('.bank_button').css({"background-color":"#eee",}).attr('disabled',true);
}else{
$('.pay_button').css({"background-color":"#19AD18",}).attr('disabled',false);
$('.bank_button').css({"background-color":"#FF6600",}).attr('disabled',false);
}
});
$('#key_P').bind('touchstart', function () {
if (window.requireRemark) {
if ($('textarea[name="remark"]').val()=="") {
return;
}
}
$('#key_P').addClass('hidden');
$('#key_Loading').removeClass('hidden');
if (dataCache.paying) {
return;
}
dataCache.paying = true;
var data = {price: dataCache.price + '', currency: window.currency};
if (dataCache.remark) {
data.description = dataCache.remark;
}
if (window.extensions.indexOf('preauthorize') >= 0) {
data.preauthorize = true;
}
if (window.extensions.indexOf('qrcodemode') >= 0) {
data.qrmode = true;
}
if (window.extensions.indexOf('customerrate') >= 0) {
data.customerrate = true;
}
data.coupons = dataCache.coupons;
data.qrcodeVersion = window.qrcodeVersion;
$.ajax({
url: '/api/v1.0/alipay/partners/' + window.client_moniker + '/orders',
method: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
dataType: 'json',
success: function (pay) {
if (pay.direct_paid) {
location.href = '/api/v1.0/alipay/partners/' + window.client_moniker + '/orders/' + pay.order_id + '/result';
return;
}
if (window.AlipayJSBridge) {
callPayment();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callPayment, false);
}
function callPayment() {
try {
AlipayJSBridge.call('tradePay', {
tradeNO: pay.trade_no
}, function (res) {
dataCache.paying = false;
if (res.resultCode == '9000') {
AlipayJSBridge.call('startApp', {
appId: '20000056',
param: {
actionType: 'showSuccPage',
payResult: res.result
},
closeCurrentApp: false
});
startCheckOrder(pay.order_id, '/api/v1.0/alipay/partners/' + window.client_moniker + '/orders/' + pay.order_id + '/result');
} else if (res.resultCode == '6001') {
//do nothing
} else {
if (res.memo) {
weuiAlert(res.memo);
}
}
$('#key_P_div').removeClass('hidden');
$('#key_Loading_div').addClass('hidden');
})
} catch (err) {
weuiAlert(err)
}
}
},
error: function (jqXhr) {
weuiAlert(jqXhr.responseJSON.message);
$('#key_P_div').removeClass('hidden');
$('#key_Loading_div').addClass('hidden');
dataCache.paying = false;
}
})
});
function startCheckOrder(orderId, url) {
function checkOrderStd() {
$.ajax({
url: '/api/v1.0/payment/orders/' + orderId + '/status',
method: 'GET',
dataType: 'json',
success: function (res) {
if (res.paid) {
location.href = url;
} else {
setTimeout(checkOrderStd, 500);
}
}
})
}
checkOrderStd();
}
function weuiAlert(msg) {
var config = {
template: msg
};
showWeuiDialog(config);
}
function showWeuiDialog(config) {
if (config.templateUrl) {
$.ajax({
url: config.templateUrl,
dataType: 'html',
success: function (template) {
buildDialog(template);
}
});
} else {
buildDialog(config.template);
}
function buildDialog(template) {
var defaultConfig = {backdrop: true};
config = $.extend({}, defaultConfig, config);
var dialog = $("<div></div>", {class: 'weui_dialog_confirm'});
var mask = $('<div></div>', {class: 'weui_mask'}).appendTo(dialog);
if (config.backdrop) {
mask.click(function () {
dialog.remove();
if ($.isFunction(config.dismiss)) {
config.dismiss();
}
})
}
var dialogBox = $("<div></div>", {class: 'weui_dialog'}).appendTo(dialog);
if (config.title) {
$('<div></div>', {class: 'weui_dialog_hd'}).append($('<strong></strong>', {class: 'weui_dialog_title'}).html(config.title)).appendTo(dialogBox);
}
var dialogBody = $("<div></div>", {class: 'weui_dialog_bd'}).appendTo(dialogBox);
if (template) {
dialogBody.append(template);
}
if ($.isFunction(config.initialize)) {
config.initialize(dialog);
}
var ft = $('<div class="weui_dialog_ft"></div>').appendTo(dialogBox);
if(window.paypad_version !== 'v3'){
if ($.isFunction(config.confirm)) {
var yes = $('<a></a>', {
class: 'weui_btn_dialog primary',
text: 'OK',
style: 'background: #0bb20c;color: #fff;'
}).appendTo(ft);
yes.click(function () {
config.confirm(dialog, true);
dialog.remove();
});
var no = $('<a></a>', {class: 'weui_btn_dialog default', text: 'Cancel'}).appendTo(ft);
no.click(function () {
config.confirm(dialog, false);
dialog.remove();
})
} else {
var ok = $('<a></a>', {
class: 'weui_btn_dialog primary',
text: 'OK',
style: 'background: #0bb20c;color: #fff;'
}).appendTo(ft);
ok.click(function () {
dialog.remove();
})
}
} else {
if ($.isFunction(config.confirm)) {
var yes = $('<a></a>', {
class: 'weui_btn_dialog primary',
text: 'OK',
style: 'background: #FF9705;color: #fff;'
}).appendTo(ft);
yes.click(function () {
config.confirm(dialog, true);
dialog.remove();
});
var no = $('<a></a>', {class: 'weui_btn_dialog default', text: 'Cancel'}).appendTo(ft);
no.click(function () {
config.confirm(dialog, false);
dialog.remove();
})
} else {
var ok = $('<a></a>', {
class: 'weui_btn_dialog primary',
text: 'OK',
style: 'background: #FF9705;color: #fff;'
}).appendTo(ft);
ok.click(function () {
dialog.remove();
})
}
}
dialog.appendTo($('body'));
addBlurListen();
}
}
});

@ -0,0 +1,608 @@
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
div, span, p, ul, li {
box-sizing: border-box;
}
.warning-sm{
color:red;
font-size:10px;
transform-origin: left;
transform: scale(0.8);
}
.ff.key {
position: relative;
}
.weui_grid{
padding: 15px 10px;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.ff {
font-size: 26px;
color: #333333;
}
.ff img {
margin: 10px auto;
display: block;
width: 34px;
}
div.wait {
top: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: absolute;
vertical-align: middle;
text-align: center;
bottom: 0;
opacity: .5;
background-color: gray;
z-index: 10000;
}
.bisnam {
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.rmbcurrency {
font-size: 18px;
color: #888888;
vertical-align: text-bottom;
line-height: 38px;
}
.static .rmbcurrency {
font-size: 14px;
line-height: 30px;
}
.rmbvalue {
font-size: 24px;
color: #888888;
vertical-align: text-bottom;
float: right;
}
.rmbvalue:before {
content: '≈¥';
font-size: 16px;
}
.paydetail {
float: right;
margin-top: 5px;
margin-left: 5px;
}
.static .rmbvalue {
font-size: 18px;
}
.currency {
font-size: 40px;
color: #000;
line-height: 66px;
vertical-align: text-bottom;
margin-right: 10px;
}
.static .currency {
color: #555555;
font-size: 25px;
}
.value {
font-size: 40px;
line-height: 66px;
color: #000;
margin-left: -5px;
vertical-align: text-bottom;
padding-right: 10px;
}
.static .value {
color: #333333;
font-size: 24px;
}
input.value {
background: transparent;
border: none;
line-height: 50px;
}
input.value:active {
background: transparent;
}
input.value:focus {
border: none;
outline: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.pp {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
background-color: #fbf9fe;
}
.row {
width: 100%;
padding: 0 20px;
background: white;
}
.hidden {
display: none;
}
.hide-keyboard-btn {
width: 100%;
}
.hide-keyboard-btn:after {
content: '';
transform: rotate(45deg);
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
width: 30px;
height: 30px;
transform-origin: center;
display: block;
margin: auto;
}
.remark-box.visible {
display: block;
}
.remark-box.visible .remark-input {
font-size: 1.4em;
border: none;
background: #fff;
}
.white-box {
background: #fff;
width: 96%;
margin: 10px auto;
display: block;
position: relative;
padding: 0 10px;
box-sizing: border-box;
}
.white-box.full {
width: 100%;
}
.logo-box .banner {
width: 100%;
display: block;
}
.logo {
margin: auto;
display: block;
margin-top: 20px;
max-height: 60px;
max-width: 80%;
}
.logo-box {
padding: 20px 20px 30px 20px ;
background-color: #FF8533;
}
.logo-small {
max-height: 100px;
}
.currencyrow {
box-sizing: border-box;
padding: 0px 20px;
text-align: left;
background: #fff;
}
.currencyrow:after {
content: '';
display: block;
clear: both;
}
.currencyrow > * {
display: inline-block;
vertical-align: bottom;
margin-bottom: 0;
box-sizing: border-box;
}
.currencyrow > .remark-btn {
float: right;
display: block;
width: 30px;
height: 30px;
margin-top: 17px;
background: url(../../../images/remark_btn.png) no-repeat;
background-size: cover;
}
.remark-input {
width: 100%;
font-size: 16px;
border-radius: 0;
outline: none;
border: 0px;
height: 50px;
border-top: 1px solid #eee;
padding: 10px 0px;
margin-bottom: 20px;
}
.remark-box {
display: none;
}
.remark-box .remark-mask {
text-align: center;
height: 50px;
font-size: 0.9em;
line-height: 35px;
color: #ccc;
}
.remark-label {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
z-index: 1;
font-weight: bold;
color: #0d6aad;
}
.coupons {
width: 100%;
margin-top: -1px;
background: #fff;
max-height: 350px;
overflow: auto;
padding: 0 10px;
border-radius: 0 0 6px 6px;
}
.coupons > li {
display: block;
width: 100%;
float: none;
color: #888888;
border-radius: 6px;
padding: 10px;
margin: 15px 0;
background: #fff;
box-shadow: 0 0 10px #aaa;
}
.coupons > li:after {
content: '';
clear: both;
display: block
}
.coupons > li:last-child {
border: none;
border-radius: 0 15px 15px 0;
}
.coupons > li .coupon-content {
position: relative;
width: 100%;
border-radius: 4px;
border: 1px dashed #aaa;
padding: 10px 15px;
}
.coupons .title, .coupons .desc, .coupons label {
display: block;
}
.coupons .coupon-content {
display: block;
float: left;
}
.coupons .title {
font-weight: bold;
font-size: 1em;
color: #000000;
position: relative;
}
.coupon-background-image {
width: 100%;
}
.coupon-logo {
height: 25px;
padding-right: 5px;
position: relative;
top: 6px;
}
.coupon-image {
width: 100%;
position: relative;
display: block;
}
.coupon-box-title .coupon-image {
margin: 0;
}
.coupons .use-check {
position: absolute;
display: block;
top: 0;
background-size: cover;
width: 34px;
height: 34px;
right: 0;
}
.coupons .use-check.checked {
background-image: url(/static/images/coupon_checked@3x.png);
}
.coupons .use-check.unchecked {
background-image: url(/static/images/coupon_unchecked@2x.png);
}
.coupons .use-check.disabled {
background-image: url(/static/images/coupon_disabled@2x.png) !important;
}
.coupons .desc {
font-size: 13px;
color: #323200;
margin-top: 5px;
letter-spacing: 0px;
position: relative;
line-height: 18px;
}
.weui-wepay-logos {
background: transparent;
}
.row.weui_grids:before, .row.weui_grids .weui_grid:before, .row.weui_grids .weui_grid:after {
display: none;
}
.keyboard-grids {
padding: 0;
margin-top: 10px;
background: #fff;
bottom: 0;
}
.keyboard-grids:after {
display: block;
content: '';
clear: both;
}
.keyboard-grids .key {
float: left;
position: relative;
width: 25%;
text-align: center;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-right: -1px;
margin-bottom: -1px;
height: 60px;
line-height: 60px;
}
.keyboard-grids .key.del > img {
height: 24px;
display: block;
position: relative;
margin: 19px auto;
}
.keyboard-grids .key.paynow {
height: 180px;
float: right;
background: #09bb07;
color: #fff;
}
.keyboard-grids .key.paynow.alipay {
background: #108ee9;
}
.keyboard-grids .key.paynow.rpay {
background: #FF2D55;
}
.alipay {
color: #108ee9;
}
.wechat {
color: #09bb07;
}
.keyboard-grids .key.paynow > .label {
display: block;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
.keyboard-grids .key.zero-btn {
width: 50%;
}
.pay-brands {
text-align: center;
line-height: 20px;
font-size: 24px;
/* position: fixed; */
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
bottom: 240px;
color: white;
background: #FF8533;
}
.pay-brands img {
height: 18px;
}
.pay-brands img.wechat-logo {
height: 14px;
}
.weui_dialog_bd .final {
font-weight: bold;
}
#coupon-box-toggle {
padding: 0 20px;
margin-top: 10px;
text-align: right;
font-size: 12px;
cursor: pointer;
}
.coupons-container {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
display: none;
}
.coupons-container.show {
display: block;
}
.coupons-container > .coupons-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
z-index: 1;
}
.coupons-container > .coupon-box {
position: fixed;
z-index: 4;
left: 50%;
top: 50%;
width: 95%;
transform: translate(-50%, -50%);
}
.coupons-container .coupon-box-title {
width: 100%;
display: block;
position: relative;
}
.coupons-container .coupon-box-title:after {
content: '';
display: block;
clear: both;
}
.coupon-close-image {
width: 30px;
}
.coupons-container .coupon-box-title > .title {
display: block;
text-align: center;
font-size: 18px;
color: #FFFFFF;
position: absolute;
width: 100%;
bottom: 34%;
}
.coupons-container .coupon-box-title > #close-coupon-box {
color: #700;
position: absolute;
display: block;
cursor: pointer;
top: -40px;
right: 0;
}
.actCharity{
display: inline;
}
.title_client_name{
padding: 15px 0px 20px 20px;
background-color: #F8F8F8;
border-radius: 11px 11px 0px 0px;
color: white;
text-align: center;
color: #555555;
}
.bank_button{
background-color: #eee;
border: 0px;
color: white;
padding: 28px 13%;
margin: 15px 10px;
line-height: 5px;
border-radius: 7px;
font-size: 16px;
}
.pay_button{
background-color: #eee;
border: 0px;
color: white;
padding: 28px 13%;
margin: 15px 0px;
line-height: 5px;
border-radius: 7px;
font-size: 16px;
}
Loading…
Cancel
Save