devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

超时未支付算不算取消一次订单_luffy-10.3 支付宝

作者：不正经 | 2024-04-07 18:02:34

赞

踩

超时未支付算不算取消一次订单_luffy-10.3 支付宝

# 沙箱环境：登录 - 支付宝

# 支付宝开放平台文档 下载软件，生成秘钥（公钥私钥）

# 取出公钥，配置再支付宝平台，它会生成一个支付宝公钥

37dd4f32a8bbc3b6992213dc1be452f4.png

d19e7e94083e5ef79d79b4e082187e1a.png

代码:新建文件夹

  1. # pip install python-alipay-sdk
  2.  
  3.  
  4. from alipay import AliPay
  5.  
  6.  
  7. # app_private_key_string = open("/path/to/your/private/key.pem").read()
  8. # alipay_public_key_string = open("/path/to/alipay/public/key.pem").read()
  9.  
  10. app_private_key_string = """-----BEGIN RSA PRIVATE KEY-----
  11. MIIEpAIBAAKCAQEApkFnp38PSslhn4wvRarL40+WtVpan6tVT55FWzAzLfQ8PfqZE2qW7mCJy1/zM07+S5L+X0pC+F7BlT+0z4rlxraG5D23khWfHb4x+uDi0Wd94eaVB0PzQXCYYBChuORvNN5YLTspeP7rNQ2OcdpGx2KUzo9w59dVW+AweblFl7GqPkRSC0P5XbkJtwnEAd0Nc08HzJR0OWZT9HRFOA7coaude9uSwDsXmsdkSNGsGDcaGEY6aGk2Tj9Fyni9LJJcOXwGrUuGDpdcP2tYePrFUGMDml/feFR9QGUbExWh/ZNpb9lKLwOtXOhQj9slilp+YJek/rLlSgW9K1WrYpuuBwIDAQABAoIBADN1mRzKAjS2wmW84UDiDbus/cviTJyRTpWXOoZwE9dMen0AnPLakh70eJIff8pI0AMaW2upM7NmuOp2ToPSzS5FftkUlUY9NQPiw9uQUgRY0Sjj0wrtqFSAAlnxq+zrn9QwYgCWCE8wMCM6r/Vjh3bdd4u78EmCaCRI7xguFXFPB9NY9oCFiwsTFJtXPZo+DSIQjqIDnh8YtV3NzrA3Ln3DsKMAr+vnPMeljAL5US6Rt5tOQY0qa9bUi6RqQwTLADcANd49YOvlr7OLjwi5jkeJ16j1nKgpasAIg9V+rF085u+PEKkLL3WJHwmhiIxrA11bxCnm1fRdfHbyWZKY9yECgYEA0k3wS7A7rzhtpznc5ZfVGWIEQ5IahRkqVGbc6wFIXKXnypOtGKAFiRmEPwm9xRurlo8TJ1bjK4D4ljEANJhX2NnIZfK3YDdNEN6D4GnEvPFR641M8M47Z7ItvdRKre8P2/ThXhkMnq5/1y7e87xvE6/a1Tr44+hclHvQWPRrsPcCgYEAymFEy0/2xAX+si4S8pzrgLfBg3Ehjan8T6JZZNCKhR7b/IT+3/AWJimzEL6jYQMlhy7QzZbRb1ssIIzqPFcFQYjQE0n6fswJuN4+jayW9Jtjvar/zhHFjW3EODR5yEDTvS3CHqQLeG3ce+srMJSxVDJR2V9ortFeb+VPbWZ+t3ECgYEAxPYvvoNwcpuzvvGnW/RGpb4x5iL46Xz3MxMfho2t+u961jRW4oBEjvGx9OQnsmpG2vxm4Oo0WnMw3mFIIvonFDZrxGd8rQU+DTWJZ21Hz/lnUugEjmdoJacvxeEEjEAgp02CoQFu21Ls8li4gKgTk+mYVyojHjhqNLp9GELadWMCgYEAi0RSXgLCEnT5p03zdgcsPOC3ByfT6jO+0GItWCX2HNN2mRhAeIQ0CcEKW4yEy56ptZQu1jtiFlpMTH4MNse/czCd15hCC/2G9zPhIgdRvjQsd/nznLA4HTIbJH5gC8EotHeHrSRATHh1kMTtbLn2KbWTA54XYK3tad0IQoWUz9ECgYBBc+kCJsb0shaRIRP5nmeb5tZCH7Yq9DgriwcIlK74cxW9fvL94n91Y6M8vSZ6MC7vF5wmcXMj3K1of04qizKbbKxCCYeOIHhTh0dB+ualDxu5WBG/6mLWR3HVHazqRVri9qoZ/3zNDx5CRNi81VpzOPmVtuos5d9sZZaNR3lkRQ==
  12. -----END RSA PRIVATE KEY-----
  13. """
  14.  
  15. alipay_public_key_string = """-----BEGIN PUBLIC KEY-----
  16. MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwU9mMZHHlQPE9FcxVtXOXhbWCtuDZLJRVCiofdbTVmRXrx47yGniPehwcKIsqhzhEaXBG2QhpIZUL8YsCav0mkrppoRvWOytuGyxNRESo8I6DWRs0aCq6P3AuiD9kSXET4dpAuRYT/+JrMXIZTycEts6vYYNAT9QivXJoa2FmiCQBAL3HP7F36pby9VstObilxXQcoBBJwEYGf2TK6moFFZ1dkloRr5Cfk/G82DpuVfrt1gr4OuIDWtcE3MZTrvDgTqtkRuwGF76FY3+8xUCUbJs1dL5cXYN7/b3jPcXVcdKXFj4WrOQd42ofE1BJWMxBW7L3Qlxue1vy+NGx/CuKwIDAQAB
  17. -----END PUBLIC KEY-----
  18. """
  19.  
  20. alipay = AliPay(
  21.     appid="2016092000554611",
  22.     app_notify_url='http://127.0.0.1:8000/home/',  # the default notify path
  23.     app_private_key_string=app_private_key_string,
  24.     # alipay public key, do not use your own public key!
  25.     alipay_public_key_string=alipay_public_key_string,
  26.     sign_type="RSA2", # RSA or RSA2
  27.     debug=True  # False by default
  28. )
  29.  
  30.  
  31. alipay_url='https://openapi.alipaydev.com/gateway.do?'
  32. order_string = alipay.api_alipay_trade_page_pay    (
  33.     out_trade_no="20161112www4334",
  34.     total_amount=9999,
  35.     subject='韩红版充气娃娃',
  36.     return_url="https://www.luffycity.com/free-course",
  37.     notify_url="https://www.luffycity.com/free-course"
  38. )
  39. print(alipay_url+order_string)

