<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>我的余额</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
<link rel="stylesheet" href="../css/aui.css"/>
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<link href="../css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="../css/user_balance.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="api.closeWin()"></a>
<h1 class="mui-title">我的余额</h1>
<a class="mui-pull-right detail" onclick="goPage(‘balance_detail‘)">明细</a>
</header>
<div class="aui-content">
<div class="top">
<p class="my-num">
{{myBalance}}
</p>
<p class="num-text">
学习币
</p>
</div>
<div class="con aui-margin-t-10 aui-padded-15">
<div class="con-tit aui-margin-b-10">
充值
</div>
<ul class="recharge-list flex">
<li :recharge-num="item.Price" :recharge-id="item.IapProductId" v-for="item in mealCoin">
<p class="list-name">
{{item.PriceInt}}学习币
</p>
<p class="money">
￥{{item.Price}}
</p>
</li>
<!--<li>-->
<!--<p class="list-name">手动输入</p>-->
<!--<p class="money" v-if="custom">￥{{rechargeNum}}</p>-->
<!--<p class="money" v-else="custom"> </p>-->
<!--</li>-->
</ul>
</div>
<div class="bot aui-padded-t-10 aui-padded-l-15 aui-padded-r-15 aui-padded-b-5">
<div class="bot-tit aui-margin-b-10">
充值说明
</div>
<p>
1、充值后可用于直接购买App内虚拟内容，比如课程、电子书。
</p>
<p>
2、充值后不能在非ios设备使用，充值请参考 <a href="#">充值流程说明</a>。
</p>
<p>
3、充值后没有使用期限，无法提现退款或转赠他人。
</p>
<p>
4、如遇无法充值、充值失败问题，可关注“8分钟创伤服务号”联系我们。
</p>
</div>
<div class="operation">
<!--<div id="exchange-btn" class="aui-btn aui-btn-warning aui-margin-l-10">兑换码</div>-->
<div id="invoice-switch" class="aui-padded-l-15 aui-padded-r-15 flex">
<p class="switch-text">
索要发票
</p>
<p>
<input id="invoice" type="checkbox" class="aui-switch">
</p>
</div>
</div>
<div id="recharge" class="aui-btn aui-btn-block aui-btn-warning aui-margin-15">
立即充值
</div>
<div class="aui-mask aui-mask-in"></div>
<div id="pay-box">
<p class="pay-tit">
选择支付
</p>
<p class="money">
￥{{rechargeNum}}
</p>
<ul>
<li class="pay-item flex" v-if="wxpay==true">
<div class="pay-l flex aui-margin-l-15">
<div class="pay-icon"><img src="../image/share/wx-pay.png" alt="">
</div>
<p class="pay-text">
微信
</p>
</div>
<div class="pay-r aui-margin-r-15">
<input class="aui-radio" type="radio" value="wxpay" name="payType" checked>
</div>
</li>
<li class="pay-item flex" v-if="alipay==true">
<div class="pay-l flex aui-margin-l-15">
<div class="pay-icon"><img src="../image/share/zfb-pay.png" alt="">
</div>
<p class="pay-text">
支付宝
</p>
</div>
<div class="pay-r aui-margin-r-15">
<input class="aui-radio" type="radio" value="alipay" name="payType">
</div>
</li>
<li class="pay-item flex" v-if="iap==true">
<div class="pay-l flex aui-margin-l-15">
<div class="pay-icon"><img src="../image/share/ios.jpg" alt="">
</div>
<p class="pay-text">
苹果内购
</p>
</div>
<div class="pay-r aui-margin-r-15">
<input class="aui-radio" type="radio" value="iap" name="payType">
</div>
</li>
<li class="pay-item flex" v-if="exchange==true">
<div class="pay-l flex aui-margin-l-15">
<div class="pay-icon"><img src="../image/share/exchange.png" alt="">
</div>
<p class="pay-text">
兑换码
</p>
</div>
<div class="pay-r aui-margin-r-15">
<input class="aui-radio" type="radio" value="exchange" name="payType">
</div>
</li>
</ul>
<div id="pay" class="aui-btn aui-padded-t-5 aui-padded-b-5 aui-margin-b-10 aui-btn-warning" onclick="subOrder(this)">
立即支付
</div>
</div>
<!--填写发票信息-->
<div id="invoice-box">
<div class="invoice-list flex">
<div class="list-label">
发票类型
</div>
<div class="list-input">
<select id="invoiceType">
<option value="咨询费">咨询费</option>
<option value="会务费">会务费</option>
<option value="信息服务费">信息服务费</option>
</select>
</div>
</div>
<div class="invoice-list flex">
<div class="list-label">
发票抬头
</div>
<div class="list-input">
<input type="text" id="invoiceHead" placeholder="请输入发票抬头">
</div>
</div>
<div class="invoice-list flex">
<div class="list-label">
发票内容
</div>
<div class="list-input">
<input type="text" id="invoiceCon" placeholder="请输入发票内容">
</div>
</div>
<div class="invoice-list flex">
<div class="list-label">
收件人姓名
</div>
<div class="list-input">
<input type="text" id="addressee" placeholder="请输入收件人姓名">
</div>
</div>
<div class="invoice-list flex">
<div class="list-label">
收件人电话
</div>
<div class="list-input">
<input type="text" id="AddresseePhone" placeholder="请输入收件人电话">
</div>
</div>
<div class="invoice-list flex">
<div class="list-label">
发票邮寄地址
</div>
<div class="list-input">
<input type="text" id="invoiceAddress" placeholder="请输入邮寄地址">
</div>
</div>
<div class="invoice-list flex">
<div class="list-label">
纳税人识别号
</div>
<div class="list-input">
<input type="text" id="taxpayerNum" placeholder="请输入纳税人识别号">
</div>
</div>
<div class="invoice-btns aui-padded-b-15 flex">
<div class="aui-btn cannel">
取消
</div>
<div class="aui-btn ok">
确定
</div>
</div>
</div>
</div>
</body>
<script src="../script/api.js" type="text/javascript"></script>
<script src="../script/mui.min.js" type="text/javascript"></script>
<script src="../script/common.js" type="text/javascript"></script>
<script src="../script/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
var vm = new Vue({
el : ".aui-content",
data : {
myBalance : ‘‘,
mealCoin : [],
rechargeNum : 0,
rechargeId : ‘‘,
custom : false,
systemType : ‘‘,
iap : false, //苹果内购
wxpay : true, //微信支付
alipay : true, //支付宝支付
exchange : true,//兑换码兑换
}
});
apiready = function() {
api.ajax({
url : host + "/api/Coin/MyCoinValue",
method : "get",
headers : {
"Authorization" : "Bearer " + token
}
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
vm.myBalance = ret.res.data.myCoinValue.toFixed(2);
} else {
api.alert({
msg : JSON.stringify(ret.res.msg)
});
}
} else {
if (err.body.code == "403") {
api.openWin({
url : "user_login_win.html",
name : "user_login_win",
})
} else {
api.alert({
//msg : JSON.stringify(err)
msg : JSON.stringify("网络已断开")
});
}
}
});
iosPay();
mealCoin();
};
$(".recharge-list").on("click", "li", function() {
var i = $(this).index();
$(".recharge-list li").removeClass("li-active");
$(".recharge-list li").eq(i).addClass("li-active");
var num = $(this).attr(‘recharge-num‘);
var id = $(this).attr(‘recharge-id‘);
if (num) {
vm.custom = false;
vm.rechargeNum = num;
vm.rechargeId = id;
} else {
api.prompt({
title : ‘自定义充值‘,
msg : ‘请输入想要充值的金额‘,
text : ‘‘,
type : ‘number‘,
buttons : [‘取消‘, ‘确定‘],
}, function(ret, err) {
var index = ret.buttonIndex;
var text = ret.text;
if (text) {
vm.rechargeNum = text;
vm.custom = true;
}
})
}
});
$("#recharge").on("click", function() {
vm.systemType = api.systemType;
$(".aui-mask").show();
$("#pay-box").show();
});
$("#invoice").on("change", function(e) {
if ($(this).is(‘:checked‘)) {
$(".aui-mask").show();
$("#invoice-box").show()
}
});
$(".cannel").on("click", function() {
$(".aui-mask").hide();
$("#invoice-box").hide();
$("#invoice").prop("checked", false);
});
$(".ok").on("click", function() {
if (!$("#invoiceHead").val()) {
api.toast({
msg : ‘发票抬头不能为空‘
})
return;
}
if (!$("#invoiceCon").val()) {
api.toast({
msg : ‘发票内容不能为空‘
})
return;
}
if (!$("#addressee").val()) {
api.toast({
msg : ‘收件人姓名不能为空‘
})
return;
}
if (!$("#AddresseePhone").val()) {
api.toast({
msg : ‘收件人电话不能为空‘
})
return;
}
if (!$("#invoiceAddress").val()) {
api.toast({
msg : ‘邮寄地址不能为空‘
})
return;
}
if (!$("#taxpayerNum").val()) {
api.toast({
msg : ‘纳税人识别号不能为空‘
})
return;
}
$(".aui-mask").hide();
$("#invoice-box").hide();
});
$(".aui-mask").on("click", function() {
$(".aui-mask").hide();
$("#pay-box").hide();
$("#invoice-box").hide();
$("#invoice").prop("checked", false);
});
function goPage(page) {
api.openWin({
url : page + ".html",
name : page
})
}
function fillShow() {
$("#invoice-con").show();
$("#invoice-con").animate({
top : "0",
bottom : "0"
});
}
function fillHide() {
$("#invoice-con").animate({
top : screenHeight,
bottom : -screenHeight
}, function() {
$("#invoice").prop("checked", false);
$("#invoice-con").hide();
});
}
function subOrder(obj) {
obj.disabled = true;
var systemType = api.systemType;
var payType = $("input[name=‘payType‘]:checked").val();
if (payType == ‘exchange‘) {
api.prompt({
msg : ‘请输入兑换码‘,
buttons : [‘取消‘, ‘确定‘]
}, function(ret, err) {
var index = ret.buttonIndex;
var text = ret.text;
if (index == 2) {
api.ajax({
url : host + "/api/ExchangeCode/Exchange?code=" + text,
method : "post",
headers : {
"Authorization" : "Bearer " + token
}
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
api.toast({
msg : ret.res.msg
});
location.reload();
} else {
api.toast({
msg : ret.res.msg
})
}
} else {
if (err.body.code = "403") {
api.openWin({
url : "user_login_win.html",
name : "user_login_win",
})
} else {
api.alert({
//msg : JSON.stringify(err)
msg : JSON.stringify("网络已断开")
});
}
}
// alert(JSON.stringify(ret));
})
}
})
} else {
if (!vm.rechargeNum) {
api.toast({
msg : ‘请选择充值套餐‘
})
return;
}
var payData = {
body : {}
};
payData.body.SystemType = systemType;
payData.body.CoinValue = vm.rechargeNum;
if ($("#invoice").is(":checked")) {
payData.body.InvoiceType = $("#invoiceType").val();
payData.body.InvoiceTitle = $("#invoiceHead").val();
payData.body.InvoiceContent = $("#invoiceCon").val();
payData.body.UserName = $("#addressee").val();
payData.body.UserMobile = $("#AddresseePhone").val();
payData.body.UserAddress = $("#invoiceAddress").val();
payData.body.TaxpayerCode = $("#taxpayerNum").val();
}
if (payType == ‘wxpay‘) {
// 获取配置
api.ajax({
url : host + ‘/api/Orders/WxPayUnifiedOrder‘,
method : ‘post‘,
headers : {
‘Content-Type‘ : ‘application/json;charset=utf-8‘,
‘Authorization‘ : ‘Bearer ‘ + token
},
data : payData
}, function(ret, err) {
if (ret) {
if (ret.Status == ‘success‘) {
var wxPay = api.require(‘wxPay‘);
var data = JSON.parse(ret.PayData);
wxPay.payOrder({
apiKey : data.appId,
orderId : data.prepayId,
mchId : data.partnerId,
nonceStr : data.nonceStr,
timeStamp : data.timeStamp,
package : ‘Sign=WXPay‘,
sign : data.sign
}, function(ret, err) {
if (ret.status) {
alert("支付成功!");
} else {
alert("订单支付失败");
}
api.closeToWin({
name : ‘root‘
});
obj.disabled = false;
});
}
} else {
api.alert({
msg : JSON.stringify("发起支付失败")
});
obj.disabled = false;
}
});
} else if (payType == ‘alipay‘) {
api.ajax({
url : host + ‘/api/Orders/AliPayUnifiedOrder‘,
method : ‘post‘,
headers : {
‘Content-Type‘ : ‘application/json;charset=utf-8‘,
‘Authorization‘ : ‘Bearer ‘ + token
},
data : payData
}, function(ret, err) {
if (ret) {
if (ret.Status == ‘success‘) {
var aliPayPlus = api.require(‘aliPayPlus‘);
var data = ret.PayData
aliPayPlus.payOrder({
orderInfo : data.replace(/\"/g, "\‘")
}, function(ret, err) {
if (ret.code == "9000") {
alert(‘支付成功‘);
} else if (ret.code == "8000") {
alert(‘正在处理中...‘);
} else if (ret.code == "4000") {
alert(‘支付失败‘);
} else if (ret.code == "5000") {
alert(‘重复请求‘);
} else if (ret.code == "6001") {
alert(‘取消支付‘);
} else if (ret.code == "6002") {
alert(‘网络连接出错‘);
} else if (ret.code == "6004") {
alert(‘支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态‘);
}
api.closeToWin({
name : ‘root‘
});
})
}
} else {
api.alert({
msg : JSON.stringify("发起支付失败")
});
api.closeToWin({
name : ‘root‘
});
obj.disabled = false;
}
})
} else if (payType == ‘iap‘) {
var iap = api.require(‘iap‘);
//alert(vm.rechargeId)
iap.purchase({
productId : vm.rechargeId
}, function(ret, err) {
if (ret) {
//alert(JSON.stringify(ret));
if (ret.state == 1) {
api.ajax({
url : host + ‘/api/Orders/IapNotify‘,
method : ‘post‘,
headers : {
‘Content-Type‘ : ‘application/json;charset=utf-8‘,
‘Authorization‘ : ‘Bearer ‘ + token
},
data : {
body : {
IapProductId : ret.productId,
TransactionId : ret.transactionId,
Receipt : ret.receipt,
}
}
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
api.alert({
msg : JSON.stringify(ret.res.msg)
});
api.closeToWin({
name : ‘root‘
});
} else {
api.alert({
msg : JSON.stringify(ret.res.msg)
});
}
api.closeToWin({
name : ‘root‘
});
} else {
if (err.body.code = "403") {
api.openWin({
url : "user_login_win.html",
name : "user_login_win",
})
} else {
api.alert({
//msg : JSON.stringify(err)
msg : JSON.stringify("网络已断开")
});
}
}
})
}
} else {
alert("苹果内购发起失败");
//alert(JSON.stringify(err));
}
});
} else {
alert("请选择支付方式");
}
}
}
function iosPay() {
api.ajax({
url : host + ‘/api/AppConfig/AppConfig‘,
method : ‘get‘,
headers : {
‘Content-Type‘ : ‘application/json;charset=utf-8‘,
‘Authorization‘ : ‘Bearer ‘ + token
}
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
if (ret.res.data.model.IsAppleAudit && api.systemType == "ios") {
vm.iap = true;
vm.wxpay = false;
vm.alipay = false;
vm.exchange = false;
}
}
} else {
api.alert({
msg : JSON.stringify("发起支付失败")
});
obj.disabled = false;
}
})
}
function mealCoin() {
api.ajax({
url : host + ‘/api/Coin/MyCoinValue‘,
method : ‘get‘,
headers : {
‘Content-Type‘ : ‘application/json;charset=utf-8‘,
‘Authorization‘ : ‘Bearer ‘ + token
}
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
vm.mealCoin = ret.res.data.iapProductList;
} else {
api.alert({
msg : JSON.stringify(ret.res.msg)
});
}
} else {
if (err.body.code = "403") {
api.openWin({
url : "user_login_win.html",
name : "user_login_win",
})
} else {
api.alert({
//msg : JSON.stringify(err)
msg : JSON.stringify("网络已断开")
});
}
}
})
}
</script>
</html>
原文地址：https://www.cnblogs.com/yechangzhong-826217795/p/11288280.html
时间： 2024-10-15 21:32:44