增加充值模块，接通支付宝充值

novel-front/pom.xml

@@ -26,6 +26,13 @@
             <artifactId>jjwt</artifactId>
             <version>${jjwt.version}</version>
         </dependency>
+
+
+        <dependency>
+            <groupId>com.alipay.sdk</groupId>
+            <artifactId>alipay-sdk-java</artifactId>
+            <version>4.9.153.ALL</version>
+        </dependency>
     </dependencies>
 
     <build>

novel-front/src/main/java/com/java2nb/novel/controller/PayController.java

@@ -0,0 +1,153 @@
+package com.java2nb.novel.controller;
+
+import com.alipay.api.AlipayClient;
+import com.alipay.api.DefaultAlipayClient;
+import com.alipay.api.internal.util.AlipaySignature;
+import com.alipay.api.request.AlipayTradePagePayRequest;
+import com.java2nb.novel.core.bean.UserDetails;
+import com.java2nb.novel.core.config.AlipayConfig;
+import com.java2nb.novel.service.OrderService;
+import lombok.RequiredArgsConstructor;
+import lombok.SneakyThrows;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.PrintWriter;
+import java.util.HashMap;
+import java.util.Iterator;
+import java.util.Map;
+
+/**
+ * @author 11797
+ */
+@Controller
+@RequestMapping("pay")
+@RequiredArgsConstructor
+@Slf4j
+public class PayController extends BaseController {
+
+
+    private final AlipayConfig alipayConfig;
+
+    private final OrderService orderService;
+
+
+    /**
+     * 支付宝支付
+     */
+    @SneakyThrows
+    @PostMapping("aliPay")
+    public void aliPay(Integer payAmount,HttpServletRequest request,HttpServletResponse httpResponse) {
+
+        UserDetails userDetails = getUserDetails(request);
+        if (userDetails == null) {
+            //未登录，跳转到登陆页面
+            httpResponse.sendRedirect("/user/login.html?originUrl=/pay/aliPay?payAmount="+payAmount);
+            return;
+        }else {
+            //创建充值订单
+            Long outTradeNo = orderService.createPayOrder((byte)1,payAmount,userDetails.getId());
+
+            //获得初始化的AlipayClient
+            AlipayClient alipayClient = new DefaultAlipayClient(alipayConfig.getGatewayUrl(), alipayConfig.getAppId(), alipayConfig.getMerchantPrivateKey(), "json", alipayConfig.getCharset(), alipayConfig.getPublicKey(), alipayConfig.getSignType());
+            //创建API对应的request
+            AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
+            alipayRequest.setReturnUrl(alipayConfig.getReturnUrl());
+            //在公共参数中设置回跳和通知地址
+            alipayRequest.setNotifyUrl(alipayConfig.getNotifyUrl());
+            //填充业务参数
+            alipayRequest.setBizContent("{" +
+                    "    \"out_trade_no\":\"" + outTradeNo + "\"," +
+                    "    \"product_code\":\"FAST_INSTANT_TRADE_PAY\"," +
+                    "    \"total_amount\":" + payAmount + "," +
+                    "    \"subject\":\"小说精品屋-plus\"" +
+                    "  }");
+            //调用SDK生成表单
+            String form = alipayClient.pageExecute(alipayRequest).getBody();
+
+            httpResponse.setContentType("text/html;charset=utf-8");
+            //直接将完整的表单html输出到页面
+            httpResponse.getWriter().write(form);
+            httpResponse.getWriter().flush();
+            httpResponse.getWriter().close();
+        }
+
+
+
+
+    }
+
+    /**
+     * 支付宝支付通知
+     * */
+    @SneakyThrows
+    @RequestMapping("aliPay/notify")
+    public void aliPayNotify(HttpServletRequest request,HttpServletResponse httpResponse){
+
+
+        PrintWriter out = httpResponse.getWriter();
+
+        //获取支付宝POST过来反馈信息
+        Map<String,String> params = new HashMap<String,String>();
+        Map<String,String[]> requestParams = request.getParameterMap();
+        for (Iterator<String> iter = requestParams.keySet().iterator(); iter.hasNext();) {
+            String name = (String) iter.next();
+            String[] values = (String[]) requestParams.get(name);
+            String valueStr = "";
+            for (int i = 0; i < values.length; i++) {
+                valueStr = (i == values.length - 1) ? valueStr + values[i]
+                        : valueStr + values[i] + ",";
+            }
+            params.put(name, valueStr);
+        }
+
+        //调用SDK验证签名
+        boolean signVerified = AlipaySignature.rsaCheckV1(params, alipayConfig.getPublicKey(), alipayConfig.getCharset(), alipayConfig.getSignType());
+
+        //——请在这里编写您的程序（以下代码仅作参考）——
+
+	/* 实际验证过程建议商户务必添加以下校验：
+	1、需要验证该通知数据中的out_trade_no是否为商户系统中创建的订单号，
+	2、判断total_amount是否确实为该订单的实际金额（即商户订单创建时的金额），
+	3、校验通知中的seller_id（或者seller_email) 是否为out_trade_no这笔单据的对应的操作方（有的时候，一个商户可能有多个seller_id/seller_email）
+	4、验证app_id是否为该商户本身。
+	*/
+        if(signVerified) {
+            //验证成功
+            //商户订单号
+            String outTradeNo = new String(request.getParameter("out_trade_no").getBytes("ISO-8859-1"),"UTF-8");
+
+            //支付宝交易号
+            String tradeNo = new String(request.getParameter("trade_no").getBytes("ISO-8859-1"),"UTF-8");
+
+            //交易状态
+            String tradeStatus = new String(request.getParameter("trade_status").getBytes("ISO-8859-1"),"UTF-8");
+
+            //更新订单状态
+            orderService.updatePayOrder(Long.parseLong(outTradeNo), tradeNo, tradeStatus);
+
+
+            out.println("success");
+
+        }else {//验证失败
+            out.println("fail");
+
+            //调试用，写文本函数记录程序运行情况是否正常
+            //String sWord = AlipaySignature.getSignCheckContentV1(params);
+            //AlipayConfig.logResult(sWord);
+        }
+
+
+
+    }
+
+
+
+
+
+
+}