二 支付宝的二次封装:

  1. al_pay
  2.     -pem
  3.     -__init__.py
  4.     -pay.py
  5.     -setting.py
  6.  
  7. #__init__.py
  8. from .pay import alipay,gateway
  9.  
  10. #pay.py
  11. from alipay import AliPay
  12. from . import setting
  13. alipay = AliPay(
  14.     appid=setting.APPID,
  15.     app_notify_url=None,  # the default notify path
  16.     app_private_key_string=setting.APP_PRIVATE_KEY_STRING,
  17.     # alipay public key, do not use your own public key!
  18.     alipay_public_key_string=setting.ALIPAY_PUBLIC_KEY_STRING,
  19.     sign_type=setting.SIGN_TYPE, # RSA or RSA2
  20.     debug=setting.DEBUG  # False by default
  21. )
  22. gateway=setting.GATEWAY
  23.  
  24.  
  25. # setting.py
  26. import os
  27. APPID="2016092000554611"
  28. APP_PRIVATE_KEY_STRING = open(os.path.join(os.path.dirname(__file__),'pem','private_key.pem')).read()
  29. ALIPAY_PUBLIC_KEY_STRING = open(os.path.join(os.path.dirname(__file__),'pem','al_public_key.pem')).read()
  30. SIGN_TYPE='RSA2'
  31. DEBUG=True
  32. GATEWAY='https://openapi.alipaydev.com/gateway.do?' if DEBUG else 'https://openapi.alipay.com/gateway.do?'

三 订单模块与表分析

  1. # 订单表分析
  2. 	-订单表
  3.     -订单详情
  4.     
  5. from django.db import models
  6. from django.db import models
  7. from user.models import User
  8. from course.models import Course
  9. # 订单表
  10. class Order(models.Model):
  11.     """订单模型"""
  12.     status_choices = (
  13.         (0, '未支付'),
  14.         (1, '已支付'),
  15.         (2, '已取消'),
  16.         (3, '超时取消'),
  17.     )
  18.     pay_choices = (
  19.         (1, '支付宝'),
  20.         (2, '微信支付'),
  21.     )
  22.     subject = models.CharField(max_length=150, verbose_name="订单标题")
  23.     total_amount = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="订单总价", default=0)
  24.     out_trade_no = models.CharField(max_length=64, verbose_name="订单号", unique=True)
  25.     trade_no = models.CharField(max_length=64, null=True, verbose_name="流水号")  # 支付宝生成回来的
  26.     order_status = models.SmallIntegerField(choices=status_choices, default=0, verbose_name="订单状态")
  27.     pay_type = models.SmallIntegerField(choices=pay_choices, default=1, verbose_name="支付方式")
  28.     pay_time = models.DateTimeField(null=True, verbose_name="支付时间")
  29.     # 一个用户可以下多个订单，一个订单只属于一个用户，一对多的关系，关联字段写在多个一方，写在order方
  30.     user = models.ForeignKey(User, related_name='order_user', on_delete=models.DO_NOTHING, db_constraint=False, verbose_name="下单用户")
  31.     created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
  32.     updated_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
  33.     class Meta:
  34.         db_table = "luffy_order"
  35.         verbose_name = "订单记录"
  36.         verbose_name_plural = "订单记录"
  37.  
  38.     def __str__(self):
  39.         return "%s - ￥%s" % (self.subject, self.total_amount)
  40.  
  41.     @property
  42.     def courses(self):
  43.         data_list = []
  44.         for item in self.order_courses.all():
  45.             data_list.append({
  46.                 "id": item.id,
  47.                 "course_name": item.course.name,
  48.                 "real_price": item.real_price,
  49.             })
  50.         return data_list
  51.  
  52. # 订单详情表
  53. # 订单和详情是一对多，关联字段写在多个的一方，写在订单详情表中
  54. class OrderDetail(models.Model):
  55.     """订单详情"""
  56.     order = models.ForeignKey(Order, related_name='order_courses', on_delete=models.CASCADE, db_constraint=False, verbose_name="订单")
  57.     course = models.ForeignKey(Course, related_name='course_orders', on_delete=models.SET_NULL, db_constraint=False, verbose_name="课程",null=True)
  58.     price = models.DecimalField(max_digits=6, decimal_places=2, verbose_name="课程原价")
  59.     real_price = models.DecimalField(max_digits=6, decimal_places=2, verbose_name="课程实价")
  60.  
  61.     class Meta:
  62.         db_table = "luffy_order_detail"
  63.         verbose_name = "订单详情"
  64.         verbose_name_plural = "订单详情"
  65.  
  66.     def __str__(self):
  67.         try:
  68.             return "%s的订单：%s" % (self.course.name, self.order.out_trade_no)
  69.         except:
  70.             return super().__str__()

