confirm-order提交订单

组件一创建 就从localStorage获取当前准备下单的商品 并取出餐馆id、总数量、食物信息、总价 然后获取用户地址 根据商店ip获取店铺信息

created() {
	let confirmOrderData = JSON.parse(localStorage.getItem('confirmOrderData'));
    this.restaurant_id = confirmOrderData.restaurant_id;//餐馆id
    this.totalNum = confirmOrderData.foods.totalNum;//总数量
    this.order_data = confirmOrderData.foods;//食物信息
    //获取用户收货地址
    getAllAddress().then((response) => {
        this.poi_info = response.data.data;
        
        let date = new Date();// 获取当前时间
        // poi_info中的送达时间是字符串 这里转成整数 加上当前时间的分钟数 再设置回去 变成新时间
        date.setMinutes (date.getMinutes() + parseInt(this.poi_info.delivery_time_tip));
        // 7分钟显示07分钟
        let minu = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
        this.delivery_time_tip = date.getHours()+ ":" + minu;
        
        this.shipping_fee = this.poi_info.shipping_fee;
        this.totalPrice = (parseFloat(confirmOrderData.foods.totalPrice) + parseFloat(this.shipping_fee)).toFixed(2);
    })
    //根据商店id获取店家信息
    getRestaurant({restaurant_id: this.restaurant_id}).then((response) => {
        this.poi_info = response.data.data;
	})
}
//获取用户所有地址
getAllAddress(data){
  let req = {data,url: 'admin/all_address'};
  return _get(req);
}
//获取某个商家具体信息
getRestaurant(data){
  let req = {url: `v1/restaurant/${data.restaurant_id}`};
  return _get(req);
}
_get(req){
  return axios.get(req.url, {params: req.data})
}

顶部导航条：复用head组件

<v-head title="提交订单" goBack="true" bgColor="#f4f4f4"></v-head>

新增收货地址

如果没有地址 则展示该路由 点击后跳转到添加地址页面

<router-link class="info-container address-container" v-if="emptyAddress" to="/add_address">
	<div class="address-info">
    	<i class="iconfont icon-add">&#xe600;</i>
        <span class="add-text">新增收货地址</span>
	</div>
    <i class="iconfont icon-right">&#xe63f;</i>
</router-link>

订单收货地址页面

组件一创建 就去获取用户地址并保存

created() {
	getAllAddress().then((response) => {
        let data = response.data;
        if (data.status === 200) {
          	if (!data.address.length) {
            	this.emptyAddress = true;
        	} else {
            	this.emptyAddress = false;
            	this.addressLists = response.data.address;
            	this.selectAddressId = this.addressLists[0].id;
          	}
        }
	})
}

顶部导航条：复用head组件

<v-head title="收货地址" goBack="true" bgColor="#f4f4f4"></v-head>

无地址

如果emptyAddress为true 表示无地址

<div class="empty-address" v-show="emptyAddress">
	<span>一个地址都没有哦</span>
</div>

地址列表

遍历地址列表 取出地址、电话、姓名、性别来展示

<li v-for="item in addressLists" :key="item.id" @click="selectAddress(item)">
	<p>{{item.address}} {{item.house_number}}</p>
	<span class="name">{{item.name}}</span>
    <span class="sex">{{item.gender === 'female' ? '女士' : '先生'}}</span>
    <span class="phone">{{item.phone}}</span>
    <i class="iconfont icon-select" v-if="item.id === selectAddressId">&#xe6da;</i>
</li>
<script>
	selectAddress(item) {
        this.select_address_id = item.id;
        this.$store.dispatch('recodeDeliveryAddress', item); //地址信息由vuex管理
        this.$router.go(-1);//返回上一个路由
    },
    [types.RECORD_DELIVERY_ADDRESS](state, address) {
    	state.deliveryAddress = {...address};
  	}
</script>

新增地址

点击后跳转到新增收货地址页面

<router-link tag="div" class="add" :to="{path:'/add_address'}">
	<i class="iconfont icon">&#xe606;</i>
    <span>新增收货地址</span>
</router-link>

增加收货地址add_address

监听deliveryAddress数据的变化

watch: {
	deliveryAddress(val) {
        this.formData.title = val.title;
        this.formData = {...this.formData}
    }
}

顶部导航条：复用head组件

<v-head title="新增收货地址" goBack=true>
	<span slot="save-address" class="btn-save" @click="save();">保存</span>
