Day18:18 - 结帐服务(2) - 前端 - 结帐、订单新增、结帐成功画面

Hei，我是Charlie！

在Day17当中，我们完成了後端的结帐功能，在今天我们将完成前端的结帐功能跟结帐成功页面。

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

首先建立createOrder.vue，然後在购物车的结帐按钮中导向他：

<b-button variant="info" @click="createOrder">结帐</b-button>

createOrder(){
  window.location.href = "/#/createorder"
  window.location.reload()
},

然後在createOrder.vue当中建立template，template当中会包含可以数量增减的部分：

<div id="carts" style="margin-top: 15px;">
	<b-row v-for="item in carts" :key="item.id">
		<b-col cols="2">
			<img :src="'http://localhost:8000' + item.product.img" style="width:150px;height: 150px;" alt="">
		</b-col>
		<b-col cols="3">
			<h4>{{ item.product.name }}</h4>
		</b-col>
		<b-col cols="3">
			<b-form-spinbutton id="product_id_spin" v-model="item.amount" min="1" max="100" @change="fixAmount(item.id)"></b-form-spinbutton>
		</b-col>
		<b-col cols="2">
			<h4>${{ item.product.price * item.amount }}</h4>
		</b-col>
		<b-col cols="2">
			<b-button variant="danger" @click="deleteCart(item.id)">删除</b-button>
		</b-col>
	</b-row>
	<hr>
	<b-row>
		<b-col cols="8"></b-col>
		<b-col cols="2">
			<h5>共计 {{ itemCount }} 件</h5>
		</b-col>
		<b-col cols="2">
			<h5>总计: {{ total }}</h5>
		</b-col>
	</b-row>
	<hr>
	<b-row>
		<b-col cols="10"></b-col>
		<b-col cols="2"><b-button variant="info">确认结帐</b-button></b-col>
	</b-row>
</div>

其中total跟itemCount是使用computed的方式，让变数可以监听item的变化：

computed: {
  total: function(){
    var sum = 0
    this.carts.forEach((item) => {
      sum += item.amount * item.product.price
    })
    return sum
  },
  itemCount: function(){
    var sum = 0
    this.carts.forEach((item) => {
      sum += item.amount
    })
    return sum
  }
},

其他的话在购物车的程序码都有，可参考 Day13

所以成果会像这样：

再来是结帐的部分，先在apis里面新增order.js，新增打结帐後端的程序码：

import axios from 'axios'
import {host,port} from '@/apis/constant.js'

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

接着在createOrder.vue当中的结帐button绑定：

<b-col cols="2"><b-button variant="info" @click="checkout">确认结帐</b-button></b-col>

接着新增checkout方法：

checkout(){
var username = window.localStorage.getItem("username")
var token = window.localStorage.getItem("token")
createOrderData(username,token).then((response) => {
  if(response.data.code == STATUS_OK){
    this.$fire({type:"success",text:"结帐成功"}).then(() => {
      window.location.href = "/#/index"
      window.location.reload()
    })
  }else{
    this.$fire({type:"error",text:response.data.data})
  }
})
},

测试：

因为目前还没有金流的部分，所以按下去就会结帐成功，而之後我们将串接paypal付款，就可以有金流付款的动作。

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

Day18结束了！今天我们完成了结帐前端的部分，而明天我们将先介绍PayPal的部分，See ya next day！