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

文章目录

• 订单确认
• 订单详情

订单确认

页面设计

<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 = true
    wx.switchTab({
      url: '/pages/order/list/list'
    })
  }
})