需求：需要用余额、支付宝、微信支付方式支付会员，余额支付显示余额其余支付不显示余额。余额点支付直接成功或失败，支付宝/微信支付弹出相应的二维码。支付接口为同一个，但要处理三种情况。
用到了ajax的complete，return一个对象再进行判断。
接口：
/shared/profile/getBalance获取余额
/shared/profile/viporder支付
/fund/paycallback/selecttradeno订单号
html部分
<!-- vip开通 -->
<div class="recharge" data-role="vip-pay-box" style="display:none">
<div class="recharge-money" data-typeval="30">应付金额：
<b data-role="pay-money"><?= $oneprice?></b>元</div>
<div class="vip-payment">
<div class="active" data-type="30">余额支付<i class="active"></i>
<b class="active">✔</b>
</div>
<div data-type="10">支付宝支付<i></i><b>✔</b></div>
<div data-type="20">微信支付<i></i><b>✔</b></div>
</div>
<div class="vip-balancebox">余额：<span class="vip-balance"></span> 元</div>
<div style="color:red">提示：支付成功后，请在手机或pad退出微课宝账号，
重新登录使用会员功能</div>
</div>
<!-- vip开通 -->
<!--VIP 充值方法-->
<div data-role="zfbpay-qrocde" style="display:none;height:210px">
<div class="vip-ali"><i class="ali_qrcode"></i>
<p>支付宝扫一扫支付</p>
</div>
</div>
<div data-role="wxpay-qrocde" style="display:none;height:210px">
<div class="vip-wechat"><i class="wx_qrcode"></i>
<p>微信扫一扫支付</p>
</div>
</div>
css部分
/* 会员支付方式 */
.vip-payment{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 25px;
}
.vip-payment div{
flex-direction: column;
width: 30%;
line-height: 35px;
text-align: center;
border: 1px #ccc solid;
border-radius: 3px;
cursor: pointer;
position: relative;
}
.vip-payment div.active{
border:1px red solid;
}
.vip-payment div i{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 22px solid transparent;
position: absolute;
right: 0;
bottom: 0;
display: none;
}
.vip-payment div i.active,
.vip-payment div b.active{
display: block;
}
.vip-payment div b{
color: #fff;
position: absolute;
right: 0;
bottom: 2px;
font-weight: normal;
line-height: 10px;
display: none;
}
.vip-balancebox{
margin-bottom: 20px;
display: none;
}
js部分
1、默认为余额支付方式
2、点击支付获取支付方式
1、默认为余额支付方式：获取$('.recharge-money').attr('data-typeval')的值，如果为30（余额）就显示剩余余额，反之。
//会员选择支付方式
var vipPaytype = $('.recharge-money').attr('data-typeval');
if(vipPaytype == '30'){
$('.vip-balancebox').show();
}else{
$('vip-balancebox').hide();
}
2、点击支付获取支付方式：添加样式，获取当前点击的data-type的值，判断是余额还是支付宝还是微信，并赋值给$('.recharge-money')。
$('.vip-payment div').click(function(){
$('.vip-payment div').removeClass("active").find("i,b").hide();
$(this).addClass("active").find("i,b").show();
var vipPaytype = $(this).attr('data-type');
if(vipPaytype == '30'){
console.log('余额');
$('.recharge-money').attr('data-typeval','30');
$('.vip-balancebox').show();
}else if(vipPaytype == '10'){
console.log('支付宝');
$('.recharge-money').attr('data-typeval','10');
$('.vip-balancebox').hide();
}else{
console.log('微信');
$('.recharge-money').attr('data-typeval','20');
$('.vip-balancebox').hide();
}
});
3、制作支付宝二维码弹窗
4、制作微信二维码弹窗
//支付宝支付二维码
function zfbQRcode(tradeno){
layer.open({
type:1,
title: '支付宝扫码支付',
area: ['470px', 'auto'], //宽高
content: $('[data-role="zfbpay-qrocde"]'),
btn: ['支付完成'],
shade:0,
yes:function () {
selectoder(tradeno);
}
});
}
//微信支付二维码
function wxQRcode(tradeno){
layer.open({
type:1,
title: '微信扫码支付',
area: ['470px', 'auto'], //宽高
content: $('[data-role="wxpay-qrocde"]'),
btn: ['支付完成'],
shade:0,
yes:function () {
selectoder(tradeno);
}
});
}
5、支付接口
这里将ajax封装成一个pay() 的方法，通过传money和type的参数来处理不同的支付类型，这里用到了ajax自定义回调，因为余额和支付宝微信的回调不一样，当余额大于金额时余额直接成功，而支付宝微信会返回二维码。
余额成功的回调
支付宝微信回调
function pay(month,type){
var index = layer.load(2);
return $.post('/shared/profile/viporder',{'month': month,'type':type}).complete(function () {
layer.close(index);
}).fail(function () {
errorMsg('网络异常,请稍后重试');
});
}
6、支付成功的回调与支付失败的回调，跳转的界面不同。
var wait=10;
function showSuccessPage() {
$(".vipversionsbox").hide();
$(".vipversions-success").show();
layer.closeAll();
wait = 10;
countDown();
}
function showFailPage() {
$(".vipversionsbox").hide();
$(".vipversions-fail").show();
layer.closeAll();
wait = 10;
countDown();
}
//查询
function selectoder(tradeno){
$.post('/fund/paycallback/selecttradeno',{'tradeno':tradeno},function(res){
if(res.success){
showSuccessPage();
}else{
showFailPage();
}
});
}
function countDown() {
if(wait == 0){
window.location.reload();
return;
}
$('.return10 span').html(wait+"s后回到会员服务");
wait--;
setTimeout(function() {
countDown();
},1000);
}
7、获取二维码，封装成一个方法，然后传参，给到append中
返回 图片img地址
该知识点参考文档：生成对象
function createQrcodeImgObj(qrcodeUrl) {
return $('<img/>', {src: qrcodeUrl});
}
8、点击开通会员的按钮弹窗，点支付的时候判断是什么支付方式 ，传入不同的支付参数。
余额：
如果var vipPaytype = $('.recharge-money').attr('data-typeval');的vipPaytype 值为30，判断余额是否充足var balance = $('.vip-balance').text();//余额
var paymoney = $('[data-role="pay-money"]').text();//应付金额
如果balance<paymoney ，则提示余额不足,请充值或者选择其他支付方式。
如果balance>paymoney ，则pay传money和type，成功showSuccessPage()。
if(vipPaytype == '30'){
if(parseInt(balance) < parseInt(paymoney)){
layer.msg('余额不足,请充值或者选择其他支付方式');
return;
}
pay(month,'30').success(function (res) {
if(res.success == true){
showSuccessPage();
}else{
errorMsg(res.message);
}
});
}
支付宝：
再append的时候要将之前的图片清空，传值获取回调里的qrcodeUrl ，然后append给$('.ali_qrcode')。成功的话弹出二维码的弹窗。
if(vipPaytype == '10'){
$('.ali_qrcode').empty();
pay(month,'10').success(function (res) {
if(res.success == true){
let qrcodeUrl = res.data.qrcode;
$('.ali_qrcode').append(createQrcodeImgObj(qrcodeUrl));
zfbQRcode(res.data.tradeno);
$('.vip-ali').show();
}else{
errorMsg(res.message);
}
});
}
微信：
再append的时候要将之前的图片清空，传值获取回调里的qrcodeUrl ，然后append给$('.wx_qrcode')。成功的话弹出二维码的弹窗。
if(vipPaytype == '20'){
$('.wx_qrcode').empty();
pay(month,'20').success(function (res) {
if(res.success == true){
let qrcodeUrl = res.data.qrcode;
$('.wx_qrcode').append(createQrcodeImgObj(qrcodeUrl));
wxQRcode(res.data.tradeno);
$('.vip-wechat').show();
}else{
errorMsg(res.message);
}
});
}
完整代码：
//充值VIP
$('[data-role="vip-open"]').click(function(){
getBalance();
var index = layer.open({
type:1,
title: '开通会员',
area: ['470px', 'auto'], //宽高
content: $('[data-role="vip-pay-box"]'),
btn:["支付","取消"],
yes:function () {
var month = $('[data-role="pay-age"].active').attr('data-month');
var vipPaytype = $('.recharge-money').attr('data-typeval');
var balance = $('.vip-balance').text();//余额
var paymoney = $('[data-role="pay-money"]').text();//应付金额
if(vipPaytype == '30'){
if(parseInt(balance) < parseInt(paymoney)){
layer.msg('余额不足,请充值或者选择其他支付方式');
return;
}
pay(month,'30').success(function (res) {
if(res.success == true){
showSuccessPage();
}else{
errorMsg(res.message);
}
});
}else if(vipPaytype == '10'){
$('.ali_qrcode').empty();
pay(month,'10').success(function (res) {
if(res.success == true){
let qrcodeUrl = res.data.qrcode;
$('.ali_qrcode').append(createQrcodeImgObj(qrcodeUrl));
zfbQRcode(res.data.tradeno);
$('.vip-ali').show();
}else{
errorMsg(res.message);
}
});
}else{
$('.wx_qrcode').empty();
pay(month,'20').success(function (res) {
if(res.success == true){
let qrcodeUrl = res.data.qrcode;
$('.wx_qrcode').append(createQrcodeImgObj(qrcodeUrl));
wxQRcode(res.data.tradeno);
$('.vip-wechat').show();
}else{
errorMsg(res.message);
}
});
}
},
btn2: function(){
layer.close(index);
}
});
});
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
