luffy(六)

一.课程详情页面CourseDetail.vue

<template>
    <div class="detail">
        <Header/>
        <div class="main">
            <div class="course-info">
                <div class="wrap-left">
                    <videoPlayer class="video-player vjs-custom-skin"
                                 ref="videoPlayer"
                                 :playsinline="true"
                                 :options="playerOptions"
                                 @play="onPlayerPlay($event)"
                                 @pause="onPlayerPause($event)">
                    </videoPlayer>
                </div>
                <div class="wrap-right">
                    <h3 class="course-name">{{course_info.name}}</h3>
                    <p class="data">{{course_info.students}}人在学&nbsp;&nbsp;&nbsp;&nbsp;课程总时长：{{course_info.sections}}课时/{{course_info.pub_sections}}小时&nbsp;&nbsp;&nbsp;&nbsp;难度：{{course_info.level_name}}</p>
                    <div v-if="course_info.active_time>0">
                        <div class="sale-time">
                            <p class="sale-type">{{course_info.discount_type}}</p>
                            <p class="expire">距离结束：仅剩{{day}}天 {{hour}}小时 {{minute}}分 <span
                                    class="second">{{second}}</span> 秒</p>
                        </div>
                        <p class="course-price">
                            <span>活动价</span>
                            <span class="discount">¥{{course_info.real_price}}</span>
                            <span class="original">¥{{course_info.price}}</span>
                        </p>
                    </div>
                    <div v-else class="sale-time">
                        <p class="sale-type">价格 <span class="original_price">¥{{course_info.price}}</span></p>
                        <p class="expire"></p>
                    </div>
                    <div class="buy">
                        <div class="buy-btn">
                            <button class="buy-now">立即购买</button>
                            <button class="free">免费试学</button>
                        </div>
                        <!--<div class="add-cart" @click="add_cart(course_info.id)"><img src="@/assets/img/cart-yellow.svg"-->
                                                                                     <!--alt="">加入购物车-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="course-tab">
                <ul class="tab-list">
                    <li :class="tabIndex==1?'active':''" @click="tabIndex=1">详情介绍</li>
                    <li :class="tabIndex==2?'active':''" @click="tabIndex=2">课程章节 <span :class="tabIndex!=2?'free':''">(试学)</span>
                    </li>
                    <li :class="tabIndex==3?'active':''" @click="tabIndex=3">用户评论</li>
                    <li :class="tabIndex==4?'active':''" @click="tabIndex=4">常见问题</li>
                </ul>
            </div>
            <div class="course-content">
                <div class="course-tab-list">
                    <div class="tab-item" v-if="tabIndex==1">
                        <div class="course-brief" v-html="course_info.brief_text"></div>
                    </div>
                    <div class="tab-item" v-if="tabIndex==2">
                        <div class="tab-item-title">
                            <p class="chapter">课程章节</p>
                            <p class="chapter-length">共{{course_chapters.length}}章 {{course_info.sections}}个课时</p>
                        </div>
                        <div class="chapter-item" v-for="chapter in course_chapters" :key="chapter.name">
                            <p class="chapter-title"><img src="@/assets/img/enum.svg" alt="">第{{chapter.chapter}}章·{{chapter.name}}
                            </p>
                            <ul class="section-list">
                                <li class="section-item" v-for="section in chapter.coursesections" :key="section.name">
                                    <p class="name"><span class="index">{{chapter.chapter}}-{{section.orders}}</span>
                                        {{section.name}}<span class="free" v-if="section.free_trail">免费</span></p>
                                    <p class="time">{{section.duration}} <img src="@/assets/img/chapter-player.svg"></p>
                                    <button class="try" v-if="section.free_trail">立即试学</button>
                                    <button class="try" v-else>立即购买</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-item" v-if="tabIndex==3">
                        用户评论
                    </div>
                    <div class="tab-item" v-if="tabIndex==4">
                        常见问题
                    </div>
                </div>
                <div class="course-side">
                    <div class="teacher-info">
                        <h4 class="side-title"><span>授课老师</span></h4>
                        <div class="teacher-content">
                            <div class="cont1">
                                <img :src="course_info.teacher.image">
                                <div class="name">
                                    <p class="teacher-name">{{course_info.teacher.name}}
                                        {{course_info.teacher.title}}</p>
                                    <p class="teacher-title">{{course_info.teacher.signature}}</p>
                                </div>
                            </div>
                            <p class="narrative">{{course_info.teacher.brief}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>

<script>
    import Header from "@/components/Header"
    import Footer from "@/components/Footer"

    // 加载组件
    import {videoPlayer} from 'vue-video-player';

    export default {
        name: "Detail",
        data() {
            return {
                tabIndex: 2,   // 当前选项卡显示的下标
                course_id: 0, // 当前课程信息的ID
                course_info: {
                    teacher: {},
                }, // 课程信息
                course_chapters: [], // 课程的章节课时列表
                playerOptions: {
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    sources: [{ // 播放资源和资源格式
                        type: "video/mp4",
                        src: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //你的视频地址（必填）
                    }],
                }
            }
        },
        computed: {
            day() {
                let day = parseInt(this.course_info.active_time / (24 * 3600));
                if (day < 10) {
                    return '0' + day;
                } else {
                    return day;
                }
            },
            hour() {
                let rest = parseInt(this.course_info.active_time % (24 * 3600));
                let hours = parseInt(rest / 3600);
                if (hours < 10) {
                    return '0' + hours;
                } else {
                    return hours;
                }
            },
            minute() {
                let rest = parseInt(this.course_info.active_time % 3600);
                let minute = parseInt(rest / 60);
                if (minute < 10) {
                    return '0' + minute;
                } else {
                    return minute;
                }
            },
            second() {
                let second = this.course_info.active_time % 60;
                if (second < 10) {
                    return '0' + second;
                } else {
                    return second;
                }
            }
        },
        created() {
            this.get_course_id();
            this.get_course_data();
            this.get_chapter();
        },
        methods: {
            onPlayerPlay() {
                // 当视频播放时，执行的方法
            },
            onPlayerPause() {
                // 当视频暂停播放时，执行的方法
            },
            get_course_id() {
                // 获取地址栏上面的课程ID
                this.course_id = this.$route.params.pk;
                if (this.course_id < 1) {
                    let _this = this;
                    _this.$alert("对不起，当前视频不存在！", "警告", {
                        callback() {
                            _this.$router.go(-1);
                        }
                    });
                }
            },
            get_course_data() {
                // ajax请求课程信息
                this.$axios.get(`${this.$settings.base_url}/course/${this.course_id}/`).then(response => {
                    // window.console.log(response.data);
                    this.course_info = response.data;
                }).catch(() => {
                    this.$message({
                        message: "对不起，访问页面出错！请联系客服工作人员！"
                    });
                })
            },

            get_chapter() {
                // 获取当前课程对应的章节课时信息
                // http://127.0.0.1:8000/course/chapters/?course=(pk)
                this.$axios.get(`${this.$settings.base_url}/course/chapters/`, {
                    params: {
                        "course": this.course_id,
                    }
                }).then(response => {
                    this.course_chapters = response.data;
                }).catch(error => {
                    window.console.log(error.response);
                })
            },
            // add_cart(course_id) {
            //     // 添加商品到购物车
            //     // 验证用户登录状态，如果登录了则可以添加商品到购物车，如果没有登录则跳转到登录界面，登录完成以后，才能添加商品到购物车
            //     let token = localStorage.token || sessionStorage.token;
            //     if (!token) {
            //         this.$confirm("对不起，您尚未登录，请登录以后再进行购物车").then(() => {
            //             this.$router.push("/login/");
            //         });
            //         return false; // 阻止代码往下执行
            //     }
            //
            //     // 添加商品到购物车，因为购物车接口必须用户是登录的，所以我们要在请求头中设置 jwttoken
            //     this.$axios.post(`${this.$settings.Host}/cart/`, {
            //         "course_id": course_id,
            //     }, {
            //         headers: {
            //             "Authorization": "jwt " + token,
            //         }
            //     }).then(response => {
            //         this.$message({
            //             message: response.data.message,
            //         });
            //         // 购物车中的商品数量
            //         let total = response.data.total;
            //         this.$store.commit("change_total", total)
            //     }).catch(error => {
            //         this.$message({
            //             message: error.response.data
            //         })
            //     })
            // }
        },
        components: {
            Header,
            Footer,
            videoPlayer, // 注册组件
        }
    }
</script>

路由router.js

import CourseDetail from './views/CourseDetail.vue'

{
            path: '/course/detail/:pk',
            name: 'course-detail',
            component: CourseDetail
        },
 

依赖：在luffycity目录下的命令

>: cnpm install vue-video-player

配置：main.js

// vue-video播放器
require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

资源：图片放置assrts/img文件夹

"""
enum.svg
chapter-player.svg
cart-yellow.svg
"""

Course.vue中的转跳链接:

 <router-link :to="'/course/detail/'+course.id">{{course.name}}</router-link>

二.课程详情接口

路由course/urls.py:

    from django.urls import path, re_path

    from . import views

    re_path('(?P<pk>d+)/', views.CourseRetrieveAPIView.as_view()),
    path('chapters/', views.ChapterListAPIView.as_view()),

视图views.py:

from rest_framework.generics import RetrieveAPIView
class CourseRetrieveAPIView(RetrieveAPIView):
    queryset = models.Course.objects.filter(is_delete=False, is_show=True)
    serializer_class = serializers.CourseModelSerializer


from .filters import ChapterFilterSet
class ChapterListAPIView(ListAPIView):
    queryset = models.CourseChapter.objects.filter(is_delete=False, is_show=True)
    serializer_class = serializers.CourseChapterModelSerializer

    filter_backends = [DjangoFilterBackend]
    # filter_fields = ('course',)
    filter_class = ChapterFilterSet

序列化类serializers.py:

class CourseModelSerializer(ModelSerializer):
    teacher = TeacherModelSerializer()
    class Meta:
        model = models.Course
        fields = (
            'id',
            'name',
            'course_img',
            'brief',
            'period',
            'attachment_path',
            'students',
            'sections',
            'pub_sections',
            'price',
            'teacher',
            'section_list',
            'level_name',
        )

class CourseSectionModelSerializer(ModelSerializer):
    class Meta:
        model = models.CourseSection
        fields = ('name', 'section_link', 'name', 'free_trail', 'orders')

class CourseChapterModelSerializer(ModelSerializer):
    coursesections = CourseSectionModelSerializer(many=True)
    class Meta:
        model = models.CourseChapter
        fields = ('course', 'chapter', 'name', 'summary', 'coursesections')

添加难度字段level_name   =>  models.py/class Course(BaseModel):

 

    @property
    def level_name(self):
        return self.get_level_display()

三.订单模块

 创建apps/order:

cd luffyapi/apps
python ../../manage.py startapp order

路由:

主:
path('order/', include('order.urls')),
子:
from django.urls import path
from . import views
urlpatterns = [
    path('pay/', views.PayAPIView.as_view()),
    path('success/', views.SuccessAPIView.as_view()),
]

models.py:

"""
订单：订单号、流水号、价格、用户
订单详情(自定义关系表)：订单、课程
"""

from django.db import models
from utils.model import BaseModel
from user.models import User
from course.models import Course


class Order(BaseModel):
    """订单模型"""
    status_choices = (
        (0, '未支付'),
        (1, '已支付'),
        (2, '已取消'),
        (3, '超时取消'),
    )
    pay_choices = (
        (1, '支付宝'),
        (2, '微信支付'),
    )
    subject = models.CharField(max_length=150, verbose_name="订单标题")
    total_amount = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="订单总价", default=0)
    out_trade_no = models.CharField(max_length=64, verbose_name="订单号", unique=True)
    trade_no = models.CharField(max_length=64, null=True, verbose_name="流水号")
    order_status = models.SmallIntegerField(choices=status_choices, default=0, verbose_name="订单状态")
    pay_type = models.SmallIntegerField(choices=pay_choices, default=1, verbose_name="支付方式")
    pay_time = models.DateTimeField(null=True, verbose_name="支付时间")
    user = models.ForeignKey(User, related_name='user_orders', on_delete=models.DO_NOTHING, db_constraint=False,
                             verbose_name="下单用户")

    # 多余字段
    orders = models.IntegerField(verbose_name='显示顺序', default=0)

    class Meta:
        db_table = "luffy_order"
        verbose_name = "订单记录"
        verbose_name_plural = "订单记录"

    def __str__(self):
        return "%s - ￥%s" % (self.subject, self.total_amount)

    @property
    def courses(self):
        data_list = []
        for item in self.order_courses.all():
            data_list.append({
                "id": item.id,
                "course_name": item.course.name,
                "real_price": item.real_price,
            })

        return data_list


class OrderDetail(BaseModel):
    """订单详情"""
    order = models.ForeignKey(Order, related_name='order_courses', on_delete=models.CASCADE, db_constraint=False,
                              verbose_name="订单")
    course = models.ForeignKey(Course, related_name='course_orders', on_delete=models.CASCADE, db_constraint=False,
                               verbose_name="课程")
    price = models.DecimalField(max_digits=6, decimal_places=2, verbose_name="课程原价")
    real_price = models.DecimalField(max_digits=6, decimal_places=2, verbose_name="课程实价")

    class Meta:
        db_table = "luffy_order_detail"
        verbose_name = "订单详情"
        verbose_name_plural = "订单详情"

    def __str__(self):
        return "%s订单(%s)" % (self.course.name, self.order.order_number)

注:数据库迁移

四.支付宝应用开发

# 1、在沙箱环境下实名认证：https://openhome.alipay.com/platform/appDaily.htm?tab=info

# 2、电脑网站支付API：https://docs.open.alipay.com/270/105898/

# 3、完成RSA密钥生成：https://docs.open.alipay.com/291/105971

# 4、在开发中心的沙箱应用下设置应用公钥：填入生成的公钥文件中的内容

# 5、Python支付宝开源框架：https://github.com/fzlee/alipay
# >: pip install python-alipay-sdk --upgrade