4 支付接口

分析:

  1. # 1 前端传什么格式数据
  2. 	-{course:[1,2,3],total_amount:100,subject:xx商品,pay_type:1,}
  3.     
  4. # 2 后端接到数据要校验
  5. 	-course:[1,2,3]===》course:[obj1，obj2，obj3]
  6.     -在序列化类中： 					                  course=serializers.PrimaryKeyRelatedField(queryset=Course.objects.all(), write_only=True, many=True)
  7. # 3 在序列化类的validate中处理一堆逻辑
  8.         '''
  9.         # 1）订单总价校验：
  10.         	-一个个课程价格取出来累加看是否等于传入的总价格
  11.         # 2）生成订单号
  12.         	-通过uuid生成
  13.         # 3）支付用户：request.user
  14.         	-通过视图和序列化类之间的桥梁context对象传递
  15.         	-重新视图类中的create方法，把request对象放入context
  16.         	-self.context.get('request').user
  17.         # 4）支付链接生成
  18.         	-导入封装的支付宝支付，生成
  19.         	order_string = alipay.api_alipay_trade_page_pay    (
  20.             out_trade_no=out_trade_no,
  21.             total_amount=total_amout,
  22.             subject=subject,
  23.             return_url=settings.RETURN_URL,  # get回调，前台地址
  24.             notify_url=settings.NOTIFY_URL   # post回调，后台地址
  25.         )
  26.         # 5）入库(两个表)的信息准备
  27.         	-把user放入attrs中
  28.         	-把订单号，放入attrs中
  29.         	attrs['user']=user
  30.         	attrs['out_trade_no']=out_trade_no
  31.         	self.context['pay_url']=pay_url
  32.         '''
  33.     
  34.  # 4 重写序列化类的create方法
  35. 	-把course_list弹出来
  36.     -order=models.Order.objects.create(**validated_data)

代码:

  1. # urls.py
  2. router = SimpleRouter()
  3. router.register('pay', views.PayView, 'pay')
  4. urlpatterns = [
  5.     path('', include(router.urls)),
  6. ]
  7.  
  8.  
  9. # views.py
  10. class PayView(GenericViewSet,CreateModelMixin):
  11.     authentication_classes = [JSONWebTokenAuthentication,]
  12.     permission_classes = [IsAuthenticated,]
  13.     queryset = models.Order.objects.all()
  14.     serializer_class = serializer.OrderSerializer
  15.  
  16.     # 重写create方法
  17.     def create(self, request, *args, **kwargs):
  18.         serializer = self.get_serializer(data=request.data,context={'request':request})
  19.         serializer.is_valid(raise_exception=True)
  20.         self.perform_create(serializer)
  21.         return Response(serializer.context.get('pay_url'))
  22.    
  23.  
  24.  
  25. # serializer.py
  26. class OrderSerializer(serializers.ModelSerializer):
  27.     # 前端传什么数据过来{course:[1,2,3],total_amount:100,subject:xx商品,pay_type:1,}
  28.     # user字段需要，但是不是传的，使用了jwt
  29.     # 需要把course:[1,2,3] 处理成 course:[obj1,obj2,obj3]
  30.     # 课时：[1,4,6,]===>课时：[obj1,obj4,obj6,]
  31.     # course=serializers.CharField()
  32.  
  33.     course=serializers.PrimaryKeyRelatedField(queryset=Course.objects.all(), write_only=True, many=True)
  34.     class Meta:
  35.         model = models.Order
  36.         fields = ['total_amount','subject','pay_type','course']
  37.         extra_kwargs={
  38.             'total_amount':{'required':True},
  39.             'pay_type': {'required': True},
  40.         }
  41.  
  42.  
  43.     def _check_price(self,attrs):
  44.         total_amount=attrs.get('total_amount')
  45.         course_list=attrs.get('course')
  46.         total_price=0
  47.         for course in course_list:
  48.             total_price+=course.price
  49.         if total_price!=total_amount:
  50.             raise ValidationError('价格不合法')
  51.         return total_amount
  52.  
  53.     def _gen_out_trade_no(self):
  54.         import uuid
  55.         return str(uuid.uuid4()).replace('-','')
  56.  
  57.     def _get_user(self):
  58.         # 需要request对象(需要视图通过context把reuqest对象传入。重写create方法)
  59.         request=self.context.get('request')
  60.         return request.user
  61.  
  62.     def _gen_pay_url(self,out_trade_no,total_amout,subject):
  63.         # total_amout是Decimal类型，识别不了，需要转换成float类型
  64.         from luffyapi.libs.al_pay import alipay,gateway
  65.         order_string = alipay.api_alipay_trade_page_pay    (
  66.             out_trade_no=out_trade_no,
  67.             total_amount=float(total_amout),
  68.             subject=subject,
  69.             return_url=settings.RETURN_URL,  # get回调，前台地址
  70.             notify_url=settings.NOTIFY_URL   # post回调，后台地址
  71.         )
  72.         return gateway+order_string
  73.  
  74.     def _before_create(self,attrs,user,pay_url,out_trade_no):
  75.         attrs['user']=user
  76.         attrs['out_trade_no']=out_trade_no
  77.  
  78.         self.context['pay_url']=pay_url
  79.     def validate(self, attrs):
  80.         '''
  81.         # 1）订单总价校验
  82.         # 2）生成订单号
  83.         # 3）支付用户：request.user
  84.         # 4）支付链接生成
  85.         # 5）入库(两个表)的信息准备
  86.         '''
  87.         # 1）订单总价校验
  88.         total_amout = self._check_price(attrs)
  89.         # 2）生成订单号
  90.         out_trade_no=self._gen_out_trade_no()
  91.         # 3）支付用户：request.user
  92.         user=self._get_user()
  93.         # 4）支付链接生成
  94.         pay_url=self._gen_pay_url(out_trade_no,total_amout,attrs.get('subject'))
  95.         # 5）入库(两个表)的信息准备
  96.         self._before_create(attrs,user,pay_url,out_trade_no)
  97.         return attrs
  98.     def create(self, validated_data):
  99.         course_list=validated_data.pop('course')
  100.         order=models.Order.objects.create(**validated_data)
  101.         for course in course_list:
  102.             models.OrderDetail.objects.create(order=order,course=course,price=course.price,real_price=course.price)
  103.  
  104.         return order

