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

created() {let confirmOrderData = JSON.parse(localStorage.getItem('confirmOrderData'));this.restaurant_id = confirmOrderData.restaurant_id;//餐馆idthis.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都返回truelet 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><!--“商家自配”图片--><spanclass="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>