day88:luffy:支付宝同步结果通知&接收异步支付结果&用户购买记录&我的订单

1.支付宝同步结果通知

1.get请求支付宝，支付宝返回给你的参数

当用户输入用户名和密码确认支付的时候，支付宝会给vue前端回复一个url，这个url很长，后面包含了很多参数，参数如下所示：

http://www.luffycity.cn:8080/payments/result?

charset=utf8&

out_trade_no=20190929151453000001000020&

method=alipay.trade.page.pay.return&

total_amount=310.00&

sign=kebIZBI%2FpCNXmCivfJPPw21gcobulPZoSh%2BXiHR8l6cgexQi2STG4AZgr%2FEUhvc5kEMacJLvCmBaw1Wqo4WK3sPzbUaPmzq3NshUNzYK2lWTsmOauidNxlk1bK0Q%2FANBfQUkmj6TQjyB5T9QqEnS80KFsDrGrasU%2B%2Fz9W%2FjOCLrSji6TnKhRkI9pqBMdw823ABU75b7zOtXzcXKduO%2B6vsXVvluMzedss9dHs1celxPAWQV9jcKjzq%2F1bPbZcmgAGNQQecoJ%2BFSc3uTmTk24uV39PM54LIlg8aeRlkPNjvhBkJh%2FG0%2BURNDdG2593IFIF%2BUqoU%2F7ixm19dX222GCWg%3D%3D&

trade_no=2019092922001439881000120282&

auth_app_id=2016091600523592&

version=1.0&

app_id=2016091600523592&

sign_type=RSA2&

seller_id=2088102175868026&

timestamp=2019-09-29%2015%3A15%3A53

这些参数的含义：https://opendocs.alipay.com/apis/api_1/alipay.trade.page.pay

2.后端实现处理支付宝同步通知结果的视图

支付宝将参数传递给了vue前端，vue前端要这些参数发送给后端，让后端去对这些参数做一个校验。判断这个url是不是支付宝发过来的

后端校验支付宝返回给你的那些参数

payment/urls.py

from django.urls import path,re_path

from . import views

urlpatterns = [

    path('result/',views.AlipayResultView.as_view(),)

]

payment/view.py

class AlipayResultView(APIView):

    permission_classes = [IsAuthenticated, ]

    def get(self,request):

        # 1.创建alipay对象

        alipay = AliPay(

            appid=settings.ALIAPY_CONFIG['appid'],

            app_notify_url=None,  # 默认回调url

            app_private_key_string=open(settings.ALIAPY_CONFIG['app_private_key_path']).read(),

            # 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥,

            alipay_public_key_string=open(settings.ALIAPY_CONFIG['alipay_public_key_path']).read(),

            sign_type=settings.ALIAPY_CONFIG['sign_type'],  # RSA 或者 RSA2

            debug=settings.ALIAPY_CONFIG['debug'],  # 默认False

        )

        # 2.校验支付宝响应数据

        data = request.query_params.dict() # 获取那一大堆的参数

        out_trade_no = data.get('out_trade_no') # 获取商户订单号

        sign = data.pop('sign') # 获取签名

        success = alipay.verify(data,sign) # 通过参数和签名来验证那一堆参数是不是支付宝发过来的

        if not success:

            logger.error('%s,支付宝响应数据校验失败' % out_trade_no)

            return Response('支付宝响应数据校验失败',status=status.HTTP_400_BAD_REQUEST)

        #  响应结果

        return Response({'msg':'ok','data':res_data})

3.vue前端发送请求验证get参数

前端发送请求将支付宝发给vue前端的一大堆参数传递到后端，后端做完校验返回一个成功与否的结果

如果校验没有问题就可以显示购买成功了。

Success.vue

