Skip to content

Instantly share code, notes, and snippets.

@FingerLiu

FingerLiu/duolabao.html

Created June 15, 2017 01:10
Show Gist options
  • Save FingerLiu/783c0f4a51fd88451a5240c000974524 to your computer and use it in GitHub Desktop.
Save FingerLiu/783c0f4a51fd88451a5240c000974524 to your computer and use it in GitHub Desktop.
Download ZIP
支付
Raw
duolabao.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>大学生超市(5号店)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6,strong{
font-weight: normal;
}
a{
text-decoration: none;
}
ul,ol,li{list-style: none;}
input{
-webkit-appearance: none;
}
html{
background: #f8f8f8;
/*-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;*/
-webkit-touch-callout: none;
font-family: "黑体","Helvetica Neue",Arial,Helvetica,sans-serif;
}
.error{color:#f8f8f8}
b{font-weight: normal;}
i,em{font-style: normal;}
/*body{
position: relative;
}*/
.fl{
float: left;
}
img {
-webkit-user-select: none;
}
.fr{
float: right!important;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.dblock{
display: block;
}
/*
基本样式
*/
.db-float-left{
float: left!important;
}
.db-float-right{
float: right!important;
}
.db-back-white{
background: #FFFFFF!important;
}
.container{
min-height: 100%;
font-size: .32rem;
color: #1c1b21;
}
/*
头部
*/
.header{
padding: .3rem 0 .3rem .24rem;
overflow: hidden;
}
.icon-shop{
width: .65rem;
height: .6rem;
}
.shop-name{
max-width: 5.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: .39rem;
height: .6rem;
line-height: .6rem;
}
/*
支付金额
*/
.payment{
position: relative;
background: #fff;
padding: .65rem .22rem .68rem;
margin-bottom:.25rem;
}
.payment h4{
max-width: 5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 1.5rem;
top: 0.4rem;
}
.blackcat{
overflow: hidden;
position: absolute;
top: .28rem;
left: .23rem;
}
.blackcat img{
display: block;
width: 1.14rem;
height: .84rem;
}
.payment-cont{
padding-left: 0.27rem;
padding-right: 0.24rem;
height: 1.94rem;
border: 0.03rem solid #1aad19;
border-radius: 10px;
background: #ffffff;
overflow: hidden;
}
.payment-cont p{
font-size: 0.34rem;
height: 1.94rem;
line-height: 1.94rem;
}
.payment-cont .payment-cont-icon,.payment-cont .payment-cont-num{
font-size: 0.68rem;
}
.payment-center .payment-cont-num{
font-size: 1rem
}
.payment-cont-icon{
width: 0.72rem;
}
.payment-cont-icon span{
float: left;
line-height: 1.94rem;
}
#marker{
line-height: 1.94rem;
}
/* 支付金额 样式2 */
.payment2 {background: transparent;padding-bottom: 0;text-align: center;padding-top: 1rem}
/*
固定金额页
*/
.fixed-payment{
padding: 1.1rem 0.22rem;
}
.fixed-shop-name{
width: 7rem;
margin: 0 auto;
text-align: center;
font-size: 0.34rem;
color: #333;
}
.fixed-amount{
font-size: 0.8rem;
text-align: center;
color: #1aad19;
margin-top: 0.5rem;
}
/*
选择优惠券
*/
.tickets-detial,.voucher-detial,.stored-card,.wxpay-bar{
height: 0.96rem;
overflow: hidden;
padding: 0 .22rem;
line-height: 0.96rem;
border-bottom: 1px solid #f8f8f8;
background: #fff;
}
/*.card-balance{
height: 0.5rem;
overflow: hidden;
padding: 0 .23rem;
line-height: 0.5rem;
background: #fff;
}
.stored-card,.wxpay-bar{
border: none;
font-size: 0.3rem;
}
.card-balance .balance{
color: red;
}*/
.tickets-detial i,.voucher-detial i,.stored-card i,.wxpay-bar i{
width: 0.32rem;
height: 0.32rem;
float: left;
background: url("https://style.duolabao.cn/order/img/wxpay/radio.png") no-repeat;
background-position: center center;
background-size: 100% 100%;
margin-right: 0.1rem;
margin-top:0.31rem;
}
.stored-card .actual-amount,.stored-card .deductible-amount{
color: #999;
text-decoration: line-through;
font-size: 0.25rem;
}
.tickets-detial span,.voucher-detial span{
float: left;
font-size: 0.3rem;
}
.tickets-detial span:nth-child(3),.voucher-detial span:nth-child(4){
font-size: 0.3rem;
color: #b4b4b4;
}
.wxpay-bar{
display: none;
}
.wxpay-bar i{
background: none;
}
.wxpay-bar span{
color: #1aad19;
}
/*嗨卡持卡人样式*/
.changeSendCard,.cardholder{
height: 1.2rem;
line-height: 1.2rem;
}
.changeSendCard i,.cardholder i{
margin-right: 0.1rem;
margin-top:0.43rem;
}
.changeSendCard em,.cardholder em{
line-height: 0.4rem;
font-size: 0.28rem;
}
.changeSendCard .ft-42,.cardholder .ft-42{
font-size: 0.42rem;
margin-top: 0.2rem;
}
/*选中情况下*/
.radio-selected i{
background: url("https://style.duolabao.cn/order/img/wxpay/radio-wxselected.png") no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.jd .radio-selected i{
background: url("https://style.duolabao.cn/order/img/wxpay/radio-jdselected.png") no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.zfb .radio-selected i{
background: url("https://style.duolabao.cn/order/img/wxpay/radio-zfbselected.png") no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.radio-selected span:nth-child(2){
color: #06be04;
}
.radio-selected span em{
color: #06be04;
}
/*更新*/
.jd .radio-selected span:nth-child(2){
color: #e1232f;
}
.zfb .radio-selected span:nth-child(2){
color: #00aaef;
}
.qq .radio-selected span:nth-child(2){
color: #2aadd9;
}
.radio-selected span b{
color: #faab02;
}
.radio-selected span:nth-child(3){
text-align: right;
color: #b4b4b4;
}
.no-voucher{
width: 2.5rem;
height: 0.63rem;
text-align: right;
padding-right: 0.2rem;
overflow: hidden;
}
.voucher-detial span.yes-voucher{
color: #faac02;
}
.radio-selected span{
color: #1aad19;
}
.radio-selected .no-voucher{
background: none;
}
.radio-selected span.yes-voucher{
color: #1aad19;
}
/*京东钱包下面优惠券选中的颜色*/
.jd .radio-selected span{
color: #e1232f;
}
.zfb .radio-selected span{
color: #00aaef;
}
.qq .radio-selected span{
color: #2aadd9;
}
.radio-selected span:nth-of-type(3){
width: 2.5rem;
text-align: right;
}
.radio-selected.cardholder em{
color: #1aad19;
text-align: right;
}
/*
输入键盘
*/
.keybord-box{
width: 100%;
position: fixed;
bottom: -4.9rem;
left: 0px;
}
.support-box{
height: 0.26rem;
padding: 0 0.3rem;
margin-bottom: 0.2rem;
}
.support{
height: 0.26rem;
width: 100%;
background: url("https://style.duolabao.cn/order/img/wxpay/support.png") no-repeat center;
background-size: 100%;
}
.keybord{
width: 100%;
border-collapse: collapse;
}
.keybord td{
width: 25%;
height: 0.99rem;
line-height: 0.99rem;
text-align: center;
font-size: 0.54rem;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
border: 1px solid #c9c9c9;
}
.keybord .keybord-back,.keybord .keybord-down{
line-height: 0;
}
.keybord-back img{
width: .72rem;
height: .5rem;
}
.keybord-back{
background:#fff url("https://style.duolabao.cn/order/img/wxpay/keyboard-ico.png") no-repeat;
background-position: top center;
background-size: 34% 2rem;
}
.retract{
background:#fff url("https://style.duolabao.cn/order/img/wxpay/keyboard-ico.png") no-repeat;
background-position: bottom center;
background-size: 34% 1.8rem;
}
.keybord .border-top{
border-top: 1px solid #dfdede;
}
.keybord .border-left{
border-left: 0.5px solid #dfdede;
}
.keybord .makesure{
height: 75%;
line-height: .7rem;
background: #d7d3d4;
color: #ffffff;
}
/*确认支付可以点击时微信和京东的不同状态*/
.keybord .canClick{
background: #1aad19;
}
.jd .canClick{
background: #e1232f;
}
.zfb .canClick{
background: #00aaef;
}
.qq .canClick{
background: #2aadd9;
}
.keybord .makesure span{
display: block;
}
.keybord-down img{
width: .48rem;
height: .48rem;
}
/*
不能输入金额的页面
*/
.lastpay-box{
width: 100%;
position: fixed;
bottom: .37rem;
}
.lastpay-box-next{
width: 100%;
padding-top: .25rem
}
.lastpay{
padding: .34rem 0;
width: 7rem;
text-align: center;
background: #d7d3d4;
border-radius: 5px;
color: #fff;
font-size: .34rem;
margin: 0 auto;
}
/*京东和支付宝下固定金额确认按钮颜色*/
.lastpay-box .canClick, .lastpay-box-next .canClick{
background: #06be04;
}
.jd .lastpay-box .canClick, .jd .lastpay-box-next .canClick{
background: #e1232f;
}
.zfb .lastpay-box .canClick, .zfb .lastpay-box-next .canClick{
background: #00aaef;
}
.qq .lastpay-box .canClick, .qq .lastpay-box-next .canClick{
background: #2aadd9;
}
/*
完成页面
*/
.endpage{
height: 2.1rem;
background: #fff;
padding-top: 0.44rem;
}
.endpage img:nth-child(1){
display: block;
margin: 0 auto;
width: .86rem;
height: .86rem;
}
.endpage p:nth-child(2){
margin-top: .2rem;
font-size: .4rem;
font-weight: bold;
text-align: center;
}
.pay-team{
margin-top: .23rem;
}
.pay-team .pay-detial{
padding: 0 .23rem;
height: 0.8rem;
line-height: 0.8rem;
border-bottom: .02rem solid #f8f8f8;
}
.pay-team .pay-tit{
color: #adadad;
}
.advert{
width: 7.06rem;
height: 3.48rem;
margin-top: .64rem;
padding: 0 .23rem;
position: relative;
}
.advert img{
width: 100%;
height: auto;
}
/*分享朋友圈的蒙层*/
.share-layer{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: absolute;
top: 0;
left: 0;
display: none;
}
.share-arrow{
height: 1.25rem;
background: url("https://style.duolabao.cn/order/img/wxpay/white-arrow.png") 93% top no-repeat;
background-size: contain;
}
.share-pic{
height: 3.68rem;
background: url("https://style.duolabao.cn/order/img/wxpay/card-share.png") center top no-repeat;
background-size: contain;
}
.share-layer p{
margin-top: 0.66rem;
text-align: center;
color: #fff;
font-size: 0.26rem;
}
.pay-word{
width: 5rem;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pay-word strong{
color: red;
font-size: 0.4rem;
}
.pay-word em{
color: #787878;
}
/*
dialog-s
*/
.dialog-bg{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: gray;
opacity: .5;
}
.dialog{
display: none;
position: absolute;
top: .2rem;
left: 0;
width: 100%;
font-size: .34rem;
}
.dialog-inn{
width: 7.07rem;
margin: 0 auto;
font-size: .34rem;
}
.dialog-head{
height: 1.1rem;
line-height: 1.1rem;
background: #fff;
border-radius: 10px 10px 0 0;
border-bottom: .04rem solid #d2d1d1;
overflow: hidden;
}
.dialog-head p{
font-weight: bold;
}
.dialog-head span{
color: #faab02;
}
.dialog-head p:nth-of-type(1){
padding-left: .26rem;
}
.dialog-head p:nth-of-type(2){
padding-right: .26rem;
}
/*
优惠券的票票
*/
.dialog-cont{
padding: 0 .25rem .32rem;
height: 7.55rem;
background: #eeeeee;
overflow: auto;
}
.dialog-cont li{
overflow: hidden;
margin-top: .32rem;
}
.dialog-cont .quick-l{
width: .61rem;
height: 1.9rem;
background: url("https://style.duolabao.cn/order/img/wxpay/quick-ico.png") no-repeat;
background-position: top right;
background-size: 100% 200%;
}
.dialog-cont .quick-m{
width: 5.08rem;
height: 1.9rem;
background: url("https://style.duolabao.cn/order/img/wxpay/icon-quick-m.png") right 0 no-repeat;
background-color: #fefdfd;
background-size: auto 100%;
}
.dialog-cont .quick-tit{
height: .5rem;
line-height: .5rem;
border-bottom: .02rem dashed #e8e7e7;
}
.dialog-cont .quick-tit var{
padding-left: .16rem;
font-style: normal;
font-size: .35rem;
color: #b1b1b1;
}
.dialog-cont .quick-tit span{
font-size: .2rem;
color: #b1b1b1;
padding-right: .27rem;
}
.dialog-cont .quick-con{
height: .45rem;
padding: .26rem 0 .23rem .16rem;
}
.dialog-cont .quick-con span{
font-size: .4rem;
color: #b1b1b1;
}
.dialog-cont .quick-con strong{
font-size: .45rem;
color: #b1b1b1;
}
.dialog-cont .quick-bot{
padding-left: .16rem;
font-size: .24rem;
color: #b1b1b1;
}
.dialog-cont .quick-r{
width: 0.6rem;
height: 0.6rem;
margin-top: 0.65rem;
background: url("https://style.duolabao.cn/order/img/wxpay/gou-ico.png") no-repeat;
background-position: top right;
background-size: 100% 202%;
}
/*
dialog券列表有三种状态，没选中是可用的状态quick-list，选中是quick-chiose，不能用的是quick-useless
*/
.dialog-cont .quick-list .quick-r{
background: url("https://style.duolabao.cn/order/img/wxpay/gou-ico.png") no-repeat;
background-position: top right;
background-size: 100% 202%;
}
.dialog-cont .quick-chiose .quick-r{
background: url("https://style.duolabao.cn/order/img/wxpay/gou-ico.png") no-repeat;
background-position: bottom right;
background-size: 100% 202%;
}
/*
dialog券列表有三种状态,不能用的是quick-useless
*/
.dialog-cont .quick-list .quick-l{
background: url("https://style.duolabao.cn/order/img/wxpay/quick-ico.png") no-repeat;
background-position: bottom right;
background-size: 100% 200%;
}
.dialog-cont .quick-list .quick-tit var, .dialog-cont .quick-list .quick-con span, .dialog-cont .quick-list .quick-con strong{
color: #faab02;
}
/*优惠券底部*/
.dialog-foot{
background: #eeeeee;
border-radius: 0 0 10px 10px;
padding: .3rem .1rem .43rem 0;
}
.dialog-foot-sure{
height: 1.1rem;
width: 6.55rem;
margin: 0 auto;
border-radius: 5px;
line-height: 1.1rem;
text-align: center;
color: #fff;
font-size: .38rem;
background: #1aad19;
}
/*京东下按钮的颜色*/
.jd .dialog-foot-sure{
background: #e1232f;
}
.zfb .dialog-foot-sure{
background: #00aaef;
}
.qq .dialog-foot-sure{
background: #2aadd9;
}
.pay-team strong{
font-weight: bold;
font-size: 0.36rem;
}
.loading-bg, .loading-card-bg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 99;
/*background: rgba(22,22,22,0.5);*/
display: none;
}
.loading{
width: 3.12rem;
height: 3.12rem;
position: absolute;
left: 50%;
top: 45%;
margin-left: -1.56rem;
margin-top: -1.56rem;
border-radius: 0.2rem;
z-index: 100;
background: rgba(0,0,0,0.5);
}
.loading img{
width: 96px;
height: 96px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -48px;
margin-top: -48px;
}
.loadingApp{width:.8rem;position:fixed;left:50%;top:50%;border-radius: .2rem;z-index: 100;background: rgba(0,0,0,0.5);padding:.2rem;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.loadingApp img{width: 100%;display: block}
.advert2{
padding: .58rem .22rem;
background: #fff;
margin-top: .2rem;
text-decoration: none;
}
.advert2 .ad_btn{
border-radius: 1rem;
display: block;
color:#1aad19;
border:1px solid #1aad19;
width:1.56rem;
height:.72rem;
text-align: center;
line-height: .72rem;
font-size: .32rem;
margin-top: 0.09rem;
}
.advert2 h5{
width:1rem;
height:1rem;
margin-right:.2rem;
}
.advert2 h5 img{
width:100%;
}
.advert2 h3{
max-width: 4rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color:#1aad19;
font-size: .3rem;
line-height: .5rem;
}
.advert2 h3 strong{
color:#333;
}
.advert2 h4{
max-width: 4rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: .26rem;
color:#787878;
line-height: .5rem;
}
@keyframes mymove
{
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {opacity:0;}
to {opacity:1;}
}
/*
推荐卡列表
*/
.recommend-list{
width: 100%;
background: #fff;
position: fixed;
bottom: -7.1rem;
}
.recommend-list-hd{
height: 0.84rem;
line-height: 0.84rem;
text-align: center;
color: #1aad19;
border-bottom: 0.03rem solid #f4f4f4;
}
.recommend-prompt{
height: 0.78rem;
font-size: 0.28rem;
text-align: left;
line-height: 0.78rem;
padding-left: 0.22rem;
color: #000;
border-top: 0.03rem solid #f4f4f4;
border-bottom: 0.03rem solid #f4f4f4;
}
.recommend-prompt strong{
color: #1aad19;
}
.recommend-prompt span i{
color: #1aad19;
}
.recommend-list-con{
width: 100%;
/*height: 1.42rem;*/
overflow-x: scroll;
padding: 0.22rem 0;
}
.recommend-list-con ul{
padding-right: 0.22rem;
}
.recommend-list-con ul li {
/*height: 0.94rem;*/
width: 2.04rem;
padding: 0.08rem 0;
border: 0.03rem solid #f4f4f4;
border-radius: 0.2rem;
margin-left: 0.22rem;
background: #fafafa;
}
.recommend-list-con ul li h4{
font-size: 0.36rem;
color: #333;
text-align: center;
line-height: 0.5rem;
}
.recommend-list-con p{
font-size: 0.3rem;
color: #888888;
text-align: center;
line-height: 0.46rem;
}
/*选中后样式*/
.recommend-list-con ul li.recommend-selected{
background: #f1fcf1;
border: 0.03rem solid #1aad19;
}
.recommend-list-con .recommend-selected h4{
color: #faac02;
}
.recommend-list-con .recommend-selected p{
color: #1aad19;
}
.recommend-list-con .recommend-selected p span{
color: #1aad19;
}
/*底部样式*/
.recommend-list-ht{
height: 2.24rem;
}
.recommend-list-ht a{
width: 6.7rem;
height: 0.92rem;
line-height: 0.92rem;
text-align: center;
border: 0.03rem solid #1aad19;
border-radius: 0.1rem;
margin-top: 0.64rem;
display: block;
margin: 0 auto;
}
.recommend-list-ht .pay-btn{
background: #fff;
color: #1aad19;
margin-top: 0.4rem;
}
.recommend-list-ht .handle-btn{
background: #1aad19;
color: #fff;
margin-top: 0.4rem;
}
.disclaimer{
color: #8f8f8f;
font-size: 0.24rem;
line-height: 0.9rem;
text-align: center;
}
/*注册*/
.register-bg{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,0.8);
display: none;
}
.register-box{
width: 6.84rem;
/*height: 5.82rem;*/
background: #fff;
position: absolute;
left: 50%;
top: 0;
margin-left: -3.42rem;
border-radius: 0.3rem;
padding-bottom: 0.48rem;
}
.register-box h4{
height: 1.28rem;
text-align: center;
line-height: 1.28rem;
color: #1aad19;
font-size: 0.42rem;
border-bottom: 0.03rem solid #f4f4f4;
}
.register-con{
padding: 0.48rem 0.26rem;
padding-bottom: 0.2rem;
}
.register-con .phoneNum{
display: block;
width: 5.9rem;
height: 0.9rem;
margin: 0 auto;
border: 0.03rem solid #d7d3d4;
border-radius: 0.1rem;
padding: 0 0.2rem;
font-size: 0.28rem;
outline: none;
margin-bottom: 0.26rem;
}
.register-con .vcode{
width: 3.42rem;
height: 0.9rem;
border: 0.03rem solid #d7d3d4;
border-radius: 0.1rem;
padding: 0 0.2rem;
font-size: 0.28rem;
outline: none;
}
.register-con .vcode-btn{
width: 2.18rem;
height: 0.9rem;
border: 0.03rem solid #1aad19;
border-radius: 0.1rem;
color: #1aad19;
text-align: center;
line-height: 0.9rem;
font-size: 0.34rem;
}
.register-box .disabled-btn{
border: 0.03rem solid #999;
color: #999;
background: #eee;
}
.register-btn{
display: block;
width: 6.48rem;
height: 0.94rem;
background: #1aad19;
margin: 0 auto;
text-align: center;
line-height: 0.94rem;
border-radius: 0.1rem;
color: #fff;
font-size: 0.34rem;
}
.close-btn{
width: 0.9rem;
height: 0.9rem;
position: absolute;
left: 0;
top: 0;
background: url(https://style.duolabao.cn/order/img/wxpay/close.png) no-repeat center;
background-size: 60%;
}
.error-msg{
font-size: 0.28rem;
color: #ee3333;
padding: 0 0.3rem;
margin-bottom: 0.1rem;
}
.agreement{
font-size: 0.24rem;
color: #8f8f8f;
padding-left: 0.24rem;
margin-top: 0.24rem;
text-align: center;
}
.agreement a{
color: #333;
text-decoration: underline;
}
.register-prompt{
font-size: 0.26rem;
color: #8f8f8f;
margin-bottom: 0.35rem;
padding-left: 0.24rem;
}
.register-prompt strong{
color: #1aad19;
}
.register-prompt em{
color: #787878;
}
/*错误弹框*/
.error-dialog-box{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.6);
/*display: none;*/
z-index: 999;
}
.error-dialog{
width: 6.8rem;
/*height: 3.12rem;*/
position: absolute;
left: 50%;
top: 45%;
margin-top: -1.5rem;
margin-left: -3.4rem;
background: #fff;
border-radius: 0.1rem;
}
.error-dialog p{
line-height: 0.4rem;
color: #999;
text-align: center;
font-size: 0.32rem;
border-bottom: 0.03rem solid #e9e9eb;
padding: 0.6rem 0.22rem;
}
.close-dialog-btn{
line-height: 1rem;
display: block;
text-align: center;
font-size: 0.4rem;
color: #1aad19;
}
/*会员卡支付弹框*/
.vip-card-bg{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
}
.vip-card-box{
width: 6.49rem;
min-height: 7.7rem;
position: absolute;
left: 50%;
top: 40%;
margin-left: -3.425rem;
margin-top: -3.85rem;
background: #fff;
border-radius: 0.2rem;
padding: 0.1rem 0.18rem;
}
.vip-card-box h3{
text-align: center;
font-size: 0.42rem;
color: #1aad19;
line-height: 1.02rem;
border-bottom: 2px solid #f4f4f4;
}
.card-order-box{
width: 6.5rem;
height: 1.38rem;
margin: 0 auto;
background: #f9f9f9;
padding-top: 0.4rem;
margin-bottom: 0.22rem;
}
.card-order-box h4{
font-size: 0.26rem;
color: #333;
text-align: center;
margin-bottom: 0.2rem;
}
.card-order-box p{
font-size: 0.56rem;
color: #333;
text-align: center;
}
.card-order-list{
border-top: 2px solid #f4f4f4;
margin-bottom: 0.4rem;
}
.card-order-list li{
font-size: 0.26rem;
line-height: 0.7rem;
border-bottom: 2px solid #f4f4f4;
padding: 0 0.2rem;
color: #333;
}
.card-order-list span{
max-width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card-order-list span em{
font-size: 0.26rem;
color: #8f8f8f;
}
.wxPayAmount{
color: #e10028;
}
.card-again-btn{
display: block;
width: 5.52rem;
height: 0.92rem;
margin: 0 auto;
line-height: 0.92rem;
font-size: 0.3rem;
text-align: center;
color: #fff;
background: #1aad19;
border: 1px solid #1aad19;
border-radius: 0.1rem;
margin-bottom: 0.32rem;
}
.vip-card-sureBtn{
display: block;
width: 5.52rem;
height: 0.92rem;
margin: 0 auto;
line-height: 0.92rem;
font-size: 0.3rem;
text-align: center;
color: #1aad19;
background: #fff;
border: 1px solid #1aad19;
border-radius: 0.1rem;
margin-bottom: 0.32rem;
}
.direct-pay-btn{
background: #1aad19;
color: #fff;
}
.vip-card-close{
position: absolute;
left: 0.18rem;
top: 0.18rem;
width: 0.45rem;
height: 0.45rem;
background: url(https://style.duolabao.cn/order/img/wxpay/close.png) no-repeat center;
background-size: contain;
}
/*活动条*/
.active-bar{
position: relative;
height: 1.2rem;
line-height: 1.2rem;
margin-top: 0.2rem;
padding-left: 0.64rem;
color: #333;
}
.active-bar p{
width: 0.75rem;
height: 0.7rem;
background: url("https://style.duolabao.cn/order/img/wxpay/active.png") no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 0;
}
.active-bar span i{
color: #1aad19;
}
.active-bar strong{
width: 0.32rem;
height: 0.32rem;
background: url("https://style.duolabao.cn/order/img/wxpay/green-arrow.png") no-repeat;
background-size: contain;
margin-right: 0.22rem;
margin-top: 0.44rem;
}
</style>
<script>
(function () {
document.addEventListener('DOMContentLoaded', function () {
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth / 7.5 + 'px';
// 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
}, false);
})();
var _hmt = _hmt || [];
</script>
</head>
<!-- ===========提交的表单========== -->
<form action="" method="POST" id="payForm">
<input type="hidden" id="amount" name="orderAmount" value="" />
<input type="hidden" id="machineNum" name="machineNum" value="10011014653816835428035" />
<input type="hidden" id="customerNum" name="customerNum" value="10001114727008914570631" />
<input type="hidden" id="shopNum" name="shopNum" value="10001214727011915756772" />
<input type="hidden" id="memberNum" name="memberNum" value="10101014974440749529543" />
<input type="hidden" id="source" name="source" value="FIXCODE" />
<input type="hidden" id="tableNum" name="tableNum" value="N" />
<input type="hidden" id="cashedNum" name="voucherNum" value="" />
<input type="hidden" id="openId" name="openId" value="ojiuXuEmO3C8KkCw_E0v-NN93FSE" />
<input type="hidden" id="requestNum" name="requestNum" value="" />
<input type="hidden" id="payWay" name="payWay" value="WX" />
<input type="hidden" id="orderNum" name="orderNum" value="" />
<input type="hidden" id="marketingType" name="marketingType" value="" />
<input type="hidden" id="dlbCardUrl" name="dlbCardUrl" value="" />
<input type="hidden" id="userId" name="userId" value="" />
<input type="hidden" id="authId" name="authId" value="ojiuXuEmO3C8KkCw_E0v-NN93FSE" />
<input type="hidden" id="cardPay" name="cardPay" value="" />
<input type="hidden" id="onceCardBlackNum" name="onceCardBlackNum" value="" />
<input type="hidden" id="machineForCardPay" name="machineForCardPay" value="10011014501481567301408" />
<input type="hidden" id="machineForBuyingCard" name="machineForBuyingCard" value="10011014501481567041407" />
<input type="hidden" id="minDiscount" name="minDiscount" value="" />
<input type="hidden" id="cardDiscount" name="cardDiscount" value="" />
<input type="hidden" id="cardBalance" name="cardBalance" value="" />
<input type="hidden" id="cardKindNum" name="cardKindNum" value="" />
<input type="hidden" id="cardKindList" name="cardKindList" value='' />
<input type="hidden" id="cardKindType" name="cardKindType" value='' />
<input type="hidden" id="cardAgainFlag" name="cardAgainFlag" value="" />
</form>
<form action="" id="buyCard">
<input type="hidden" id="cardAgainBankRequestNum" name="cardAgainBankRequestNum" value="" />
</form>
<body>
<div class="loading-bg">
<div class="loading">
<img src="https://style.duolabao.cn/order/img/wxpay/gif.gif" alt="">
</div>
</div>
<div class="loading-card-bg">
<div class="loading">
<img src="https://style.duolabao.cn/order/img/wxpay/card_pay.gif" alt="">
</div>
</div>
<div class="container">
<!-- 金额显示栏 -->
<div class="payment db-back-white">
<div class="payment-cont">
<span class="cursor-blink"></span>
<p class="payment-cont-word db-float-left">消费金额</p>
<p class="payment-cont-num db-float-right"></p>
<p class="payment-cont-icon db-float-right"><span>¥</span><span id="marker">|</span></p>
</div>
</div>
<!-- 选择优惠券 -->
<ul class="tickets">
</ul>
<!-- 输入键盘 -->
<div class="keybord-box">
<div class="support-box">
<div class="support"></div>
</div>
<table class="keybord db-back-white">
<tr>
<td name="number" class="border-top">1</td>
<td name="number" class="border-left border-top">2</td>
<td name="number" class="border-left border-top">3</td>
<td class="border-left keybord-back border-top"></td>
</tr>
<tr>
<td name="number" class="border-top">4</td>
<td name="number" class="border-top border-left">5</td>
<td name="number" class="border-top border-left">6</td>
<td class="border-top border-left makesure" id="lastpay" rowspan="3">
<span>确认</span>
<span>支付</span>
</td>
</tr>
<tr>
<td name="number" class="border-top">7</td>
<td name="number" class="border-top border-left">8</td>
<td name="number" class="border-top border-left">9</td>
</tr>
<tr>
<td name="number" class="retract border-top"></td>
<td name="number" class="border-top">0</td>
<td name="number" class="border-top border-left">.</td>
</tr>
</table>
</div>
<div class="recommend-list">
<div class="recommend-list-hd">微信会员卡享优惠</div>
<div class="recommend-list-con" id="recommend-list-con">
<ul class="clearfix"></ul>
</div>
<p class="recommend-prompt">办卡成功后自动买单，订单实扣<strong>元</strong>，<span></span></p>
<div class="recommend-list-ht">
<a href="javascript:;" class="handle-btn">办卡并买单</a>
<a href="javascript:;" class="pay-btn">原价付款</a>
</div>
<p class="disclaimer">商品及服务均由商户提供，与平台无关</p>
</div>
</div>
<!--会员卡支付确认弹框-->
<div class="vip-card-bg">
<div class="vip-card-box">
<h3>会员卡支付</h3>
<div class="card-order-box" >
<h4>订单金额</h4>
<p>&yen;<strong>100</strong></p>
</div>
<ul class="card-order-list" >
<li class="clearfix">
<span class="fl">会员卡类型</span>
<span class="cardStyle fr">折扣卡</span>
</li>
<li class="clearfix">
<span class="fl">卡支付金额</span>
<span class="cardPayAmount fr">&yen;9</span>
</li>
<li class="clearfix">
<span class="fl">支付后卡余额</span>
<span class="cardPayBalance fr">&yen;0</span>
</li>
<li class="clearfix">
<span class="fl">仍需微信支付</span>
<span class="wxPayAmount fr">&yen;91</span>
</li>
</ul>
<a href="javascript:;" class="card-again-btn" >再次办卡享优惠</a>
<a href="javascript:;" class="vip-card-sureBtn" >确认支付</a>
<b class="vip-card-close" ></b>
</div>
</div>
<!-- 分享券列表弹层 -->
<div class="dialog-bg"></div>
<div class="dialog">
<div class="dialog-inn">
<div class="dialog-head">
<p class="db-float-left">哆券优惠</p>
<p class="db-float-right">共优惠<span>0</span>元</p>
</div>
<ol class="dialog-cont">
</ol>
<div class="dialog-foot">
<p class="dialog-foot-sure">确定</p>
</div>
</div>
</div>
<!-- 注册 -->
<div class="register-bg">
<div class="register-box">
<h4>充<strong>200</strong>,可享<b>8.5</b>折</h4>
<div class="register-con">
<form id="login_form" action="">
<input type="text" class="phoneNum" maxLength="11" value="" placeholder="请输入手机号" />
<div class="clearfix">
<input class="vcode fl" type="text" maxLength="4" placeholder="请输入验证码" value="" />
<a href="javascript:;" class="vcode-btn fr">获取验证码</a>
</div>
</form>
</div>
<div class="error-msg"></div>
<p class="register-prompt">办卡后，自动支付<strong>本次消费元</strong></p>
<div class="register-ft">
<a class="register-btn" href="javascript:;">确定</a>
</div>
<span class="close-btn"></span>
<div class="agreement">注册即视为您同意 <a href="${param.memberCardBalanceVO.hiCardHost}/card/disclaimer">《会员授权及服务协议》</a></div>
</div>
</div>
<div id="orderError" style="color:#f8f8f8;font-size: 12px"></div>
<!-- =======引用js====== -->
<script type="text/javascript">
var dlb = {
byName: function (name){
return document.getElementsByName(name);
},
byId: function (id){
return document.getElementById(id);
},
byQs: function (ele){
return document.querySelector(ele);
},
byQsa: function (eles){
return document.querySelectorAll(eles);
},
show: function(obj){
obj.style.display = 'block';
},
hide: function(obj){
obj.style.display = 'none';
},
//判断是否是整数
isInt: function(num){
if(num % 1 == 0){
return parseInt(num);
}else{
var result = num%1,
strResult = String(result.toFixed(2));
if(strResult[strResult.length - 1] == '0'){
return Number(num).toFixed(1);
}else{
return Number(num).toFixed(2);
}
}
},
//事件监听
addEvent: function (obj, sEv, fn) {
if (obj.addEventListener) {
obj.addEventListener(sEv, fn, false);
} else {
obj.attachEvent('on' + sEv, fn);
}
},
removeEvent: function (obj, sEv, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(sEv, fn, false);
} else {
obj.detachEvent('on' + sEv, fn);
}
},
//增加className
addClass: function (obj,sClass){
if(obj.className){
var reg = new RegExp('\\b'+sClass+'\\b','g');
if(obj.className.search(reg) == -1){
obj.className += ' '+sClass;
}
}else{
obj.className = sClass;
}
},
//删除className
removeClass: function (obj,sClass){
if(obj.className){
var reg = new RegExp('\\b'+sClass+'\\b','g');
if(obj.className.search(reg) != -1){
obj.className = obj.className.replace(reg,'').replace(/^\s+|\s+$/,' ').replace(/\s+/g,' ');
if(!obj.className){
obj.removeAttribute("class");
}
}
}
},
//查看是否有这个class名，有就返回true否则返回false
hasClass: function (obj, cls){
var obj_class = obj.className, //获取 class 内容.
obj_class_lst = obj_class.split(/\s+/); //通过split空字符将cls转换成数组.
var x = 0;
for(x in obj_class_lst) {
if(obj_class_lst[x] == cls) { //循环数组, 判断是否包含cls
return true;
}
}
return false;
},
//清除所有iclass
clear: function(item,iclass){
for(var i=0;i<item.length;i++){
dlb.removeClass(item[i],iclass);
}
},
//ajax函数 封装
json2url: function (json){
var arr = [];
for(var name in json){
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
},
ajax: function (json){
var timer=null;
json = json||{};
if(!json.url)return;
json.data = json.data||{};
json.type = json.type||'get';
json.timeout = json.timeout||8000;
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
switch(json.type.toLowerCase()){
case 'get':
oAjax.open('GET',json.url+'?'+dlb.json2url(json.data),true);
oAjax.send();
break;
case 'post':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oAjax.send(dlb.json2url(json.data));
break;
}
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
clearTimeout(timer);
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
json.success&&json.success(oAjax.responseText);
}else{
json.error&&json.error(oAjax.status);
}
}
timer=setTimeout(function(){
if(oAjax.readyState!=4){
clearTimeout(timer);
json.error&&json.error();
}
},json.timeout);
};
},
jsonp: function (json){
json = json || {};
if(!json.url)return;
json.cbName = json.cbName||'cb';
json.data = json.data||{};
json.data[json.cbName] = 'show'+Math.random();
json.data[json.cbName] = json.data[json.cbName].replace('.','');
var arr = [];
for(var i in json.data){
arr.push(i+'='+encodeURIComponent(json.data[i]));
}
var str = arr.join('&');
window[json.data[json.cbName]]=function(result){
json.success&&json.success(result);
oH.removeChild(oS);
window[json.data[json.cbName]]=null;
};
var oH = document.getElementsByTagName('head')[0];
var oS = document.createElement('script');
oS.src=json.url+'?'+str;
oH.appendChild(oS);
oS.onerror = function(){
window[json.data[json.cbName]]=null;
oH.removeChild(oS);
json.error&&json.error();
}
}
}
// 错误提示弹框插件
var pop = {
oBox: document.createElement('div'),
oPos: document.createElement('div'),
oT: document.createElement('p'),
oBtn: document.createElement('a'),
init: function(){
var _this = this;
this.oBtn.innerHTML = '确定';
dlb.addClass(_this.oBox,'error-dialog-box');
dlb.addClass(_this.oPos,'error-dialog');
dlb.addClass(_this.oBtn,'close-dialog-btn');
this.oPos.appendChild(this.oT);
this.oPos.appendChild(this.oBtn);
this.oBox.appendChild(this.oPos);
this.oBtn.onclick = function(){
_this.hide();
}
},
show: function(){
var _this = this;
this.init();
dlb.byQs('body').appendChild(_this.oBox);
},
hide: function(){
var _this = this;
this.oT.innerHTML = '';
dlb.byQs('body').removeChild(_this.oBox);
},
alert: function(msg){
if(!msg) return;
this.oT.innerHTML = msg;
this.show();
}
};
// 支付错误提示
window.onerror = function (msg, url, line) {
var error_text = 'ERR: ' + msg + '<br />' + url + '<br />' + line;
error_text += '<p>' + navigator.userAgent + '</p>'
dlb.byId('orderError').style.color = '#f8f8f8';
dlb.byId('orderError').innerHTML = error_text;
}
//提交金额执行函数
function commit(){
var oAmount = dlb.byId('amount');
var oCashedNum = dlb.byId('cashedNum');
var oPayForm = dlb.byId('payForm');
if(parseFloat(oAmount.value) > 0){
dlb.removeEvent(dlb.byQs('#lastpay'),'touchend',commit);
// dlb.byId("lastpay").style.backgroundColor = "#d7d3d4";
dlb.removeClass(dlb.byId("lastpay"),"canClick");
// 判断如果选中的是哆卡就让走card系统
var oRadioSelected = dlb.byQs('.radio-selected');
if(oRadioSelected && dlb.hasClass(oRadioSelected,'stored-card')){
dlb.byQs('#cardPay').value = "CARD_PAY";
if(dlb.hasClass(oRadioSelected,'cardholder') || dlb.hasClass(oRadioSelected,'changeSendCard')){
discountAmount();
dlb.show(dlb.byQs('.vip-card-bg'));
}else{
loadingShow();
ajaxSubmitForm();
}
}else if(dlb.byId('cardKindNum').value){
loadingShow();
dlb.byQs('#cardPay').value = "CARD_PAY";
ajaxSubmitForm();
}else{
loadingShow();
dlb.byQs('#cardPay').value = '';
ajaxSubmitForm();
}
}else{
return false;
}
}
// 加载图片的显示隐藏
function loadingShow(type){
var oLoading = type == 'card' ? dlb.byQs('.loading-card-bg') : dlb.byQs('.loading-bg');
dlb.show(oLoading);
oLoading.style.animation = 'mymove 2s';
}
function loadingHide(){
var oLoading = dlb.byQs('.loading-bg');
var cLoading = dlb.byQs('.loading-card-bg');
dlb.hide(oLoading);
dlb.hide(cLoading);
oLoading.style.animation = '';
cLoading.style.animation = '';
}
//设置弹框的高度
function setQuickHeight(){
var wh = window.innerHeight;
var dh = dlb.byQs('.dialog-head').offsetHeight;
var df = dlb.byQs('.dialog-foot').offsetHeight;
var dt = dlb.byQs('.dialog').offsetTop;
var realH = wh - dh - df - dt*2 - 16;
dlb.byQs('.dialog-cont').style.height = realH + "px";
}　
</script>
<script type="text/javascript">
//注册页面
// 监听关闭按钮点击事件
dlb.addEvent(dlb.byQs(".close-btn"),'click',function(){
dlb.byQs(".phoneNum").value = '';
dlb.byQs(".vcode").value = '';
dlb.byQs(".error-msg").innerHTML = "";
dlb.hide(dlb.byQs(".register-bg"));
//监听立即办理按钮点击事件
dlb.addEvent(dlb.byQs(".handle-btn"),"touchend",pay);
})
// 监听获取验证码按钮点击事件
dlb.addEvent(dlb.byQs(".vcode-btn"),'click',sendCode);
function sendCode() {
if(checkPhoneNum()) {
dlb.removeEvent(dlb.byQs(".vcode-btn"),'click',sendCode);
dlb.addClass(dlb.byQs(".vcode-btn"),'disabled-btn');
sendAuthCode2(dlb.byQs(".phoneNum").value, 'login');
}
}
/*-------------------------------------------*/
var InterValObj; //timer变量，控制时间
var curCount = 60; //当前剩余秒数
var code = ""; //验证码
var codeLength = 4; //验证码长度
function sendAuthCode2(mobilePhone,type) {
SetRemainTime();
InterValObj = setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
sendAuthCodeX(mobilePhone,type);
}
//timer处理函数
function SetRemainTime(){
curCount--;
//设置button效果，开始计时
dlb.byQs(".vcode-btn").innerHTML = curCount + " s";
if (curCount == 0) {
clearInterval(InterValObj);//停止计时器
dlb.addEvent(dlb.byQs(".vcode-btn"),'click',sendCode);//启用按钮
dlb.byQs(".vcode-btn").innerHTML = "获取验证码";
dlb.removeClass(dlb.byQs(".vcode-btn"),'disabled-btn');
curCount = 60;
code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
}
//调取后台短信接口
function sendAuthCodeX(mobilePhone,type){
var host = '${param.memberCardBalanceVO.hiCardHost}';
dlb.jsonp({
url: host+'/card/account/member/verifycode/jsonp/'+mobilePhone+'/'+type,
success: function (json) {
//获取验证码失败，但是定时器还大于25秒，也没有走完的情况下每隔20秒自动调取一次
if(json.result !== 'success' && curCount > 25 && curCount != 60){
setTimeout(function(){
sendAuthCodeX(mobilePhone,type);
},20000);
}
},
error: function(){
dlb.byQs(".error-msg").innerHTML = "系统错误请重试";
clearInterval(InterValObj);//停止计时器
dlb.addEvent(dlb.byQs(".vcode-btn"),'click',sendCode);//启用按钮
dlb.byQs(".vcode-btn").innerHTML = "获取验证码";
dlb.removeClass(dlb.byQs(".vcode-btn"),'disabled-btn');
curCount = 60;
code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
});
}
// 校验手机号
function checkPhoneNum(){
if(dlb.byQs(".phoneNum").value == ''){
dlb.byQs(".error-msg").innerHTML = "请输入手机号码";
return false;
}else if(!(/^1[34578]\d{9}$/i).test(dlb.byQs(".phoneNum").value)){
dlb.byQs(".error-msg").innerHTML = "请输入正确手机号码";
return false;
}else{
dlb.byQs(".error-msg").innerHTML = "";
return true;
}
}
dlb.byQs(".phoneNum").oninput = checkPhoneNum;
// 校验验证码
function checkCode(){
if(dlb.byQs(".vcode").value == ''){
dlb.byQs(".error-msg").innerHTML = "请输入验证码";
return false;
}else if(!(/^\d{4}$/i).test(dlb.byQs(".vcode").value)){
dlb.byQs(".error-msg").innerHTML = "验证码为4位数字";
return false;
}else{
dlb.byQs(".error-msg").innerHTML = "";
return true;
}
}
dlb.byQs(".vcode").oninput = checkCode;
//点击确定按钮 先验证
dlb.addEvent(dlb.byQs(".register-btn"),'click',loginSubmit);
function loginSubmit(){
if(checkPhoneNum() && checkCode()){
dlb.removeEvent(dlb.byQs(".register-btn"),'click',loginSubmit);
dlb.addClass(dlb.byQs(".register-btn"),'disabled-btn');
var host = '${param.memberCardBalanceVO.hiCardHost}';
dlb.jsonp({
url: host+'/card/member/valid/'+dlb.byQs(".phoneNum").value+'/login/'+dlb.byQs(".vcode").value,
success: function(json){
if(json.result == 'success'){
register();
}else{
dlb.byQs(".error-msg").innerHTML = "验证码错误！";
reductionState();
}
},
error: function(){
dlb.byQs(".error-msg").innerHTML = "系统错误，请重试！";
reductionState();
}
});
}
}
//注册方法
function register(){
var memberNum = dlb.byId('memberNum').value;
var host = '${param.memberCardBalanceVO.hiCardHost}';
dlb.jsonp({
url: host + '/card/member/regist/'+memberNum+'/'+dlb.byQs(".phoneNum").value,
success: function(json){
if(json.result == 'success'){
//百度统计
_hmt && _hmt.push(['_trackEvent', 'M06', 'click', '注册成功']);
dlb.hide(dlb.byQs(".register-bg"));
commit();
}else{
dlb.byQs(".error-msg").innerHTML = "注册失败，请重试！";
reductionState();
}
},
error: function(){
dlb.byQs(".error-msg").innerHTML = "系统错误，请重试！";
reductionState();
}
})
}
function reductionState(){
clearInterval(InterValObj);//停止计时器
dlb.addEvent(dlb.byQs(".vcode-btn"),'click',sendCode);//启用按钮
dlb.removeClass(dlb.byQs(".vcode-btn"),'disabled-btn');
dlb.byQs(".vcode-btn").innerHTML = "获取验证码";
curCount = 60;
dlb.addEvent(dlb.byQs(".register-btn"),'click',loginSubmit);
dlb.removeClass(dlb.byQs(".register-btn"),'disabled-btn');
}
</script>
<script type="text/javascript">
'use strict'
// 默认选择谁
defaultSel();
//判断立减是否存在并且给立减活动绑定点击事件
if(dlb.byQs('.tickets-existed')){
var oTicketsNum = dlb.byQs(".tickets-existed input").value;
dlb.addEvent(dlb.byQs('.tickets-detial'),'click',function(){
clearRadio();
dlb.addClass(dlb.byQs('.tickets-detial'),'radio-selected');
if(dlb.byQs('.voucher-existed')){
var oDisAmount = dlb.byQs('.dialog-head span');
contrast(); //控制显示是否有可用的优惠券
checkCoupon(); //循环查看看可用的优惠券
dlb.clear(dlb.byQsa('.quick-list'),'quick-chiose'); //清除选中的代金券
oDisAmount.innerHTML = '0';
dlb.byId('cashedNum').value = oTicketsNum;
}
if(dlb.byQs(".stored-card")){
clearAmount(); //清除哆卡的折扣金额和实际金额
}
});
}
//判断默认选中哆卡还是立减
function defaultSel(){
var oStoredCard = dlb.byQs('.stored-card');
var oTicketsExisted = dlb.byQs('.tickets-existed');
if(oStoredCard){
clearRadio(); //清除所有选中
dlb.addClass(oStoredCard,'radio-selected');
}else if(!oStoredCard && oTicketsExisted){
clearRadio(); //清除所有选中
dlb.addClass(oTicketsExisted,'radio-selected');
}else{
clearRadio();
}
};
//清空所选中单选按钮
function clearRadio(){
var aRadio = dlb.byQsa('.tickets li');
if(aRadio.length){
for(var i=0,aR=aRadio.length;i<aR;i++){
dlb.removeClass(aRadio[i],'radio-selected');
}
}
}
</script>
<script type="text/javascript">
//判断事件的绑定
function judgeEvent(){
if(dlb.byQs(".recommend-list-con li")){
//监听立即办理按钮点击事件
dlb.addEvent(dlb.byQs(".handle-btn"),"touchend",pay);
//监听原价付款按钮点击事件
dlb.addEvent(dlb.byQs(".pay-btn"),"touchend",directPay);
}
if(dlb.byId('cardKindList').value != '' && !dlb.byQs(".voucher-detial") && !dlb.byQs(".tickets-detial")){
dlb.addEvent(dlb.byId('lastpay'),'touchend',cardKindShow);
}else{
dlb.addEvent(dlb.byId('lastpay'),'touchend',commit);
}
}
// 异步提交表单
function ajaxSubmitForm(){
var orderAmount = dlb.byId('amount').value,
customerNum = dlb.byId('customerNum').value,
shopNum = dlb.byId('shopNum').value,
machineNum = dlb.byId('machineNum').value,
memberNum = dlb.byId('memberNum').value,
source = dlb.byId('source').value,
tableNum = dlb.byId('tableNum').value,
openId = dlb.byId('openId').value,
authId = dlb.byId('authId').value,
voucherNum = dlb.byId('cashedNum').value,
requestNum = dlb.byId('requestNum').value,
payWay = dlb.byId('payWay').value,
cardPay = dlb.byId('cardPay').value,
onceCardBlackNum = dlb.byId('onceCardBlackNum').value,
cardKindNum = dlb.byId('cardKindNum').value,
cardAgainFlag = dlb.byId('cardAgainFlag').value;
//如果选立减活动类型传立减
var oRadioSelected = dlb.byQs('.radio-selected');
var oT = dlb.byQs('.tickets-detial');
var marketingType = null;
if(oRadioSelected && oT){
if(dlb.hasClass(oT,'radio-selected')){
marketingType = 'REDUCE';
}
}
dlb.ajax({
url: '/active/pay/',
type: 'POST',
data: {"authId":authId,"orderAmount":orderAmount,"customerNum":customerNum,"shopNum":shopNum,"machineNum":machineNum,"memberNum":memberNum,"source":source,"tableNum":tableNum,"openId":openId,"voucherNum":voucherNum,"requestNum":requestNum,"payWay":payWay,"marketingType":marketingType,"cardPay":cardPay,"onceCardBlackNum":onceCardBlackNum,"cardKindNum":cardKindNum,"cardAgainFlag":cardAgainFlag},
success: function(str){
var jsonObj = JSON.parse(str);
if(jsonObj.result == "success"){
var orderNum = jsonObj.data.orderNum;
dlb.byId("orderNum").value = orderNum;
var bankrequest = jsonObj.data.bankRequest;
if(!bankrequest){
loadingHide();
pop.alert('操作过于频繁，请再次点击确认支付按钮');
dlb.addClass(dlb.byQs('#lastpay'),"canClick");
judgeEvent();
return;
}
//dlb.byId("requestNum").value = jsonObj.data.bankRequestNum;
if(bankrequest.status == '0' && bankrequest.payUrl != ''){
if(cardAgainFlag == 1){
var buyCardForm = dlb.byId('buyCard');
buyCardForm.setAttribute('action',bankrequest.payUrl);
dlb.byId('cardAgainBankRequestNum').value=jsonObj.data.bankRequestNum;
buyCardForm.submit()
return;
}
window.location.href = bankrequest.payUrl;
return;
}
if(bankrequest.status == '1'){
dlb.byId("requestNum").value = bankrequest.requestNum;
if(dlb.byId("machineForBuyingCard").value != dlb.byId("machineNum").value) {
dlb.byId("machineNum").value = dlb.byId("machineForCardPay").value;
}
bankPay();
return;
}
onBridgeReady(bankrequest.APPID,bankrequest.TIMESTAMP,bankrequest.NONCESTR,bankrequest.PACKAGE,bankrequest.PAYSIGN);
loadingHide();
}else{
loadingHide();
pop.alert(jsonObj.error.errorMsg);
dlb.addClass(dlb.byQs('#lastpay'),"canClick");
judgeEvent();
}
},
error: function(error){
loadingHide();
pop.alert('系统异常，请稍后重试');
dlb.addClass(dlb.byQs('#lastpay'),"canClick");
judgeEvent();
}
});
}
function bankPay(){
var orderNum = dlb.byId("orderNum").value;
var machineNum = dlb.byId("machineNum").value;
var requestNum = dlb.byId("requestNum").value;
var customerNum = dlb.byId("customerNum").value;
location.replace("http://order.duolabao.cn/active/complete/"+orderNum+"/?machineNum="+machineNum+"&requestNum="+requestNum+"&customerNum="+customerNum+"&r="+new Date().getTime());
event.returnValue=false;
}
function onBridgeReady(appId,time,nonceStr,package,paySign){
function onJSBridgeReady(){
loadingHide();
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":appId,
"timeStamp":time,
"nonceStr": nonceStr,
"package":package,
"signType": "MD5",
"paySign":paySign
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
bankPay();
}else{
dlb.addClass(dlb.byQs('#lastpay'),"canClick");
judgeEvent();
}
}
);
}
if (typeof WeixinJSBridge == "undefined"){
loadingShow();
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onJSBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onJSBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onJSBridgeReady);
}
}else{
onJSBridgeReady();
}
}
</script>
<script type="text/javascript">
var keybord = {
//获取键盘内容
getCon: function(obj){
return obj.innerHTML;
},
//触摸键盘时颜色改变
changeBc: function(obj){
obj.style.backgroundColor = '#eee';
var _obj = obj;
setTimeout(function(){
_obj.style.backgroundColor = '#fff';
},30);
},
//键盘收起
slideDown: function(box){
var oF = box.offsetHeight;
var timer = null;
var h = 0;
timer = setInterval(function(){
h+=10;
if(h >= oF){
h = oF;
clearInterval(timer);
}
box.parentNode.style.bottom = -h+'px';
},5);
},
//键盘弹出
slideUp: function(box,pos){
var oF = box.offsetHeight;
var timer = null;
var h = -oF;
timer = setInterval(function(){
h+=10;
if(h >= 0 ){
h = 0;
clearInterval(timer);
}
box.parentNode.style.bottom = h+'px';
},5);
dlb.removeEvent(pos,'click',toUp);
},
//键盘点击输入
input: function(am,item){
var num = keybord.getCon(item);
var newAm;
//判断输入金额在小数点前五位、小数点后两位
if ((am == null || am == '') && num == '.'){
newAm = "0" + num;
}else if (am == null || am == ''){
newAm = num;
}else if (num == '.' && am.indexOf(".") > 0){
newAm = am;
}else if (num == '0' && am.indexOf(".") < 0 && am.indexOf("0") == 0){
newAm = am;
}else if (num == '.' && am.indexOf(".") < 0 && parseInt(am) < 50000){
newAm = am + num;
}else if (am.indexOf(".") > 0 && (am.length - am.indexOf(".")) > 2){
newAm = am;
}else if (am.length > 8){
newAm = am;
}else if (am == '0' && num != '.'){
newAm = num;
}else if (am.indexOf(".") < 0 && parseInt(am) == 5000 && num != '0'){
newAm = am;
}else if (am.indexOf(".") < 0 && parseInt(am) > 5000){
newAm = am;
}else if (am.indexOf(".") < 0 && parseInt(am) <= 50000 && am.length >= 5 && num != '.'){
newAm = am;
}else{
newAm = am + num;
}
return newAm;
},
//点击退格
back: function(aM){
if(!aM){
return;
}else{
return aM.substring(0, aM.length - 1);
}
}
}
//光标调用
setInterval(markBlink(), 580);
//初始化金额
dlb.byQs('.payment-cont-num').innerHTML = '';
dlb.byId("amount").value = '';
//监听触摸键盘事件
var oBack = dlb.byQs('.keybord-back');
for (var i = 0; i < dlb.byName('number').length; i++) {
//键盘触摸的时候颜色变化
dlb.addEvent(dlb.byName('number')[i],'touchstart',function(e){
keybord.changeBc(this);
e.preventDefault();
})
//键盘触摸抬起的时候输入值
dlb.addEvent(dlb.byName('number')[i], 'touchend', inputing);
}
//按下退格键颜色变化
dlb.addEvent(dlb.byQs('.keybord-back'),'touchstart',function(e){
keybord.changeBc(this);
e.preventDefault();
});
//按下退格按钮
dlb.addEvent(dlb.byQs('.keybord-back'), 'touchend', backClick);
//当页面文档加载完成之后弹出键盘
dlb.addEvent(document, 'DOMContentLoaded', toUp);
//点击确认支付
var oMakesure = dlb.byId('lastpay');
if(dlb.byId('cardKindList').value != '' && !dlb.byQs(".voucher-detial") && !dlb.byQs(".tickets-detial")){
dlb.addEvent(dlb.byId('lastpay'),'touchend',cardKindShow);
}else{
dlb.addEvent(dlb.byId('lastpay'),'touchend',commit);
}
//键盘收起按钮按下颜色变化
dlb.addEvent(dlb.byQs('.retract'),'touchstart',function(e){
keybord.changeBc(this);
e.preventDefault();
});
//点击键盘收起按钮，键盘收起
dlb.addEvent(dlb.byQs('.retract'),'touchend',function(){
keybord.slideDown(dlb.byQs('.keybord'));
dlb.addEvent(dlb.byQs('.payment-cont'),'click',toUp);
});
//键盘弹出函数
function toUp(){
if(dlb.byQs('.recommend-list') && parseInt(dlb.byQs('.recommend-list').style.bottom) == 0){
recommend.toHide(dlb.byQs('.recommend-list'));
}
keybord.slideUp(dlb.byQs('.keybord'),dlb.byQs('.payment-cont'));
speFunEnd();
}
//输入金额函数
function inputing(e) {
var oPayNum = dlb.byQs('.payment-cont-num');
var amount = dlb.byId("amount").value;
var oVoucherExisted = dlb.byQs('.voucher-existed');
var num = this.innerHTML;
var newAmount = keybord.input(amount,this)
dlb.byId("amount").value = newAmount;
oPayNum.innerHTML = newAmount;
speFunOpen();
//输入的时候判断是否有可用优惠券
if(parseFloat(amount) != parseFloat(newAmount)){
//假如优惠券存在有两种情况 一、没有选中优惠券 二、已经选中了优惠券
if(oVoucherExisted){
if(dlb.hasClass(oVoucherExisted,'radio-selected')){
dlb.clear(dlb.byQsa('.quick-list'),'quick-chiose'); //清空选中的优惠券
contrast(); //控制显示是否有可用的优惠券
defaultSel(); //默认选择哆卡还是立减
//isSelected(); //把优惠券的优惠金额做更改
}else{
dlb.clear(dlb.byQsa('.quick-list'),'quick-chiose'); //清空选中的优惠券
contrast(); //控制显示是否有可用的优惠券
}
}
}
e.preventDefault();
if(dlb.byQs(".stored-card")){
isSelectedCard(); //判断哆卡是否被选中是否显示金额
}
}
//按下退格键函数
function backClick(e){
var amount = dlb.byId("amount").value;
var aVoucherList = dlb.byQsa('.dialog-cont li');
var oDisAmount = dlb.byQs('.dialog-head span');
var oSelected = dlb.byQs('.quick-chiose');
var newAmount;
if (amount == null || amount == '') {
return;
} else {
newAmount = amount.substring(0, amount.length - 1);
}
dlb.byId("amount").value = newAmount;
dlb.byQs('.payment-cont-num').innerHTML = newAmount;
oDisAmount.innerHTML = '0';
if(dlb.byQs('.voucher-existed')){
clearVoucherShow();
contrast(); //显示是否有可用的优惠券
autoJudge(); //自动判断金额是否小于代金券金额
checkCoupon(); //循环查看可用的代金券
}
//按下空格分两种情况 一、已经选中了优惠券 二、没有选中优惠券
if(oSelected){
isSelected(); //判断是否选中代金券
}else{
if(dlb.byQs(".stored-card")){
isSelectedCard(); //判断哆卡是否被选中是否显示金额
}
}
speFunEnd(); //输入金额临界值触发的事件
e.preventDefault();
}
//光标闪烁
function markBlink() {　　　
var n = 1;　　　　
function inner() {
if (n % 2 == 0) {
dlb.byId("marker").style.color = "#333333";
} else {
dlb.byId("marker").style.color = "#ffffff";
}　　　　　　
return n++;　　　　
}　　　　
return inner;　　
}
//输入金额临界值触发的事件
function speFunOpen(){
dlb.byId("marker").style.display = "none";
if(parseFloat(dlb.byId("amount").value)){
dlb.addClass(dlb.byId("lastpay"),"canClick");
}
}
function speFunEnd(){
if (parseFloat(dlb.byId("amount").value) == 0) {
dlb.removeClass(dlb.byId("lastpay"),"canClick");
}else if(dlb.byId("amount").value == ''){
dlb.byId("marker").style.display = "block";
dlb.removeClass(dlb.byId("lastpay"),"canClick");
}
}
</script>
<script>
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?6a76604a1b6599c0e1e3a00098457333";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment