eleventh_优惠券_发起支付宝支付
2. 优惠券
# 创建一个coupon子应用. cd luffy/apps python ../../manage.py startapp coupon # 注册子应用 INSTALLED_APPS = [ # 子应用 。。。 'coupon', ]
# 模型代码 from django.db import models from luffy.utils.models import BaseModel # Create your models here. class Coupon(BaseModel): """优惠券""" coupon_choices = ( (0, '折扣优惠'), (1, '减免优惠') ) name = models.CharField(max_length=32, verbose_name="优惠券标题") coupon_type = models.SmallIntegerField(choices=coupon_choices, default=0, verbose_name="优惠券类型") timer = models.IntegerField(verbose_name="优惠券有效期", default=30, help_text="") condition = models.IntegerField(blank=True, default=0, verbose_name="满足使用优惠券的价格条件") sale = models.TextField(verbose_name="优惠公式", help_text=""" *号开头表示折扣价，例如*0.82表示八二折；<br> -号开头表示减免价,例如-10表示在总价基础上减免10元<br> """) class Meta: db_table = "ly_coupon" verbose_name="优惠券" verbose_name_plural="优惠券" def __str__(self): return "%s" % (self.name) from users.models import User class UserCoupon(BaseModel): user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="coupons", verbose_name="用户") coupon = models.ForeignKey(Coupon, on_delete=models.CASCADE, related_name="users", verbose_name="优惠券") start_time = models.DateTimeField(verbose_name="优惠策略的开始时间") is_use = models.BooleanField(default=False,verbose_name="优惠券是否使用过") class Meta: db_table = "ly_user_coupon" verbose_name = "用户的优惠券" verbose_name_plural = "用户的优惠券" def __str__(self): return "优惠券:%s,用户:%s" % (self.coupon.name, self.user.username)
# 数据迁移 cd ../../ python manage.py makemigrations python manage.py migrate # 注册到xadmin，添加测试数据[1.添加优惠券，给用户发放优惠券] import xadmin from .models import Coupon class CouponModelAdmin(object): """优惠券模型管理类""" list_display = ["name","coupon_type","timer"] xadmin.site.register(Coupon, CouponModelAdmin) from .models import UserCoupon class UserCouponModelAdmin(object): """我的优惠券模型管理类""" list_display = ["user","coupon","start_time","is_use"] xadmin.site.register(UserCoupon, UserCouponModelAdmin)
# 前端编写优惠券的样式代码： <template> <div class="cart"> <Header/> <div class="cart-info"> <h3 class="cart-top">购物车结算 <span>共1门课程</span></h3> <div class="cart-title"> <el-row> <el-col :span="2"> </el-col> <el-col :span="10">课程</el-col> <el-col :span="8">有效期</el-col> <el-col :span="4">价格</el-col> </el-row> </div> <div class="cart-item" v-for="course in order_info.order_courses"> <el-row> <el-col :span="2" class="checkbox"> </el-col> <el-col :span="10" class="course-info"> <img style="float: left;" :src="$settings.Host+course.course_img" alt=""> <span class="course_name"> <span>{{course.course_name}}</span><br> <span class="discount_name">{{course.discount_name}}</span> </span> </el-col> <el-col :span="8" class="lh"><span>{{course.expire_text}}</span></el-col> <el-col :span="4"> <div class="course-price"> <p class="real_price">¥{{course.real_price}}</p> <span class="original_price">原价: ¥{{course.price}}</span> </div> </el-col> </el-row> </div> <div> <div class="coupon"> <div id="accordion"> <div class="coupon-box"> <div class="coupon-title"> <span class="select-coupon">使用优惠劵：</span> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="width: 20px; height: 20px" class="collapsed" aria-expanded="false"> <img class="sign" src="../../static/img/12.png" width="20" height="20" alt=""></a> <span class="coupon-num">有0张可用</span> </div> <p class="sum-price-wrap" style="margin-right: 45px">商品总金额：<span class="sum-price">{{order_info.total_price}}元</span></p> </div> <div style="text-align: left;" id="collapseOne" class="panel-collapse out collapse" aria-expanded="false"> <ul class="coupon-list" style=""> <li class="coupon-item"> <span>优惠券</span> <span>￥10元</span> <span>开始使用时间: 2019-10-01</span> </li> <li class="coupon-item"> <span>优惠券</span> <span>￥10元</span> <span>开始使用时间: 2019-10-01</span> </li> </ul> <div style="text-align: center; width: 100%; padding: 50px 0px; align-items: center; justify-content: center; border-bottom: 1px solid rgb(232, 232, 232);"> <span style="font-size: 16px; color: #9b9b9b">暂无可用优惠券</span> </div> </div> </div> <div style="height: 30px; margin-top: 40px; display: flex; align-items: center; justify-content: flex-end"> <input type="checkbox" class="ok" id="color-input-red"> <label for="color-input-red"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjAgMCAxMSA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OS4zICg1MTE2NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+5Yu+6YCJPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IumAgumFjU3pobUyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5o+Q5Lqk6K6i5Y2VIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzM4LjAwMDAwMCwgLTQyMi4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94LUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzMi4wMDAwMDAsIDQxNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMC4wNzc0NjQ3LDEwLjgyMTM3MSBMMTUuMzYwNDQ5NCwxNi4xMDQzNTU3IEMxNS41NTU1OTAyLDE2LjI5OTQ5NjUgMTUuNTU2NDcwOCwxNi42MTUwMDE2IDE1LjM1NTgxMDIsMTYuODE1NjYyMSBMMTQuOTQwMzg1LDE3LjIzMTA4NzQgQzE0Ljc0MjY4MjEsMTcuNDI4NzkwMyAxNC40Mjg3Nzc4LDE3LjQzNTQyNTggMTQuMjI5MDc4NSwxNy4yMzU3MjY1IEw4LjE4NzExODU4LDExLjE5Mzc2NjYgQzguMDc5MzUwNDgsMTEuMDg1OTk4NSA4LjAzMDgyOTYyLDEwLjk0MTUyMDYgOC4wNDI3ODIzNCwxMC43OTk5NDk3IEM4LjA0MjQ1NjUsMTAuNjcyNTEyOSA4LjA4OTMwMDA2LDEwLjU0Njc5MzkgOC4xODE0NjU5OCwxMC40NTQ2MjggTDExLjI1MzU2ODcsNy4zODI1MjUzMyBDMTEuNDQ1NTg3Niw3LjE5MDUwNjM3IDExLjc1ODU2Miw3LjE5MjE1NjUyIDExLjk1OTIyMjYsNy4zOTI4MTcwNiBMMTIuMzc0NjQ3OCw3LjgwODI0MjI5IEMxMi41NzIzNTA3LDguMDA1OTQ1MjEgMTIuNTcwNzM3Myw4LjMyODA5ODM1IDEyLjM4NDkzOTUsOC41MTM4OTYxOCBMMTAuMDc3NDY0NywxMC44MjEzNzEgWiIgaWQ9IuWLvumAiSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEuNzczNzg0LCAxMi4zMTE0MjMpIHJvdGF0ZSgtOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTExLjc3Mzc4NCwgLTEyLjMxMTQyMykgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=" alt=""></label> <p class="discount-num" style="color:#9B9B9B">使用我的贝里</p> <p class="discount-num" style="margin-right: 45px"> <span style="display: none;">可用0个已抵扣 ￥0</span> </p> </div> <p class="sun-coupon-num" style="margin-right: 45px;margin-bottom:43px">优惠券抵扣：<span>0元</span></p> </div> </div> <div class="calc"> <el-row class="pay-row"> <el-col :span="4" class="pay-col"><span class="pay-text">支付方式：</span></el-col> <el-col :span="8"> <span class="alipay"><img src="../../static/img/alipay2.png" alt=""></span> <span class="alipay wechat"><img src="../../static/img/wechat.png" alt=""></span> </el-col> <el-col :span="8" class="count">实付款： <span>¥{{order_info.total_price}}</span></el-col> <el-col :span="4" class="cart-pay"><span @click="payhander">支付宝支付</span></el-col> </el-row> </div> </div> <Footer/> </div> </template> <script> 。。。。 </script> <style scoped> 。。。 .coupon-list{ overflow: hidden; } .coupon-item{ float: left; margin-left: 10px; margin-right: 10px; width: 200px; height: 120px; border: 1px solid #000; padding: 10px; } .coupon-item span{ display: block; font-size: 14px; } </style>
# 后端提供查询当前用户拥有的优惠券api接口 # 序列化器，代码： from rest_framework import serializers from .models import Coupon, UserCoupon class CouponModelSerializer(serializers.ModelSerializer): class Meta: model = Coupon fields = ("name","coupon_type","timer","condition","sale") class UserCouponModelSerializer(serializers.ModelSerializer): coupon = CouponModelSerializer() class Meta: model = UserCoupon fields = ("id","start_time","coupon") # 视图，代码： from rest_framework.generics import ListAPIView from rest_framework.permissions import IsAuthenticated from django_filters.rest_framework import DjangoFilterBackend from .models import UserCoupon from .serializers import UserCouponModelSerializer class UserCouponAPIVew(ListAPIView): """我的优惠券""" queryset = UserCoupon.objects.filter(is_show=True,is_delete=False,is_use=False) serializer_class = UserCouponModelSerializer permission_classes = [IsAuthenticated] filter_backends = [DjangoFilterBackend] ordering_fields = ('user_id',) # 子应用路由，代码： from django.urls import path from . import views urlpatterns = [ path(r"list/",views.UserCouponAPIVew.as_view()), ] # 总路由，代码： path('coupon/', include("coupon.urls")),
<template> <div class="cart"> <Header/> <div class="cart-info"> <h3 class="cart-top">购物车结算 <span>共1门课程</span></h3> <div class="cart-title"> <el-row> <el-col :span="2"> </el-col> <el-col :span="10">课程</el-col> <el-col :span="8">有效期</el-col> <el-col :span="4">价格</el-col> </el-row> </div> <div class="cart-item" v-for="course in order_info.order_courses"> <el-row> <el-col :span="2" class="checkbox"> </el-col> <el-col :span="10" class="course-info"> <img style="float: left;" :src="$settings.Host+course.course_img" alt=""> <span class="course_name"> <span>{{course.course_name}}</span><br> <span class="discount_name">{{course.discount_name}}</span> </span> </el-col> <el-col :span="8" class="lh"><span>{{course.expire_text}}</span></el-col> <el-col :span="4"> <div class="course-price"> <p class="real_price">¥{{course.real_price}}</p> <span class="original_price">原价: ¥{{course.price}}</span> </div> </el-col> </el-row> </div> <div> <div class="coupon"> <div id="accordion"> <div class="coupon-box"> <div class="coupon-title"> <span class="select-coupon">使用优惠劵：</span> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="width: 20px; height: 20px" class="collapsed" aria-expanded="false"> <img class="sign" src="../../static/img/12.png" width="20" height="20" alt=""></a> <span class="coupon-num">有0张可用</span> </div> <p class="sum-price-wrap" style="margin-right: 45px">商品总金额：<span class="sum-price">{{order_info.total_price}}元</span></p> </div> <div style="text-align: left;" id="collapseOne" class="panel-collapse out collapse" aria-expanded="false"> <ul class="coupon-list" v-if="coupon_list.length>0"> <li @click="use_coupon=item.id" v-for="item in coupon_list" class="coupon-item" :class="use_coupon==item.id?'coupon_selected':''"> <span>{{item.coupon.name}}</span> <span v-if="item.coupon.type==1">￥{{item.coupon.sale}}元</span> <span style="font-size: 12px;">开始使用时间: {{new Date(item.start_time).toLocaleString()}}</span> </li> </ul> <div v-else style="text-align: center; width: 100%; padding: 50px 0px; align-items: center; justify-content: center; border-bottom: 1px solid rgb(232, 232, 232);"> <span style="font-size: 16px; color: #9b9b9b">暂无可用优惠券</span> </div> </div> </div> <div style="height: 30px; margin-top: 40px; display: flex; align-items: center; justify-content: flex-end"> <input type="checkbox" class="ok" id="color-input-red"> <label for="color-input-red"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjAgMCAxMSA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OS4zICg1MTE2NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+5Yu+6YCJPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IumAgumFjU3pobUyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5o+Q5Lqk6K6i5Y2VIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzM4LjAwMDAwMCwgLTQyMi4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94LUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzMi4wMDAwMDAsIDQxNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMC4wNzc0NjQ3LDEwLjgyMTM3MSBMMTUuMzYwNDQ5NCwxNi4xMDQzNTU3IEMxNS41NTU1OTAyLDE2LjI5OTQ5NjUgMTUuNTU2NDcwOCwxNi42MTUwMDE2IDE1LjM1NTgxMDIsMTYuODE1NjYyMSBMMTQuOTQwMzg1LDE3LjIzMTA4NzQgQzE0Ljc0MjY4MjEsMTcuNDI4NzkwMyAxNC40Mjg3Nzc4LDE3LjQzNTQyNTggMTQuMjI5MDc4NSwxNy4yMzU3MjY1IEw4LjE4NzExODU4LDExLjE5Mzc2NjYgQzguMDc5MzUwNDgsMTEuMDg1OTk4NSA4LjAzMDgyOTYyLDEwLjk0MTUyMDYgOC4wNDI3ODIzNCwxMC43OTk5NDk3IEM4LjA0MjQ1NjUsMTAuNjcyNTEyOSA4LjA4OTMwMDA2LDEwLjU0Njc5MzkgOC4xODE0NjU5OCwxMC40NTQ2MjggTDExLjI1MzU2ODcsNy4zODI1MjUzMyBDMTEuNDQ1NTg3Niw3LjE5MDUwNjM3IDExLjc1ODU2Miw3LjE5MjE1NjUyIDExLjk1OTIyMjYsNy4zOTI4MTcwNiBMMTIuMzc0NjQ3OCw3LjgwODI0MjI5IEMxMi41NzIzNTA3LDguMDA1OTQ1MjEgMTIuNTcwNzM3Myw4LjMyODA5ODM1IDEyLjM4NDkzOTUsOC41MTM4OTYxOCBMMTAuMDc3NDY0NywxMC44MjEzNzEgWiIgaWQ9IuWLvumAiSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEuNzczNzg0LCAxMi4zMTE0MjMpIHJvdGF0ZSgtOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTExLjc3Mzc4NCwgLTEyLjMxMTQyMykgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=" alt=""></label> <p class="discount-num" style="color:#9B9B9B">使用我的贝里</p> <p class="discount-num" style="margin-right: 45px"> <span style="display: none;">可用0个已抵扣 ￥0</span> </p> </div> <p class="sun-coupon-num" style="margin-right: 45px;margin-bottom:43px">优惠券抵扣：<span>0元</span></p> </div> </div> <div class="calc"> <el-row class="pay-row"> <el-col :span="4" class="pay-col"><span class="pay-text">支付方式：</span></el-col> <el-col :span="8"> <span class="alipay"><img src="../../static/img/alipay2.png" alt=""></span> <span class="alipay wechat"><img src="../../static/img/wechat.png" alt=""></span> </el-col> <el-col :span="8" class="count">实付款： <span>¥{{order_info.real_price}}</span></el-col> <el-col :span="4" class="cart-pay"><span @click="payhander">支付宝支付</span></el-col> </el-row> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default { name:"Order", data(){ return { use_coupon: 0, order_info:{}, coupon_list:[], // 用于展示优惠券列表 coupon_list2:[],// 用于勾选优惠券功能 } }, components:{ Header, Footer, }, watch:{ use_coupon(coupon_id){ let data = this.coupon_list2[ coupon_id ]; let sale = parseFloat( data.coupon.sale.slice(1) ); if( data.coupon.coupon_type == 0 ){ // 折扣优惠券 this.order_info.real_price = this.order_info.total_price * sale; }else if(data.coupon.coupon_type == 1){ // 减免优惠券 this.order_info.real_price = this.order_info.total_price - sale; } this.order_info.real_price = this.order_info.real_price.toFixed(2); // 发送数据到后端,进行同步 } }, created(){ // 判断用户是否已经登录 let token = sessionStorage.token || localStorage.token; let _this = this; if(!token){ this.$alert("对不起,您尚未登录!请登录!","警告",{ callback(){ _this.$router.push("/login"); } }) } // 获取地址栏上面的订单号 let order_number = this.$route.params.order; // 发送请求获取数据 this.$axios.get(this.$settings.Host+`/orders/${order_number}/`,{ headers:{ // 注意下方的空格!!! "Authorization":"jwt " + token, }, }).then(response=>{ this.order_info = response.data; }).catch(error=>{ console.log(error.response); }); // 获取用户的优惠券 this.get_coupon_list() }, methods: { get_coupon_list(){ let user_id = localStorage.user_id || sessionStorage.user_id; let token = localStorage.token || sessionStorage.token; // 获取当前用户的优惠券 this.$axios.get(this.$settings.Host+"/coupon/list/",{ params:{ user_id, }, headers:{ // 注意下方的空格!!! "Authorization":"jwt " + token, }, }).then(response=>{ // 调整获取到优惠券列表,以优惠券ID作为下标 let data_list = []; response.data.forEach(row=>{ data_list[row.id] = row; }); this.coupon_list2= data_list; this.coupon_list = response.data; }).catch(error=>{ console.log(error.response); }) }, payhander(){ }, } } </script> <style scoped> .cart{ margin-top: 80px; } .cart-info{ overflow: hidden; width: 1200px; margin: auto; } .cart-top{ font-size: 18px; color: #666; margin: 25px 0; font-weight: normal; } .cart-top span{ font-size: 12px; color: #d0d0d0; display: inline-block; } .cart-title{ background: #F7F7F7; height: 70px; } .calc{ margin-top: 25px; margin-bottom: 40px; } .calc .count{ text-align: right; margin-right: 10px; vertical-align: middle; } .calc .count span{ font-size: 36px; color: #333; } .calc .cart-pay{ margin-top: 5px; width: 110px; height: 38px; outline: none; border: none; color: #fff; line-height: 38px; background: #ffc210; border-radius: 4px; font-size: 16px; text-align: center; cursor: pointer; } .cart-item{ height: 120px; /*line-height: 120px;*/ } .cart-item .lh{ line-height: 120px; } .course-info img{ width: 175px; height: 115px; margin-right: 35px; vertical-align: middle; } .course-price{ margin-top: 40px; } .alipay{ display: inline-block; height: 48px; } .alipay img{ height: 100%; width:auto; } .pay-text{ display: block; text-align: right; height: 100%; line-height: 100%; vertical-align: middle; margin-top: 20px; } .real_price{ color: #333; margin-bottom: 10px; } .original_price{ color: #9b9b9b; letter-spacing: .36px; text-decoration: line-through; } .coupon{ margin-top: 30px; } .coupon-box{ text-align: left; display: flex; padding-bottom: 22px; padding-left:30px; border-bottom: 1px solid #e8e8e8; } .coupon-title{ display: flex; } .sum-price-wrap{ display: inline-block; margin-left: auto; font-size: 16px; color: #4a4a4a; } .discount_name{ color: #ffc210; margin-top: 24px; font-size: 14px; letter-spacing: .32px; } .course_name{ margin-top: 40px; display: block; } .coupon-list{ overflow: hidden; } .coupon-item{ float: left; margin-left: 10px; margin-right: 10px; width: 200px; height: 60px; border: 1px solid #000; padding: 10px; } .coupon-item span{ display: block; font-size: 14px; } .coupon_selected{ border-color: red; color: indianred; } </style>
3. 发起支付宝支付
沙箱环境
-
-
沙箱环境跟真实环境是分开的，项目上线时必须切换对应的配置服务器地址和开发者ID和密钥。
-
沙箱应用开发文档：<https://docs.open.alipay.com
-
沙箱账号：https://openhome.alipay.com/platform/appDaily.htm?tab=account
真实的支付宝网关: https://openapi.alipay.com/gateway.do
沙箱的支付宝网关: https://openapi.alipaydev.com/gateway.do
cd luffy/apps
python ../../manage.py startapp payments
# 注册子应用 INSTALLED_APPS = [ 。。。。 'payments', ]
应用公钥复制粘贴到支付宝网站页面中.
在payments应用中新建keys目录，用来保存秘钥文件。
将应用私钥文件app_private_key.pem复制到payment/keys目录下。
-----BEGIN RSA PRIVATE KEY-----
私钥
-----END RSA PRIVATE KEY-----
将支付宝的公钥内容复制到alipay_public_key.pem文件中
-----BEGIN PUBLIC KEY-----
公钥
-----END PUBLIC KEY-----
SDK：https://docs.open.alipay.com/270/106291/
python版本的支付宝SDK文档：https://github.com/fzlee/alipay/blob/master/README.zh-hans.md
# 安装命令： pip install python-alipay-sdk --upgrade
from rest_framework.views import APIView from rest_framework.permissions import IsAuthenticated from rest_framework.response import Response from rest_framework import status from orders.models import Order from coupon.models import UserCoupon from alipay import AliPay from django.conf import settings import os from django.db import transaction from decimal import Decimal class AlipayAPIView(APIView): # permission_classes = [IsAuthenticated] def get(self,request): """生成支付宝支付地址""" # 接受参数[优惠券,订单号] coupon_id = request.query_params.get("coupon_id") order_number = request.query_params.get("order_number") try: order = Order.objects.get(order_number=order_number) except Order.DoesNotExist: return Response({"message":"对不起,当前订单信息不存在!无法进行支付"},status=status.HTTP_400_BAD_REQUEST) if coupon_id != None and coupon_id != "0": with transaction.atomic(): save_id = transaction.savepoint() # 重新计算订单实际支付价格 try: user_coupon = UserCoupon.objects.get(pk=coupon_id) except UserCoupon.DoesNotExist: return Response({"message": "对不起,当前订单使用的优惠券不存在!无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) if user_coupon.coupon.coupon_type == 0: """折扣优惠""" order.real_price = order.total_price * Decimal(user_coupon.coupon.sale[1:]) elif user_coupon.coupon.coupon_type == 1: order.real_price = order.total_price - Decimal(user_coupon.coupon.sale[1:]) else: return Response({"message": "当前优惠券无法使用!无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) try: # 经过上面的计算,保存实付价格和使用的优惠券 order.use_coupon = True order.coupon = user_coupon.id order.save() # 上面的优惠券已经被使用了,所以我们需要修改优惠券的状态 user_coupon.is_use = True user_coupon.save() except: transaction.savepoint_rollback(save_id) return Response({"message": "系统异常,无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) # 构造支付宝支付链接地址 alipay = AliPay( appid=settings.ALIPAY_APPID, app_notify_url=settings.APP_NOTIFY_URL, # 默认回调url app_private_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/app_private_key.pem"), # 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥, alipay_public_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/alipay_public_key.pem"), sign_type="RSA2", # RSA 或者 RSA2 debug=settings.ALIPAY_DEBUG ) order_string = alipay.api_alipay_trade_page_pay( out_trade_no=order.order_number, total_amount= "%.2f" % order.real_price, subject=order.order_title, return_url=settings.ALIPAY_RETURN_URL, notify_url=settings.ALIPAY_NOTIFY_URL, ) url = settings.APIPAY_GATEWAY + "?" + order_string return Response({"message":"发起支付成功","url":url})
# 支付宝 ALIPAY_APP_ID="2016091600523592" # 应用ID APLIPAY_APP_NOTIFY_URL = None # 应用回调地址[支付成功以后,支付宝返回结果到哪一个地址下面] ALIPAY_DEBUG = True # APIPAY_GATEWAY="https://openapi.alipay.com/gateway.do" APIPAY_GATEWAY="https://openapi.alipaydev.com/gateway.do" ALIPAY_RETURN_URL = "http://127.0.0.1:8080/success" ALIPAY_NOTIFY_URL = "http://127.0.0.1:8080/success"
<template> <div class="cart"> <Header/> <div class="cart-info"> <h3 class="cart-top">购物车结算 <span>共1门课程</span></h3> <div class="cart-title"> <el-row> <el-col :span="2"> </el-col> <el-col :span="10">课程</el-col> <el-col :span="8">有效期</el-col> <el-col :span="4">价格</el-col> </el-row> </div> <div class="cart-item" v-for="course in order_info.order_courses"> <el-row> <el-col :span="2" class="checkbox"> </el-col> <el-col :span="10" class="course-info"> <img style="float: left;" :src="$settings.Host+course.course_img" alt=""> <span class="course_name"> <span>{{course.course_name}}</span><br> <span class="discount_name">{{course.discount_name}}</span> </span> </el-col> <el-col :span="8" class="lh"><span>{{course.expire_text}}</span></el-col> <el-col :span="4"> <div class="course-price"> <p class="real_price">¥{{course.real_price}}</p> <span class="original_price">原价: ¥{{course.price}}</span> </div> </el-col> </el-row> </div> <div> <div class="coupon"> <div id="accordion"> <div class="coupon-box"> <div class="coupon-title"> <span class="select-coupon">使用优惠劵：</span> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="width: 20px; height: 20px" class="collapsed" aria-expanded="false"> <img class="sign" src="../../static/img/12.png" width="20" height="20" alt=""></a> <span class="coupon-num">有0张可用</span> </div> <p class="sum-price-wrap" style="margin-right: 45px">商品总金额：<span class="sum-price">{{order_info.total_price}}元</span></p> </div> <div style="text-align: left;" id="collapseOne" class="panel-collapse out collapse" aria-expanded="false"> <ul class="coupon-list" v-if="coupon_list.length>0"> <li @click="use_coupon=item.id" v-for="item in coupon_list" class="coupon-item" :class="use_coupon==item.id?'coupon_selected':''"> <span>{{item.coupon.name}}</span> <span v-if="item.coupon.type==1">￥{{item.coupon.sale}}元</span> <span style="font-size: 12px;">开始使用时间: {{new Date(item.start_time).toLocaleString()}}</span> </li> </ul> <div v-else style="text-align: center; width: 100%; padding: 50px 0px; align-items: center; justify-content: center; border-bottom: 1px solid rgb(232, 232, 232);"> <span style="font-size: 16px; color: #9b9b9b">暂无可用优惠券</span> </div> </div> </div> <div style="height: 30px; margin-top: 40px; display: flex; align-items: center; justify-content: flex-end"> <input type="checkbox" class="ok" id="color-input-red"> <label for="color-input-red"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjAgMCAxMSA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OS4zICg1MTE2NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+5Yu+6YCJPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IumAgumFjU3pobUyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5o+Q5Lqk6K6i5Y2VIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzM4LjAwMDAwMCwgLTQyMi4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94LUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzMi4wMDAwMDAsIDQxNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMC4wNzc0NjQ3LDEwLjgyMTM3MSBMMTUuMzYwNDQ5NCwxNi4xMDQzNTU3IEMxNS41NTU1OTAyLDE2LjI5OTQ5NjUgMTUuNTU2NDcwOCwxNi42MTUwMDE2IDE1LjM1NTgxMDIsMTYuODE1NjYyMSBMMTQuOTQwMzg1LDE3LjIzMTA4NzQgQzE0Ljc0MjY4MjEsMTcuNDI4NzkwMyAxNC40Mjg3Nzc4LDE3LjQzNTQyNTggMTQuMjI5MDc4NSwxNy4yMzU3MjY1IEw4LjE4NzExODU4LDExLjE5Mzc2NjYgQzguMDc5MzUwNDgsMTEuMDg1OTk4NSA4LjAzMDgyOTYyLDEwLjk0MTUyMDYgOC4wNDI3ODIzNCwxMC43OTk5NDk3IEM4LjA0MjQ1NjUsMTAuNjcyNTEyOSA4LjA4OTMwMDA2LDEwLjU0Njc5MzkgOC4xODE0NjU5OCwxMC40NTQ2MjggTDExLjI1MzU2ODcsNy4zODI1MjUzMyBDMTEuNDQ1NTg3Niw3LjE5MDUwNjM3IDExLjc1ODU2Miw3LjE5MjE1NjUyIDExLjk1OTIyMjYsNy4zOTI4MTcwNiBMMTIuMzc0NjQ3OCw3LjgwODI0MjI5IEMxMi41NzIzNTA3LDguMDA1OTQ1MjEgMTIuNTcwNzM3Myw4LjMyODA5ODM1IDEyLjM4NDkzOTUsOC41MTM4OTYxOCBMMTAuMDc3NDY0NywxMC44MjEzNzEgWiIgaWQ9IuWLvumAiSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEuNzczNzg0LCAxMi4zMTE0MjMpIHJvdGF0ZSgtOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTExLjc3Mzc4NCwgLTEyLjMxMTQyMykgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=" alt=""></label> <p class="discount-num" style="color:#9B9B9B">使用我的贝里</p> <p class="discount-num" style="margin-right: 45px"> <span style="display: none;">可用0个已抵扣 ￥0</span> </p> </div> <p class="sun-coupon-num" style="margin-right: 45px;margin-bottom:43px">优惠券抵扣：<span>0元</span></p> </div> </div> <div class="calc"> <el-row class="pay-row"> <el-col :span="4" class="pay-col"><span class="pay-text">支付方式：</span></el-col> <el-col :span="8"> <span class="alipay"><img src="../../static/img/alipay2.png" alt=""></span> <span class="alipay wechat"><img src="../../static/img/wechat.png" alt=""></span> </el-col> <el-col :span="8" class="count">实付款： <span>¥{{order_info.real_price}}</span></el-col> <el-col :span="4" class="cart-pay"><span @click="payhander">支付宝支付</span></el-col> </el-row> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default { name:"Order", data(){ return { use_coupon: 0, // 使用的优惠券ID order_info:{}, coupon_list:[], // 用于展示优惠券列表 coupon_list2:[],// 用于勾选优惠券功能 } }, components:{ Header, Footer, }, watch:{ use_coupon(coupon_id){ let data = this.coupon_list2[ coupon_id ]; let sale = parseFloat( data.coupon.sale.slice(1) ); if( data.coupon.coupon_type == 0 ){ // 折扣优惠券 this.order_info.real_price = this.order_info.total_price * sale; }else if(data.coupon.coupon_type == 1){ // 减免优惠券 this.order_info.real_price = this.order_info.total_price - sale; } this.order_info.real_price = this.order_info.real_price.toFixed(2); // 发送数据到后端,进行同步 } }, created(){ // 判断用户是否已经登录 let token = sessionStorage.token || localStorage.token; let _this = this; if(!token){ this.$alert("对不起,您尚未登录!请登录!","警告",{ callback(){ _this.$router.push("/login"); } }) } // 获取地址栏上面的订单号 let order_number = this.$route.params.order; // 发送请求获取数据 this.$axios.get(this.$settings.Host+`/orders/${order_number}/`,{ headers:{ // 注意下方的空格!!! "Authorization":"jwt " + token, }, }).then(response=>{ this.order_info = response.data; }).catch(error=>{ console.log(error.response); }); // 获取用户的优惠券 this.get_coupon_list() }, methods: { get_coupon_list(){ let user_id = localStorage.user_id || sessionStorage.user_id; let token = localStorage.token || sessionStorage.token; // 获取当前用户的优惠券 this.$axios.get(this.$settings.Host+"/coupon/list/",{ params:{ user_id, }, headers:{ // 注意下方的空格!!! "Authorization":"jwt " + token, }, }).then(response=>{ // 调整获取到优惠券列表,以优惠券ID作为下标 let data_list = []; response.data.forEach(row=>{ data_list[row.id] = row; }); this.coupon_list2= data_list; this.coupon_list = response.data; }).catch(error=>{ console.log(error.response); }) }, payhander(){ this.$confirm("您即将跳转到支付宝页面进行订单支付?","提示").then(()=>{ let token = localStorage.token || sessionStorage.token; // 获取订单号 let order_number = this.$route.params.order; // 发起支付请求 this.$axios.get(this.$settings.Host+"/payments/alipay/url/",{ params:{ order_number: order_number, coupon_id: this.use_coupon, }, headers:{ // 注意下方的空格!!! "Authorization":"jwt " + token, }, }).then(response=>{ let url = response.data.url; console.log(url); // 页面跳转 location.assign( url ); }).catch(error=>{ console.log(error.response) }) }); }, } } </script> <style scoped> .cart{ margin-top: 80px; } .cart-info{ overflow: hidden; width: 1200px; margin: auto; } .cart-top{ font-size: 18px; color: #666; margin: 25px 0; font-weight: normal; } .cart-top span{ font-size: 12px; color: #d0d0d0; display: inline-block; } .cart-title{ background: #F7F7F7; height: 70px; } .calc{ margin-top: 25px; margin-bottom: 40px; } .calc .count{ text-align: right; margin-right: 10px; vertical-align: middle; } .calc .count span{ font-size: 36px; color: #333; } .calc .cart-pay{ margin-top: 5px; width: 110px; height: 38px; outline: none; border: none; color: #fff; line-height: 38px; background: #ffc210; border-radius: 4px; font-size: 16px; text-align: center; cursor: pointer; } .cart-item{ height: 120px; /*line-height: 120px;*/ } .cart-item .lh{ line-height: 120px; } .course-info img{ width: 175px; height: 115px; margin-right: 35px; vertical-align: middle; } .course-price{ margin-top: 40px; } .alipay{ display: inline-block; height: 48px; } .alipay img{ height: 100%; width:auto; } .pay-text{ display: block; text-align: right; height: 100%; line-height: 100%; vertical-align: middle; margin-top: 20px; } .real_price{ color: #333; margin-bottom: 10px; } .original_price{ color: #9b9b9b; letter-spacing: .36px; text-decoration: line-through; } .coupon{ margin-top: 30px; } .coupon-box{ text-align: left; display: flex; padding-bottom: 22px; padding-left:30px; border-bottom: 1px solid #e8e8e8; } .coupon-title{ display: flex; } .sum-price-wrap{ display: inline-block; margin-left: auto; font-size: 16px; color: #4a4a4a; } .discount_name{ color: #ffc210; margin-top: 24px; font-size: 14px; letter-spacing: .32px; } .course_name{ margin-top: 40px; display: block; } .coupon-list{ overflow: hidden; } .coupon-item{ float: left; margin-left: 10px; margin-right: 10px; width: 200px; height: 60px; border: 1px solid #000; padding: 10px; } .coupon-item span{ display: block; font-size: 14px; } .coupon_selected{ border-color: red; color: indianred; } </style>
<template> <div class="success"> <Header :current_page="current_page"/> <div class="main"> <div class="title"> <img src="../../static/images/right.svg" alt=""> <div class="success-tips"> <p class="tips1">您已成功购买 1 门课程！</p> <p class="tips2">你还可以加入QQ群 <span>747556033</span> 学习交流</p> </div> </div> <div class="order-info"> <p class="info1"><b>付款时间：</b><span>2019/04/02 10:27</span></p> <p class="info2"><b>付款金额：</b><span >0</span></p> <p class="info3"><b>课程信息：</b><span><span>《Pycharm使用秘籍》</span></span></p> </div> <div class="wechat-code"> <img src="../../static/images/server.cf99f78.png" alt="" class="er"> <p><img src="../../static/images/tan.svg" alt="">重要！微信扫码关注获得学习通知&课程更新提醒！否则将严重影响学习进度和课程体验！</p> </div> <div class="study"> <span>立即学习</span> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default{ name:"Success", data(){ return { current_page:0, }; }, components:{ Header, Footer, } } </script> <style scoped> .success{ padding-top: 80px; } .main{ height: 100%; padding-top: 25px; padding-bottom: 25px; margin: 0 auto; width: 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; width: 60px; height: 60px; margin-right: 40px; } .title .success-tips{ box-sizing: border-box; } .title .tips1{ font-size: 22px; color: #000; } .title .tips2{ font-size: 16px; color: #4a4a4a; letter-spacing: 0; text-align: center; margin-top: 10px; } .title .tips2 span{ color: #ec6730; } .order-info{ padding: 25px 48px; padding-bottom: 15px; border-bottom: 1px solid #f2f2f2; } .order-info p{ font-family: PingFangSC-Regular; display: -ms-flexbox; display: flex; margin-bottom: 10px; font-size: 16px; } .order-info p b{ font-weight: 400; color: #9d9d9d; white-space: nowrap; } .wechat-code{ display: flex; -ms-flex-align: center; align-items: center; padding: 25px 40px; border-bottom: 1px solid #f2f2f2; } .wechat-code>img{ width: 100px; height: 100px; margin-right: 15px; } .wechat-code p{ font-family: PingFangSC-Regular; font-size: 14px; color: #d0021b; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .wechat-code p>img{ width: 16px; height: 16px; margin-right: 10px; } .study{ padding: 25px 40px; } .study span{ display: block; width: 140px; height: 42px; text-align: center; line-height: 42px; cursor: pointer; background: #ffc210; border-radius: 6px; font-family: PingFangSC-Regular; font-size: 16px; color: #fff; } </style>
# 支付宝会返回的参数如下列表： http://www.luffycity.cn:8080? charset=utf-8& out_trade_no=2019040217080000000010976& method=alipay.trade.page.pay.return& total_amount=1206.44& sign=XKJG5826fH%2F9%2B3jCWw2ODjlc%2FuGLfqmr5RnimSAqrh%2B5bFkWcbLDh5V6VYtMqCpwnYp3FuGPqEeUeRO6WK62Qz0Q5nQGOA394IdxPfTOzry7PXuwYf41PCbDq53yg7vCYrobz4Tt8uajeADJLJwIsL%2F%2B88vbDEISUDUujL4442kl3oLh3EDD8DxZc2LLsv1Z%2FEFGJMfcTA47A4T7qmjB%2BbLKJetZZBISdt9RDL0q8A%2BAfb8B3Ux1nq%2F0EiNGiwIlWC1pvUCHK2UXMJW3kmgU9P9Zoujrj4ER28oieQt6Rt4gQXeah5uYtAMkftWfZpiyu%2FjUkr6iRx%2B4mP5IFz4Uew%3D%3D& trade_no=2019040222001439881000005802& auth_app_id=2016091600523592& version=1.0& app_id=2016091600523592& sign_type=RSA2& seller_id=2088102175868026& timestamp=2019-04-02%2017%3A13%3A15
# 后端完成 支付宝支付结果的处理并更新订单和购买记录 # users/models.py，模型代码： from luffy.utils.models import BaseModel from courses.models import Course class UserCourse(BaseModel): pay_choices = ( (0, '支付宝'), (1, '微信支付'), (2, '免费活动'), (3, '活动赠品'), (4, '系统赠送'), ) user = models.ForeignKey(User, related_name='user_courses', on_delete=models.DO_NOTHING,verbose_name="用户") course = models.ForeignKey(Course, related_name='course_users', on_delete=models.DO_NOTHING, verbose_name="课程") buy_number = models.CharField(max_length=128, null=True, verbose_name="账单号") buy_type = models.SmallIntegerField(choices=pay_choices, default=0, verbose_name="购买方式") pay_time = models.DateTimeField(null=True, verbose_name="购买时间") out_time = models.DateTimeField(null=True, verbose_name="过期时间") class Meta: db_table = 'ly_user_course' verbose_name = '课程购买记录' verbose_name_plural = verbose_name # payments/views.py，视图代码： from rest_framework.views import APIView from rest_framework.permissions import IsAuthenticated from rest_framework.response import Response from rest_framework import status from orders.models import Order from coupon.models import UserCoupon from alipay import AliPay from django.conf import settings import os from django.db import transaction from decimal import Decimal import logging log = logging.getLogger("django") from datetime import datetime from users.models import UserCourse class AlipayAPIView(APIView): # permission_classes = [IsAuthenticated] def get(self,request): """生成支付宝支付地址""" # 接受参数[优惠券,订单号] coupon_id = request.query_params.get("coupon_id") order_number = request.query_params.get("order_number") try: order = Order.objects.get(order_number=order_number) except Order.DoesNotExist: return Response({"message":"对不起,当前订单信息不存在!无法进行支付"},status=status.HTTP_400_BAD_REQUEST) if coupon_id != None and coupon_id != "0": with transaction.atomic(): save_id = transaction.savepoint() # 重新计算订单实际支付价格 try: user_coupon = UserCoupon.objects.get(pk=coupon_id) except UserCoupon.DoesNotExist: return Response({"message": "对不起,当前订单使用的优惠券不存在!无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) if user_coupon.coupon.coupon_type == 0: """折扣优惠""" order.real_price = order.total_price * Decimal(user_coupon.coupon.sale[1:]) elif user_coupon.coupon.coupon_type == 1: order.real_price = order.total_price - Decimal(user_coupon.coupon.sale[1:]) else: return Response({"message": "当前优惠券无法使用!无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) try: # 经过上面的计算,保存实付价格和使用的优惠券 order.use_coupon = True order.coupon = user_coupon.id order.save() # 上面的优惠券已经被使用了,所以我们需要修改优惠券的状态 user_coupon.is_use = True user_coupon.save() except: transaction.savepoint_rollback(save_id) return Response({"message": "系统异常,无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) # 构造支付宝支付链接地址 alipay = AliPay( appid=settings.ALIPAY_APPID, app_notify_url=settings.APP_NOTIFY_URL, # 默认回调url app_private_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/app_private_key.pem"), # 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥, alipay_public_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/alipay_public_key.pem"), sign_type="RSA2", # RSA 或者 RSA2 debug=settings.ALIPAY_DEBUG ) order_string = alipay.api_alipay_trade_page_pay( out_trade_no=order.order_number, total_amount= "%.2f" % order.real_price, subject=order.order_title, return_url=settings.ALIPAY_RETURN_URL, notify_url=settings.ALIPAY_NOTIFY_URL, ) url = settings.APIPAY_GATEWAY + "?" + order_string return Response({"message":"发起支付成功","url":url}) class AlipayResult(APIView): def get(self,request): # 获取支付结果的所有参数,并转换成字典 data = request.query_params.dict() # 在字典中移除sign签名 signature = data.pop("sign") alipay = AliPay( appid=settings.ALIPAY_APPID, app_notify_url=settings.APP_NOTIFY_URL, # 默认回调url app_private_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/app_private_key.pem"), # 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥, alipay_public_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/alipay_public_key.pem"), sign_type="RSA2", # RSA 或者 RSA2 debug=settings.ALIPAY_DEBUG ) success = alipay.verify(data, signature) if success: # 支付成功! # 更新订单 order_number = data.get("out_trade_no") try: order = Order.objects.get( order_number=order_number ) except Order.DoesNotExist: log.error("订单号:%s不存在!" % order_number ) return Response({"message": "无效的订单号"},status=status.HTTP_500_INTERNAL_SERVER_ERROR) with transaction.atomic(): save_id = transaction.savepoint() try: order.order_status = 1 order.pay_time = datetime.now() # order.pay_time = data.get("timestamp") order.save() # 课程与用户之间添加一条购买记录 detail_list = order.order_courses.all() course_list = [] for detail in detail_list: if detail.expire=='-1': out_time = "2099-01-01 00:00:00" else: out_time = datetime.now().timestamp() + detail.expire * 86400 # 日期时间对象 = fromtimestamp(数值时间戳) out_time = datetime.fromtimestamp(out_time) out_time = out_time.strftime("%Y-%m-%d %H:%M:%S") UserCourse.objects.create( user=order.user, course=detail.course, buy_number=data.get("trade_no"), buy_type=0, pay_time=data.get("timestamp"), out_time=out_time ) course_list.append(detail.course.name) return Response({"message":{ "pay_time": order.pay_time.strftime("%Y-%m-%d %H:%M:%S"), "real_price": order.real_price, "course_list":course_list, }}) except: log.error("修改订单和购买记录发生异常!") transaction.savepoint_rollback(save_id) return Response({"message":"系统异常!"},status=status.HTTP_500_INTERNAL_SERVER_ERROR) # payments/urls.py，路由代码： from django.urls import path,re_path from . import views urlpatterns = [ path("alipay/url/",views.AlipayAPIView.as_view() ), path("alipay/result/",views.AlipayResult.as_view() ), ]
<template> <div class="success"> <Header/> <div class="main"> <div class="title"> <!-- <img src="../../static/images/right.svg" alt="">--> <div class="success-tips"> <p class="tips1">您已成功购买 {{order_info.course_list.length}} 门课程！</p> <p class="tips2">你还可以加入QQ群 <span>747556033</span> 学习交流</p> </div> </div> <div class="order-info"> <p class="info1"><b>付款时间：</b><span>{{order_info.pay_time}}</span></p> <p class="info2"><b>付款金额：</b><span >￥{{order_info.real_price}}元</span></p> <p class="info3"><b>课程信息：</b><span><span>{{order_info.course_list2}}</span></span></p> </div> <div class="wechat-code"> <!-- <img src="../../static/images/server.cf99f78.png" alt="" class="er">--> <!-- <p><img src="../../static/images/tan.svg" alt="">重要！微信扫码关注获得学习通知&课程更新提醒！否则将严重影响学习进度和课程体验！</p>--> </div> <div class="study"> <span>立即学习</span> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default{ name:"Success", data(){ return { order_info:{ course_list:[] } }; }, created(){ let token = localStorage.token || sessionStorage.token; if(!token){ this.$alert("对不起,您尚未登录!请登录!","警告",{ callback(){ _this.$router.push("/login"); } }) } // 转发支付结果到后端 this.$axios.get(this.$settings.Host+"/payments/alipay/result/"+location.search,{ headers:{ // 注意下方的空格!!! "Authorization":"jwt " + token, }, }).then(response=>{ this.order_info = response.data.message; this.order_info.course_list2 = ""; this.order_info.course_list.forEach(course=>{ this.order_info.course_list2+=`《${course}》`; }) }).catch(error=>{ console.log(error.response); }) }, components:{ Header, Footer, } } </script> <style scoped> .success{ padding-top: 80px; } .main{ height: 100%; padding-top: 25px; padding-bottom: 25px; margin: 0 auto; width: 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; width: 60px; height: 60px; margin-right: 40px; } .title .success-tips{ box-sizing: border-box; } .title .tips1{ font-size: 22px; color: #000; } .title .tips2{ font-size: 16px; color: #4a4a4a; letter-spacing: 0; text-align: center; margin-top: 10px; } .title .tips2 span{ color: #ec6730; } .order-info{ padding: 25px 48px; padding-bottom: 15px; border-bottom: 1px solid #f2f2f2; } .order-info p{ font-family: PingFangSC-Regular; display: -ms-flexbox; display: flex; margin-bottom: 10px; font-size: 16px; } .order-info p b{ font-weight: 400; color: #9d9d9d; white-space: nowrap; } .wechat-code{ display: flex; -ms-flex-align: center; align-items: center; padding: 25px 40px; border-bottom: 1px solid #f2f2f2; } .wechat-code>img{ width: 100px; height: 100px; margin-right: 15px; } .wechat-code p{ font-family: PingFangSC-Regular; font-size: 14px; color: #d0021b; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .wechat-code p>img{ width: 16px; height: 16px; margin-right: 10px; } .study{ padding: 25px 40px; } .study span{ display: block; width: 140px; height: 42px; text-align: center; line-height: 42px; cursor: pointer; background: #ffc210; border-radius: 6px; font-family: PingFangSC-Regular; font-size: 16px; color: #fff; } </style>
from rest_framework.views import APIView from rest_framework.permissions import IsAuthenticated from rest_framework.response import Response from rest_framework import status from orders.models import Order from coupon.models import UserCoupon from alipay import AliPay from django.conf import settings import os from django.db import transaction from decimal import Decimal import logging log = logging.getLogger("django") from datetime import datetime from users.models import UserCourse class AlipayAPIView(APIView): # permission_classes = [IsAuthenticated] def get(self,request): """生成支付宝支付地址""" # 接受参数[优惠券,订单号] coupon_id = request.query_params.get("coupon_id") order_number = request.query_params.get("order_number") try: order = Order.objects.get(order_number=order_number) except Order.DoesNotExist: return Response({"message":"对不起,当前订单信息不存在!无法进行支付"},status=status.HTTP_400_BAD_REQUEST) if coupon_id != None and coupon_id != "0": with transaction.atomic(): save_id = transaction.savepoint() # 重新计算订单实际支付价格 try: user_coupon = UserCoupon.objects.get(pk=coupon_id) except UserCoupon.DoesNotExist: return Response({"message": "对不起,当前订单使用的优惠券不存在!无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) if user_coupon.coupon.coupon_type == 0: """折扣优惠""" order.real_price = order.total_price * Decimal(user_coupon.coupon.sale[1:]) elif user_coupon.coupon.coupon_type == 1: order.real_price = order.total_price - Decimal(user_coupon.coupon.sale[1:]) else: return Response({"message": "当前优惠券无法使用!无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) try: # 经过上面的计算,保存实付价格和使用的优惠券 order.use_coupon = True order.coupon = user_coupon.id order.save() # 上面的优惠券已经被使用了,所以我们需要修改优惠券的状态 user_coupon.is_use = True user_coupon.save() except: transaction.savepoint_rollback(save_id) return Response({"message": "系统异常,无法进行支付"}, status=status.HTTP_400_BAD_REQUEST) # 构造支付宝支付链接地址 alipay = AliPay( appid=settings.ALIPAY_APPID, app_notify_url=settings.APP_NOTIFY_URL, # 默认回调url app_private_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/app_private_key.pem"), # 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥, alipay_public_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/alipay_public_key.pem"), sign_type="RSA2", # RSA 或者 RSA2 debug=settings.ALIPAY_DEBUG ) order_string = alipay.api_alipay_trade_page_pay( out_trade_no=order.order_number, total_amount= "%.2f" % order.real_price, subject=order.order_title, return_url=settings.ALIPAY_RETURN_URL, notify_url=settings.ALIPAY_NOTIFY_URL, ) url = settings.APIPAY_GATEWAY + "?" + order_string return Response({"message":"发起支付成功","url":url}) class AlipayResult(APIView): def get(self,request): 。。。 def post(self,request): data = request.data.dict() # 在字典中移除sign签名 signature = data.pop("sign") alipay = AliPay( appid=settings.ALIPAY_APPID, app_notify_url=settings.APP_NOTIFY_URL, # 默认回调url app_private_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/app_private_key.pem"), # 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥, alipay_public_key_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "keys/alipay_public_key.pem"), sign_type="RSA2", # RSA 或者 RSA2 debug=settings.ALIPAY_DEBUG ) success = alipay.verify(data, signature) if success: # 支付成功! # 更新订单 order_number = data.get("out_trade_no") try: order = Order.objects.get( order_number=order_number ) except Order.DoesNotExist: log.error("订单号:%s不存在!" % order_number ) return Response({"message": "无效的订单号"},status=status.HTTP_500_INTERNAL_SERVER_ERROR) with transaction.atomic(): save_id = transaction.savepoint() try: order.order_status = 1 order.pay_time = datetime.now() # order.pay_time = data.get("timestamp") order.save() # 课程与用户之间添加一条购买记录 detail_list = order.order_courses.all() course_list = [] for detail in detail_list: if detail.expire=='-1': out_time = "2099-01-01 00:00:00" else: out_time = datetime.now().timestamp() + detail.expire * 86400 # 日期时间对象 = fromtimestamp(数值时间戳) out_time = datetime.fromtimestamp(out_time) out_time = out_time.strftime("%Y-%m-%d %H:%M:%S") UserCourse.objects.create( user=order.user, course=detail.course, buy_number=data.get("trade_no"), buy_type=0, pay_time=data.get("timestamp"), out_time=out_time ) course_list.append(detail.course.name) return Response("success", content_type="text/html") except: log.error("修改订单和购买记录发生异常!") transaction.savepoint_rollback(save_id) return Response({"message":"系统异常!"},status=status.HTTP_500_INTERNAL_SERVER_ERROR)
<template> <div class="user-order"> <Header/> <div class="main"> <div class="banner"></div> <div class="profile"> <div class="profile-info"> <div class="avatar"><img class="newImg" width="100%" alt="" src="/static/img/logo@2x.png"></div> <span class="user-name">Mixtea</span> <span class="user-job">深圳市 | 程序员</span> </div> <ul class="my-item"> <li>我的账户</li> <li class="active">我的订单</li> <li>个人资料</li> <li>账号安全</li> </ul> </div> <div class="user-data"> <ul class="nav"> <li class="order-info">订单</li> <li class="course-expire">有效期</li> <li class="course-price">课程价格</li> <li class="real-price">实付金额</li> <li class="order-status">交易状态</li> <li class="order-do">交易操作</li> </ul> <div class="my-order-item"> <div class="user-data-header"> <span class="order-time">2019-04-02 10:27:49</span> <span class="order-num">订单号： <span class="my-older-number">20190402102749606</span> </span> </div> <ul class="nav user-data-list"> <li class="order-info"> <img src="../../static/course/1544059695.jpeg" alt=""> <div class="order-info-title"> <p class="course-title">Pycharm使用秘籍</p> <p class="price-service">限时免费</p> </div> </li> <li class="course-expire">永久有效</li> <li class="course-price">977.00</li> <li class="real-price">577.00</li> <li class="order-status">交易成功</li> <li class="order-do"> <span class="btn btn2">去学习</span> </li> </ul> </div> <div class="my-order-item"> <div class="user-data-header"> <span class="order-time">2019-04-02 10:27:49</span> <span class="order-num">订单号： <span class="my-older-number">20190402102749606</span> </span> </div> <ul class="nav user-data-list"> <li class="order-info"> <img src="../../static/course/1544059695.jpeg" alt=""> <div class="order-info-title"> <p class="course-title">Pycharm使用秘籍</p> <p class="price-service">限时免费</p> </div> </li> <li class="course-expire">永久有效</li> <li class="course-price">977.00</li> <li class="real-price">577.00</li> <li class="order-status">交易成功</li> <li class="order-do"> <span class="btn btn2">去学习</span> </li> </ul> </div> <div class="my-order-item"> <div class="user-data-header"> <span class="order-time">2019-04-02 10:27:49</span> <span class="order-num">订单号： <span class="my-older-number">20190402102749606</span> </span> </div> <ul class="nav user-data-list"> <li class="order-info"> <img src="../../static/course/1544059695.jpeg" alt=""> <div class="order-info-title"> <p class="course-title">Pycharm使用秘籍</p> <p class="price-service">限时免费</p> </div> </li> <li class="course-expire">永久有效</li> <li class="course-price">977.00</li> <li class="real-price">577.00</li> <li class="order-status">交易成功</li> <li class="order-do"> <span class="btn btn2">去学习</span> </li> </ul> </div> <div class="my-order-item"> <div class="user-data-header"> <span class="order-time">2019-04-02 10:27:49</span> <span class="order-num">订单号： <span class="my-older-number">20190402102749606</span> </span> </div> <ul class="nav user-data-list"> <li class="order-info"> <img src="../../static/course/1544059695.jpeg" alt=""> <div class="order-info-title"> <p class="course-title">Pycharm使用秘籍</p> <p class="price-service">限时免费</p> </div> </li> <li class="course-expire">永久有效</li> <li class="course-price">977.00</li> <li class="real-price">577.00</li> <li class="order-status">交易成功</li> <li class="order-do"> <span class="btn btn2">去学习</span> </li> </ul> </div> <div class="my-order-item"> <div class="user-data-header"> <span class="order-time">2019-04-02 10:27:49</span> <span class="order-num">订单号： <span class="my-older-number">20190402102749606</span> </span> </div> <ul class="nav user-data-list"> <li class="order-info"> <img src="../../static/course/1544059695.jpeg" alt=""> <div class="order-info-title"> <p class="course-title">Pycharm使用秘籍</p> <p class="price-service">限时免费</p> </div> </li> <li class="course-expire">永久有效</li> <li class="course-price">977.00</li> <li class="real-price">577.00</li> <li class="order-status">交易成功</li> <li class="order-do"> <span class="btn btn2">去学习</span> </li> </ul> </div> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default{ name:"UserOrder", data(){ return { }; }, components:{ Header, Footer, } } </script> <style scoped> .user-order{ padding-top: 80px; } .main .banner{ width: 100%; height: 324px; background: url(/static/img/my_bkging.0648ebe.png) no-repeat; background-size: cover; z-index: 1; } .profile{ width: 1200px; margin: 0 auto; } .profile-info{ text-align: center; margin-top: -80px; } .avatar{ width: 120px; height: 120px; border-radius: 60px; overflow: hidden; margin: 0 auto; } .user-name{ display: block; font-size: 24px; color: #4a4a4a; margin-top: 14px; } .user-job{ display: block; font-size: 11px; color: #9b9b9b; } .my-item{ list-style: none; line-height: 1.42857143; color: #333; width: 474px; height: 31px; display: -ms-flexbox; display: flex; cursor: pointer; margin: 41px auto 0; -ms-flex-pack: justify; justify-content: space-between; } .my-item .active{ border-bottom: 1px solid #000; } .user-data{ width: 1200px; height: auto; margin: 0 auto; padding-top: 30px; border-top: 1px solid #e8e8e8; margin-bottom: 63px; } .nav{ width: 100%; height: 60px; background: #e9e9e9; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .nav li{ margin-left: 20px; margin-right: 28px; height: 60px; line-height: 60px; list-style: none; font-family: PingFangSC-Medium; font-size: 13px; color: #333; border-bottom: 1px solid #e9e9e9; width: 160px; } .nav .order-info{ width: 325px; } .nav .course-expire{ width: 60px; } .nav .course-price{ width: 130px; } .user-data-header{ display: flex; height: 44px; color: #4a4a4a; font-size: 14px; background: #f3f3f3; -ms-flex-align: center; align-items: center; font-family: PingFangSC-Regular; } .order-time{ font-size: 12px; display: inline-block; margin-left: 20px; } .order-num{ font-size: 12px; display: inline-block; margin-left: 29px; } .user-data-list{ height: 100%; display: flex; } .user-data-list{ background: none; } .user-data-list li{ height: 60px; line-height: 60px; } .user-data-list .order-info{ display: flex; align-items: center; margin-right: 28px; } .user-data-list .order-info img{ max-width: 100px; max-height: 75px; margin-right: 22px; } .course-title{ width: 203px; font-size: 13px; color: #333; line-height: 20px; font-family: PingFangSC-Medium; margin-top: -10px; } .order-info-title .price-service{ line-height: 18px; } .price-service{ font-size: 12px; color: #fa6240; padding: 0 5px; border: 1px solid #fa6240; border-radius: 4px; margin-top: 4px; position: absolute; } .order-info-title{ margin-top: -10px; } .user-data-list .course-expire{ font-size: 12px; color: #ff5502; font-family: PingFangSC-Medium; width: 60px; text-align: center; } .btn { width: 100px; height: 32px; font-size: 14px; color: #fff; background: #ffc210; border-radius: 4px; border: none; outline: none; font-family: PingFangSC-Medium; transition: all .25s ease; display: inline-block; line-height: 32px; text-align: center; cursor: pointer; } </style>
# 路由注册： import Vue from "vue" import Router from "vue-router" // 导入页面组件 。。。 import User from "../components/User" import UserOrder from "../components/UserOrder" Vue.use(Router); export default new Router({ // 设置路由模式为‘history’，去掉默认的# mode: "history", routes:[ .... { name:"User", path:"/my", component: User, // children:[ // 设置子路由,在父级路由对应的组件中如果存在父子公用部分页面,可以使用router-view来实现子路由 // { // name:"UserOrder", // path:"/order", // component: UserOrder, // } // ] }, { name:"UserOrder", path:"/my/order", component: UserOrder, }, ] }) # 后端提供查询当前登录用户的订单列表信息。 # orders/models.py，模型新增返回订单状态的文本格式 class Order(BaseModel): """订单记录""" 。。。。 def order_status_text(self): return self.status_choices[self.order_status][1]
# users/serializers.py，序列化器，代码： """会员订单""" from orders.models import Order,OrderDetail class OrderDetailListModelSerializer(serializers.ModelSerializer): class Meta: model = OrderDetail fields = ("price","real_price","discount_name","expire_text","course_img","course_name","course") class OrderListModelSerializer(serializers.ModelSerializer): order_courses = OrderDetailListModelSerializer(many=True) class Meta: model = Order fields = ("order_courses","id","create_time","pay_time","order_number","real_price","total_price","order_status","order_status_text","pay_type") class UserOrderModelSerializer(serializers.ModelSerializer): user_orders = OrderListModelSerializer(many=True) class Meta: model = User # fields = ("username","身份信息..") fields = ("username","user_orders") # users/views.py，视图代码： from .serializers import UserOrderModelSerializer from rest_framework.generics import RetrieveAPIView from rest_framework.permissions import IsAuthenticated class UserOrderAPIView(RetrieveAPIView): permission_classes = [IsAuthenticated] serializer_class = UserOrderModelSerializer queryset = User.objects.all() # users/urls.py，路由代码： re_path(r'(?P<pk>\d+)/orders/',views.UserOrderAPIView.as_view()),
# 前端请求获取当前登录用户的订单信息 <template> <div class="user-order"> <Header/> <div class="main"> <div class="banner"></div> <div class="profile"> <div class="profile-info"> <div class="avatar"><img class="newImg" width="100%" alt="" src="/static/img/logo@2x.png"></div> <span class="user-name">{{user_info.username}}</span> <span class="user-job">深圳市 | 程序员</span> </div> <ul class="my-item"> <li>我的账户</li> <li class="active">我的订单</li> <li>个人资料</li> <li>账号安全</li> </ul> </div> <div class="user-data"> <ul class="nav"> <li class="order-info">订单</li> <li class="course-expire">有效期</li> <li class="course-price">课程价格</li> <li class="real-price">实付金额</li> <li class="order-status">交易状态</li> <li class="order-do">交易操作</li> </ul> <div class="my-order-item" v-for="order in user_info.user_orders"> <div class="user-data-header"> <div class="order-time"> 下单时间: {{new Date(order.create_time).toLocaleString()}} <span style="padding-left: 20px;" v-if="order.pay_time">付款时间: {{new Date(order.pay_time).toLocaleString()}}</span> </div> <span class="order-num">订单号： <span class="my-older-number">{{order.order_number}}</span> </span> </div> <ul class="nav user-data-list" v-for="course in order.order_courses"> <li class="order-info"> <img :src="$settings.Host+course.course_img" alt=""> <div class="order-info-title"> <p class="course-title">{{course.course_name}}</p> <p v-if="course.discount_name" class="price-service">{{course.discount_name}}</p> </div> </li> <li class="course-expire">{{course.expire_text}}</li> <li class="course-price">{{course.price}}</li> <li class="real-price">{{course.real_price}}</li> <li class="order-status">{{order.order_status_text}}</li> <li class="order-do"> <router-link v-if="order.order_status==1" to="/my/course" class="btn btn2">去学习</router-link> <router-link v-if="order.order_status==0" :to="'/orders/'+order.order_number" class="btn btn2">去付款</router-link> </li> </ul> </div> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default{ name:"UserOrder", data(){ return { user_info:{} }; }, created(){ let token = localStorage.token || sessionStorage.token; let user_id = localStorage.user_id || sessionStorage.user_id; if(!token){ this.$alert("对不起,您尚未登录!请登录!","警告",{ callback(){ _this.$router.push("/login"); } }) } this.$axios.get(this.$settings.Host+`/users/${user_id}/orders/`,{ headers:{ // 注意下方的空格!!! "Authorization":"jwt " + token, }, }).then(response=>{ this.user_info = response.data; console.log(this.user_info); }).catch(error=>{ console.log( error.response ) }) }, components:{ Header, Footer, } } </script> <style scoped> .user-order{ padding-top: 80px; } .main .banner{ width: 100%; height: 324px; background: url(/static/img/my_bkging.0648ebe.png) no-repeat; background-size: cover; z-index: 1; } .profile{ width: 1200px; margin: 0 auto; } .profile-info{ text-align: center; margin-top: -80px; } .avatar{ width: 120px; height: 120px; border-radius: 60px; overflow: hidden; margin: 0 auto; } .user-name{ display: block; font-size: 24px; color: #4a4a4a; margin-top: 14px; } .user-job{ display: block; font-size: 11px; color: #9b9b9b; } .my-item{ list-style: none; line-height: 1.42857143; color: #333; width: 474px; height: 31px; display: -ms-flexbox; display: flex; cursor: pointer; margin: 41px auto 0; -ms-flex-pack: justify; justify-content: space-between; } .my-item .active{ border-bottom: 1px solid #000; } .user-data{ width: 1200px; height: auto; margin: 0 auto; padding-top: 30px; border-top: 1px solid #e8e8e8; margin-bottom: 63px; } .nav{ width: 100%; height: 60px; background: #e9e9e9; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .nav li{ margin-left: 20px; margin-right: 28px; height: 60px; line-height: 60px; list-style: none; font-family: PingFangSC-Medium; font-size: 13px; color: #333; border-bottom: 1px solid #e9e9e9; width: 160px; } .nav .order-info{ width: 325px; } .nav .course-expire{ width: 60px; } .nav .course-price{ width: 130px; } .user-data-header{ display: flex; height: 44px; color: #4a4a4a; font-size: 14px; background: #f3f3f3; -ms-flex-align: center; align-items: center; font-family: PingFangSC-Regular; } .order-time{ font-size: 12px; display: inline-block; margin-left: 20px; } .order-num{ font-size: 12px; display: inline-block; margin-left: 29px; } .user-data-list{ height: 100%; display: flex; } .user-data-list{ background: none; } .user-data-list li{ height: 60px; line-height: 60px; } .user-data-list .order-info{ display: flex; align-items: center; margin-right: 28px; } .user-data-list .order-info img{ max-width: 100px; max-height: 75px; margin-right: 22px; } .course-title{ width: 203px; font-size: 13px; color: #333; line-height: 20px; font-family: PingFangSC-Medium; margin-top: -10px; } .order-info-title .price-service{ line-height: 18px; } .price-service{ font-size: 12px; color: #fa6240; padding: 0 5px; border: 1px solid #fa6240; border-radius: 4px; margin-top: 4px; position: absolute; } .order-info-title{ margin-top: -10px; } .user-data-list .course-expire{ font-size: 12px; color: #ff5502; font-family: PingFangSC-Medium; width: 60px; text-align: center; } .btn { width: 100px; height: 32px; font-size: 14px; color: #fff; background: #ffc210; border-radius: 4px; border: none; outline: none; font-family: PingFangSC-Medium; transition: all .25s ease; display: inline-block; line-height: 32px; text-align: center; cursor: pointer; } </style>
根据订单状态显示: 1. 如果未支付[order.order_stauts=0],则显示"去支付"按钮 2. 如果已支付[order.order_stauts=1],则显示"去学习"按钮 3. 如果未支付,并超过指定时间[12个小时],则显示"已取消" [celery+RabbitMQ / Django-crontab 定时任务 ] 用户下单在12小时以后自动判断订单状态如果是0,则直接改成3
浙公网安备 33010602011771号