# 7、公钥私钥设置
"""
# alipay_public_key.pem
-----BEGIN PUBLIC KEY-----
支付宝公钥
-----END PUBLIC KEY-----

# app_private_key.pem
-----BEGIN RSA PRIVATE KEY-----
用户私钥
-----END RSA PRIVATE KEY-----
"""

# 8、支付宝链接
"""
开发：https://openapi.alipay.com/gateway.do
沙箱：https://openapi.alipaydev.com/gateway.do
"""

RSA:

支付宝公钥:

前台后台支付宝交互原理图:

沙箱测试账号:

五.alipay二次封装包

依赖

>: pip install python-alipay-sdk --upgrade

结构

libs
    ├── iPay                            # aliapy二次封装包
    │   ├── __init__.py                 # 包文件
    │   ├── keys                        # 密钥文件夹
    │   │   ├── alipay_public_key.pem   # 支付宝公钥
    │   │   └── app_private_key.pem     # 应用私钥
    └── └── settings.py                 # 应用配置  

setting.py

import os
# 支付宝应用id
APP_ID = '2016093000631831'
# 默认异步回调的地址，通常设置None就行
APP_NOTIFY_URL = None
# 应用私钥文件路径
APP_PRIVATE_KEY_PATH = os.path.join(os.path.dirname(__file__), 'keys', 'app_private_key.pem')
# 支付宝公钥文件路径
ALIPAY_PUBLIC_KEY_PATH = os.path.join(os.path.dirname(__file__), 'keys', 'alipay_public_key.pem')
# 签名方式
SIGN_TYPE = 'RSA2'
# 是否是测试环境
DEBUG = True

__init__.py

from alipay import AliPay
from .settings import *
# 对外提供,放到自己的dev配置文件中
# from .settings import RETURN_URL, NOTIFY_URL
# 对外提供支付对象
alipay = AliPay(
    appid=APP_ID,
    app_notify_url=APP_NOTIFY_URL,
    app_private_key_path=APP_PRIVATE_KEY_PATH,
    alipay_public_key_path=ALIPAY_PUBLIC_KEY_PATH,
    sign_type=SIGN_TYPE,
    debug=DEBUG
)

alipay_public_key.pem

-----BEGIN PUBLIC KEY-----
支付宝公钥
-----END PUBLIC KEY-----

app_private_key.pem

-----BEGIN RSA PRIVATE KEY-----
应用私钥
-----END RSA PRIVATE KEY-----

补充：dev.py

# 上线后必须换成官网地址
# 同步回调的接口(get)，前后台分离时一般设置前台页面url
RETURN_URL = 'http://127.0.0.1:8080/pay/success'
# 异步回调的接口(post)，一定设置为后台服务器接口
NOTIFY_URL = 'http://127.0.0.1:8000/order/success/'

六.订单接口

订单视图views.py:

# 1）生成订单
# 2）生成支付链接
# 3）第三方支付
# 4）修改订单状态

