Day22:22 - 结帐服务(6) - 前端 - 结帐 X PayPal付款

Helló，我是Charlie！
在Day21当中我们完成了後端的paypal sdk，在今天我们将完成前端结帐的部分。

================================◉‿◉=================================

首先是结帐的部分，在createOrder里面的checkout新增导向approve link的程序码：

checkout(){
  var username = window.localStorage.getItem("username")
  var token = window.localStorage.getItem("token")
  createOrderData(username,token).then((response) => {
    if(response.data.code == STATUS_OK){
      window.localStorage.setItem('orderID',response.data.data.orderid)
      window.location.href = response.data.link.approve
    }else{
      this.$fire({type:"error",text:response.data.data})
    }
  })
},

接着创立两个vue：orderCreated跟orderCanceled，并且设立路由：

  {
    path: "/orderCreated",
    name:"createPaypalPage",
    component: orderCreated,
    meta: {
      title: "付款建立"
    }
  },
  {
    path: "/orderCanceled",
    name: "cancalOrderPage",
    component: orderCanceled,
    meta: {
      title: "付款取消"
    }
  }

接着在order.js当中，新增打capture order的API：

export function captureOrder(orderID,token){
  return axios.post(`http://${host()}:${port()}/userorder/capture/${orderID}`,{
    headers:{
      "AUTHORIZATION":token
    }
  })
}

接着修改orderCreated.vue，让这个vue显示付款成功或者付款失败：

<template>
	<html lang="zh-Hant-TW">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" type="image/x-con" href="@/assets/favicon.ico">
		<div id="app">
			<headerComponent></headerComponent>
			<div class="info" style="margin:0 auto;width: 50%;height: 50%;text-align: center;">
				<img :src="successImage" alt="" style="width:300px;height: 300px;">
				<h4>{{ successText }}</h4>
			</div>
		</div>
	</html>
</template>

<script>
  import { captureOrder } from '@/apis/order.js'
  import { STATUS_OK } from '@/apis/constant.js'
  export default{
    name: "orderCreated",
    components:{
      'headerComponent':() => import('@/components/header.vue')
    },
    data(){
      return {
        successImage:"",
        successText: ""
      }
    },
    created(){
      var orderid = window.localStorage.getItem("orderID")
      console.log(orderid)
      var token = window.localStorage.getItem("token")
      captureOrder(orderid,token).then((response) => {
        console.log(response)
        if(response.status == STATUS_OK){
          this.successImage = "https://i.imgur.com/mBolVrx.jpg"
          this.successText = "付款成功"
        }else{
          this.successImage = "https://i.imgur.com/EJjpUGf.png"
          this.successText = "付款失败"
        }
      })
    }
  }
</script>

cancel的话就是固定页面，这里就不赘述了。

接着便可测试是否能结帐成功：

Imgur

================================◉‿◉=================================

Day22结束了！在今天我们完成了前端的付款，而明天我们将实作订单API的部分，See ya next day！

<<: 【Day23】导航元件 - Pagination

>>: 【心得】border-radius 知多少~