novel-front/src/main/java/com/java2nb/novel/core/config/AlipayConfig.java

@@ -0,0 +1,23 @@
+package com.java2nb.novel.core.config;
+
+import lombok.Data;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Component;
+
+/**
+ * @author 11797
+ */
+@Data
+@Component
+@ConfigurationProperties(prefix="alipay")
+public class AlipayConfig {
+
+    private String appId;
+    private String merchantPrivateKey;
+    private String publicKey;
+    private String notifyUrl;
+    private String returnUrl;
+    private String signType;
+    private String charset;
+    private String gatewayUrl;
+}

novel-front/src/main/java/com/java2nb/novel/service/OrderService.java

@@ -0,0 +1,29 @@
+package com.java2nb.novel.service;
+
+
+
+/**
+ * @author 11797
+ */
+public interface OrderService {
+
+
+    /**
+     * 创建充值订单
+     *
+     * @param payChannel 支付渠道
+     * @param payAmount 支付金额
+     * @param userId 用户ID
+     * @return 商户订单号
+     * */
+    Long createPayOrder(Byte payChannel, Integer payAmount, Long userId);
+
+
+    /**
+     * 更新订单状态
+     * @param outTradeNo 商户订单号
+     * @param tradeNo      支付宝/微信 订单号
+     * @param tradeStatus 支付状态
+     * */
+    void updatePayOrder(Long outTradeNo, String tradeNo, String tradeStatus);
+}

novel-front/src/main/java/com/java2nb/novel/service/UserService.java

@@ -117,4 +117,9 @@ public interface UserService {
     void updatePassword(Long userId, String oldPassword, String newPassword);
 
 
+    /**
+     * 增加用户余额
+     * @param userId 用户ID
+     * @param amount 增加的余额 */
+    void addAmount(Long userId, int amount);
 }

novel-front/src/main/java/com/java2nb/novel/service/impl/OrderServiceImpl.java