import time
from rest_framework.views import APIView
from utils.response import APIResponse
from libs.iPay import alipay
from . import authentications, serializers
from rest_framework.permissions import IsAuthenticated
from django.conf import settings
# 获取前台 商品名、价格，产生 订单、支付链接
class PayAPIView(APIView):
    authentication_classes = [authentications.JWTAuthentication]
    permission_classes = [IsAuthenticated]
    def post(self, request, *args, **kwargs):
        # 前台提供：商品名、总价、支付方式
        request_data = request.data
        # 后台产生：订单号、用户
        out_trade_no = '%d' % time.time() * 2
        request_data['out_trade_no'] = out_trade_no
        request_data['user'] = request.user.id

        # 反序列化数据，用于订单生成前的校验
        order_ser = serializers.OrderModelSerializer(data=request_data)
        if order_ser.is_valid():
            # 生成订单，订单默认状态为：未支付
            order = order_ser.save()
            # 支付链接的参数
            order_string = alipay.api_alipay_trade_page_pay(
                subject=order.subject,
                out_trade_no=order.out_trade_no,
                total_amount='%.2f' % order.total_amount,
                return_url=settings.RETURN_URL,
                notify_url=settings.NOTIFY_URL
            )
            # 形成支付链接：alipay._gateway根据字符环境DEBUG配置信息，决定是沙箱还是真实支付环境
            pay_url = '%s?%s' % (alipay._gateway, order_string)
            return APIResponse(0, 'ok', pay_url=pay_url)


        return APIResponse(1, 'no ok', results=order_ser.errors)

用户校验需要认证authentications.py:

import jwt
from rest_framework.exceptions import AuthenticationFailed
from rest_framework_jwt.authentication import jwt_decode_handler
from rest_framework_jwt.authentication import get_authorization_header
from rest_framework_jwt.authentication import BaseJSONWebTokenAuthentication

class JWTAuthentication(BaseJSONWebTokenAuthentication):
    def authenticate(self, request):
        # jwt_value = get_authorization_header(request)
        jwt_value = request.META.get('HTTP_AUTHORIZATION', b'')

        if not jwt_value:
            raise AuthenticationFailed('Authorization 字段是必须的')
        try:
            payload = jwt_decode_handler(jwt_value)
        except jwt.ExpiredSignature:
            raise AuthenticationFailed('签名过期')
        except jwt.InvalidTokenError:
            raise AuthenticationFailed('非法用户')
        user = self.authenticate_credentials(payload)

        return user, jwt_value

序列化类serializers.py:

from rest_framework import serializers
from . import models
class OrderModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Order
        fields = ('subject', 'total_amount', 'out_trade_no', 'pay_type', 'user')
        extra_kwargs = {
            'pay_type': {
                'required': True
            },
            'total_amount': {
                'required': True
            },
        }
        # 如果需要处理订单详情，前台一定要提供 课程主键(一个或多个)
        # 需要重写create方法：1）产生Order表对象  2）产生OrderDetail表对象 => 购物车逻辑
        # 需求可拓展：UserCourse user course

七.前台生成订单

Course.vue链接跳转支付:

  <span class="buy-now" @click="pay_course(course)">立即购买</span>


......

