微信支付二维码

需求分析

用户在提交订单后，如果是选择支付方式为微信支付，那应该跳转到微信支付二维码页面，用户扫描二维码可以进行支付，金额与订单金额相同。

实现思路

前端页面向后端传递订单号，后端根据订单号查询订单，检查是否为当前用户的未支付订单，如果是则根据订单号和金额生成支付url返给前端，前端得到支付url生成支付二维码。

代码实现

提交订单跳转支付页

1）更新changgou_web_order的application.yml,添加读取超时设置

#请求处理的超时时间
ribbon:
  ReadTimeout: 4000
  #请求连接的超时时间
  ConnectTimeout: 3000

2）在changgou_order_web工程resources/templates下添加 '资源/pay.html，fail.html，wxpay.html'。

3）更新changgou_service_order中add() ,设置返回值为订单Id

#orderServiceImpl
/**
     * 增加
     * @param order
     */
    @Override
    public String add(Order order){
        List<OrderItem> cartList = cartService.findCartList(order.getUsername());
​
        int totalMoney=0;
        int totalNum=0;
        int totalPayMoney=0;
        for (OrderItem orderItem : cartList) {
            totalMoney+=orderItem.getMoney();
            totalNum+=orderItem.getNum();
            totalPayMoney+=orderItem.getPayMoney();
        }
        order.setTotalNum(totalNum);
        order.setTotalMoney(totalMoney);
        order.setPayMoney(totalPayMoney);
        order.setPreMoney(totalMoney-totalPayMoney);
​
        //其他数据完善
        order.setCreateTime(new Date());
        order.setUpdateTime(order.getCreateTime());
        order.setBuyerRate("0");        //0:未评价，1：已评价
        order.setSourceType("1");       //来源，1：WEB
        order.setOrderStatus("0");      //0:未完成,1:已完成，2：已退货
        order.setPayStatus("0");        //0:未支付，1：已支付，2：支付失败
        order.setConsignStatus("0");    //0:未发货，1：已发货，2：已收货
        String orderId = idWorker.nextId() + "";
        order.setId(orderId);
        int result = orderMapper.insertSelective(order);
​
        for (OrderItem orderItem : cartList) {
            orderItem.setId(idWorker.nextId()+"");
            orderItem.setIsReturn("0");
            orderItem.setOrderId(order.getId());
            orderItemMapper.insertSelective(orderItem);
        }
​
        //扣减库存
        skuFeign.decrCount(order.getUsername());
​
        //清除缓存中的数据
        redisTemplate.delete("Cart_"+order.getUsername());
​
        return orderId;
    }
    
#orderController
@PostMapping
    public Result<String> add(@RequestBody Order order){
        String username = tokenDecode.getUserInfo().get("username");
        order.setUsername(username);
        String orderId = orderService.add(order);
        return new Result(true,StatusCode.OK,"添加成功",orderId);
    }

4) 更新order.html中添加订单js

add:function () {
                axios.post('/api/worder/add',this.order).then(function (response) {
                    if (response.data.flag){
                        alert("添加订单成功");
                        var orderId = response.data.data;
                        location.href="/api/worder/toPayPage?orderId="+orderId;
                    }else{
                        alert("添加失败");
                    }
                })
            }

5）在orderController中新增方法，用于跳转支付页

5.1）changgou_service_order_api的OrderFeign新增接口定义

/***
 * 根据ID查询数据
 * @param id
 * @return
 */
@GetMapping("/order/{id}")
public Result findById(@PathVariable("id") String id);

5.2） changgou_order_web中的orderController新增方法，跳转支付页

@GetMapping("/toPayPage")
    public String toPayPage(String orderId, Model model){
        Order order= orderFeign.findById(orderId).getData();
        model.addAttribute("orderId",orderId);
        model.addAttribute("payMoney",order.getPayMoney());
        return "pay";
    }

支付微服务-下单

（1）创建changgou_service_pay （支付微服务）， pom.xml添加依赖

<dependency>
    <groupId>com.changgou</groupId>
    <artifactId>changgou_common</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-sdk</artifactId>
    <version>3.0.9</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-logging</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-amqp</artifactId>
</dependency>

排除log包，否则会因为包冲突无法正常启动

（2）创建配置文件application.yml

server:
  port: 9010
spring:
  application:
    name: pay
  rabbitmq:
    host: 192.168.200.128
  main:
    allow-bean-definition-overriding: true #当遇到同样名字的时候，是否允许覆盖注册
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:6868/eureka
  instance:
    prefer-ip-address: true

（3）创建com.github.wxpay.sdk包，包下创建Config类

public class MyConfig extends WXPayConfig {
    String getAppID() {
        return "wx8397f8696b538317";
    }
​
    String getMchID() {
        return "1473426802";
    }
​
    String getKey() {
        return "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb";
    }
​
    InputStream getCertStream() {
        return null;
    }
​
    IWXPayDomain getWXPayDomain() {
        return new IWXPayDomain() {
            public void report(String domain, long elapsedTimeMillis, Exception ex) {
            }
            public DomainInfo getDomain(WXPayConfig config) {
                return new DomainInfo("api.mch.weixin.qq.com",true);
            }
        };
    }
}

