谷粒学院（十八）微信支付

一、创建支付模块和准备

1、课程支付需求描述

2、创建支付相关的表

3、在service模块下创建子模块service_order

4、使用代码生成器生成相关代码

5、在service_order模块中引入依赖

<dependencies><dependency><groupId>com.github.wxpay</groupId><artifactId>wxpay-sdk</artifactId><version>0.0.3</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId></dependency>
</dependencies>

6、编写application.properties配置文件

# 服务端口
server.port=8007
# 服务名
spring.application.name=service-order# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123456#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/kuang/eduorder/mapper/xml/*.xml#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl# nacos服务地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848#开启熔断机制
#feign.hystrix.enabled=true
# 设置hystrix超时时间，默认1000ms
#hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=3000

7、主启动类

@SpringBootApplication
@ComponentScan(basePackages = {"com.kuang"})
@MapperScan("com.kuang.eduorder.mapper")
@EnableDiscoveryClient
@EnableFeignClients
public class OrdersApplication {public static void main(String[] args) {SpringApplication.run(OrdersApplication.class, args);}
}

二、开发创建订单接口 - 后端

1、编写订单controller

@Api(description = "查询支付订单模块")
@RestController
@RequestMapping("/eduorder/order")
@CrossOrigin
public class OrderController {@Autowiredprivate OrderService orderService;@ApiOperation(value = "生成订单的方法")@PostMapping("createOrder/{courseId}")public R saveOrder(@PathVariable String courseId, HttpServletRequest request) {//创建订单，返回订单号String orderNo = orderService.createOrders(courseId,JwtUtils.getMemberIdByJwtToken(request));return R.ok().data("orderId",orderNo);}@ApiOperation(value = "根据订单id查询订单信息")@GetMapping("getOrderInfo/{orderId}")public R getOrderInfo(@PathVariable String orderId) {QueryWrapper<Order> wrapper = new QueryWrapper<>();wrapper.eq("order_no",orderId);Order order = orderService.getOne(wrapper);return R.ok().data("item",order);}
}

2、在service_edu创建接口

（1）实现根据课程id获取课程信息，返回课程信息对象

@ApiOperation(value = "根据课程id查询课程信息")
@PostMapping("getCourseInfoOrder/{id}")
public CourseWebVoOrder getCourseInfoOrder(@PathVariable String id) {CourseWebVo courseInfo = courseService.getBaseCourseInfo(id);CourseWebVoOrder courseWebVoOrder = new CourseWebVoOrder();BeanUtils.copyProperties(courseInfo,courseWebVoOrder);return courseWebVoOrder;
}

3、在service_ucenter创建接口

（1）实现用户id获取用户信息，返回用户信息对象

@ApiOperation(value = "根据用户id获取用户信息")
@PostMapping("getUserInfoOrder/{id}")
public UcenterMemberOrder getUserInfoOrder(@PathVariable String id) {UcenterMember member = memberService.getById(id);UcenterMemberOrder ucenterMemberOrder = new UcenterMemberOrder();BeanUtils.copyProperties(member,ucenterMemberOrder);return ucenterMemberOrder;
}

4、编写订单service

（1）在service_order模块创建接口，实现远程调用

EduClient

@Component
@FeignClient("service-edu")
public interface EduClient {//根据课程id查询课程信息@PostMapping("/eduservice/coursefront/getCourseInfoOrder/{id}")public CourseWebVoOrder getCourseInfoOrder(@PathVariable("id") String id);}

UcenterClient

@Component
@FeignClient("service-ucenter")
public interface UcenterClient {//根据用户id获取用户信息@PostMapping("/educenter/member/getUserInfoOrder/{id}")public UcenterMemberOrder getUserInfoOrder(@PathVariable("id") String id);}

（2）在service_order模块编写创建订单service

@Service
public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements OrderService {@Autowiredprivate EduClient eduClient;@Autowiredprivate UcenterClient ucenterClient;//生成订单的方法@Overridepublic String createOrders(String courseId, String memberId) {//通过远程调用：根据用户id获取用户信息UcenterMemberOrder userInfoOrder = ucenterClient.getUserInfoOrder(memberId);//通过远程调用：根据课程id获取课程信息CourseWebVoOrder courseInfoOrder = eduClient.getCourseInfoOrder(courseId);//创建order对象，向order对象里面设置数据Order order = new Order();order.setOrderNo(OrderNoUtil.getOrderNo());//订单号order.setCourseId(courseId); //课程idorder.setCourseTitle(courseInfoOrder.getTitle());//课程名称order.setCourseCover(courseInfoOrder.getCover());order.setTeacherName(courseInfoOrder.getTeacherName());order.setTotalFee(courseInfoOrder.getPrice());order.setMemberId(memberId);order.setMobile(userInfoOrder.getMobile());order.setNickname(userInfoOrder.getNickname());order.setStatus(0);  //订单状态（0：未支付 1：已支付）order.setPayType(1);  //支付类型 ，微信1baseMapper.insert(order);//返回订单号return order.getOrderNo();}
}

三、课程支付前端整合

1、订单和支付页面需要css文件

2、点击立即购买，生成订单绑定事件

（1）在api定义接口

在/api/orders.js中

import request from '@/utils/request'export default {//生成订单createOrders(courseId) {return request({url: `/eduorder/order/createOrder/${courseId}`,method: 'post'})},//根据订单id查询订单信息getOrdersInfo(id) {return request({url: `/eduorder/order/getOrderInfo/${id}`,method: 'get'})}
}

（2）在页面进行调用

在课程详情页面立即购买按钮，绑定事件，调用方法

在pages/course/_id.vue中

//生成订单
createOrders() {ordersApi.createOrders(this.courseId).then(response =>{//获取返回的订单号//生成订单之后，跳转订单显示页面this.$router.push({path:'/orders/'+response.data.data.orderId})})
}

3、创建订单显示页面，显示生成的订单信息

动态路由跳转

<template><div class="Page Confirm"><div class="Title"><h1 class="fl f18">订单确认</h1><img src="~/assets/img/cart_setp2.png" class="fr"><div class="clear"></div></div><form name="flowForm" id="flowForm" method="post" action=""><table class="GoodList"><tbody><tr><th class="name">商品</th><th class="price">原价</th><th class="priceNew">价格</th></tr></tbody><tbody><!-- <tr><td colspan="3" class="Title red f18 fb"><p>限时折扣</p></td></tr> --><tr><td colspan="3" class="teacher">讲师：{{order.teacherName}}</td></tr><tr class="good"><td class="name First"><a target="_blank" :href="'https://localhost:3000/course/'+order.courseId"><img :src="order.courseCover"></a><div class="goodInfo"><input type="hidden" class="ids ids_14502" value="14502"><a target="_blank" :href="'https://localhost:3000/course/'+ order.courseId">{{order.courseTitle}}</a></div></td><td class="price"><p>￥<strong>{{order.totalFee}}</strong></p><!-- <span class="discName red">限时8折</span> --></td><td class="red priceNew Last">￥<strong>{{order.totalFee}}</strong></td></tr><tr><td class="Billing tr" colspan="3"><div class="tr"><p>共 <strong class="red">1</strong> 件商品，合计<spanclass="red f20">￥<strong>{{order.totalFee}}</strong></span></p></div></td></tr></tbody></table><div class="Finish"><div class="fr" id="AgreeDiv"><label for="Agree"><p class="on"><input type="checkbox" checked="checked">我已阅读并同意<a href="javascript:" target="_blank">《谷粒学院购买协议》</a></p></label></div><div class="clear"></div><div class="Main fl"><div class="fl"><a :href="'/course/'+order.courseId">返回课程详情页</a></div><div class="fr"><p>共 <strong class="red">1</strong> 件商品，合计<span class="red f20">￥<strongid="AllPrice">{{order.totalFee}}</strong></span></p></div></div><input name="score" value="0" type="hidden" id="usedScore"><button class="fr redb" type="button" id="submitPay" @click="toPay()">去支付</button><div class="clear"></div></div></form></div>
</template>
<script>
import ordersApi from '@/api/orders'export default {asyncData({ params, error }) {return ordersApi.getOrdersInfo(params.oid).then(response => {return {order: response.data.data.item}})}
}
</script>

修改layouts的default.vue页面的样式

import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'
import '~/assets/css/base.css'
import '~/assets/css/activity_tab.css'
import '~/assets/css/bottom_rec.css'
import '~/assets/css/nice_select.css'
import '~/assets/css/order.css'
import '~/assets/css/swiper-3.3.1.min.css'
import "~/assets/css/pages-weixinpay.css"

四、生成微信支付的二维码 – 前后端

1、准备工作

微信支付id，商户号，商户key

2、微信支付二维码接口

（1）Controller类

@Api(description = "微信支付管理")
@RestController
@RequestMapping("/eduorder/paylog")
@CrossOrigin
public class PayLogController {@Autowiredprivate PayLogService payLogService;@ApiOperation(value = "生成微信支付二维码接口")@GetMapping("createNative/{orderNo}")public R createNative(@PathVariable String orderNo) {//返回信息，包含二维码地址，还有其他需要的信息Map map = payLogService.createNative(orderNo);System.out.println("****返回二维码map集合"+map);return R.ok().data(map);}@ApiOperation(value = "查询订单支付状态")@GetMapping("queryPayStatus/{orderNo}")public R queryPayStatus(@PathVariable String orderNo) {Map<String,String> map = payLogService.queryPayStatus(orderNo);System.out.println("****查询订单状态："+map);if (map == null) {return R.error().message("支付出错了");}//如果返回map不为空，通过map获取订单状态if (map.get("trade_state").equals("SUCCESS")) {//支付成功//添加记录到支付表，更新订单表订单状态payLogService.updateOrdersStatus(map);return R.ok().message("支付成功");}return R.ok().code(25000).message("订单支付中");}}

（2）Service类

@Service
public class PayLogServiceImpl extends ServiceImpl<PayLogMapper, PayLog> implements PayLogService {@Autowiredprivate OrderService orderService;//生成微信支付二维码接口@Overridepublic Map createNative(String orderNo) {try {//1 根据订单号查询订单信息QueryWrapper<Order> wrapper = new QueryWrapper<>();wrapper.eq("order_no",orderNo);Order order = orderService.getOne(wrapper);//2 使用map设置生成二维码需要参数Map m = new HashMap();m.put("appid","wx74862e0dfcf69954");//关联的公众号appidm.put("mch_id", "1558950191");//商户号m.put("nonce_str", WXPayUtil.generateNonceStr());//生成随机字符串m.put("body", order.getCourseTitle()); //课程标题m.put("out_trade_no", orderNo); //订单号m.put("total_fee", order.getTotalFee().multiply(new BigDecimal("100")).longValue()+"");//价格m.put("spbill_create_ip", "127.0.0.1");m.put("notify_url", "http://guli.shop/api/order/weixinPay/weixinNotify\n");//回调地址m.put("trade_type", "NATIVE");//支付类型//3 发送httpclient请求，传递参数xml格式，微信支付提供的固定的地址HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");//设置xml格式的参数client.setXmlParam(WXPayUtil.generateSignedXml(m,"T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));client.setHttps(true);//执行post请求发送client.post();//4 得到发送请求返回结果//返回内容，是使用xml格式返回String xml = client.getContent();//把xml格式转换map集合，把map集合返回Map<String,String> resultMap = WXPayUtil.xmlToMap(xml);//最终返回数据 的封装Map map = new HashMap();map.put("out_trade_no", orderNo);map.put("course_id", order.getCourseId());map.put("total_fee", order.getTotalFee());map.put("result_code", resultMap.get("result_code"));  //返回二维码操作状态码map.put("code_url", resultMap.get("code_url"));        //二维码地址return map;}catch(Exception e) {throw new GuliException(20001,"生成二维码失败");}}//根据订单号查询订单支付状态@Overridepublic Map<String, String> queryPayStatus(String orderNo) {try {//1、封装参数Map m = new HashMap<>();m.put("appid", "wx74862e0dfcf69954");m.put("mch_id", "1558950191");m.put("out_trade_no", orderNo);m.put("nonce_str", WXPayUtil.generateNonceStr());//2 发送httpclientHttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");client.setXmlParam(WXPayUtil.generateSignedXml(m,"T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));client.setHttps(true);client.post();//3 得到请求返回内容String xml = client.getContent();Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);//6、转成Map再返回return resultMap;}catch(Exception e) {return null;}}//向支付表添加记录，更新订单状态@Overridepublic void updateOrdersStatus(Map<String, String> map) {//从map获取订单号String orderNo = map.get("out_trade_no");//根据订单号查询订单信息QueryWrapper<Order> wrapper = new QueryWrapper<>();wrapper.eq("order_no",orderNo);Order order = orderService.getOne(wrapper);//更新订单表订单状态if (order.getStatus().intValue() == 1) {return;}order.setStatus(1);//1代表已经支付orderService.updateById(order);//向支付表添加支付记录PayLog payLog = new PayLog();payLog.setOrderNo(orderNo);  //订单号payLog.setPayTime(new Date()); //订单完成时间payLog.setPayType(1);//支付类型 1微信payLog.setTotalFee(order.getTotalFee());//总金额(分)payLog.setTradeState(map.get("trade_state"));//支付状态payLog.setTransactionId(map.get("transaction_id")); //流水号payLog.setAttr(JSONObject.toJSONString(map));//其他属性baseMapper.insert(payLog);}}

3、定义前端调用的接口

在 api/orders.js中

//生成二维码的方法
createNative(orderNo) {return request({url: `/eduorder/paylog/createNative/${orderNo}`,method: 'get'})
},
//查询订单状态的方法
queryPayStatus(orderNo) {return request({url: `/eduorder/paylog/queryPayStatus/${orderNo}`,method: 'get'})
}

4、页面调用

在pages/orders/_oid.vue中

methods:{//去支付toPay() {this.$router.push({path:'/pay/'+this.order.orderNo})}
}

5、创建支付页面，生成二维码完成支付

（1）页面部分

<template><div class="cart py-container"><!--主内容--><div class="checkout py-container  pay"><div class="checkout-tit"><h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：{{payObj.out_trade_no}}</span></h4><span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{payObj.total_fee}}</em></span><div class="clearfix"></div></div><div class="checkout-steps"><div class="fl weixin">微信支付</div><div class="fl sao"><p class="red">请使用微信扫一扫。</p><div class="fl code"><!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> --><!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ" :size="338"/> --><qriously :value="payObj.code_url" :size="338"/><div class="saosao"><p>请使用微信扫一扫</p><p>扫描二维码支付</p></div></div></div><div class="clearfix"></div><!-- <p><a href="pay.html" target="_blank">> 其他支付方式</a></p> --></div></div></div>
</template>

（2）调用部分

<script>
import ordersApi from '@/api/orders'export default {asyncData({ params, error }) {return ordersApi.createNative(params.pid).then(response => {return {payObj: response.data.data}})},data() {return {timer1:''//定时器名称}},//每隔三秒调用一次查询订单状态的方法mounted() {//页面渲染之后执行this.timer1 = setInterval(() => {this.queryOrderStatus(this.payObj.out_trade_no)},3000);},methods:{queryOrderStatus(orderNo) {ordersApi.queryPayStatus(orderNo).then(response => {if (response.data.success) {//支付成功，清除定时器clearInterval(this.timer1)//提示this.$message({type: 'success',message: '支付成功!'})//跳转回到课程详情页面this.$router.push({path: '/course/' + this.payObj.course_id})}})}}
}
</script>

支付之后回到详情页面过程

6、修改立即购买和立即观看按钮

（1）分析过程

在课程详情页面，有按钮立即观看（立即购买)

如果课程是免费课程，按钮显示立即观看
如果课程是已经支付过，按钮显示立即观看
如果课程没有购买，或者不是免费课程，按钮显示立即购买

（2）后台接口

判断课程是否已经支付了：根据课程id和用户id，去查询订单表，查询这个订单状态，如果是1，表示已经支付了，如果状态值不是1，表示没有支付。

编写OrderController类

@ApiOperation(value = "根据课程id和用户id查询订单中订单状态")
@GetMapping("isBuyCourse/{courseId}/{memberId}")
public boolean isBuyCourse(@PathVariable String courseId,@PathVariable String memberId) {QueryWrapper<Order> wrapper = new QueryWrapper<>();wrapper.eq("course_id",courseId);wrapper.eq("member_id",memberId);wrapper.eq("status",1);//支付状态  1代表已支付int count = orderService.count(wrapper);if (count> 0) {return true;}else {return false;}
}

（3）修改课程详情查询接口

因为在课程详情页面显示立即观看或者立即购买，需要修改课程详情查询接口，添加返回值，返回当前显示详情的课程是否已经购买了

在CourseFrontController类中

（4）编写远程调用的OrdersClient类

@Component
@FeignClient("service-order")
public interface OrdersClient {//根据课程id和用户id查询订单中订单状态@GetMapping("/eduorder/order/isBuyCourse/{courseId}/{memberId}")public boolean isBuyCourse(@PathVariable("courseId") String courseId, @PathVariable("memberId") String memberId);}

（5）前端调用

在pages/course/_id.vue中

按钮的修改

<section v-if="isbuy || Number(courseWebVo.price) === 0" class="c-attr-mt"><a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
</section>
<section v-else class="c-attr-mt"><a @click="createOrders()" href="#" title="立即购买" class="comm-btn c-btn-3">立即购买</a>
</section>

如果有收获！！！希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客