支付宝支付 第十一集:支付回调成功后的监听

支付宝支付 第十一集:支付回调成功后的监听



一、代码

  • 目录结构

    支付宝支付 第十一集:支付回调成功后的监听_第1张图片

    支付宝支付 第十一集:支付回调成功后的监听_第2张图片

  • 更新OrderDetailController.java
    package com.dzy.alipay.web.order;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    
    import com.dzy.alipay.entity.OrderDetail;
    import com.dzy.alipay.service.order.OrderDetailService;
    import com.dzy.alipay.vo.PayVo;
    import com.dzy.alipay.vo.R;
    import lombok.extern.log4j.Log4j2;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    
    @Controller
    @Log4j2
    public class OrderDetailController {
        private final OrderDetailService orderDetailService;
    
        public OrderDetailController(OrderDetailService orderDetailService) {
            this.orderDetailService = orderDetailService;
        }
    
        @PostMapping("/api/paycallback/course")
        @ResponseBody
        public R payCallback(@RequestBody PayVo payVo) {
            String userid = "1";
            QueryWrapper<OrderDetail> queryWrapper = new QueryWrapper<>();
            queryWrapper.eq("userid", userid);
            queryWrapper.eq("courseid", payVo.getCourseid());
            int count = orderDetailService.count(queryWrapper);
            return count > 0 ? R.ok() : R.error();
        }
    }
    
  • 更新main.html
    DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>kuangstudy-支付宝支付title>
        <link rel="stylesheet" href="/static/css/main.css">
    
    head>
    <body data-ext-version="3.1">
    <div data-v-7e2550d6="" class="odm_extension image_downloader_wrapper">div>
    
    <nav class="navbar sticky-top navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand logo" href="https://www.kuangstudy.com/">
                <img style="width: 112px;" src="https://www.kuangstudy.com//assert/course/c1//index_topleft_logo_black.png" alt="">
            a>
            <div class="collapse navbar-collapse position-relative">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item position-relative">
                        <a class="nav-link ksd-nav-linknav nav-link-course" href="https://www.kuangstudy.com/course">课程a>
                        <i class="iconfont  ksd-bgd-left">免费i>
                    li>
                    <li class="nav-item">
                        <a class="nav-link ksd-nav-linknav nav-link-topics active"
                           href="https://www.kuangstudy.com/bbs">江湖a>
                    li>
                    <li class="nav-item">
                        <a class="nav-link ksd-nav-linknav nav-link-down" href="https://www.kuangstudy.com/app">导航a>
                    li>
                ul>
                <div id="ksdloginbox">
                    <div style="position: relative;top:-18px">
                        <div class="tipmessage-box" style="cursor: pointer"><i
                                class="iconfont iconiconfontunie62c tp1 pr pr-1">i><span
                                class="im-notify ksd-im-number im-number im-center" style="display: none">span>消息
                        div>
                        <div class="i-frame animated2 fadeInDown">div>
                        <div class="ksd-logindrop show" data-vip="2">
                            <a href="https://www.kuangstudy.com/u" class="ksd-home pr tp2" style="z-index: 11"><i
                                    class="iconfont iconhome pr  pr-1">i>进入主页a>
                            <a class="dropdown-toggle ksd-user-info" href="javascript:void(0);" title="飞哥" data-vip="2"
                               id="navbarDropdown">
                <span class="pr">
                    <img class="ksd-avatar2 ksd-avatar-img" src="https://www.kuangstudy.com//assert/course/c1//132" alt="">
                    <span class="ksd-iconrenzheng-vip"><img src="https://www.kuangstudy.com//assert/course/c1//vip.png" alt="">span>
                span>
                                <span class="ksd-text">飞哥span>
                            a>
                            <div class="ksd-login-items">
                                <div class="ksd-header-items mt-3">
                                    <ul>
                                        <li class="ksd-num-items">
                                            <a href="https://www.kuangstudy.com/u#topic">
                                                <span class="num ksd-num-count6">3span>
                                                <span class="ktext">文章span>
                                            a>
                                        li>
                                        <li class="ksd-num-items">
                                            <a href="https://www.kuangstudy.com/u#fans">
                                                <span class="num ksd-num-count1">7span>
                                                <span class="ktext">关注span>
                                            a>
                                        li>
                                        <li class="ksd-num-items">
                                            <a href="https://www.kuangstudy.com/u#follow">
                                                <span class="num ksd-num-count2">471span>
                                                <span class="ktext">粉丝span>
                                            a>
                                        li>
                                    ul>
                                div>
                                <div>
                                    <div class="citems ksd-sign-items">
                                        <a href="javascript:void(0);" data-num="2" class="ksd-user-qiandao"><i
                                                class="iconfont iconsetlocation pr-2 pr tp1">i><span
                                                class="ksd-uqtext">签到span>a>
                                    div>
                                div>
                            div>
                            <div class="ksd-login-items">
                                <ul>
                                    <li class="items">
                                        <a href="https://www.kuangstudy.com/u" style="width:126px;text-align:left"
                                           title="点击前往个人中心" class="fl flitems"><i class="iconfont iconhome">i>个人中心a>
    
    
                                        <a href="https://www.kuangstudy.com/vip/pay" title="点击前往订购和续费"
                                           class="fr fritems pr"><span class="vipicon fw" style="padding:2px 6px">年会员span>a>
    
    
                                    li>
                                    <li class="items ksdcopylinknum" title="点击复制数字账号" data-clipboard-text="2">
    
                                        <a href="https://www.kuangstudy.com/u/settings" style="width:160px;text-align:left"
                                           class="fl ksd-settings2 flitems"><i class="iconfont iconiconzh1">i>账号a>
                                        <a href="javascript:void(0);" class="fr ksd-settings2 fritems">2a>
                                    li>
                                    <li class="items ksd-exp-itemboxs">
                                        <a href="javascript:void(0);" class="fl flitems"><i
                                                class="iconfont icondengji2 tp1 pr">i>等级a>
                                        <a href="javascript:void(0);" class="fr fritems ksd-coin-exp show1"
                                           data-exp="74000"><span class="ksd-num-exp">74000span>expa>
                                        <a href="javascript:void(0);"
                                           class="fr fritems show2 ksd-coin-exp ksd-coin-exp-text" data-exp="74000">Lv6a>
                                    li>
                                    <li class="items">
                                        <a href="javascript:void(0);" class="fl flitems"><i class="iconfont iconjinbi">i>K币a>
                                        <a href="javascript:void(0);" class="fr fritems ksd-coin-coin"
                                           data-coin="4814887"><span
                                                class="ksd-coin-cointext ksd-num-coin">4814887span><span
                                                class="pr ftp2">span>a>
                                    li>
                                    <li class="items" title="订购会员">
    
    
                                        <a href="https://www.kuangstudy.com/vip/pay" style="text-align:left"
                                           class="fl ksd-settings2 flitems"><i
                                                class="iconfont iconVIP_paiban">i>查看会员权益a>
                                    li>
                                    <li class="items">
                                        <a href="https://www.kuangstudy.com/u/settings" style="width:100%;text-align:left"
                                           class="fl flitems"><i class="iconfont iconSettingscontroloptions">i>个人设置a>
                                    li>
                                ul>
                            div>
                            <div class="ksd-login-items bnone">
                                <ul>
                                    <li class="items">
                                        <a href="javascript:void(0);" class="fl flitems ksd-logout"><i
                                                class="iconfont iconai-out">i>退出登录a>
                                    li>
                                ul>
                            div>
                        div>
                    div>
                div>
            div>
        div>
    nav>
    
    
    <div id="app" class="container" style="margin-top: 55px;"><h1 class="text-center fz32 mb-5"><a
            href="https://www.kuangstudy.com/app/code">笔记下载:https://www.kuangstudy.com/app/codea>h1>
        <div id="ksd-alert-msg-1" class="alert alert-primary">
            <button type="button" data-dismiss="alert" class="close">×button>
            <strong><i class="iconfont icontubiao_xitongtongzhi fz20">i>strong><span class="pl-2 ccmsg">教程提供者:秦疆(遇见狂神说)、徐成飞(飞哥),作者已授权!Bilibili地址:<a
                href="https://space.bilibili.com/95256449" target="_blank">https://space.bilibili.com/95256449a>span>
        div>
        <div class="row course-item-wrap">
            <div class="col-lg-12">
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade show active">
                        <div class="row">
                            <div class="col-lg-12 text-center">
                                <img :src="'/alipay/pay?courseID='+courseID" alt="">
                            div>
                        div>
                        <div class="row course-block">
                            <div id="courseListBox" class="course_bdleft Mtp25">
                                <div class="course_stage_item"><h2 index="1" id="ksd-title-position-1"
                                                                   class="ksd-title-position-h2"><span
                                        class="cro_icon1">1span> <span>第一阶段:JavaSEspan>h2>
                                    <div class="path-course-r">
                                        <div class="row">
    
    
                                            <div v-for="(course,index) in courseList" class="col-lg-3 col-md-4 col-sm-6 animated fadeInUp delay-1s">
                                                <div class="course-item">
    
                                                    <div class="course-img ">
                                                        <a
                                                            :href="'https://www.kuangstudy.com/course/detail/'+course.courseid"
                                                            target="_blank"
                                                            :title="course.title" class="course__img">
                                                            <img
                                                                    height="140" width="100%"
                                                                    :src="'https://www.kuangstudy.com/'+course.img"
                                                            >
                                                            <span class="num">1span>
                                                            <span class="stimer">{{course.price}}span>
                                                        a>
                                                    div>
    
                                                    <div class="course-content">
                                                        <h3 :title="course.title" class="course__title">
                                                            <a
                                                                href="https://www.kuangstudy.com/course/detail/1317503462556848129"
                                                                target="_blank" :title="course.title" class="course__img">
                                                                {{course.title}}
                                                            a>
                                                        h3>
                                                        <p class="course__author">{{course.intro}}p>
                                                        <div class="course-price-wrap" @click="changePay(index)">
                                                            <span class="course__btn">
                                                                <i class="iconfont iconshouye">i>
                                                                点击支付
                                                            span>
                                                        div>
                                                    div>
                                                div>
                                            div>
    
    
                                        div>
                                    div>
                                div>
                            div>
                        div>
                    div>
                div>
            div>
        div>
    div>
    
    <script src="/static/js/jquery-3.5.1.min.js">script>
    <script src="/static/js/vue.min.js">script>
    <script src="/static/js/axios.min.js">script>
    <script>
    
        var vue =new Vue({
            el:"#app",
            data:{
                courseList:[],
                courseID:'',
                pcourseId:"",
                ptimer:null,
            },
            created:function () {
                this.loadCourse();
            },
            methods:{
                loadCourse:function () {
                    var that = this;
                    axios.post("/api/course/list").then(function (res) {
                        console.log("res================>", res);
                        if(res.data.code == 20000){
                            that.courseList = res.data.data.courseList;
                            that.courseID=that.courseList[0].courseid;
                        }
                    })
                },
                
                changePay:function (index) {
                    this.courseID= this.courseList[index].courseid;
                    this.paycallback();
                },
    
                paycallback : function(){
                    var that = this;
                    var courseId = that.courseID;
                    if(that.ptimer)clearInterval(that.ptimer);
                    that.ptimer = setInterval(function(){
                        axios.post("/api/paycallback/course",{courseid:courseId}).then(function(res){
                           console.log("res========>",res);
                            if(res.data.code == 20000) {
                                clearInterval(that.ptimer);
                                alert("支付成功!!!");
                            }
                        })
                    },3000);
                }
                
            }
        })
    
    script>
    body>
    html>
    


二、成功截图

  • 支付回调成功后的监听

    支付宝支付 第十一集:支付回调成功后的监听_第3张图片

    支付宝支付 第十一集:支付回调成功后的监听_第4张图片

你可能感兴趣的:(支付宝,java,前端,支付宝,spring,boot,vue.js)