（4）创建com.changgou包，包下创建类PayApplication

@SpringBootApplication
@EnableEurekaClient
public class PayApplication {
​
    public static void main(String[] args) {
        SpringApplication.run(PayApplication.class);
    }
​
    @Bean
    public WXPay wxPay(){
        try {
            return new WXPay( new MyConfig() );
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
​
}

（3）创建com.changgou.pay.controller包 ，新增WxPayController

@RestController
@RequestMapping("/wxpay")
public class WxPayController {
​
    @Autowired
    private WxPayService wxPayService;
​
    /**
     * 下单
     * @param orderId
     * @param money
     * @return
     */
    @GetMapping("/nativePay")
    public Result nativePay(@RequestParam("orderId")String orderId,@RequestParam("money") Integer money){
        Map map = wxPayService.nativePay( orderId, money );
        return new Result( true, StatusCode.OK,"",map );
    }
}

（4）创建com.changgou.pay.service包，包下创建接口WxPayService

public interface WxPayService {
​
    /**
     * 生成微信支付二维码
     * @param orderId
     * @param money
     * @return
     */
    Map nativePay(String orderId, Integer money);
}

（5）创建com.changgou.pay.service.impl 包 ,新增服务类WxPayServiceImpl

@Service
public class WxPayServiceImpl implements WxPayService {
​
    @Autowired
    private WXPay wxPay;
​
    @Override
    public Map nativePay(String orderId, Integer money) {
        try {
            //1.封装请求参数
            Map<String,String> map=new HashMap();
            map.put("body","畅购商城");//商品描述
            map.put("out_trade_no",orderId);//订单号
            //map.put("total_fee",String.valueOf(money*100));//金额,以分为单位
            BigDecimal payMoney = new BigDecimal("0.01");
            BigDecimal fen = payMoney.multiply(new BigDecimal("100")); //1.00
            fen = fen.setScale(0,BigDecimal.ROUND_UP); // 1
            map.put("total_fee",String.valueOf(fen));
            
            map.put("spbill_create_ip","127.0.0.1");//终端IP
            map.put("notify_url","http://www.itcast.cn");//回调地址,先随便填一个
            map.put("trade_type","NATIVE");//交易类型
            Map<String, String> mapResult = wxPay.unifiedOrder( map ); //调用统一下单
            return mapResult;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

测试：地址栏输入http://localhost:9010/wxpay/nativePay?orderId=990099&money=1

页面对接支付微服务

（1）新增changgou_service_pay_api模块 ，并添加common工程依赖，新增com.changgou.pay.feign包，包下创建接口

@FeignClient("pay")
public interface WxPayFeign {
​
    /**
     * 下单
     * @param orderId
     * @param money
     * @return
     */
    @GetMapping("/wxpay/nativePay")
    public Result nativePay(@RequestParam("orderId") String orderId,
                            @RequestParam("money") Integer money );
}

（2）changgou_web_order新增PayController

@Controller
@RequestMapping("/wxpay")
public class PayController {
​
    @Autowired
    private OrderFeign orderFeign;
​
    @Autowired
    private WxPayFeign wxPayFeign;
​
    /**
     * 微信支付二维码
     * @param orderId
     * @return
     */
    @GetMapping
    public String wxPay(String orderId, Model model){
        //根据orderId查询订单
        Result orderResult = orderFeign.findById( orderId );
        if(orderResult.getData()==null){ //如果订单不存在
            return "fail";//出错页
        }
       Order order = orderResult.getData();
        //判断支付状态
        if( !"0".equals( order.getPayStatus() )){// 如果不是未支付订单
            return "fail";//出错页
        }
        Result payResult = wxPayFeign.nativePay( orderId, order.getPayMoney() );
        if(payResult.getData()==null){
            return "fail";//出错页
        }
        Map payMap=  (Map)payResult.getData();
        payMap.put( "payMoney", order.getPayMoney() );
        payMap.put( "orderId" ,orderId );
        model.addAllAttributes( payMap );
        return "wxpay";
    }
​
}

（3）将静态原型中wxpay.html拷贝到templates文件夹下作为模板，修改模板，部分代码如下：

二维码地址渲染

<script type="text/javascript" th:inline="javascript">
let qrcode = new QRCode(document.getElementById("qrcode"), {
    width : 200,
    height : 200
});
qrcode.makeCode([[${code_url}]]);
</script>

显示订单号与金额

<h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info" th:text="|订单提交成功，请您及时付款！订单号：${orderId}|"></span></h4>
<span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money" th:text="${payMoney}"></em>元</span>

设置支付跳转

<li><a th:href="|/api/wxpay?orderId=${orderId}|"><img src="/img/_/pay3.jpg"></a></li>

(4) 更新网关地址过滤器。添加wxpay路径的拦截

同时更新网关服务的application.yml。添加地址路由标识