入门
"""
1）支付宝API：六大接口
https://docs.open.alipay.com/270/105900/
2）支付宝工作流程(见下图)：
https://docs.open.alipay.com/270/105898/
3）支付宝8次异步通知机制(支付宝对我们服务器发送POST请求，索要 success 7个字符)
https://docs.open.alipay.com/270/105902/
"""
# 1、在沙箱环境下实名认证：https://openhome.alipay.com/platform/appDaily.htm?tab=info
# 2、电脑网站支付API：https://docs.open.alipay.com/270/105900/
# 3、完成RSA密钥生成：https://docs.open.alipay.com/291/105971
# 4、在开发中心的沙箱应用下设置应用公钥：填入生成的公钥文件中的内容
# 5、Python支付宝开源框架：https://github.com/fzlee/alipay
# >: pip install python-alipay-sdk --upgrade
# 7、公钥私钥设置
"""
# alipay_public_key.pem
-----BEGIN PUBLIC KEY-----
支付宝公钥
-----END PUBLIC KEY-----
# app_private_key.pem
-----BEGIN RSA PRIVATE KEY-----
用户私钥
-----END RSA PRIVATE KEY-----
"""
# 8、支付宝链接
"""
开发：https://openapi.alipay.com/gateway.do
沙箱：https://openapi.alipaydev.com/gateway.do
"""
支付宝支付介绍
# 项目中需要有在线支付功能
-支付宝支付
-微信支付：备案过域名
-云闪付
# 咱们项目以支付宝支付为例
-支付流程
-API，sdk
-sdk：第三方sdk，基于API封装的
-官方sdk：https://opendocs.alipay.com/open/02no41
# 支付宝支付介绍
-申请条件很严苛
-沙箱环境：Sandbox：程序的虚拟执行环境，不需要申请各种认证，直接写程序，后期只需要换成只是的秘钥即可
![img]()
使用支付宝支付
# 使用沙箱环境
# 第三方的sdk：https://github.com/fzlee/alipay
-基于支付宝的API接口封装的，开源软件，
-pip3 install python-alipay-sdk
# 官方sdk
# 生成公钥私钥：支付宝提供咱们一个生成的工具
-https://opendocs.alipay.com/open/02np9g
-生成公钥私钥，在本地(私钥好好保管)
-非对称加密：
-公钥，私钥
-加密使用公钥，解密使用私钥
-对称加密：加密和解密使用同一个秘钥 ：AES，DES
-我能保证秘钥不丢失
-解密也要同样的秘钥，解密的人万一把秘钥丢失了
# 把公钥填在支付宝网站上（沙箱环境，正式环境）
-把咱么的公钥填进网站，会生成一个支付宝公钥，以后项目中咱们使用支付宝公钥来做
基本使用
from alipay import AliPay
from alipay.utils import AliPayConfig
# 初始化得到对象，传入一堆参数
alipay = AliPay(
appid="2016092000554611", # app的id号
app_notify_url=None, # 默认回调 url
app_private_key_string=open('./app_private_key.pem').read(),
# 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥,
alipay_public_key_string=open('./alipay_public_key.pem').read(),
sign_type="RSA2", # RSA 或者 RSA2
debug=False, # 默认 False
verbose=False, # 输出调试数据
config=AliPayConfig(timeout=15) # 可选，请求超时时间
)
# 生成支付链接
order_string = alipay.api_alipay_trade_page_pay(
out_trade_no="asdfasdfasdfasdfasdfasdf",
total_amount=99999,
subject='精品内衣',
return_url="https://example.com", # get回调地址
notify_url="https://example.com/notify" # post回调地址
)
# print('https://openapi.alipay.com/gateway.do?'+order_string)
print('https://openapi.alipaydev.com/gateway.do?'+order_string)
项目集成封装
GitHub开源框架
https://github.com/fzlee/alipay
依赖
>: pip install python-alipay-sdk --upgrade
# 如果抛ssl相关错误，代表缺失该包
>: pip install pyopenssl
libs
├── iPay # aliapy二次封装包
│ ├── __init__.py # 包文件
│ ├── pem # 公钥私钥文件夹
│ │ ├── alipay_public_key.pem # 支付宝公钥文件
│ │ ├── app_private_key.pem # 应用私钥文件
│ ├── pay.py # 支付文件
└── └── settings.py # 应用配置
alipay_public_key.pem
-----BEGIN PUBLIC KEY-----
拿应用公钥跟支付宝换来的支付宝公钥
-----END PUBLIC KEY-----
app_private_key.pem
-----BEGIN RSA PRIVATE KEY-----
通过支付宝公钥私钥签发软件签发的应用私钥
-----END RSA PRIVATE KEY-----
setting.py
import os
# 应用私钥
APP_PRIVATE_KEY_STRING = open(
os.path.join(os.path.dirname(os.path.abspath(__file__)), 'pem', 'app_private_key.pem')).read()
# 支付宝公钥
ALIPAY_PUBLIC_KEY_STRING = open(
os.path.join(os.path.dirname(os.path.abspath(__file__)), 'pem', 'alipay_public_key.pem')).read()
# 应用ID
APP_ID = '2021000121697116'
# 加密算法
SIGN = 'RSA2'
# 是否是支付宝测试环境(沙箱环境)，如果采用真是支付宝环境，配置False
DEBUG = True
# 支付网关
GATEWAY = 'https://openapi.alipaydev.com/gateway.do' if DEBUG else 'https://openapi.alipay.com/gateway.do'
t_alipay.py
from alipay import AliPay
from alipay.utils import AliPayConfig
from . import settings
# 初始化
alipay = AliPay(
appid=settings.APP_ID, # 沙箱环境里
app_notify_url=None, # 默认回调 url
app_private_key_string=settings.APP_PRIVATE_KEY_STRING, # 私钥
# 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥,
alipay_public_key_string=settings.ALIPAY_PUBLIC_KEY_STRING, # 公钥
sign_type=settings.SIGN, # RSA 或者 RSA2
debug=False, # 默认 False
verbose=False, # 输出调试数据
config=AliPayConfig(timeout=15) # 可选，请求超时时间
)
# 生成支付链接
# order_string = alipay.api_alipay_trade_page_pay(
# out_trade_no="2sasd22323a1213", # 订单号
# total_amount=9991, # 价格
# subject='情趣内衣', # 商品标题
# return_url="https://baidu.com",
# notify_url="https://example.com/notify" # 可选，不填则使用默认 notify url
# )
# print('https://openapi.alipaydev.com/gateway.do?' + order_string) # 需沙箱拼接地址 跳转支付链接地址
init.py
from .t_alipay import alipay
from .settings import GATEWAY
创建订单app后端
models.py
"""
class Order(models.Model):
# 主键、总金额、订单名、订单号、订单状态、创建时间、支付时间、流水号、支付方式、支付人(外键) - 优惠劵(外键，可为空)
pass
class OrderDetail(models.Model):
# 订单号(外键)、商品(外键)、实价、成交价 - 商品数量
pass
"""
from django.db import models
from django.db import models
from user.models import UserInfo
from course.models import Course
class Order(models.Model):
"""订单模型"""
status_choices = (
(0, '未支付'),
(1, '已支付'),
(2, '已取消'),
(3, '超时取消'),
)
pay_choices = (
(1, '支付宝'),
(2, '微信支付'),
)
subject = models.CharField(max_length=150, verbose_name="订单标题")
total_amount = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="订单总价", default=0)
# 生成订单号 uuid生产
out_trade_no = models.CharField(max_length=64, verbose_name="订单号", unique=True)
# 支付成功流水号
trade_no = models.CharField(max_length=64, null=True, verbose_name="流水号")
# 支付状态
order_status = models.SmallIntegerField(choices=status_choices, default=0, verbose_name="订单状态")
pay_type = models.SmallIntegerField(choices=pay_choices, default=1, verbose_name="支付方式")
# 支付宝支付时间支付完成返回
pay_time = models.DateTimeField(null=True, verbose_name="支付时间")
user = models.ForeignKey(UserInfo, related_name='order_user', on_delete=models.DO_NOTHING, db_constraint=False, verbose_name="下单用户")
created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
class Meta:
db_table = "luffy_order"
verbose_name = "订单记录"
verbose_name_plural = "订单记录"
def __str__(self):
return "%s - ￥%s" % (self.subject, self.total_amount)
@property
def courses(self):
data_list = []
for item in self.order_courses.all():
data_list.append({
"id": item.id,
"course_name": item.course.name,
"real_price": item.real_price,
})
return data_list
class OrderDetail(models.Model):
"""订单详情"""
order = models.ForeignKey(Order, related_name='order_courses', on_delete=models.CASCADE, db_constraint=False, verbose_name="订单")
course = models.ForeignKey(Course, related_name='course_orders', on_delete=models.CASCADE, db_constraint=False, verbose_name="课程")
price = models.DecimalField(max_digits=6, decimal_places=2, verbose_name="课程原价")
real_price = models.DecimalField(max_digits=6, decimal_places=2, verbose_name="课程实价")
class Meta:
db_table = "luffy_order_detail"
verbose_name = "订单详情"
verbose_name_plural = "订单详情"
def __str__(self):
try:
return "%s的订单：%s" % (self.course.name, self.order.out_trade_no)
except:
return super().__str__()
views.py
from rest_framework.viewsets import GenericViewSet
from .serializer import OrderSerializer
from .models import Order
from utils.response import APIResponse
from rest_framework_jwt.authentication import JSONWebTokenAuthentication
from rest_framework.permissions import IsAuthenticated
from rest_framework.viewsets import ViewSet
from rest_framework.exceptions import APIException
from rest_framework.response import Response
from utils.common_logger import logger
# 新增订单接口返回支付链接
class OrderView(GenericViewSet):
queryset = Order.objects.all()
serializer_class = OrderSerializer
# 登陆才访问
authentication_classes = [JSONWebTokenAuthentication]
permission_classes = [IsAuthenticated]
def create(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data, context={'request': request})
serializer.is_valid(raise_exception=True)
serializer.save()
pay_url = serializer.context.get('pay_url')
return APIResponse(pay_url=pay_url)
class PaySuccessView(ViewSet):
def list(self, request):
try:
out_trade_no = request.query_params.get('out_trade_no')
Order.objects.get(out_trade_no=out_trade_no, order_status=1)
return APIResponse()
except Exception as e:
raise APIException('该订单暂未查到，请稍后刷新再试')
def create(self, request):
pass
# 支付宝异步回调处理
def post(self, request, *args, **kwargs): # 给支付宝用暂无法测试
try:
result_data = request.data.dict() # 回调的编码是querydict对象转成纯dict对象
out_trade_no = result_data.get('out_trade_no')
signature = result_data.pop('sign')
from libs import t_alipay
# 验证签名sdk写好了 result_data和signature验证签名
result = t_alipay.alipay.verify(result_data, signature)
if result and result_data["trade_status"] in ("TRADE_SUCCESS", "TRADE_FINISHED"):
# 完成订单修改：订单状态、流水号、支付时间
Order.objects.filter(out_trade_no=out_trade_no).update(order_status=1,
pay_time=result_data.get('timestamp'),
trade_no=result_data.get('trade_no'))
# 完成日志记录
logger.warning('%s订单支付成功' % out_trade_no)
return Response('success') # 支付宝要求返回的格式
else:
logger.error('%s订单支付失败' % out_trade_no)
except:
return Response('failed')
return Response('failed')
serializer.py
from rest_framework import serializers
from .models import Order, OrderDetail
from course.models import Course
from rest_framework.exceptions import APIException
from libs.t_alipay import alipay, GATEWAY
from django.conf import settings
class OrderSerializer(serializers.ModelSerializer):
# 前端传入courses：[1,2,3] 转成课程对象 [1,2,3]
courses = serializers.PrimaryKeyRelatedField(queryset=Course.objects.all(), write_only=True, many=True)
class Meta:
model = Order
fields = ['courses', 'total_amount', 'subject', 'pay_type']
def _check_total_amount(self, attrs):
total_amount = attrs.get('total_amount')
real_total = 0
for course in attrs.get('courses'):
real_total += course.price
if total_amount == real_total:
return real_total
raise APIException('价格不一致')
def _get_pay_trade_no(self):
import uuid
return str(uuid.uuid4())
def _get_user(self):
request = self.context.get('request')
return request.user # 通过登陆认证才有不通过没有
# 获取支付链接
def _get_pay_url(self, total_amount, subject, out_trade_no):
pay_url = alipay.api_alipay_trade_page_pay(
out_trade_no=out_trade_no, # 订单号
total_amount=float(total_amount), # 价格
subject=subject, # 商品标题
return_url=settings.RETURN_URL,
notify_url=settings.NOTIFY_URL # 可选，不填则使用默认 notify url
)
return GATEWAY + '?' + pay_url
def _before_create(self, attrs, pay_url, user, out_trade_no):
self.context['pay_url'] = pay_url
attrs['user'] = user
attrs['out_trade_no'] = out_trade_no
def validate(self, attrs):
# 1）订单总价校验
total_amount = self._check_total_amount(attrs)
# 2）生成订单号
out_trade_no = self._get_pay_trade_no()
# 3）支付用户：request.user
user = self._get_user()
# 4）支付链接生成
pay_url = self._get_pay_url(total_amount, attrs.get('subject'), out_trade_no)
# 5）入库(两个表)的信息准备
self._before_create(attrs, pay_url, user, out_trade_no)
return attrs
def create(self, validated_data):
courses = validated_data.pop('courses')
order = Order.objects.create(**validated_data)
# 存订单详情
for course in courses:
OrderDetail.objects.create(order=order, course=course, price=course.price, real_price=course.price)
return order
order/urls.py
"""
1）支付接口(需要登录认证：是谁)：前台提交商品等信息，得到支付链接
post方法
分析：支付宝回调
同步：get给前台 => 前台可以在收到支付宝同步get回调时，ajax异步在给消息同步给后台，也采用get，后台处理前台的get请求
异步：post给后台 => 后台直接处理支付宝的post请求
2）支付回调接口(不需要登录认证：哪个订单(订单信息中有非对称加密)、支付宝压根不可能有你的token)：
get方法：处理前台来的同步回调（不一定能收得到，所有不能在该方法完成后台订单状态等信息操作）
post方法：处理支付宝来的异步回调
3）订单状态确认接口：随你前台任何时候来校验订单状态的接口
"""
from django.urls import path
from order import views
from rest_framework.routers import SimpleRouter
router = SimpleRouter()
router.register('alipay',views.OrderView,'alipay')
router.register('success',views.PaySuccessView,'success')
urlpatterns = [
]
urlpatterns += router.urls
支付前端
修改前端课程详情页面中支付按钮
CourseDetail.vue
<template>
<div class="detail">
<Header/>
<div class="main">
<div class="course-info">
<div class="wrap-left">
<vue-core-video-player :src="mp4_url" :autoplay="true"
cover="https://img2.baidu.com/it/u=1081587999,1946467407&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1668877200&t=a2c574024e592a9d66069aab71a36721"></vue-core-video-player>
</div>
<div class="wrap-right">
<h3 class="course-name">{{ course_info.name }}</h3>
<p class="data">
{{ course_info.students }}人在学 课程总时长：{{
course_info.sections
}}课时/{{ course_info.pub_sections }}小时 难度：{{ course_info.level_name }}</p>
<div class="sale-time">
<p class="sale-type">价格 <span class="original_price">¥{{ course_info.price }}</span></p>
<p class="expire"></p>
</div>
<div class="buy">
<div class="buy-btn">
<button class="buy-now" @click="go_buy(course_info.price,course_info.name)">立即购买</button>
<button class="free">免费试学</button>
</div>
<!--<div class="add-cart" @click="add_cart(course_info.id)">-->
<!--<img src="@/assets/img/cart-yellow.svg" alt="">加入购物车-->
<!--</div>-->
</div>
</div>
</div>
<div class="course-tab">
<ul class="tab-list">
<li :class="tabIndex==1?'active':''" @click="tabIndex=1">详情介绍</li>
<li :class="tabIndex==2?'active':''" @click="tabIndex=2">课程章节 <span :class="tabIndex!=2?'free':''">(试学)</span>
</li>
<li :class="tabIndex==3?'active':''" @click="tabIndex=3">用户评论</li>
<li :class="tabIndex==4?'active':''" @click="tabIndex=4">常见问题</li>
</ul>
</div>
<div class="course-content">
<div class="course-tab-list">
<div class="tab-item" v-if="tabIndex==1">
<div class="course-brief" v-html="course_info.brief"></div>
</div>
<div class="tab-item" v-if="tabIndex==2">
<div class="tab-item-title">
<p class="chapter">课程章节</p>
<p class="chapter-length">共{{ course_chapters.length }}章 {{ course_info.sections }}个课时</p>
</div>
<div class="chapter-item" v-for="chapter in course_chapters" :key="chapter.name">
<p class="chapter-title"><img src="@/assets/img/enum.svg"
alt="">第{{ chapter.id }}章·{{ chapter.name }}
</p>
<ul class="section-list">
<li class="section-item" v-for="section in chapter.section_detail" :key="section.name">
<p class="name"><span class="index">{{ chapter.chapter }}-{{ section.orders }}</span>
{{ section.name }}<span class="free" v-if="section.free_trail">免费</span></p>
<p class="time">{{ section.duration }} <img src="@/assets/img/chapter-player.svg"></p>
<button class="try" v-if="section.free_trail">立即试学</button>
<button class="try" v-else>立即购买</button>
</li>
</ul>
</div>
</div>
<div class="tab-item" v-if="tabIndex==3">
用户评论
</div>
<div class="tab-item" v-if="tabIndex==4">
常见问题
</div>
</div>
<div class="course-side">
<div class="teacher-info">
<h4 class="side-title"><span>授课老师</span></h4>
<div class="teacher-content">
<div class="cont1">
<img :src="course_info.teacher.image">
<div class="name">
<p class="teacher-name">{{ course_info.teacher.name }}
{{ course_info.teacher.title }}</p>
<p class="teacher-title">{{ course_info.teacher.signature }}</p>
</div>
</div>
<p class="narrative">{{ course_info.teacher.brief }}</p>
</div>
</div>
</div>
</div>
</div>
<Footer/>
</div>
</template>
<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
name: "CourseDetail",
data() {
return {
tabIndex: 2, // 当前选项卡显示的下标
course_id: 0, // 当前课程信息的ID
course_info: {
teacher: {},
}, // 课程信息
course_chapters: [], // 课程的章节课时列表
// mp4_url: require("@/assets/img/致命诱惑.mp4"),
mp4_url: 'http://192.168.1.139:8000/media/mp4/%E8%87%B4%E5%91%BD%E8%AF%B1%E6%83%91.mp4' //外链链接
}
},
created() {
this.get_course_id();
this.get_course_data();
this.get_chapter();
},
methods: {
onPlayerPlay() {
// 当视频播放时，执行的方法
console.log('视频开始播放')
},
onPlayerPause() {
// 当视频暂停播放时，执行的方法
console.log('视频暂停，可以打开广告了')
},
get_course_id() {
// 获取地址栏上面的课程ID
this.course_id = this.$route.params.id || this.$route.query.id;
if (this.course_id < 1) {
let _this = this;
_this.$alert("对不起，当前视频不存在！", "警告", {
callback() {
_this.$router.go(-1);
}
});
}
},
get_course_data() {
// ajax请求课程信息
this.$axios.get(`${this.$settings.BASE_URL}course/list/${this.course_id}/`).then(response => {
// window.console.log(response.data);
this.course_info = response.data;
console.log(this.course_info)
}).catch(() => {
this.$message({
message: "对不起，访问页面出错！请联系客服工作人员！"
});
})
},
//获取文章
get_chapter() {
this.$axios.get(`${this.$settings.BASE_URL}course/chapter/`, {
params: {
"course": this.course_id,
}
}).then(response => {
this.course_chapters = response.data.result.results;
}).catch(error => {
console.log(error.response);
})
},
//创建订单购买课程
go_buy(price, course_name) {
let token = this.$cookies.get('token')
if (token) {
this.$axios.post(this.$settings.BASE_URL + 'order/alipay/', {
'courses': [this.course_id] ,'total_amount': price,
'subject': course_name, 'pay_type': 1,
}, {
headers: {
'Authorization': 'jwt ' + token
}
}).then(response => {
if (response.data.code == 100) {
open(response.data.pay_url, '_self')
} else {
this.$message({
message: response.data.msg
, type: 'error'
});
}
})
} else {
this.$message.error('暂未登陆请前往登陆')
}
}
},
components: {
Header,
Footer,
}
}
</script>
<style scoped>
.main {
background: #fff;
padding-top: 30px;
}
.course-info {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.wrap-left {
float: left;
width: 690px;
height: 388px;
background-color: #000;
}
.wrap-right {
float: left;
position: relative;
height: 388px;
}
.course-name {
font-size: 20px;
color: #333;
padding: 10px 23px;
letter-spacing: .45px;
}
.data {
padding-left: 23px;
padding-right: 23px;
padding-bottom: 16px;
font-size: 14px;
color: #9b9b9b;
}
.sale-time {
width: 464px;
background: #fa6240;
font-size: 14px;
color: #4a4a4a;
padding: 10px 23px;
overflow: hidden;
}
.sale-type {
font-size: 16px;
color: #fff;
letter-spacing: .36px;
float: left;
}
.sale-time .expire {
font-size: 14px;
color: #fff;
float: right;
}
.sale-time .expire .second {
width: 24px;
display: inline-block;
background: #fafafa;
color: #5e5e5e;
padding: 6px 0;
text-align: center;
}
.course-price {
background: #fff;
font-size: 14px;
color: #4a4a4a;
padding: 5px 23px;
}
.discount {
font-size: 26px;
color: #fa6240;
margin-left: 10px;
display: inline-block;
margin-bottom: -5px;
}
.original {
font-size: 14px;
color: #9b9b9b;
margin-left: 10px;
text-decoration: line-through;
}
.buy {
width: 464px;
padding: 0px 23px;
position: absolute;
left: 0;
bottom: 20px;
overflow: hidden;
}
.buy .buy-btn {
float: left;
}
.buy .buy-now {
width: 125px;
height: 40px;
border: 0;
background: #ffc210;
border-radius: 4px;
color: #fff;
cursor: pointer;
margin-right: 15px;
outline: none;
}
.buy .free {
width: 125px;
height: 40px;
border-radius: 4px;
cursor: pointer;
margin-right: 15px;
background: #fff;
color: #ffc210;
border: 1px solid #ffc210;
}
.add-cart {
float: right;
font-size: 14px;
color: #ffc210;
text-align: center;
cursor: pointer;
margin-top: 10px;
}
.add-cart img {
width: 20px;
height: 18px;
margin-right: 7px;
vertical-align: middle;
}
.course-tab {
width: 100%;
background: #fff;
margin-bottom: 30px;
box-shadow: 0 2px 4px 0 #f0f0f0;
}
.course-tab .tab-list {
width: 1200px;
margin: auto;
color: #4a4a4a;
overflow: hidden;
}
.tab-list li {
float: left;
margin-right: 15px;
padding: 26px 20px 16px;
font-size: 17px;
cursor: pointer;
}
.tab-list .active {
color: #ffc210;
border-bottom: 2px solid #ffc210;
}
.tab-list .free {
color: #fb7c55;
}
.course-content {
width: 1200px;
margin: 0 auto;
background: #FAFAFA;
overflow: hidden;
padding-bottom: 40px;
}
.course-tab-list {
width: 880px;
height: auto;
padding: 20px;
background: #fff;
float: left;
box-sizing: border-box;
overflow: hidden;
position: relative;
box-shadow: 0 2px 4px 0 #f0f0f0;
}
.tab-item {
width: 880px;
background: #fff;
padding-bottom: 20px;
box-shadow: 0 2px 4px 0 #f0f0f0;
}
.tab-item-title {
justify-content: space-between;
padding: 25px 20px 11px;
border-radius: 4px;
margin-bottom: 20px;
border-bottom: 1px solid #333;
border-bottom-color: rgba(51, 51, 51, .05);
overflow: hidden;
}
.chapter {
font-size: 17px;
color: #4a4a4a;
float: left;
}
.chapter-length {
float: right;
font-size: 14px;
color: #9b9b9b;
letter-spacing: .19px;
}
.chapter-title {
font-size: 16px;
color: #4a4a4a;
letter-spacing: .26px;
padding: 12px;
background: #eee;
border-radius: 2px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.chapter-title img {
width: 18px;
height: 18px;
margin-right: 7px;
vertical-align: middle;
}
.section-list {
padding: 0 20px;
}
.section-list .section-item {
padding: 15px 20px 15px 36px;
cursor: pointer;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.section-item .name {
font-size: 14px;
color: #666;
float: left;
}
.section-item .index {
margin-right: 5px;
}
.section-item .free {
font-size: 12px;
color: #fff;
letter-spacing: .19px;
background: #ffc210;
border-radius: 100px;
padding: 1px 9px;
margin-left: 10px;
}
.section-item .time {
font-size: 14px;
color: #666;
letter-spacing: .23px;
opacity: 1;
transition: all .15s ease-in-out;
float: right;
}
.section-item .time img {
width: 18px;
height: 18px;
margin-left: 15px;
vertical-align: text-bottom;
}
.section-item .try {
width: 86px;
height: 28px;
background: #ffc210;
border-radius: 4px;
font-size: 14px;
color: #fff;
position: absolute;
right: 20px;
top: 10px;
opacity: 0;
transition: all .2s ease-in-out;
cursor: pointer;
outline: none;
border: none;
}
.section-item:hover {
background: #fcf7ef;
box-shadow: 0 0 0 0 #f3f3f3;
}
.section-item:hover .name {
color: #333;
}
.section-item:hover .try {
opacity: 1;
}
.course-side {
width: 300px;
height: auto;
margin-left: 20px;
float: right;
}
.teacher-info {
background: #fff;
margin-bottom: 20px;
box-shadow: 0 2px 4px 0 #f0f0f0;
}
.side-title {
font-weight: normal;
font-size: 17px;
color: #4a4a4a;
padding: 18px 14px;
border-bottom: 1px solid #333;
border-bottom-color: rgba(51, 51, 51, .05);
}
.side-title span {
display: inline-block;
border-left: 2px solid #ffc210;
padding-left: 12px;
}
.teacher-content {
padding: 30px 20px;
box-sizing: border-box;
}
.teacher-content .cont1 {
margin-bottom: 12px;
overflow: hidden;
}
.teacher-content .cont1 img {
width: 54px;
height: 54px;
margin-right: 12px;
float: left;
}
.teacher-content .cont1 .name {
float: right;
}
.teacher-content .cont1 .teacher-name {
width: 188px;
font-size: 16px;
color: #4a4a4a;
padding-bottom: 4px;
}
.teacher-content .cont1 .teacher-title {
width: 188px;
font-size: 13px;
color: #9b9b9b;
white-space: nowrap;
}
.teacher-content .narrative {
font-size: 14px;
color: #666;
line-height: 24px;
}
</style>
路由添加
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Course from "@/views/Course";
import FreeCourse from "@/views/FreeCourse";
import LightCourse from "@/views/LightCourse";
import CourseDetail from "@/views/CourseDetail";
import SearchView from "@/views/SearchView";
import PaySuccess from "@/views/PaySuccess";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
}, {
path: '/free-course',
name: 'free-course',
component: LightCourse
}, {
path: '/light-course',
name: 'light-course',
component: FreeCourse
},{
path: '/actual-course',
name: 'course',
component: Course
},{
path: '/course/detail/:id',
name: 'course-detail',
component: CourseDetail
},{
path: '/course/search',
name: 'search',
component: SearchView
},{
path: '/pay/success', //和后端get回调地址一致
name: 'pay-success',
component: PaySuccess}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
支付完成之后回调到该页面页面组件
PaySuccess.vue----->页面组件
<template>
<div class="pay-success">
<!--如果是单独的页面，就没必要展示导航栏(带有登录的用户)-->
<Header/>
<div class="main">
<div class="title">
<div class="success-tips">
<p class="tips">您已成功购买 1 门课程！</p>
</div>
</div>
<div class="order-info">
<p class="info"><b>订单号：</b><span>{{ result.out_trade_no }}</span></p>
<p class="info"><b>交易号：</b><span>{{ result.trade_no }}</span></p>
<p class="info"><b>付款时间：</b><span><span>{{ result.timestamp }}</span></span></p>
</div>
<div class="study">
<span>立即学习</span>
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header"
export default {
name: "Success",
data() {
return {
result: {},
};
},
created() {
// url后拼接的参数：?及后面的所有参数 => ?a=1&b=2
// console.log(location.search);
// 解析支付宝回调的url参数
let params = location.search.substring(1); // 去除? => a=1&b=2
let items = params.length ? params.split('&') : []; // ['a=1', 'b=2']
//逐个将每一项添加到args对象中
for (let i = 0; i < items.length; i++) { // 第一次循环a=1，第二次b=2
let k_v = items[i].split('='); // ['a', '1']
//解码操作，因为查询字符串经过编码的
if (k_v.length >= 2) {
// url编码反解
let k = decodeURIComponent(k_v[0]);
this.result[k] = decodeURIComponent(k_v[1]);
// 没有url编码反解
// this.result[k_v[0]] = k_v[1];
}
}
// 解析后的结果
// console.log(this.result);
// 把地址栏上面的支付结果，再get请求转发给后端
this.$axios({
url: this.$settings.BASE_URL + 'order/success/' + location.search,
method: 'get',
}).then(response => {
this.$message({
message: response.data.msg
, type: 'error'
});
}).catch(() => {
this.$message({
message: '支付结果同步失败'
, type: 'error'
});
})
},
components: {
Header,
}
}
</script>
<style scoped>
.main {
padding: 60px 0;
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 .tips {
font-size: 26px;
color: #000;
}
.info span {
color: #ec6730;
}
.order-info {
padding: 25px 48px;
padding-bottom: 15px;
border-bottom: 1px solid #f2f2f2;
}
.order-info p {
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
font-size: 16px;
}
.order-info p b {
font-weight: 400;
color: #9d9d9d;
white-space: nowrap;
}
.study {
padding: 25px 40px;
}
.study span {
display: block;
width: 140px;
height: 42px;
text-align: center;
line-height: 42px;
cursor: pointer;
background: #ffc210;
border-radius: 6px;
font-size: 16px;
color: #fff;
}
</style>
后端项目配置文件修改
HOST_URL = 'http://127.0.0.1:8000'
# 支付宝回调地址
# 上线后必须换成公网地址
# 前台基URL
LUFFY_URL = 'http://127.0.0.1:8080'
# 支付宝同步异步回调接口配置
# 后台异步回调接口post回调 配合后端接口
NOTIFY_URL = HOST_URL + "/api/v1/order/success/"
# 前台同步回调接口，没有 / 结尾前端配合支付前端页面
RETURN_URL = LUFFY_URL + "/pay/success"
# jwt过期时间
import datetime
JWT_AUTH = {'JWT_EXPIRATION_DELTA': datetime.timedelta(days=3)}
支付宝回调接口
# 支付成功，支付宝会有俩回调
-get 回调，调前端
-为了保证准确性，支付宝回调会前端后，我们自己向后端发送一个请求，查询一下这个订单是否支付成功
-post 回调，调后端接口
-后端接口，接受支付宝的回调，修改订单状态
-这个接口需要登录吗？不需要任何的认证和权限
-如果用户点了支付----》跳转到了支付宝页面---》你的服务挂机了---》会出现什么情况
-支付宝在24小时内，会有8次回调，
# 两个接口：
-post回调，给支付宝用
-get回调，给我们前端做二次校验使用
浙公网安备 33010602011771号