订单确认

页面设计

<view><!-- 取餐时间 --><view class="top-bar"><label class="top-left-label">请确认您的订单</label></view><!-- 订单详情 --><view class="order-info"><view class="order-info-title">订单详情</view><view class="cart-list-box" wx:for="{{order.foods}}" wx:for-item="item" wx:key="list"><view class="list-info"><view>{{item.name}}</view></view><view style="width:50%;padding:10px;"><view style="float:right"><view style="color:#A3A3A3">x {{item.num}}</view><view>¥ {{item.price}}</view></view></view></view><view class="order-cut" wx:if="{{order.promotion.length > 0}}"><label class="order-cut-dec">减</label><label class="order-cut-note">{{order.promotion.name}}</label><label class="order-cut-number activity-color">-¥ {{order.promotion.discount}}</label></view><view class="order-sum"><label>总计 </label><label class="order-sum-number activity-color">¥ {{sumMonney-cutMonney}}</label></view></view><!-- 备注 --><view class="note"><label style="font-size:13px;color:#A3A3A3">备注</label><textarea maxlength="{{max}}" placeholder="如有其他要求，请输入备注" bindinput="listenerTextarea" class="note-text">{{note}}</textarea></view><!-- 去支付 --><view class="bottom-operate-menu"><view class="shopping-cart"><view style="padding:15px;display:flex;font-size:28rpx;"><view class="shopping-cart-price" style="color:white;font-size:18px">合计：¥ {{sumMonney}}.00</view></view></view><view class="submit-btn activity-color-bg" bindtap="gotopay"><view class="submit-btn-label color-white">去支付</view></view></view>
</view>

页面样式

@import "../../../utils/common.wxss";
page {background: #f8f8f8;
}
/* 备注 */
.note{padding:5px 15px;background:white;margin-top:10px
}
.note-text{width:95%;font-size:12px;background:#F2F2F2;padding:10px;height:80px;
}
/* 取餐时间区域 */
.top-bar {height: 30px;line-height: 30px;font-size: 14px;background: white;padding:0 5px;
}
.top-left-label {float: left;
}
/* 底部操作菜单样式 */
.bottom-operate-menu {z-index: 1001;position: fixed;bottom: 0px;height: 55px;width: 100%;display: flex;
}
.shopping-cart {width: 75%;background: #353535;height: 100%;
}
.submit-btn-label {color: white;font-size: 15px;margin: auto;
}
.submit-btn {height: 100%;background: #f7f7f7;width: 25%;display: flex;
}
.activity-color-bg {background: #ff9c35;
}

页面逻辑