@@ -0,0 +1,85 @@
+package com.java2nb.novel.service.impl;
+
+import com.java2nb.novel.entity.OrderPay;
+import com.java2nb.novel.mapper.OrderPayDynamicSqlSupport;
+import com.java2nb.novel.mapper.OrderPayMapper;
+import com.java2nb.novel.service.OrderService;
+import com.java2nb.novel.service.UserService;
+import lombok.RequiredArgsConstructor;
+import lombok.SneakyThrows;
+import org.mybatis.dynamic.sql.render.RenderingStrategies;
+import org.mybatis.dynamic.sql.select.render.SelectStatementProvider;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.text.SimpleDateFormat;
+import java.util.Date;
+import java.util.Random;
+
+import static org.mybatis.dynamic.sql.SqlBuilder.isEqualTo;
+import static org.mybatis.dynamic.sql.select.SelectDSL.select;
+
+/**
+ * @author 11797
+ */
+@Service
+@RequiredArgsConstructor
+public class OrderServiceImpl implements OrderService {
+
+    private final OrderPayMapper orderPayMapper;
+
+    private final UserService userService;
+
+
+    @SneakyThrows
+    @Override
+    public Long createPayOrder(Byte payChannel, Integer payAmount, Long userId) {
+        Date currentDate = new Date();
+        Long outTradeNo = Long.parseLong(new SimpleDateFormat("yyyyMMddHHmmssSSS").format(currentDate)+new Random().nextInt(10));
+        OrderPay orderPay = new OrderPay();
+        orderPay.setOutTradeNo(outTradeNo);
+        orderPay.setPayChannel(payChannel);
+        orderPay.setTotalAmount(payAmount);
+        orderPay.setUserId(userId);
+        orderPay.setCreateTime(currentDate);
+        orderPay.setUpdateTime(currentDate);
+        orderPayMapper.insertSelective(orderPay);
+        return outTradeNo;
+    }
+
+    @Transactional(rollbackFor = Exception.class)
+    @Override
+    public void updatePayOrder(Long outTradeNo, String tradeNo, String tradeStatus) {
+        SelectStatementProvider selectStatement = select(OrderPayDynamicSqlSupport.id,OrderPayDynamicSqlSupport.payStatus,OrderPayDynamicSqlSupport.totalAmount,OrderPayDynamicSqlSupport.userId)
+                .from(OrderPayDynamicSqlSupport.orderPay)
+                .where(OrderPayDynamicSqlSupport.outTradeNo, isEqualTo(outTradeNo))
+                .build()
+                .render(RenderingStrategies.MYBATIS3);
+
+        OrderPay orderPay = orderPayMapper.selectMany(selectStatement).get(0);
+
+        if(orderPay.getPayStatus()!=1) {
+            //此订单还未处理过
+
+            if (tradeStatus.equals("TRADE_SUCCESS") || tradeStatus.equals("TRADE_FINISHED")) {
+                //支付成功
+                //1.更新订单状态为成功
+                orderPay.setPayStatus((byte) 1);
+                orderPay.setUpdateTime(new Date());
+                orderPayMapper.updateByPrimaryKeySelective(orderPay);
+
+                //2.增加用户余额
+                userService.addAmount(orderPay.getUserId(),orderPay.getTotalAmount()*100);
+
+
+
+
+
+
+            }
+        }
+
+
+
+    }
+}

novel-front/src/main/java/com/java2nb/novel/service/impl/UserServiceImpl.java