5 前后台回调接口配置

  1. # dev.py
  2. # 上线后必须换成公网地址
  3. # 后台基URL
  4. BASE_URL = 'http://127.0.0.1:8000'
  5. # 前台基URL
  6. LUFFY_URL = 'http://127.0.0.1:8080'
  7. # 支付宝同步异步回调接口配置
  8. # 后台异步回调接口
  9. NOTIFY_URL = BASE_URL + "/order/success/"
  10. # 前台同步回调接口，没有 / 结尾
  11. RETURN_URL = LUFFY_URL + "/pay/success"

6 前台生成订单并跳转

  1. <template>
  2.     <div class="course">
  3.         <Header></Header>
  4.         <div class="main">
  5.             <!-- 筛选条件 -->
  6.             <div class="condition">
  7.                 <ul class="cate-list">
  8.                     <li class="title">课程分类:</li>
  9.                     <li :class="filter.course_category==0?'this':''" @click="filter.course_category=0">全部</li>
  10.                     <li :class="filter.course_category==category.id?'this':''" v-for="category in category_list"
  11.                         @click="filter.course_category=category.id" :key="category.name">{{category.name}}
  12.                     </li>
  13.                 </ul>
  14.  
  15.                 <div class="ordering">
  16.                     <ul>
  17.                         <li class="title">筛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选:</li>
  18.                         <li class="default" :class="(filter.ordering=='id' || filter.ordering=='-id')?'this':''"
  19.                             @click="filter.ordering='-id'">默认
  20.                         </li>
  21.                         <li class="hot" :class="(filter.ordering=='students' || filter.ordering=='-students')?'this':''"
  22.                             @click="filter.ordering=(filter.ordering=='-students'?'students':'-students')">人气
  23.                         </li>
  24.                         <li class="price"
  25.                             :class="filter.ordering=='price'?'price_up this':(filter.ordering=='-price'?'price_down this':'')"
  26.                             @click="filter.ordering=(filter.ordering=='-price'?'price':'-price')">价格
  27.                         </li>
  28.                     </ul>
  29.                     <p class="condition-result">共{{course_total}}个课程</p>
  30.                 </div>
  31.  
  32.             </div>
  33.             <!-- 课程列表 -->
  34.             <div class="course-list">
  35.                 <div class="course-item" v-for="course in course_list" :key="course.name">
  36.                     <div class="course-image">
  37.                         <img :src="course.course_img" alt="">
  38.                     </div>
  39.                     <div class="course-info">
  40.                         <h3>
  41.                             <router-link :to="'/free/detail/'+course.id">{{course.name}}</router-link>
  42.                             <span><img src="@/assets/img/avatar1.svg" alt="">{{course.students}}人已加入学习</span></h3>
  43.                         <p class="teather-info">
  44.                             {{course.teacher.name}} {{course.teacher.title}} {{course.teacher.signature}}
  45.                             <span v-if="course.sections>course.pub_sections">共{{course.sections}}课时/已更新{{course.pub_sections}}课时</span>
  46.                             <span v-else>共{{course.sections}}课时/更新完成</span>
  47.                         </p>
  48.                         <ul class="section-list">
  49.                             <li v-for="(section, key) in course.section_list" :key="section.name"><span
  50.                                     class="section-title">0{{key+1}}  |  {{section.name}}</span>
  51.                                 <span class="free" v-if="section.free_trail">免费</span></li>
  52.                         </ul>
  53.                         <div class="pay-box">
  54.                             <div v-if="course.discount_type">
  55.                                 <span class="discount-type">{{course.discount_type}}</span>
  56.                                 <span class="discount-price">￥{{course.real_price}}元</span>
  57.                                 <span class="original-price">原价：{{course.price}}元</span>
  58.                             </div>
  59.                             <span v-else class="discount-price">￥{{course.price}}元</span>
  60.                             <span class="buy-now" @click="buy_now(course)">立即购买</span>
  61.                         </div>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.             <div class="course_pagination block">
  66.                 <el-pagination
  67.                         @size-change="handleSizeChange"
  68.                         @current-change="handleCurrentChange"
  69.                         :current-page.sync="filter.page"
  70.                         :page-sizes="[2, 3, 5, 10]"
  71.                         :page-size="filter.page_size"
  72.                         layout="sizes, prev, pager, next"
  73.                         :total="course_total">
  74.                 </el-pagination>
  75.             </div>
  76.         </div>
  77.         <Footer></Footer>
  78.     </div>
  79. </template>
  80.  
  81. <script>
  82.     import Header from "@/components/Head"
  83.     import Footer from "@/components/Footer"
  84.  
  85.     export default {
  86.         name: "Course",
  87.         data() {
  88.             return {
  89.                 category_list: [], // 课程分类列表
  90.                 course_list: [],   // 课程列表
  91.                 course_total: 0,   // 当前课程的总数量
  92.                 filter: {
  93.                     course_category: 0, // 当前用户选择的课程分类，刚进入页面默认为全部，值为0
  94.                     ordering: "-id",    // 数据的排序方式，默认值是-id，表示对于id进行降序排列
  95.                     page_size: 2,       // 单页数据量
  96.                     page: 1,
  97.                 }
  98.             }
  99.         },
  100.         created() {
  101.             this.get_category();
  102.             this.get_course();
  103.         },
  104.         components: {
  105.             Header,
  106.             Footer,
  107.         },
  108.         watch: {
  109.             //当你监听的数据发生变化，就会执行函数
  110.             "filter.course_category": function () {
  111.                 this.filter.page = 1;
  112.                 this.get_course();
  113.             },
  114.             "filter.ordering": function () {
  115.                 this.get_course();
  116.             },
  117.             "filter.page_size": function () {
  118.                 this.get_course();
  119.             },
  120.             "filter.page": function () {
  121.                 this.get_course();
  122.             }
  123.         },
  124.         methods: {
  125.  
  126.             buy_now(course) {
  127.                 let token = this.$cookies.get('token')
  128.                 if (!token) {
  129.                     this.$message({
  130.                         message: "您还没有登录，请先登录",
  131.                     })
  132.                     return false
  133.                 }
  134.                 this.$axios({
  135.                         method: 'post',
  136.                         url: this.$settings.base_url + '/order/pay/',
  137.                         data: {
  138.                             "total_amount": course.price,
  139.                             "subject": course.name,
  140.                             "pay_type": 1,
  141.                             "course": [
  142.                                 course.id,
  143.                             ]
  144.                         },
  145.                         headers: {Authorization: 'jwt ' + token}
  146.                     }
  147.                 ).then(response => {
  148.                     console.log(response.data)
  149.                     let pay_url=response.data
  150.                     //前端发送get请求
  151.                     open(pay_url,'_self')
  152.                 }).catch(error => {
  153.                 })
  154.  
  155.             },
  156.             handleSizeChange(val) {
  157.                 // 每页数据量发生变化时执行的方法
  158.                 this.filter.page = 1;
  159.                 this.filter.page_size = val;
  160.             },
  161.             handleCurrentChange(val) {
  162.                 // 页码发生变化时执行的方法
  163.                 this.filter.page = val;
  164.             },
  165.             get_category() {
  166.                 // 获取课程分类信息
  167.                 this.$axios.get(`${this.$settings.base_url}/course/categories/`).then(response => {
  168.                     this.category_list = response.data;
  169.                 }).catch(() => {
  170.                     this.$message({
  171.                         message: "获取课程分类信息有误，请联系客服工作人员",
  172.                     })
  173.                 })
  174.             },
  175.             get_course() {
  176.                 // 排序
  177.                 let filters = {
  178.                     ordering: this.filter.ordering, // 排序
  179.                 };
  180.                 // 判决是否进行分类课程的展示
  181.                 if (this.filter.course_category > 0) {
  182.                     filters.course_category = this.filter.course_category;
  183.                 }
  184.  
  185.                 // 设置单页数据量
  186.                 if (this.filter.page_size > 0) {
  187.                     filters.page_size = this.filter.page_size;
  188.                 } else {
  189.                     filters.page_size = 5;
  190.                 }
  191.  
  192.                 // 设置当前页码
  193.                 if (this.filter.page > 1) {
  194.                     filters.page = this.filter.page;
  195.                 } else {
  196.                     filters.page = 1;
  197.                 }
  198.  
  199.  
  200.                 // 获取课程列表信息
  201.                 this.$axios.get(`${this.$settings.base_url}/course/free/`, {
  202.                     params: filters
  203.                 }).then(response => {
  204.                     // console.log(response.data);
  205.                     this.course_list = response.data.results;
  206.                     this.course_total = response.data.count;
  207.                     // console.log(this.course_list);
  208.                 }).catch(() => {
  209.                     this.$message({
  210.                         message: "获取课程信息有误，请联系客服工作人员"
  211.                     })
  212.                 })
  213.             }
  214.         }
  215.     }
  216. </script>
  217.  
  218. <style scoped>
  219.     .course {
  220.         background: #f6f6f6;
  221.     }
  222.  
  223.     .course .main {
  224.         width: 1100px;
  225.         margin: 35px auto 0;
  226.     }
  227.  
  228.     .course .condition {
  229.         margin-bottom: 35px;
  230.         padding: 25px 30px 25px 20px;
  231.         background: #fff;
  232.         border-radius: 4px;
  233.         box-shadow: 0 2px 4px 0 #f0f0f0;
  234.     }
  235.  
  236.     .course .cate-list {
  237.         border-bottom: 1px solid #333;
  238.         border-bottom-color: rgba(51, 51, 51, .05);
  239.         padding-bottom: 18px;
  240.         margin-bottom: 17px;
  241.     }
  242.  
  243.     .course .cate-list::after {
  244.         content: "";
  245.         display: block;
  246.         clear: both;
  247.     }
  248.  
  249.     .course .cate-list li {
  250.         float: left;
  251.         font-size: 16px;
  252.         padding: 6px 15px;
  253.         line-height: 16px;
  254.         margin-left: 14px;
  255.         position: relative;
  256.         transition: all .3s ease;
  257.         cursor: pointer;
  258.         color: #4a4a4a;
  259.         border: 1px solid transparent; /* transparent 透明 */
  260.     }
  261.  
  262.     .course .cate-list .title {
  263.         color: #888;
  264.         margin-left: 0;
  265.         letter-spacing: .36px;
  266.         padding: 0;
  267.         line-height: 28px;
  268.     }
  269.  
  270.     .course .cate-list .this {
  271.         color: #ffc210;
  272.         border: 1px solid #ffc210 !important;
  273.         border-radius: 30px;
  274.     }
  275.  
  276.     .course .ordering::after {
  277.         content: "";
  278.         display: block;
  279.         clear: both;
  280.     }
  281.  
  282.     .course .ordering ul {
  283.         float: left;
  284.     }
  285.  
  286.     .course .ordering ul::after {
  287.         content: "";
  288.         display: block;
  289.         clear: both;
  290.     }
  291.  
  292.     .course .ordering .condition-result {
  293.         float: right;
  294.         font-size: 14px;
  295.         color: #9b9b9b;
  296.         line-height: 28px;
  297.     }
  298.  
  299.     .course .ordering ul li {
  300.         float: left;
  301.         padding: 6px 15px;
  302.         line-height: 16px;
  303.         margin-left: 14px;
  304.         position: relative;
  305.         transition: all .3s ease;
  306.         cursor: pointer;
  307.         color: #4a4a4a;
  308.     }
  309.  
  310.     .course .ordering .title {
  311.         font-size: 16px;
  312.         color: #888;
  313.         letter-spacing: .36px;
  314.         margin-left: 0;
  315.         padding: 0;
  316.         line-height: 28px;
  317.     }
  318.  
  319.     .course .ordering .this {
  320.         color: #ffc210;
  321.     }
  322.  
  323.     .course .ordering .price {
  324.         position: relative;
  325.     }
  326.  
  327.     .course .ordering .price::before,
  328.     .course .ordering .price::after {
  329.         cursor: pointer;
  330.         content: "";
  331.         display: block;
  332.         width: 0px;
  333.         height: 0px;
  334.         border: 5px solid transparent;
  335.         position: absolute;
  336.         right: 0;
  337.     }
  338.  
  339.     .course .ordering .price::before {
  340.         border-bottom: 5px solid #aaa;
  341.         margin-bottom: 2px;
  342.         top: 2px;
  343.     }
  344.  
  345.     .course .ordering .price::after {
  346.         border-top: 5px solid #aaa;
  347.         bottom: 2px;
  348.     }
  349.  
  350.     .course .ordering .price_up::before {
  351.         border-bottom-color: #ffc210;
  352.     }
  353.  
  354.     .course .ordering .price_down::after {
  355.         border-top-color: #ffc210;
  356.     }
  357.  
  358.     .course .course-item:hover {
  359.         box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
  360.     }
  361.  
  362.     .course .course-item {
  363.         width: 1100px;
  364.         background: #fff;
  365.         padding: 20px 30px 20px 20px;
  366.         margin-bottom: 35px;
  367.         border-radius: 2px;
  368.         cursor: pointer;
  369.         box-shadow: 2px 3px 16px rgba(0, 0, 0, .1);
  370.         /* css3.0 过渡动画 hover 事件操作 */
  371.         transition: all .2s ease;
  372.     }
  373.  
  374.     .course .course-item::after {
  375.         content: "";
  376.         display: block;
  377.         clear: both;
  378.     }
  379.  
  380.     /* 顶级元素 父级元素  当前元素{} */
  381.     .course .course-item .course-image {
  382.         float: left;
  383.         width: 423px;
  384.         height: 210px;
  385.         margin-right: 30px;
  386.     }
  387.  
  388.     .course .course-item .course-image img {
  389.         max-width: 100%;
  390.         max-height: 210px;
  391.     }
  392.  
  393.     .course .course-item .course-info {
  394.         float: left;
  395.         width: 596px;
  396.     }
  397.  
  398.     .course-item .course-info h3 a {
  399.         font-size: 26px;
  400.         color: #333;
  401.         font-weight: normal;
  402.         margin-bottom: 8px;
  403.     }
  404.  
  405.     .course-item .course-info h3 span {
  406.         font-size: 14px;
  407.         color: #9b9b9b;
  408.         float: right;
  409.         margin-top: 14px;
  410.     }
  411.  
  412.     .course-item .course-info h3 span img {
  413.         width: 11px;
  414.         height: auto;
  415.         margin-right: 7px;
  416.     }
  417.  
  418.     .course-item .course-info .teather-info {
  419.         font-size: 14px;
  420.         color: #9b9b9b;
  421.         margin-bottom: 14px;
  422.         padding-bottom: 14px;
  423.         border-bottom: 1px solid #333;
  424.         border-bottom-color: rgba(51, 51, 51, .05);
  425.     }
  426.  
  427.     .course-item .course-info .teather-info span {
  428.         float: right;
  429.     }
  430.  
  431.     .course-item .section-list::after {
  432.         content: "";
  433.         display: block;
  434.         clear: both;
  435.     }
  436.  
  437.     .course-item .section-list li {
  438.         float: left;
  439.         width: 44%;
  440.         font-size: 14px;
  441.         color: #666;
  442.         padding-left: 22px;
  443.         /* background: url("路径") 是否平铺 x轴位置 y轴位置 */
  444.         background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;
  445.         margin-bottom: 15px;
  446.     }
  447.  
  448.     .course-item .section-list li .section-title {
  449.         /* 以下3句，文本内容过多，会自动隐藏，并显示省略符号 */
  450.         text-overflow: ellipsis;
  451.         overflow: hidden;
  452.         white-space: nowrap;
  453.         display: inline-block;
  454.         max-width: 200px;
  455.     }
  456.  
  457.     .course-item .section-list li:hover {
  458.         background-image: url("/src/assets/img/play-icon-yellow.svg");
  459.         color: #ffc210;
  460.     }
  461.  
  462.     .course-item .section-list li .free {
  463.         width: 34px;
  464.         height: 20px;
  465.         color: #fd7b4d;
  466.         vertical-align: super;
  467.         margin-left: 10px;
  468.         border: 1px solid #fd7b4d;
  469.         border-radius: 2px;
  470.         text-align: center;
  471.         font-size: 13px;
  472.         white-space: nowrap;
  473.     }
  474.  
  475.     .course-item .section-list li:hover .free {
  476.         color: #ffc210;
  477.         border-color: #ffc210;
  478.     }
  479.  
  480.     .course-item {
  481.         position: relative;
  482.     }
  483.  
  484.     .course-item .pay-box {
  485.         position: absolute;
  486.         bottom: 20px;
  487.         width: 600px;
  488.     }
  489.  
  490.     .course-item .pay-box::after {
  491.         content: "";
  492.         display: block;
  493.         clear: both;
  494.     }
  495.  
  496.     .course-item .pay-box .discount-type {
  497.         padding: 6px 10px;
  498.         font-size: 16px;
  499.         color: #fff;
  500.         text-align: center;
  501.         margin-right: 8px;
  502.         background: #fa6240;
  503.         border: 1px solid #fa6240;
  504.         border-radius: 10px 0 10px 0;
  505.         float: left;
  506.     }
  507.  
  508.     .course-item .pay-box .discount-price {
  509.         font-size: 24px;
  510.         color: #fa6240;
  511.         float: left;
  512.     }
  513.  
  514.     .course-item .pay-box .original-price {
  515.         text-decoration: line-through;
  516.         font-size: 14px;
  517.         color: #9b9b9b;
  518.         margin-left: 10px;
  519.         float: left;
  520.         margin-top: 10px;
  521.     }
  522.  
  523.     .course-item .pay-box .buy-now {
  524.         width: 120px;
  525.         height: 38px;
  526.         background: transparent;
  527.         color: #fa6240;
  528.         font-size: 16px;
  529.         border: 1px solid #fd7b4d;
  530.         border-radius: 3px;
  531.         transition: all .2s ease-in-out;
  532.         float: right;
  533.         text-align: center;
  534.         line-height: 38px;
  535.         position: absolute;
  536.         right: 0;
  537.         bottom: 5px;
  538.     }
  539.  
  540.     .course-item .pay-box .buy-now:hover {
  541.         color: #fff;
  542.         background: #ffc210;
  543.         border: 1px solid #ffc210;
  544.     }
  545.  
  546.     .course .course_pagination {
  547.         margin-bottom: 60px;
  548.         text-align: center;
  549.     }
  550. </style>

