day87:luffy:结算页面积分&支付宝接口

目录

1.积分

2.支付

1.积分

1.关于积分的表结构

1.在user表中添加credit字段 + 设计一个积分的表结构

user/models.py

class User(AbstractUser):
phone = models.CharField(max_length=16,null=True,blank=True)
wechat = models.CharField(max_length=16,null=True,blank=True)

# 为用户表添加积分字段 每个用户都有自己积分
credit = models.IntegerField(default=0, blank=True, verbose_name="贝里")

class Credit(BaseModel):
"""积分流水"""
OPERA_OPION = (
(1, "赚取"),
(2, "消费"),
)
user = models.ForeignKey("User", related_name="user_credit", on_delete=models.CASCADE, verbose_name="用户")
opera = models.SmallIntegerField(choices=OPERA_OPION,verbose_name="操作类型")
number = models.SmallIntegerField(default=0, verbose_name="积分数值")

class Meta:
db_table = 'ly_credit'
verbose_name = '积分流水'
verbose_name_plural = verbose_name

def __str__(self):
return "%s %s %s 贝壳" % ( self.user.username, self.OPERA_OPION[self.opera][1], self.number )

2.设置积分和现金的兑换比例

constant.py

CREDIT_MONEY = 10 # 10积分顶一块钱

2.登录成功将积分回复给前端

1.登录成功 给前端回复除了[用户名 id token]，也要把[积分和计算公式]回复给前端

user/utils.py

def jwt_response_payload_handler(token, user=None, request=None):
return {
'token': token,
'username': user.username,
'id':user.id,

# 登录成功将积分和兑换比例也要返回给前端
'credit':user.credit,
'credit_to_money':contains.CREDIT_MONEY,
}

2.前端将积分存起来

login.vue

if (this.remember){
localStorage.token = res.data.token;
localStorage.username = res.data.username;
localStorage.id = res.data.id;

// 前端将积分存起来
localStorage.credit = res.data.credit;
localStorage.credit_to_money = res.data.credit_to_money;
sessionStorage.removeItem('token');
sessionStorage.removeItem('username');
sessionStorage.removeItem('id');
sessionStorage.removeItem('credit');
sessionStorage.removeItem('credit_to_money');

}else {
sessionStorage.token = res.data.token;
sessionStorage.username = res.data.username;
sessionStorage.id = res.data.id;

// 前端将积分存起来
sessionStorage.credit = res.data.credit;
sessionStorage.credit_to_money = res.data.credit_to_money;
localStorage.removeItem('token');
localStorage.removeItem('username');
localStorage.removeItem('id');
localStorage.removeItem('credit');
localStorage.removeItem('credit_to_money');
}

3.自行输入使用积分

在input标签中绑定一个change方法 当input标签输入的值发生变化的时候 触发@change下对应的方法

order.vue

<!-- html -->
<p class="discount-num2" v-else><span>总积分：xxxx，
<el-input-number v-model="num" @change="handleChange" :min="0" :max="10000" label="描述文字"></el-input-number>，已抵扣xxx元，本次花费xxx积分</span></p>

// js
handleChange(value){
// 如果用户在积分输入框中没有输入值，那么默认使用了0个积分
if (!value){
this.num = 0
}
console.log(value);

},

4.拿取积分

order.vue

get_credit(){
// 从前端拿取积分和兑换比例
this.credit = localStorage.getItem('credit') || sessionStorage.getItem('credit')
this.credit_to_money = localStorage.getItem('credit_to_money') || sessionStorage.getItem('credit_to_money')
},

5.在页面展示出积分

order.vue

<!-- html -->
<p class="discount-num2" v-else><span>总积分：{{credit}}，

6.计算可以使用的最大积分

order.vue

max_credit(){

// 计算此课程能使用的最大积分数：比如100元的课程最多能使用1000积分
let a = parseFloat(this.total_price) * parseFloat(this.credit_to_money);

// 如果此课程能使用的最大积分数[1000]小于你的总积分数[1500]：那么你能使用的最大积分数就是[1000]
if (this.credit >= a){
return a
// 如果此课程能使用的最大积分数[1000]大于你的总积分数[600]，那么你能使用的最大积分数就是你剩余的积分数[600]
}else {
return parseFloat(this.credit)
}

7.前端发送请求

order.vue

payhander(){
let token = localStorage.token || sessionStorage.token;
this.$axios.post(`${this.$settings.Host}/order/add_money/`,{
"pay_type":this.pay_type,
"coupon":this.current_coupon,
"credit":this.num, // 将积分提交给后端，让后端对积分做校验

},{
headers:{
'Authorization':'jwt ' + token
}
}).then((res)=>{
this.$message.success('订单已经生成，马上跳转支付页面')

}).catch((error)=>{
this.$message.error(error.response.data.msg);
})

}

8.后端对积分做校验

order/serializers.py

def validate(self, attrs):

# 获取前端发过来的积分
credit = attrs.get('credit')

# 查询用户所拥有的的所有积分
user_credit = self.context['request'].user.credit

# 如果前端积分大于用户积分,抛出异常
if credit > user_credit:
raise serializers.ValidationError('积分超上限了，别乱搞')

return attrs

def create(self, validated_data):

# 积分判断
credit = float(validated_data.get('credit',0)) # 获取前端发过来的验证之后的积分
if credit > constants.CREDIT_MONEY * total_real_price: # 如果使用积分超过你此课程能使用的最大积分
transaction.savepoint_rollback(sid) # 回滚到断点处
raise serializers.ValidationError('使用积分超过了上线，别高事情')

# 积分计算
total_real_price -= credit / contains.CREDIT_MONEY

2.支付

1.准备工作

1.安装python-alipay-sdk

pip install python-alipay-sdk --upgrade

2.创建应用payment,并配置INSTALLAPP

python3 manage.py startapp payment

3.在payment应用目录创建keys文件夹

2.公钥和私钥

<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">您已成功购买 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/image/server.cf99f78.png" alt="" class="er">-->
<!--          <p><img src="../../static/image/tan.svg" alt="">重要！微信扫码关注获得学习通知&amp;课程更新提醒！否则将严重影响学习进度和课程体验！</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,
};
},
created(){
// 把地址栏上面的支付结果，转发给后端

},
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{
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-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-size: 16px;
color: #fff;
}
</style>

{
path: '/payment/result/',
component: Success
},