@@ -211,7 +211,7 @@ public class UserServiceImpl implements UserService {
 
     @Override
     public User userInfo(Long userId) {
-        SelectStatementProvider selectStatement = select(username, nickName, userPhoto,userSex)
+        SelectStatementProvider selectStatement = select(username, nickName, userPhoto,userSex,accountBalance)
                 .from(user)
                 .where(id, isEqualTo(userId))
                 .build()
@@ -256,6 +256,15 @@ public class UserServiceImpl implements UserService {
 
     }
 
+    @Transactional(rollbackFor = Exception.class)
+    @Override
+    public void addAmount(Long userId, int amount) {
+        User user = this.userInfo(userId);
+        user.setId(userId);
+        user.setAccountBalance(user.getAccountBalance()+amount);
+        userMapper.updateByPrimaryKeySelective(user);
+
+    }
 
 
 }

novel-front/src/main/resources/application-alipay.yml

@@ -0,0 +1,17 @@
+alipay:
+  #请填写您的AppId，例如：2019091767145019
+  app-id: 2016101600696458
+  #请填写您的应用私钥，例如：MIIEvQIBADANB
+  merchant-private-key: MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCJrd9qg88m1p9c7IopcGlLksP9ts0eaf1wesgz4K3O6CzmgaCfR2f+scRI4xrMhKBHfzKDdKlW16LtrebD/YS/aDhRL9MM1GJ0Pr7zFdw6fIka9eIz1FojmmXNyaQVEbaGt/7DvoI+rJjjNtTQAYpMztHnof2W0Nfpra5U4dShJrzsvumS8NapEt9YgQ36jY9Z40RJ97Z06avmMGrAVlQSSTvUInTYz8EQmM3YN0ed3CmnlQFRhuW7kkbgBtZKjq+24iaU2mzp4qvWi5T89l3wuMahhxhFTgTNd24qxFuYShIdD0G3KCtunpwegomj1iQnF47qGv97UwOuA36b6l75AgMBAAECggEAJraZZ94AVa9ryDlK8DQHp5RxP9oy+yZaeVJNESlQNina1kYE4ES33UonI0eYtYFlgDUoAwa+xwiDa8nGZb3XoeqwS0PjWGwv8vfhwYCYGGoEM2yIWoKPhgtYLPFSDgqZBHCgVnIvNWha5Sj51jNYrBhLtZI7ODkpPS/1ITEPFPDds9LmH3Ujci20ttzr1SffKL/1caZ2Xph/Jkm2Xhh227cclORakDsggUmaxt723zibwFwpS6wwRlPJYf7hr3v3SnIgcc0osqKAcnJzrBlmaJVTBgnOAdulp+m/DjKVoIEieMr75OIYTWMRi0trlxAyvv4aDHxxJB6cDGNHFQLIMQKBgQD5j4fJDub2n9EjgxqYS9B6qa2pH5S9yypU+mM6fIXO/AjHpNwEzFQgU8lN3FE1CVfFb4yZx8sOJsQvZPGLvIhMPYT/2xMOIRL2IguJICt23Xnw+c1tNkvHvsHAiLvo/yzwSFixHcOaEwXDKUDsydPyalDFWBrwCGmGGxPEFG/Q/wKBgQCNO0+Muo+HzeUButDyA5gt9oPCX7uZ9g64rnFhuQXZ/eLDQeCW/lhjRiT2R+QafvbRyOYYomKZ6/1iQALY4tqQD7XMClRdu0OUvYR2WaNb9j4sWXl8qhMxgWjXssqorZRzNe+txicX8yOA5/ZVhhq647e2zt4kOS5H6Np0HvxYBwKBgQDvNfA+/cTPk4NhWdLNNqagXTJz0Sy+/BYYnGUu85tDOvyjeVfYVY8x6X4k3tEMWGdEfdc0tHjjmK8misipW8793V417WUHfxZwzVNnXmmrJ0IyhQ+u5oOe9C8+ARK1lJsbuw0gwNn0PtWgK1PrZM5/J/9CGmC/wiB8BkpdAgXoOwKBgE5fa3Wc0al7CGo9UVX7yKc49UUX+vMlKGYz55djJWwjB4NzOz6PRl1Qv5IrstlBO5aO9aEV+8GOw72R6AKTYNYw4aGo2chp8sbHpIpIk+6kZzwVKuWTO7NtLNEF1pBkQszsUWUNYQRZWIpgLsKm+I5db8VyZrOTR6t//DoUN9RhAoGAQLNaaULlw5L2Qsq9hbsdZVkbZN6YY4oiqMufmDKavbpUvchagFBe7/bneX4orza+DiC4vBFDIUOsZawB9eStx8hvL4AcuUF+eoZT3FCmvHB8dAYs4vok28f1nqUpYLmu4yN+wc/sLhihaJd7keErc987/E8mxW18AEin4Q4pKK8=
+  #支付宝公钥字符串
+  public-key: MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAoR1gAyrjj/XugdKT3zUJBJksYnCXxD3RDiBex+JGfo6oO0oPbyoIQb2cAIIJjCCxT97QATlbYpRGMa+RuXxlxTeBh5ZFkELOsGc/UX0d9Tm51UvN+OV5pyysytlRdZfVgOETORzv9CvfnK7ND1SSHUPDan7TkMoVFipmQnf8205V3tcsDBat5kHEPFCmWXkPxrtLPVge1dAtKSRW9KFMslXkKrspvF1fSLGt12CE38ZwzP39INKgaI+RbIk3o7aRW5CrLqPkYdrgE1KcFBOj/gJXqbZvL/30q1KVn29UQUYm9SR/n6ZaLlAG38p4O3dL9Lu2lGhTBQlUr2qtpo+g8QIDAQAB
+  #填写您的支付类接口异步通知接收服务地址，例如：https://www:test:com/callback:
+  notify-url: http://50148a0b.ngrok.io/pay/aliPay/notify
+  #支付成功跳转页面
+  return-url: http://127.0.0.1:8080/user/userinfo.html
+  #签名方式
+  sign-type: RSA2
+  #编码
+  charset: utf-8
+  #支付宝网关
+  gateway-url: https://openapi.alipaydev.com/gateway.do

novel-front/src/main/resources/application.yml

@@ -4,6 +4,7 @@ server:
 spring:
   profiles:
     active: dev
+    include: alipay
 
 jwt:
   secret: novel!#20191230
@@ -23,3 +24,6 @@ xss:
   excludes: /system/notice/*
   # 匹配链接 （多个用逗号分隔）
   urlPatterns: /book/addBookComment,/user/addFeedBack
+
+
+

novel-front/src/main/resources/static/javascript/common.js

@@ -1,6 +1,6 @@
 var needLoginPath = ['/user/favorites.html','/user/comment.html','/user/feedback.html',
     '/user/feedback_list.html','/user/read_history.html','/user/set_name.html',
-    '/user/set_password.html','/user/set_sex.html','/user/setup.html','/user/userinfo.html'];
+    '/user/set_password.html','/user/set_sex.html','/user/setup.html','/user/userinfo.html',"/pay/index.html"];
 var isLogin = false;
 var url = window.location.search;
 //key(需要检索的键）

novel-front/src/main/resources/static/javascript/pay.js

@@ -0,0 +1,93 @@
+var UserPay = {
+    czData: [[30, "3000屋币"], [50, "5000屋币"], [100, "10000屋币"], [200, "20000屋币"], [500, "50000屋币"], [365, "全站包年阅读"] ],
+    czPayPalData: [[20, "10000屋币"], [50, "25000屋币"], [100, "50000屋币"], [80, "全站包年阅读"]],
+    sendPay: function () {
+        $("#payform").submit();
+    },
+    GetPayState: function (payId) {
+        $.post("/api/book.aspx", { act: "getpaystatus", pid: payId }, function (data, textStatus) {
+            if (data == "1") {
+                location.href = '/pay/wx_return.aspx?out_trade_no=sc'+payId;
+            }
+            else {
+                setTimeout("UserPay.GetPayState("+payId+")",3000);
+            }
+        }, "html");
+    }
+}
+
+$(function () {
+    $("#ulPayType li").click(function () {
+
+        if($(this).attr("valp")==2){
+            layer.alert("微信支付暂未开通，敬请期待");
+        }
+
+        return ;
+
+
+
+        $($(this).parent()).children().each(function () {
+            $(this).removeClass("on");
+        });
+        $(this).addClass("on");
+
+        var type = $(this).attr("valp");
+        if (type == "3") {
+            $("#ulPayPal").show();
+            $("#ulPayPalXJ").show();
+            $("#ulZFWX").hide();
+            $("#ulZFWXXJ").hide();
+        }
+        else {
+            $("#ulPayPal").hide();
+            $("#ulPayPalXJ").hide();
+            $("#ulZFWX").show();
+            $("#ulZFWXXJ").show();
+        }
+
+        var postUrl = "";
+        switch (type)
+        {
+            case "1":
+                postUrl = "sendalipay.aspx";
+                break;
+            case "2":
+                postUrl = "sendwxpaynowqr.aspx";
+                break;
+            case "3":
+                postUrl = "sendpaypal.aspx";
+                break;
+        }
+        $("#payform").attr("action", postUrl);
+    })
+
+    $("#ulZFWX li").click(function () {
+        $("#ulZFWX li").removeClass("on");
+        $(this).addClass("on");
+        if ($(this).attr("vals") > 0) {
+            $("#pValue").val($(this).attr("vals"));
+            $("#showTotal").html('￥' + $(this).attr("vals") + '元');
+            for (var i = 0; i < UserPay.czData.length; i++) {
+                if (UserPay.czData[i][0] == $(this).attr("vals")) {
+                    $("#showRemark").html(UserPay.czData[i][1]);
+                    break;
+                }
+            }
+        }
+    });
+    $("#ulPayPal li").click(function () {
+        $("#ulPayPal li").removeClass("on");
+        $(this).addClass("on");
+        if ($(this).attr("vals") > 0) {
+            $("#pValue").val($(this).attr("vals"));
+            $("#showPayPalTotal").html($(this).attr("vals") + '美元');
+            for (var i = 0; i < UserPay.czData.length; i++) {
+                if (UserPay.czPayPalData[i][0] == $(this).attr("vals")) {
+                    $("#showPayPalRemark").html(UserPay.czPayPalData[i][1]);
+                    break;
+                }
+            }
+        }
+    });
+});

novel-front/src/main/resources/templates/common/top.html

@@ -42,7 +42,7 @@
                 <li th:class="${navType}==0?'on':''"><a href="/">首页</a></li>
                 <li th:class="${navType}==1?'on':''"><a href="/book/bookclass.html">全部作品</a></li>
                 <li th:class="${navType}==2?'on':''"><a href="/book/book_ranking.html">排行榜</a></li>
-                <li class=""><a href="javascript:layer.alert('待开通，敬请期待！');">充值</a></li>
+                <li class=""><a href="/pay/index.html">充值</a></li>
                 <li><a href="javascript:layer.alert('待开通，敬请期待！');">作家专区</a></li>
 
             </ul>

novel-front/src/main/resources/templates/pay/index.html

@@ -0,0 +1,139 @@
+
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head th:replace="common/header :: common_head(~{::title},~{},~{::link})">
+    <title th:text="'充值_'+#{website.name}"></title>
+    <link rel="stylesheet" href="/css/base.css"/>
+    <link rel="stylesheet" href="/css/main.css"/>
+</head>
+<body class="">
+
+<div th:replace="common/top :: top('')">
+</div>
+
+<form action="/pay/aliPay" method="post" id="payform" name="payform">
+    <div class="main box_center cf">
+
+        <div class="channelWrap channelPay cf">
+
+            <div class="payBox cf">
+                <div class="payHead cf">
+                    <div class="fl">
+                        充值账号：<span class="user_name" id="my_name"></span>余额：<em class="red" id="accountBalance">0</em>屋币<!--<em class="red">+0</em>代金券-->
+                    </div>
+                    <!--<div class="fr">
+                        <a class="btn_gray" href="/user/pay_record.aspx" target="_blank">充值记录</a><a class="btn_gray" href="/user/my_order.aspx" target="_blank">消费记录</a>
+                    </div>-->
+                </div>
+                <div class="payCon">
+                    <h5>选择充值方式</h5>
+                    <ul class="pay_way cf" id="ulPayType">
+                        <li class="on"  valp="1"><img class="pay_pic" src="../images/pay_zfb.png" alt="支付宝支付" /></li>
+                        <li valp="2"><img class="pay_pic" src="../images/pay_wx.png" alt="微信支付" /></li>
+
+                    </ul>
+                    <h5>选择充值金额</h5>
+                    <ul class="pay_way cf" id="ulZFWX">
+                        <li vals="10"><strong>10元</strong><span class="pay_mn">1000屋币</span></li>
+                        <li vals="30"><strong>30元</strong><span class="pay_mn">3000屋币</span></li>
+                        <li vals="50"><strong>50元</strong><span class="pay_mn">5000屋币<!--<em class="red">+ 送500代金券</em>--></span></li>
+                        <li vals="100"><strong>100元</strong><span class="pay_mn">10000屋币<!--<em class="red">+ 送1200代金券</em>--></span></li>
+                        <li vals="200"><strong>200元</strong><span class="pay_mn">20000屋币<!--<em class="red">+ 送3000代金券</em>--></span></li>
+                        <li vals="500"><strong>500元</strong><span class="pay_mn">50000屋币<!--<em class="red">+ 送10000代金券</em>--></span></li>
+                    </ul>
+                    <ul class="pay_way cf" style="display:none;" id="ulPayPal">
+                        <li vals="20"><strong>20美元</strong><span class="pay_mn">10000屋币</span></li>
+                        <li vals="50" class="on"><strong>50美元</strong><span class="pay_mn">25000屋币<em class="red"></em></span></li>
+                        <li vals="100"><strong>100美元</strong><span class="pay_mn">50000屋币<em class="red"></em></span></li>
+                    </ul>
+                    <ul class="pay_Checkout" id="ulZFWXXJ">
+                        <li>当前汇率：1元=100屋币</li>
+                        <li>总计金额：<em class="red" id="showTotal">￥50元</em> 获得 <em class="red" id="showRemark">5000屋币<!--+500代金券--></em></li>
+                        <li style="display:none"><a class="btn_red" href="pay_success.html" onclick="javascript:UserPay.sendPay();">立即支付</a></li>
+                    </ul>
+                    <ul class="pay_Checkout" style="display:none;" id="ulPayPalXJ">
+                        <li>当前汇率：1美元=500屋币</li>
+                        <li>总计金额：<em class="red" id="showPayPalTotal">50美元</em> 获得 <em class="red" id="showPayPalRemark">25000屋币</em></li>
+                        <li style="display:none"><a class="btn_red" href="javascript:void(0);" onclick="javascript:UserPay.sendPay();">立即支付</a></li>
+                    </ul>
+                </div>
+                <div class="payFoot">
+                    <strong class="tip_tit">温馨提示</strong>
+                    <ul class="tip_list">
+                        <li>1. 充值阅读权限仅限本书城使用</li>
+                        <li>2. 充值支持信用卡、借记卡、支付宝余额、微信零钱等支付</li>
+                        <li>3. 包年时间是365天，重复购买时间会累加</li>
+                        <li>4. 若充值遇到问题，<a href="/user/feedback.html" target="_blank" class="unlink black9">点此留言</a></li>
+                    </ul>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <input type="hidden" id="pValue" name="payAmount"  />
+</form>
+
+
+<div th:replace="common/footer :: footer">
+</div>
+<div th:replace="common/js :: js"></div>
+<script src="/javascript/pay.js" type="text/javascript"></script>
+
+<script type="text/javascript">
+
+
+
+    //查询用户信息
+    $.ajax({
+        type: "POST",
+        url: "/user/userInfo",
+        data: {},
+        dataType: "json",
+        success: function (data) {
+            if (data.code == 200) {
+                if(data.data.nickName){
+                    $("#my_name").html(data.data.nickName);
+                }else{
+                    $("#my_name").html(data.data.username);
+                }
+
+                $("#accountBalance").html(data.data.accountBalance);
+
+            } else if (data.code == 1001) {
+                //未登录
+                location.href = '/user/login.html?originUrl=' + decodeURIComponent(location.href);
+
+            } else {
+                layer.alert(data.msg);
+            }
+
+        },
+        error: function () {
+            layer.alert('网络异常');
+        }
+    })
+
+    $("#ulZFWX").find("li").click(function () {
+
+        var payType = $("#ulPayType").find("li.on").attr("valp");
+
+        if(payType == 2){
+            layer.alert("微信支付暂未开通，敬请期待");
+            return ;
+        }
+
+        $("#pValue").val($(this).attr("vals"));
+
+        $("#payform").submit();
+
+
+
+
+
+    });
+</script>
+
+
+</body>
+</html>

novel-front/src/main/resources/templates/user/userinfo.html

@@ -30,7 +30,7 @@
                     <p class="my_name" id="my_name">
                         </p>
                     <ul class="my_list">
-                        <li class="my_gold"><i>账户余额：</i><em class="red">0</em>屋币<em class="red">+</em><em class="red">0</em>代金券<a href="javascript:layer.alert('充值通道待开通，敬请期待！');" class="btn_link">立即充值</a></li>
+                        <li class="my_gold"><i>账户余额：</i><em class="red" id="accountBalance">0</em>屋币<!--<em class="red">+</em><em class="red">0</em>代金券--><a href="/pay/index.html" class="btn_link">立即充值</a></li>
                         <li class="my_baonian"></li>
 
                     </ul>
@@ -96,6 +96,8 @@
                     $("#my_name").html(data.data.username);
                 }
 
+                $("#accountBalance").html(data.data.accountBalance);
+
             } else if (data.code == 1001) {
                 //未登录
                 location.href = '/user/login.html?originUrl=' + decodeURIComponent(location.href);