7 前台支付成功页面

  1. # 路由
  2. {
  3.         path: '/pay/success',
  4.         name: 'PaySuccess',
  5.         component: PaySuccess
  6.     },
  7.  
  8. #PaySuccess.vue
  9. <template>
  10.     <div class="pay-success">
  11.         <!--如果是单独的页面，就没必要展示导航栏(带有登录的用户)-->
  12.         <Header/>
  13.         <div class="main">
  14.             <div class="title">
  15.                 <div class="success-tips">
  16.                     <p class="tips">您已成功购买 1 门课程！</p>
  17.                 </div>
  18.             </div>
  19.             <div class="order-info">
  20.                 <p class="info"><b>订单号：</b><span>{{ result.out_trade_no }}</span></p>
  21.                 <p class="info"><b>交易号：</b><span>{{ result.trade_no }}</span></p>
  22.                 <p class="info"><b>付款时间：</b><span><span>{{ result.timestamp }}</span></span></p>
  23.             </div>
  24.             <div class="study">
  25.                 <span>立即学习</span>
  26.             </div>
  27.         </div>
  28.     </div>
  29. </template>
  30.  
  31. <script>
  32.     import Header from "@/components/Head"
  33.  
  34.     export default {
  35.         name: "Success",
  36.         data() {
  37.             return {
  38.                 result: {},
  39.             };
  40.         },
  41.         created() {
  42.             // url后拼接的参数：?及后面的所有参数 => ?a=1&b=2
  43.             // console.log(location.search);
  44.  
  45.             // 解析支付宝回调的url参数
  46.             let params = location.search.substring(1);  // 去除? => a=1&b=2
  47.             let items = params.length ? params.split('&') : [];  // ['a=1', 'b=2']
  48.             //逐个将每一项添加到args对象中
  49.             for (let i = 0; i < items.length; i++) {  // 第一次循环a=1，第二次b=2
  50.                 let k_v = items[i].split('=');  // ['a', '1']
  51.                 //解码操作，因为查询字符串经过编码的
  52.                 if (k_v.length >= 2) {
  53.                     // url编码反解
  54.                     let k = decodeURIComponent(k_v[0]);
  55.                     this.result[k] = decodeURIComponent(k_v[1]);
  56.                     // 没有url编码反解
  57.                     // this.result[k_v[0]] = k_v[1];
  58.                 }
  59.  
  60.             }
  61.             // 解析后的结果
  62.             // console.log(this.result);
  63.  
  64.  
  65.             // 把地址栏上面的支付结果，再get请求转发给后端
  66.             this.$axios({
  67.                 url: this.$settings.base_url + '/order/success/' + location.search,
  68.                 method: 'get',
  69.             }).then(response => {
  70.                 console.log(response.data);
  71.             }).catch(() => {
  72.                 console.log('支付结果同步失败');
  73.             })
  74.         },
  75.         components: {
  76.             Header,
  77.         }
  78.     }
  79. </script>
  80.  
  81. <style scoped>
  82.     .main {
  83.         padding: 60px 0;
  84.         margin: 0 auto;
  85.         width: 1200px;
  86.         background: #fff;
  87.     }
  88.  
  89.     .main .title {
  90.         display: flex;
  91.         -ms-flex-align: center;
  92.         align-items: center;
  93.         padding: 25px 40px;
  94.         border-bottom: 1px solid #f2f2f2;
  95.     }
  96.  
  97.     .main .title .success-tips {
  98.         box-sizing: border-box;
  99.     }
  100.  
  101.     .title img {
  102.         vertical-align: middle;
  103.         width: 60px;
  104.         height: 60px;
  105.         margin-right: 40px;
  106.     }
  107.  
  108.     .title .success-tips {
  109.         box-sizing: border-box;
  110.     }
  111.  
  112.     .title .tips {
  113.         font-size: 26px;
  114.         color: #000;
  115.     }
  116.  
  117.  
  118.     .info span {
  119.         color: #ec6730;
  120.     }
  121.  
  122.     .order-info {
  123.         padding: 25px 48px;
  124.         padding-bottom: 15px;
  125.         border-bottom: 1px solid #f2f2f2;
  126.     }
  127.  
  128.     .order-info p {
  129.         display: -ms-flexbox;
  130.         display: flex;
  131.         margin-bottom: 10px;
  132.         font-size: 16px;
  133.     }
  134.  
  135.     .order-info p b {
  136.         font-weight: 400;
  137.         color: #9d9d9d;
  138.         white-space: nowrap;
  139.     }
  140.  
  141.     .study {
  142.         padding: 25px 40px;
  143.     }
  144.  
  145.     .study span {
  146.         display: block;
  147.         width: 140px;
  148.         height: 42px;
  149.         text-align: center;
  150.         line-height: 42px;
  151.         cursor: pointer;
  152.         background: #ffc210;
  153.         border-radius: 6px;
  154.         font-size: 16px;
  155.         color: #fff;
  156.     }
  157. </style>