created(){

      // 把地址栏上面的支付结果，转发给后端

      this.send_alipay_params();

methods:{

      send_alipay_params(){

        let token = localStorage.token || sessionStorage.token;

        this.$axios.get(`${this.$settings.Host}/payment/result/${location.search}`,{

          headers:{

              'Authorization':'jwt ' + token

            }

        }).then((res)=>{ // 如果后端验证这些参数没有问题 购买成功页面需要的参数就可以传递过来了

          this.pay_time = res.data.data.pay_time; // 支付时间

          this.course_list = res.data.data.course_list; // 购买课程列表

          this.total_real_price = res.data.data.total_real_price; // 课程总真实价格

        }).catch((error)=>{

          this.$message.error(error.response.data.msg);

        })

      },

2.用户购买记录表

当用户购买成功之后，应该生成用户记录，主要用来存支付平台的流水号，有了这个流水号就可以去支付宝查账单了。以及课程的购买时间和过期时间。

users/models.py

class UserCourse(BaseModel):

    """用户的课程购买记录"""

    pay_choices = (

        (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="课程")

    trade_no = models.CharField(max_length=128, null=True, blank=True, verbose_name="支付平台的流水号", help_text="将来依靠流水号到支付平台查账单")

    buy_type = models.SmallIntegerField(choices=pay_choices, default=1, verbose_name="购买方式")

    pay_time = models.DateTimeField(null=True, blank=True, verbose_name="购买时间")

    out_time = models.DateTimeField(null=True, blank=True, verbose_name="过期时间") # null表示永不过期

    class Meta:

        db_table = 'ly_user_course'

        verbose_name = '课程购买记录'

        verbose_name_plural = verbose_name

3.接受异步支付结果

payment/views.py

class AlipayResultView(APIView):

    permission_classes = [IsAuthenticated, ]

    def post(self,request):

        # 创建alipay对象

        alipay = AliPay(

            appid=settings.ALIAPY_CONFIG['appid'],

            app_notify_url=None,  # 默认回调url

            app_private_key_string=open(settings.ALIAPY_CONFIG['app_private_key_path']).read(),

            # 支付宝的公钥，验证支付宝回传消息使用，不是你自己的公钥,

            alipay_public_key_string=open(settings.ALIAPY_CONFIG['alipay_public_key_path']).read(),

            sign_type=settings.ALIAPY_CONFIG['sign_type'],  # RSA 或者 RSA2

            debug=settings.ALIAPY_CONFIG['debug'],  # 默认False

        )

        # 校验支付宝响应数据

        data = request.data.dict()

        sign = data.pop('sign')

        success = alipay.verify(data,sign)

        if success and data["trade_status"] in ("TRADE_SUCCESS", "TRADE_FINISHED"):

            self.change_order_status(data)

            return Response('success')

4.善后事宜

当一切都完成后，还有几件事情要做：

1.修改订单状态

2.扣除优惠劵积分

3.清空购物车数据和结算页面全部数据

4.将相关信息存到用户购买记录表中

payment/views.py

class AlipayResultView(APIView):

    def change_order_status(self,data): # 修改订单状态

            with transaction.atomic():

                out_trade_no = data.get('out_trade_no')

                trade_no = data.get('trade_no')

                # A.修改订单状态

                # 1.获取当前订单号的订单对象

                order_obj = Order.objects.get(order_number=out_trade_no)

                # 2.将当前订单的订单状态改为1：已支付

                order_obj.order_status = 1

                # 3.保存订单信息

                order_obj.save()

                # B.修改优惠券的使用状态

                if order_obj.coupon > 0: # 如果用户使用了优惠劵

                    # 1.获取用户使用的那张优惠劵对象

                    user_coupon_obj = UserCoupon.objects.get(is_use=False, id=order_obj.coupon)

                    # 2.将用户使用的那张优惠劵的状态由未使用改为已使用

                    user_coupon_obj.is_use = True

                    # 3.保存用户的优惠劵的信息

                    user_coupon_obj.save()

                # C.支付成功,用户积分应该对应的扣除

                # 1.查询当前订单使用了多少积分

                use_credit = order_obj.credit

                # 2.查询到用户的总积分数减去使用的积分数得到用户的剩余积分数

                self.request.user.credit -= use_credit

                # 3.保存用户的积分信息

                self.request.user.save()

                # D.保存支付宝的交易流水号(购买记录表)

                # 1.通过订单对象反向查询到所有的订单详情对象

                order_detail_objs = order_obj.order_courses.all()

                # 2.获取当前时间

                now = datetime.datetime.now()

               # 购买成功 从redis中将课程的选中状态删除掉

                conn = get_redis_connection('cart')

                pipe = conn.pipeline()

                pipe.delete('selected_cart_%s' % self.request.user.id)

                # 需要给购买成功页面(Success.vue返回的数据)

                res_data = {

                    'pay_time': now,

                    'course_list': [],

                    'total_real_price': order_obj.real_price,

                }

                for order_detail in order_detail_objs:

                    # 购买成功 课程学习的学生数+1

                    course = order_detail.course

                    course.students += 1

                    course.save()

                    # 购买成功的课程应该显示课程列表的每个课程

                    res_data['course_list'].append(course.name)

                   # 从课程详情页获取当前课程的有效期数值

                    expire_id = order_detail.expire

                    if expire_id > 0: # 如果不是永久有效

                        # 根据expire_id查询到课程有效期model对象

                        expire_obj = CourseExpire.objects.get(id=expire_id)

                        # 查询到课程的有效期(天数)

                        expire_time = expire_obj.expire_time

                        # 计算课程的过期时间

                        out_time = now + datetime.timedelta(days=expire_time)

                    else: # 如果是永久有效，就没有过期时间

                        out_time = None

                    # 一切处理完毕，将相关信息存到用户购买记录表中

                    UserCourse.objects.create(**{

                        'user':self.request.user,

                        'course':course,

                        'trade_no':trade_no,

                        'buy_type':1,

                        'pay_time':now,

                        'out_time':out_time,

                    })

                    #　购物车redis数据删除

                    pipe.hdel('cart_%s' % self.request.user.id, course.id)

                pipe.execute()

            return res_data

order/serializers.py

def create:

    order_obj.coupon = coupon_id

    order_obj.credit = credit

    order_obj.save()

5.我的订单

1.我的订单界面-初始化

Myorder.vue

<template>

  <div class="user-order">

    <Vheader/>

    <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">吴某某</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_obj,index) in order_list" :key="index">

                  <div class="user-data-header">

                    <span class="order-time">xxxx</span>

                    <span class="order-num">订单号：

                        <span class="my-older-number">xxxx</span>

                    </span>

                  </div>

                  <ul class="nav user-data-list" v-for="(course_obj,course_index) in order_obj.order_detail_data">

                  <li class="order-info">

                      <img :src="course_obj.course_img" alt="">

                      <div class="order-info-title">

                        <p class="course-title">xxxx</p>

                        <p class="price-service">xxxx</p>

                      </div>

                  </li>

                  <li class="course-expire">xxxx</li>

                  <li class="course-price">xxxx</li>

                  <li class="real-price">xxxx</li>

                  <li class="order-status">xxxx</li>

                  <li class="order-do">

                    <span class="btn btn2" v-if="order_obj.get_order_status_display==='已支付'">去学习</span>

                    <span class="btn btn2" v-else-if="order_obj.get_order_status_display==='未支付'" @click="go_pay(order_obj.order_number)">去付款</span>

                    <span class="btn btn2" v-else-if="order_obj.get_order_status_display==='超时取消'">超时取消</span>

                    <span class="btn btn2" v-else>已取消</span>

                  </li>

                </ul>

              </div>

          </div>

    </div>

    <Footer/>

  </div>

</template>

<script>

  import Vheader from "./common/Vheader"

  import Footer from "./common/Footer"

  export default{

    name:"Myorder",

    data(){

      return {

      };

    },

    created(){

    },

    methods:{

    },

    components:{

      Vheader,

      Footer,

    }

  }

</script>

<style scoped>

.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-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;

}

.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: 5px;

    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;

    width: 60px;

    text-align: center;

}

.btn {

  width: 100px;

  height: 32px;

  font-size: 14px;

  color: #fff;

  background: #ffc210;

  border-radius: 4px;

  border: none;

  outline: none;

  transition: all .25s ease;

  display: inline-block;

  line-height: 32px;

  text-align: center;

  cursor: pointer;

}

</style>

我的订单页面-初始化

index.js

{

      path: '/myorder/',

      component: Myorder

    },

2.我的订单页面-后端接口

users/urls.py

urlpatterns = [

    path(r'myorder/', views.MyOrderView.as_view()),

]

users/views.py

class MyOrderView(ListAPIView):

    permission_classes = [IsAuthenticated, ]

    serializer_class = MyOrderModelSerializer

    def get_queryset(self):

        return Order.objects.filter(user=self.request.user)

user/serializers.py

class MyOrderModelSerializer(serializers.ModelSerializer):

    class Meta:

        model = Order

        fields = ['id', 'order_number' ,'pay_time', 'get_order_status_display', 'order_detail_data']

order/models.py

在我的订单页面中，需要展示一些数据

class Order(BaseModel):

    def order_detail_data(self):

        # 获取所有课程详情对象

        order_detail_objs = self.order_courses.all()

        data_list = []

        for order_detail in order_detail_objs:

            expire_id = order_detail.expire

            # 根据有效期来决定expire_text返回什么

            if expire_id > 0:

                expire_obj = CourseExpire.objects.get(id=expire_id)

                expire_text = expire_obj.expire_text

            else:

                expire_text = '永久有效'

            # 每个课程应该包含的字段

            order_dict = {

                'course_img':contains.SERVER_ADDR + order_detail.course.course_img.url,

                'course_name':order_detail.course.name,

                'expire_text':expire_text,

                'price':order_detail.price,

                'real_price': self.real_price,

                'discount_name':order_detail.discount_name,

            }

            # 将每个课程的详情信息添加到一个列表里返回给前端

            data_list.append(order_dict)

        return data_list

3.我的订单页面-前端

1.获取后端的订单数据

Myorder.vue

// js

get_order_data(){

        // 检查当前访问者是否登录了！

        let token = localStorage.token || sessionStorage.token;

        this.$axios.get(`${this.$settings.Host}/users/myorder/`,{

          headers:{

              'Authorization':'jwt ' + token

            }

        }).then((res)=>{

          this.order_list = res.data;

        }).catch((error)=>{

        })

<!-- html -->

<div class="my-order-item" v-for="(order_obj,index) in order_list" :key="index">

    <div class="user-data-header">

        <span class="order-time">{{order_obj.pay_time.replace('T', ' ')}}</span>

        <span class="order-num">订单号：

            <span class="my-older-number">{{order_obj.order_number}}</span>

        </span>

    </div>

    <ul class="nav user-data-list" v-for="(course_obj,course_index) in order_obj.order_detail_data">

        <li class="order-info">

            <img :src="course_obj.course_img" alt="">

            <div class="order-info-title">

                <p class="course-title">{{course_obj.course_name}}</p>

                <p class="price-service">{{course_obj.discount_name}}</p>

            </div>

        </li>

        <li class="course-expire">{{course_obj.expire_text}}</li>

        <li class="course-price">{{course_obj.price}}</li>

        <li class="real-price">{{course_obj.real_price}}</li>

        <li class="order-status">{{order_obj.get_order_status_display}}</li>

        <li class="order-do">

            <span class="btn btn2" v-if="order_obj.get_order_status_display==='已支付'">去学习</span>

            <span class="btn btn2" v-else-if="order_obj.get_order_status_display==='未支付'" @click="go_pay(order_obj.order_number)">去付款</span>

            <span class="btn btn2" v-else-if="order_obj.get_order_status_display==='超时取消'">超时取消</span>

            <span class="btn btn2" v-else>已取消</span>

        </li>

    </ul>

</div>

2.我的订单页面点击去付款

Myorder.vue

<!-- html -->

<span class="btn btn2" v-else-if="order_obj.get_order_status_display==='未支付'" @click="go_pay(order_obj.order_number)">去付款</span>

// js

go_pay(order_number){

        let token = localStorage.token || sessionStorage.token;

        this.$axios.get(`${this.$settings.Host}/payment/alipay/?order_number=${order_number}`,{

              headers:{

              'Authorization':'jwt ' + token

            }

        }).then((res)=>{

          location.href = res.data.url;

        }).catch((error)=>{

          this.$message.error(error.response.data.msg);

        })