ajax余额支付宝微信支付（多种情况调用同一个接口、jquery创建新对象设置属性）

需求：需要用余额、支付宝、微信支付方式支付会员，余额支付显示余额其余支付不显示余额。余额点支付直接成功或失败，支付宝/微信支付弹出相应的二维码。支付接口为同一个，但要处理三种情况。
用到了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);}});});