</v-head>
<script>
	save() {
        if (this.preventRepeat) return;// 为true表示已经保存了
        // some：所有元素执行回调函数返回结果都是true some返回false 回调函数有一个返回false some都返回true
        let dissatisfy = Object.values(this.formData).some(value => !value)
        this.satisfySubmit = !dissatisfy;// 是否可以提交
        if (dissatisfy) {
          this.alertText = '信息填写不完整'
          this.showTip = true;
        } else {
          this.preventRepeat = true;
          let {location, address, province, city, title} = this.deliveryAddress;
          let form = {...this.formData, ...location, address, province, city, title};
          add_address(form).then((response) => {
            if (response.data.status === 200) {
              this.$router.go(-1);// 保存成功 返回上一页
            }
            this.preventRepeat = false;// 重置
          })
        }
      }
</script>

地址信息表单

使用了addressInfo组件

<address-info :formData.sync="formData"></address-info>

其他组件

复用loading组件、alertTip组件

<v-loading v-show="loading"></v-loading>
<alert-tip :text="alertText" :showTip.sync="showTip"></alert-tip>

送达时间

左边的钟是个iconfont 右边展示的时间在created中就计算出来了 这里只是拿出来展示 点击没效果

<div class="info-container arrival-container">
	<div class="arrival-info">
    	<i class="iconfont icon-time">&#xe621;</i>
        <div class="main-info">
            <span class="date-type-tip">送达时间</span>
            <span class="select-view-time">{{delivery_time_tip}}分到</span>
        </div>
	</div>
    <i class="iconfont icon-right">&#xe63f;</i>
</div>

商店

如果存在poi_info才展示

<div class="head" v-if="poi_info">
	<!--商店图标 取出展示-->
    <i class="poi-icon" :style="{backgroundImage:'url('+poi_info.pic_url +')'}"></i>
    <!--商店名字-->
    <span class="poi-name">{{poi_info.name}}</span>
    <!--“商家自配”图片-->
    <span
    	class="delivery-type-icon"
        :style="{backgroundImage:'url(http://p0.meituan.net/aichequan/019c6ba10f8e79a694c36a474d09d81b2000.png)'}">
	</span>
</div>

商品

遍历商品信息并展示出来 展示商品图片、名称、价格、数量

<ul class="food-list">
	<li v-for="(item,key) in order_data" :key="item.id" v-if="Number(key)">
    	<div class="picture">
            <img :src="item.foods_pic">
        </div>
		<div class="food-list-right-part">
    		<div>
    			<span class="name">{{item.name}}</span>
        		<span class="price">￥{{item.price}}</span>
			</div>
			<div>
    			<span class="count">x{{item.num}}</span>
			</div>
    	</div>
	</li>
</ul>
<ul class="other-fee-container">
	<li>
    	<span>包装费</span>
        <span class="box-total-price">￥0</span>
	</li>
    <li>
    	<span>配送费</span>
        <span>￥{{this.shipping_fee}}</span>
	</li>
</ul>
<div class="total-price-container">
	<span>已优惠￥0</span>
    <span class="total-price">小计<strong>￥{{totalPrice}}</strong></span>
</div>

底部

<div class="bottom">
	<div class="left">
        <span class="discount-fee">已优惠￥0</span>
        <span class="total">合计<strong>￥{{totalPrice}}</strong></span>
    </div>
    <span class="submit" @click="submit()">提交订单</span>
</div>
<script>
	submit() {
        if (this.emptyAddress) {//如果没有填收货地址
          	this.alertText = '请添加收货地址'
          	this.showTip = true;
          	return;
        }
        if (this.preventRepeat) return;// 为true表示该订单已提交过
        this.preventRepeat = true;
        // 保存商品
        let foods = [];
        let keys = Object.keys(this.order_data);
        keys.forEach((key) => {
          	if (Number(key)) {
            	foods.push({skus_id: key, num: this.order_data[key]['num']})
          	}
        })
        submitOrder({restaurant_id: this.restaurant_id, foods, address_id: this.defineAddress.id}).then((response) => {
          	if (response.data.status === 200) {// 提交成功前往支付页面
            	this.$router.push({path: '/pay', query: {order_id: response.data.order_id}
            })
    	}
	})
}
submitOrder(data){
  	let req = {data,url: 'v1/order'};
  	return _post(req);
}
_post(req){
  	return axios({method: 'post', url: `/${req.url}`, data: req.data})
}
</script>

弹出消息：复用alertTip组件

<alert-tip :text="alertText" :showTip.sync="showTip"></alert-tip>