const fetch = require('../../../utils/fetch.js')
Page({data: {sumMonney: 0,cutMonney: 0,note: '',max: '20',taken: '',},onLoad: function(options) {// 请求订单接口fetch('food/order', { order_id: options.order_id}).then((res) => {var foods = res.data.foods// 计算总价var sum = 0;for (var i in foods) {sum += foods[i].price * foods[i].num}if (res.data.promotion.length > 0 && sum > res.data.promotion.discount) {sum -= res.data.promotion.discount}this.setData({order: res.data,sumMonney: sum})})},// 实时监控textarea值，采用同步的方式存储note值（'key',value）listenerTextarea: function(e) {var note = e.detail.value;wx.setStorageSync('note', note)},// 点击“去支付”gotopay: function(e) {var order_id = this.data.order_id// 请求支付接口，把订单号传给后台，返回数据{error: 0, order_id: 1}var method = 'POST'fetch('food/pay', {order_id:order_id},method).then((res)=>{if(res.data.error !== 0){wx.showModal({title: '支付失败',content: '请您重新尝试',})return}wx.showToast({title: '支付成功',icon: 'success',duration: 2000,success: function () {setTimeout(function () {wx.navigateTo({url: '../detail/detail?order_id=' + res.data.order_id})})}})});}
})

订单详情

页面设计

<view class="go-center go-top-10"><view class="card-box"><view class="card-fetch"><view class="card-left-bar"><label>取</label><label>餐</label><label>号</label></view></view><view><view class="go-top-10"><label class="number-card">{{order.meunnumber}}</label><block wx:if="{{order.taken}}"><label class="statu-card" style="color:#999">已取餐</label></block><block wx:else><label class="statu-card">正在精心制作中···</label></block></view><view wx:if="{{note==''}}"></view><view wx:else><view class="remark">备注：{{note}}</view></view><view class="note-card">饮品制作中,尽快为你服务☺</view></view></view>
</view>
<!-- 订单详情 -->
<view class="order-info"><view class="order-info-title">订单详情</view><block wx:for="{{order.foods}}" wx:key="item"><view class="cart-list-box"><view class="list-info"><view>{{item.name}}</view></view><view style="width:50%;padding:10px;"><view style="float:right"><view style="color:#A3A3A3">x {{item.num}}</view><view>¥ {{item.price * item.num}}</view></view></view></view></block><view class="order-sum"><label>总计 </label><label class="order-sum-number activity-color">¥ {{sumMonney}}</label></view>
</view>
<view class="order-info"><view class="order-info-title flex-display">订单信息<view class="order-info-li">{{order.orderinfo}}</view></view><view class="order-info-title flex-display">订单号码<view class="order-info-li">{{order.ordernum}}</view></view><view class="order-info-title flex-display">订单时间<view class="order-info-li">{{order.ordertime}}</view></view>
</view>
<view wx:if="{{order.taken==false}}"><view style="margin-top:15px" class="go-center"><label class="note-exchange">请凭此画面至取餐柜台领取饮料</label></view>
</view>

页面样式

@import "../../../utils/common.wxss";
page {background: #f8f8f8;
}
/* 取餐号 */
.go-top-10 {margin-top: 10px;
}
.card-box {display: flex;width: 85%;height: 100px;background: #fef9f4;
}
.card-fetch {width: 40px;background: #de5f4b;height: 100px;font-size: 14px;color: white;
}
.card-left-bar {width: 14px;padding: 20px 14px;
}
.remark{font-size: 12px;color:#de5f4b;font-weight: 600;margin-left:20px;}
.note-card {margin-left: 20px;color: #a2a1a0;font-size: 12px;margin-top: 15px;
}
.number-card {font-size: 28px;padding: 0px 20px;
}
.statu-card {font-size: 12px;color: #ff9c35;
}
.order-info-li{color:black;margin-left:10px
}
/* 凭此画面取餐 */
.note-exchange {padding: 6px 10px;background: #ff9c35;color: #fff;font-size: 16px;
}
.go-center{display:flex;justify-content:center;
}
.down-center{display:flex;align-items:center;
}
.flex-display{display:flex
}

页面逻辑

const fetch = require('../../../utils/fetch.js')
Page({data: {},onLoad: function (options) {// 取出缓存的note值var note = wx.getStorageSync('note')wx.setNavigationBarTitle({title: '订单详情'})fetch('food/order', { order_id: options.order_id }).then((res) => {var foods = res.data.foods//算总价var sum = 0;for (var i in foods) {sum += foods[i].price * foods[i].num}if (res.data.promotion.length > 0 && sum > res.data.promotion.discount) {sum -= res.data.promotion.discount}this.setData({order: res.data,sumMonney: sum,note: note})})},onUnload: function () {var app = getApp();// 支付成功之后调到订单页面，通知订单页刷新app.isReloadOrderList = truewx.switchTab({url: '/pages/order/list/list'})}
})

小程序订餐系统——订单确认与订单详情相关推荐

python搭建微信小程序百度云_微信小程序-订餐系统-Python flask构建
总大小:14.3 GB └-python3+flask └-centos ├-CentOS-7-x86_64-Minimal-1804.iso 906.0 MB └-mysql ├-mysql-ins ...
微信小程序订餐系统需要服务器吗,微信小程序订餐系统怎么开发怎么创建微信外卖小程序...
原标题:微信小程序订餐系统怎么开发怎么创建微信外卖小程序过硬(10guoying.com)6月4日观察:网上订餐的新消费方式如今在我们日常生活中已经十分常见,人们不仅可以在饿了么.美团等的外卖平 ...
Python-Django毕业设计基于微信小程序订餐系统（程序+Lw)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+N ...
Python-Flask构建微信小程序订餐系统-Flask打造高可用flask mvc框架-08
转载于:https://www.cnblogs.com/Paul-watermelon/articles/10759597.html
Python Flask构建微信小程序订餐系统 (一)
计算机毕业设计(75)php小程序毕设作品之网上销售小程序商城系统
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序商城系统,前台用户使用小程序,小程序使用微信开发者工具开发:后台管理使用基PP+MySql的B/S架构,开发工具使用phpstor ...
国庆节，一天开发一个小程序+Web系统。2.5K到手。【分享开发经验】【收藏起来】
自从成为自由职业后.我对假期一点没有感觉! 甚至我忘了每天是几月几号!不装b的说,我真的体会不到节假日的那种快乐了! 如果想出去逛街,我想出去爬山,我想去公园散心,我都会避开节假日! 前天,有个粉丝朋 ...
2021沐雪.NetCore多租户商城系统,多商户小程序商城系统
历经1年多,沐雪.NetCore版本的多租户商城系统终于研发成功.全新的技术,全新的界面!我们将采用新的产品名称 -- 多租宝,并且以后都将全部精力致力于该平台的升级研发. 第一章.<多租宝& ...
微信小程序分销系统都有哪些功能优点？
现在越来越多的商家都会选择线上开店.随着网店数量越开越多,各行各业竞争也越来越激烈,获客也变得更加困难.因此小程序分销系统成了很多商家的选择,下面我们来了解一下小程序分销系统都有哪些优点! 1.简单易 ...
判断小程序_社区团购小程序商城系统，可以从哪些方面判断？
原标题:社区团购小程序商城系统,可以从哪些方面判断? 社区商城系统属于电子商务行业品种,有数据表明发现,有72%的客户是通过网络渠道了解服务商.了解产品.了解行业的,那么你要做的就是在网络中辨识真伪. ...

小程序订餐系统——订单确认与订单详情

文章目录

订单确认

页面设计

页面样式

页面逻辑

订单详情

页面设计

页面样式

页面逻辑

小程序订餐系统——订单确认与订单详情相关推荐

最新文章

热门文章