線上下單的流程：

1. 點選結算時必須先登入
2. 如果未登入跳轉至登入頁面
3. 登入之後返回訂單確認頁面

難點：如何在登入成功之後，只能的判斷跳到哪裡？

1. 如果使用者是正常登入就跳到首頁
2. 如果使用者是結算時過來的，就跳轉至結算頁面

1,結算按鈕繫結settlement事件

 <a href="" class="checkout" @click.prevent="settlement">結 算</a>

1.2,編寫settlement函式
這裡用sessionStorage來儲存地址

settlement() {
					if (this.token) {
						//如果登入了，直接跳轉
						location.href="flow2.html"
					}else{
						//先把要跳回的地址儲存到瀏覽器中
						sessionStorage.setItem("returnURL" , "flow2.html")
						//跳轉到登入頁面
					if((confirm("你還沒有登入，請先登入"))){
						location.href="login.html"
					}
						
					}
				}
 

1.3，修改login.html頁面

//登入方法
					login(data).then(res => {
						//判斷返回值
						if (res.data.errno === 1) {
							//登入錯誤提示
							alert(res.data.errmsg)
						} else {
							//成功提示	
							alert("登入成功")
							//登入成功，把資訊儲存到token 
							localStorage.setItem("token", res.data.token)
							localStorage.setItem("name", res.data.name)
							//清空瀏覽器的資料
							localStorage.removeItem("cart")

						 //獲取存放的回撥頁面
							let returnURL = sessionStorage.getItem("returnURL")
							 if (returnURL) {
								//清除存放的資料
							 	sessionStorage.removeItem("returnURL")
							 	//跳轉到回撥的頁面
							 	location.href = returnURL
							 } else {
								//跳轉到首頁
								location.href = "index.html"
							}


						 }
					})
 

2，下單–獲取該使用者所有地址


2.1 具體實現
2.1.1 mock.js準備資料

//獲取地址
Mock.mock("/web-service/address","get",{
    "data|2-8":[
        {
            "id":"@id",
            "shr_name":"@cname",
            "shr_mobile":/^[1][35789][0-9]{9}$/,
            "shr_province":"@province",
            "shr_county":"@county",
            "shr_city":"@city",
            "shr_address":"@ctitle(8,19)", //詳細地址
            "shr_default":"@integer(0,1)"
        }
    ]
})
 

2.1.2 api.js

//獲取地址
function getAddress(){
    return axios.get("/web-service/address")
}

2.1.3 在flow2.html頁面中定義變數

created() {
				//獲取收貨地址
				getAddress().then(res => {
					this.address = res.data.data
					})

2.1.4 顯示頁面：收貨人的資訊

<!-- 收貨人資訊  start-->
				<div class="address">
					<h3>收貨人資訊 </h3>
					<div class="address_select">
						<ul>
							<li v-for="(v, k) in address">
								<input type="radio" name="address" checked="checked" v-model="selectedAddressId" :value="v.id" />
								{{v.shr_name}} {{v.shr_province}} {{v.shr_city}} {{v.shr_county}} {{v.shr_address}} {{v.shr_mobile}}
							</li>
							<li><input type="radio" value="1" name="address" v-model="showNew" class="new_address" />使用新地址</li>
						</ul>

2.1.5 設定selectedAddressId初始值

created() {
			//獲取收貨地址
			getAddress().then(res => {
				this.address = res.data.data
				//獲取預設地址
				for (let i = 0; i < this.address.length; i++) {
					var add = this.address[i]
					if (add.shr_default == 1) {
						this.selectedAddressId = add.id
						break
					}
				}
			}),