methods: {
            // 购买课程
            pay_course(course) {
                // 判断登录状态
                let token = this.$cookies.get('token');
                if (!token) {
                    this.$message.error('请先登录');
                    return
                }
                this.$axios({
                    url: this.$settings.base_url + '/order/pay/',
                    method: 'post',
                    data: {
                        'subject': course.name,
                        'total_amount': course.price,
                        // 如果有支付页面：1 支付宝  2 微信
                        'pay_type': 1,
                    },
                    headers: {
                        Authorization: token
                    }
                }).then(response => {
                    // console.log(response.data)
                    if (response.data.status == 0) {
                        location.href = response.data.pay_url;
                    } else {
                        this.$message({
                            message: '生成订单失败'
                        })
                    }
                }).catch(() => {
                    this.$message({
                        message: '生成订单失败'
                    })
                })
            },
......

八.支付完成后同步回调链接给前台渲染

 router.js:

import PaySuccess from './views/PaySuccess.vue'

Vue.use(Router);

 {
            path: '/pay/success',
            name: 'pay-success',
            component: PaySuccess
        },
  

PaySuccess.vue:

<template>
    <div class="pay-success">
        <Header/>
        <div class="main">
            <div class="title">
                <div class="success-tips">
                    <p class="tips">您已成功购买 1 门课程！</p>
                </div>
            </div>
            <div class="order-info">
                <p class="info"><b>订单号：</b><span>{{ result.out_trade_no }}</span></p>
                <p class="info"><b>交易号：</b><span>{{ result.trade_no }}</span></p>
                <p class="info"><b>付款时间：</b><span><span>{{ result.timestamp }}</span></span></p>
            </div>
            <div class="study">
                <span>立即学习</span>
            </div>
        </div>
        <Footer/>
    </div>
</template>

<script>
    import Header from "@/components/Header"
    import Footer from "@/components/Footer"

    export default {
        name: "Success",
        data() {
            return {
                result: {},
            };
        },
        created() {
            // 判断登录状态
            let token = this.$cookies.get('token');
            if (!token) {
                this.$message.error('非法请求');
                this.$router.go(-1)
            }


            localStorage.this_nav = '/';
            if (!location.search.length) return;
            let params = location.search.substring(1);
            let items = params.length ? params.split('&') : [];
            //逐个将每一项添加到args对象中
            for (let i = 0; i < items.length; i++) {
                let k_v = items[i].split('=');
                //解码操作，因为查询字符串经过编码的
                let k = decodeURIComponent(k_v[0]);
                let v = decodeURIComponent(k_v[1]);
                this.result[k] = v;
                // this.result[k_v[0]] = k_v[1];
            }
            // console.log(this.result);

            // 把地址栏上面的支付结果，转发给后端
            this.$axios({
                url: this.$settings.base_url + '/order/success/' + location.search,
                method: 'patch',
                headers: {
                    Authorization: token
                }
            }).then(response => {
                console.log(response.data);
            }).catch(() => {
                console.log('支付结果同步失败');
            })
        },
        components: {
            Header,
            Footer,
        }
    }
</script>

<style scoped>

    .main {
        padding: 60px 0;
        margin: 0 auto;
         1200px;
        background: #fff;
    }

    .main .title {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding: 25px 40px;
        border-bottom: 1px solid #f2f2f2;
    }

    .main .title .success-tips {
        box-sizing: border-box;
    }

    .title img {
        vertical-align: middle;
         60px;
        height: 60px;
        margin-right: 40px;
    }

    .title .success-tips {
        box-sizing: border-box;
    }

    .title .tips {
        font-size: 26px;
        color: #000;
    }


    .info span {
        color: #ec6730;
    }

    .order-info {
        padding: 25px 48px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f2f2f2;
    }

    .order-info p {
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .order-info p b {
        font-weight: 400;
        color: #9d9d9d;
        white-space: nowrap;
    }

    .study {
        padding: 25px 40px;
    }

    .study span {
        display: block;
         140px;
        height: 42px;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        background: #ffc210;
        border-radius: 6px;
        font-size: 16px;
        color: #fff;
    }
</style>

页面如图:

九.同步回调到后端

视图order/views.py:

from . import models
from utils.logging import logger
from rest_framework.response import Response
class SuccessAPIView(APIView):
    # 不能认证，别人支付宝异步回调就进不来了
    # authentication_classes = [authentications.JWTAuthentication]
    # permission_classes = [IsAuthenticated]
    def patch(self, request, *args, **kwargs):
        # 默认是QueryDict类型，不能使用pop方法
        request_data = request.query_params.dict()
        # 必须将 sign、sign_type(内部有安全处理) 从数据中取出，拿sign与剩下的数据进行校验
        sign = request_data.pop('sign')
        result = alipay.verify(request_data, sign)
        if result:  # 同步回调：修改订单状态
            try:
                out_trade_no = request_data.get('out_trade_no')
                order = models.Order.objects.get(out_trade_no=out_trade_no)
                if order.order_status != 1:
                    order.order_status = 1
                    order.save()
            except:
                pass
            return APIResponse(0, '支付成功')
        return APIResponse(1, '支付失败')

    # 支付宝异步回调
    def post(self, request, *args, **kwargs):
        # 默认是QueryDict类型，不能使用pop方法
        request_data = request.data.dict()
        # 必须将 sign、sign_type(内部有安全处理) 从数据中取出，拿sign与剩下的数据进行校验
        sign = request_data.pop('sign')
        result = alipay.verify(request_data, sign)
        # 异步回调：修改订单状态
        if result and request_data["trade_status"] in ("TRADE_SUCCESS", "TRADE_FINISHED" ):
            out_trade_no = request_data.get('out_trade_no')
            logger.critical('%s支付成功' % out_trade_no)
            try:
                order = models.Order.objects.get(out_trade_no=out_trade_no)
                if order.order_status != 1:
                    order.order_status = 1
                    order.save()
            except:
                pass
            # 支付宝八次异步通知，订单成功一定要返回 success
            return Response('success')
        return Response('failed')