8 同步异步回调接口

  1. class SuccessView(APIView):
  2.     def get(self,request,*args,**kwargs):
  3.         out_trade_no=request.query_params.get('out_trade_no')
  4.         order=models.Order.objects.filter(out_trade_no=out_trade_no).first()
  5.         if order.order_status==1:
  6.             return Response(True)
  7.         else:
  8.             return Response(False)
  9.  
  10.     def post(self,request,*args,**kwargs):
  11.         '''
  12.         支付宝回调接口
  13.         '''
  14.         from luffyapi.libs.al_pay import alipay
  15.         from luffyapi.utils.logger import log
  16.         data = request.data
  17.         out_trade_no=data.get('out_trade_no',None)
  18.         gmt_payment=data.get('gmt_payment',None)
  19.         signature = data.pop("sign")
  20.         # 验证签名
  21.         success = alipay.verify(data, signature)
  22.         if success and data["trade_status"] in ("TRADE_SUCCESS", "TRADE_FINISHED"):
  23.             models.Order.objects.filter(out_trade_no=out_trade_no).update(order_status=1,pay_time=gmt_payment)
  24.             log.info('%s订单支付成功'%out_trade_no)
  25.             return Response('success')
  26.         else:
  27.             log.info('%s订单有问题' % out_trade_no)
  28.             return Response('error')
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/379883
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号