顶部导航条：复用head组件
新增收货地址
- 订单收货地址页面
- - 顶部导航条：复用head组件
  - 无地址
  - 地址列表
  - 新增地址
- 增加收货地址add_address
- - 顶部导航条：复用head组件
  - 地址信息表单
  - 其他组件
送达时间
商店
商品
底部
弹出消息：复用alertTip组件

组件一创建就从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"></i><span class="add-text">新增收货地址</span></div><i class="iconfont icon-right"></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"></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"></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"></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"></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>

confirm-order提交订单相关推荐

SpringBoot解决用户重复提交订单（方式一：通过唯一索引实现）
文章目录前言 1.方案实现 1.1.给数据库表增加唯一键约束 1.2.编写获取请求唯一ID的接口 1.3.业务提交的时候,检查唯一ID 2.小结前言对于投入运营的软件系统(商城.物流.工厂等), ...
谷粒商城项目篇13_分布式高级篇_订单业务模块(提交订单幂等性、分布式事务、延时MQ实现定时任务)
目录一.订单业务模块订单流程购物车跳转订单确认页登录拦截器封装vo Feign远程调用丢失请求头信息 Feign远程异步调用丢失上下文信息提交订单接口幂等性令牌token机制各种锁机制 ...
美多商城之订单(提交订单2)
2.4 使用乐观锁并发下单重要提示: 在多个用户同时发起对同一个商品的下单请求时,先查询商品库存,再修改商品库存,会出现资源竞争问题,导致库存的最终结果出现异常. 2.4.1. 并发下单问题演示和解 ...
案例29-购物车提交订单
1 案例分析 1 订单分析1 2 订单分析2 3 订单的业务操作 2 代码实现 1 cart.jsp代码修改 <a href="${pageContext.request.contex ...
提交订单微信付款逻辑
1.提交订单后,对应生成服务端三个表的数据, 订单表order, 订单商品表, 订单状态表order_items 规格表items_spec要扣除库存 2.调用商户后台系统,创建订单 3.商户后台系统 ...
Java Web 网络商城案例演示十五订单详情功能（提交订单支付界面）
订单详情功能(提交订单支付界面) 原理分析步骤实现: 1.准备工作:order_list.jsp当中修改链接提交当前订单编号 <a href="${pageContext.requ ...
Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求:完成提交订单的业务 1.支付静态组件先完成 Pay静态 ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...
订单系统——提交订单
1. 提交订单 1.1. 功能分析 1.在订单确认页面点击"提交订单"按钮生成订单. 2.请求的url:/order/create 3.参数:提交的是表单的数据.保存的数据:订单 ...

confirm-order提交订单

目录

顶部导航条：复用head组件

新增收货地址

订单收货地址页面

顶部导航条：复用head组件

无地址

地址列表

新增地址

增加收货地址add_address

顶部导航条：复用head组件

地址信息表单

其他组件

送达时间

商店

商品

底部

弹出消息：复用alertTip组件

confirm-order提交订单相关推荐

最新文章

热门文章