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

淡淡的烟草味﹌ 2022-11-17 05:30 220阅读 0赞

### 文章目录 ###

*  订单确认
 *   *  页面设计
     *  页面样式
     *  页面逻辑
 *  订单详情
 *   *  页面设计
     *  页面样式
     *  页面逻辑

# 订单确认 #

## 页面设计 ##

<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;
    }

## 页面逻辑 ##

# 订单详情 #

## 页面设计 ##

<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'
        })
      }
    })