在前后端分离的项目中使用vue写下单功能

在线下单的流程：

点击结算时必须先登录
如果未登录跳转至登录页面
登录之后返回订单确认页面

难点：如何在登录成功之后，只能的判断跳到哪里？

如果用户是正常登录就跳到首页
如果用户是结算时过来的，就跳转至结算页面

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
					}
				}
			}),

在前后端分离的项目中使用vue写下单功能

猜你喜欢