出于安全考虑,代码并不完整,仅提供部分代码以及思路做参考!
js代码:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js" ></script>
<script type="text/javascript" src="js/qrcode.js" ></script>
<script type="text/javascript" src="js/utf.js" ></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/chongzhi.js" ></script>
<script type="text/javascript">
function payfor(){
var username= $("#username").val();
var num =$('.rechnum').text();
num = num.substr(0,num.length-4)
var payType1 = document.getElementById('weixin').alt ;
var payType2 = document.getElementById('zhifubao').alt;
var payType=0;
if(payType1 == 1){
payType = 1;
}else if(payType2 == 1){
payType = 2;
}
if(num != ""){
body = num;
}
if(username.length != 11){
alert("请输入正确的手机号!");
return false;
}
if(body == 0 || body == undefined){
alert("请选择充值金额!");
return false;
}
if(payType == 0 || payType == undefined){
alert("请选择支付类型!");
return false;
}
if(payType == 1){
weixinp(username,body,payType); //微信支付
}else if(payType == 2){
zhifubaop(username,body,payType);//支付宝支付
}
}
function weixinp(username,body,payType){
$.ajax({
url:" ",
type:"post",
data:{username:username,body:body,payType:payType},
dataType:"json",
success:function(data){
if(data != null){
if(data.code != 10001){
jQuery('#qrcodeCanvas').qrcode({ //通过id=“qrcodeCanvas”的div来展示二维码
render : "canvas",
text : data.message,
width : "180", //二维码的宽度
height : "180", //二维码的高度
background : "#ffffff", //二维码的后景色
foreground : "#000000", //二维码的前景色
src: "/image/peimide.png" //二维码中间的图片
});
document.getElementById('allpid').style.background = 'url(/image/蒙.png)';//替换背景图片
document.getElementById('pidd').style.display = '';//显示隐藏的二维码背景图片
$("#codesa").val(data.code); //将返回码放入隐藏输入框,用户判断用户是否扫码
}else{
alert(data.message);
}
}
}
});
}
function zhifubaop(username,body,payType){
$.ajax({
url:" ",
type:"post",
data:{username:username,body:body,payType:payType},
dataType:"json",
success:function(data){
if(data != null){
if(data.code != 10001){
jQuery('#qrcodeCanvas').qrcode({
render : "canvas",
text : data.message,
width : "180", //二维码的宽度
height : "180", //二维码的高度
background : "#ffffff", //二维码的后景色
foreground : "#000000", //二维码的前景色
src: "/image/peimide.png" //二维码中间的图片
});
document.getElementById('allpid').style.background = 'url(/image/蒙.png)';//替换背景图片
document.getElementById('pidd').style.display = '';//显示隐藏的二维码背景图片
$("#codesa").val(data.code);//将返回码放入隐藏输入框,用户判断用户是否扫码
}else{
alert(data.message);
}
}
}
});
}
var timer = window.setInterval("orderStatus()",5000);
function orderStatus(){
var code = $("#codesa").val();//获取隐藏输入框的值
if(code != "" && code != undefined){//判断用户是否扫码充值
$.ajax({
url:"/web/queryorderStatus",
type:"post",
data:{code:code},
dataType:"json",
success:function(data){ //查看付费状态(付费后,后台回调改变付费状态)
if(data == 10000 ){
alert("陪币充值成功!");
window.clearInterval(timer);
// document.location = "web/chongzhidel";
document.location = '/web/chongzhi';//返回页面
}
}
});
}
}
$(document).ready(function(){
//加的效果
$(".add").click(function(){
var n=$(this).prev().val();
var num=parseInt(n)+1;
if(num==0){ return;}
var hidbody = parseInt($("#hidbody").val());
if(hidbody == 0 || hidbody == undefined){
if(num<100000){
$(this).prev().val(num);
$('.rechnum').text(num+'.00元');
}else{
$(this).prev().val(100000);
}
}else{
num = hidbody + num;
if(num<100000){
$(this).prev().val(num);
$('.rechnum').text(num+'.00元');
}else{
$(this).prev().val(100000);
}
$("#hidbody").val(0);
}
});
//减的效果
$(".jian").click(function(){
var n=$(this).next().val();
n =parseInt(n);
var hidbody = parseInt($("#hidbody").val());
if(hidbody == 0 || hidbody == undefined){
if(n >0){
var num=n-1;
if(num < 0){ return}
$(this).next().val(num);
$('.rechnum').text(num+'.00元');
}
}else{
var num = hidbody+n-1;
$(this).next().val(num);
$('.rechnum').text(num+'.00元');
$("#hidbody").val(0);
}
});
});
function number50(){
document.getElementById('number50').src = "image/a50.png"; //替换img路径
document.getElementById('number100').src = "image/100.png";
$('.rechnum').text('50.00元');
$("#hidbody").val(50);
$("#num").val(0);
// var value = document.getElementById('number50').alt;
}
function number100(){
document.getElementById('number50').src = "image/50.png"; //替换img路径
document.getElementById('number100').src = "image/a100.png";
$('.rechnum').text('100.00元');
$("#hidbody").val(100);
$("#num").val(0);
}
function btext(){
var body1 =$("#num").val();
if(body1 == ""||body1 == undefined){
body1=0;
}
body1 = parseInt(body1);
$('.rechnum').text(body1+'.00元');
document.getElementById('number50').src = "image/50.png"; //替换img路径
document.getElementById('number100').src = "image/100.png";
}
function weixin(){
document.getElementById('weixin').src = "image/a微信勾选.png"; //替换img路径
document.getElementById('zhifubao').src = "image/支付宝勾选.png"; //替换img路径
document.getElementById('weixin').alt = "1";
document.getElementById('zhifubao').alt = "0";
}
function zhifubao(){
document.getElementById('weixin').src = "image/微信勾选.png"; //替换img路径
document.getElementById('zhifubao').src = "image/a支付宝勾选.png"; //替换img路径
document.getElementById('zhifubao').alt = "1";
document.getElementById('weixin').alt = "0";
}
</script>
html代码:
<div id="allpid" style="width: 100%;height:100%;background-image: url(image/透明.png);background-size:100% 100%;position:absolute;">
<div style="height: 45vh;margin-top: 34.5vh;margin-left: 29vw;margin-right: 28vw;">
<div>
<input type="text" id="username" maxlength="11" style="width:9vw;height:2.5vh;background-image:url(image/手机输入框.png);background-repeat: no-repeat;line-height: 3vh; padding-left: 2vw;" placeholder="请输入充值手机号" />
</div>
<div style="margin-top: 4.5vh;">
<img id="number50" οnclick="number50()" style="float: left;width: 6.3vw;height: 5vh;" src="image/50.png" alt="50" />
<img id="number100" οnclick="number100()" style="float: left;width: 6.3vw;height: 5vh;margin-left: 1vw;" src="image/100.png" alt="100" />
</div>
<div class="gw_num">
<em class="jian"><img src="image/减号.png" /></em>
<input type="text" value="0" id="num" class="num" max="10000" οninput="if(value>100000)value=100000" onBlur="btext()" οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
<em class="add"><img src="image/加号.png" /></em>
</div>
<div style="margin-top: 4.5vh;">
<img id="weixin" οnclick="weixin()" style="float: left;width: 6.3vw;height: 5vh;" src="image/微信勾选.png" alt="0" />
<img id="zhifubao" οnclick="zhifubao()" style="float: left;width: 6.3vw;height: 5vh;margin-left: 1vw;" src="image/支付宝勾选.png" alt="0" />
</div>
<input type="hidden" id="hidbody" value="0" />
<div style="width: 100%;height: 6.3vh;margin-top: 10vh;"><p class="rechnum" >0.00元</p></div>
<div style="width: 100%;margin-top: 2vh;"><input type="button" οnclick="payfor()" style="background-image: url(image/确认支付.png);width: 8vw;height: 5vh;" /></div>
</div>
</div>
<div id="pidd" style="width: 1600px;height: 350px;position: absolute;margin-top:27vh;display: none">
<div>
<img style="width: 18vw;margin-left: 40vw" src="image/弹窗.png">
<img οnclick="fanhui()" style="width: 6vw;margin-top: -1vh;margin-left: -12vw;" src="image/返回.png" />
</div>
<div style="position: absolute;margin-top:-25.5vh;margin-left: 43.25vw;width: 8vw;">
<div id="qrcodeCanvas" style="width: 150px">
</div>
</div>
</div>
<input type="hidden" id = "codesa" value=""/>
后台java代码:
/**微信
* 生成二维码
* @param response
* @throws Exception
*/
@RequestMapping("paycode")
@ResponseBody
public ReturnResult pay2(String username,String body,String payType) throws Exception {
ReturnResult res = new ReturnResult();
User u = userService.findByNum(username);
if(null != u){
OrderMassages om = new OrderMassages();
om.setUserId(Integer.valueOf(u.getId()));
Map<String, String> params = new TreeMap<String, String>();
om.setTotalAmount(Double.valueOf(body));
//封装交易订单开始
/**---------------开始生成订单号 ------------------------**/
//当前时间 yyyyMMddHHmmss
String currTime = TenpayUtil.getCurrTime();
//8位日期
String strTime = currTime.substring(8, currTime.length());
//四位随机数
String strRandom = TenpayUtil.buildRandom(4) + "";
//10位序列号,可以自行调整
String strReq = strTime + strRandom;
//订单号,此处用时间加随机数生成,只要保持全局唯一就行
String out_trade_no = strReq;
/**---------------生成订单号 结束 ------------------------**/
// String date = TenpayUtil.getCurrTimey();
String date = TenpayUtil.getCurrTimeBanned();
om.setTime(date);//获取系统当前时间(消费时间))
out_trade_no = String.valueOf(UUID.next());
om.setOrderNumber(out_trade_no);
//订单状态:1为待付款
om.setTradeStatus("1");
om.setPayType("微信支付");
om.setOrderType(0);
om.setSubject("充值");
om.setBody("充值!!");
om.setPayForType(6);
orderMassagesService.insertSelective(om);
int total_fee = (int) (Float.valueOf(String.valueOf(om.getTotalAmount())) * 100);
params.put("appid", WXConstantUtil.APP_ID);//公众账号ID
params.put("mch_id", WXConstantUtil.MCH_ID);//商户号
params.put("trade_type", "NATIVE");//交易类型
params.put("out_trade_no", om.getOrderNumber()); //商户系统内部的订单号
params.put("total_fee", String.valueOf(total_fee));//订单总金额(分)
params.put("spbill_create_ip", "");//服务器ip地址(必填)
params.put("body", om.getBody()); //商品描述。
params.put("notify_url", WXConstantUtil.NOTIFY_URL);//通知地址
params.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串
String xml = WXPayUtil.generateSignedXml(params,"key");//(map, key) 返回xml
HttpPost post = new HttpPost("https://api.mch.weixin.qq.com/pay/unifiedorder");//统一下单API
post.setEntity(new StringEntity(xml, "UTF-8"));
String result = WXPayUtil.doPostWithBrowser(post);
Map<String, String> map = WXPayUtil.xmlToMap(result);
String return_code = map.get("return_code");
if("FAIL".equals(return_code)){
String return_msg = map.get("return_msg");
System.err.println("return_code:>>"+return_code+" return_msg:>>>"+return_msg);
}
String result_code = map.get("result_code");
if("FAIL".equals(result_code)){
String err_code = map.get("result_code");
String err_code_des = map.get("err_code_des");
System.err.println("result_code:>>"+result_code+" err_code:>>>"+err_code+" err_code_des:>>>"+err_code_des);
}
String payurl = map.get("code_url");
res.setMessage(payurl);
res.setCode(om.getOrderNumber());
//生成二维码
/* Map<EncodeHintType, Object> hints=new HashMap<EncodeHintType, Object>();
// 指定纠错等级
hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.L);
// 指定编码格式
hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
hints.put(EncodeHintType.MARGIN, 1);
try {
BitMatrix bitMatrix = new MultiFormatWriter().encode(payurl, BarcodeFormat.QR_CODE, defaultWidthAndHeight, defaultWidthAndHeight, hints);
OutputStream out = response.getOutputStream();
MatrixToImageWriter.writeToStream(bitMatrix, "png", out);//输出二维码
out.flush();
out.close();
} catch (WriterException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}*/
}else{
res.setMessage("该账号尚未注册。。。");
res.setCode("10001");
}
return res;
}
/**支付宝
* 生成二维码
* @param response
* @throws Exception
*/
//生成有二维码,可供扫码支付的页面
@RequestMapping(value = "aliPay")
@ResponseBody
public ReturnResult aliPay(String username,String body,String payType) throws Exception{
ReturnResult res = new ReturnResult();
User u = userService.findByNum(username);
if( null != u){
OrderMassages om = new OrderMassages();
om.setUserId(Integer.valueOf(u.getId()));
Map<String, String> params = new TreeMap<String, String>();
om.setTotalAmount(Double.valueOf(body));
//封装交易订单开始
/**---------------开始生成订单号 ------------------------**/
//当前时间 yyyyMMddHHmmss
String currTime = TenpayUtil.getCurrTime();
//8位日期
String strTime = currTime.substring(8, currTime.length());
//四位随机数
String strRandom = TenpayUtil.buildRandom(4) + "";
//10位序列号,可以自行调整
String strReq = strTime + strRandom;
//订单号,此处用时间加随机数生成,只要保持全局唯一就行
String out_trade_no = strReq;
/**---------------生成订单号 结束 ------------------------**/
// String date = TenpayUtil.getCurrTimey();
String date = TenpayUtil.getCurrTimeBanned();
om.setTime(date);//获取系统当前时间(消费时间))
out_trade_no = String.valueOf(UUID.next());
om.setOrderNumber(out_trade_no);
//订单状态:1为待付款
om.setTradeStatus("1");
om.setPayType("支付宝支付");
om.setOrderType(0);
om.setSubject("");
om.setBody("扫码充值!!");
om.setPayForType(6);
orderMassagesService.insertSelective(om);
//获得初始化的AlipayClient
AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.URL,AlipayConfig.APP_ID,AlipayConfig.APP_PRIVATE_KEY,AlipayConfig.FORMAT,AlipayConfig.CHARSET,AlipayConfig.ALIPAY_PUBLIC_KEY,AlipayConfig.SIGNTYPE);
//设置请求参数
// AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
AlipayTradePrecreateRequest request = new AlipayTradePrecreateRequest();
// alipayRequest.setReturnUrl(AlipayConfig.return_url+"?chapterId="+chapterId);
request.setNotifyUrl(AlipayConfig.notify_url);
request.setReturnUrl(AlipayConfig.return_url);
//付款ID,必填
// String out_trade_no = om.getOrderNumber();
//付款金额,必填
String total_amount = om.getTotalAmount().toString();
// total_amount=URLDecoder.decode(total_amount,"UTF-8");//转码
//订单名称,必填
String subject = om.getSubject();
// subject=URLDecoder.decode(subject,"UTF-8");
//商品描述,可空
String body1 = om.getBody();
request.setBizContent("{" +
" \"out_trade_no\":\""+om.getOrderNumber()+"\"," +
" \"total_amount\":\""+ total_amount +"\"," +
" \"subject\":\""+subject+"\"," +
" \"body\":\""+body1+"\"," +
" \"seller_id\":\""+AlipayConfig.seller_id+"\"," +
// " \"product_code\":\""+AlipayConfig.product_code+"\"," +
" \"store_id\":\"扫码支付\"" +
// " \"timeout_express\":\"5m\"" +
" }");
AlipayTradePrecreateResponse response = alipayClient.execute(request);
String qrCode = response.getQrCode();
res.setMessage(qrCode);
res.setCode(om.getOrderNumber());
//请求
// String result = alipayClient.pageExecute(alipayRequest).getBody();
/*rep.setContentType("text/html; charset=utf-8");
PrintWriter out = rep.getWriter();
out.println(result);
return result;*/
/* rep.setContentType("text/html;charset=" + AlipayConfig.CHARSET);
rep.getWriter().write(result);//直接将完整的表单html输出到页面
rep.getWriter().flush();
rep.getWriter().close();*/
}else{
res.setMessage("该账号尚未注册。。。");
res.setCode("10001");
}
return res;
}
//查看付费状态
@RequestMapping(value = "queryorderStatus")
@ResponseBody
public String queryorderStatus(String code){
OrderMassages om = orderMassagesService.queryorderStatus(code);
if(om.getTradeStatus() == "2" || "2".equals(om.getTradeStatus())){
return "10000";
}else{
return "10001";
}
}