项目实战-点餐小程序-22 点餐(订单结算)

一、功能需求

• 1、订单结算带出门店名称和门店地址信息
• 2、用户选择用餐方式
• 3、带出购物车所选的菜品信息
• 4、小计和合计
• 5、订单备注
• 6、点击提交订单弹窗选择支付方式
• 7、模拟支付

二、代码实现

1、orderPay.wxml

<!--导航条-->
<view class="navbar">
    <lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
        <text>{{item}}</text>
    </lable>
</view>
<view wx:if="{{list.length>0}}" class="orderRoot">
    <!-- 外层 -->
    <view class='cont_count' wx:for="{{list}}" wx:key="key">
        <!-- 编号 -->
        <view class='dingdanbianhao'>订单编号:{{item._id}} </view>
        <view class="content">
            <!-- 列表 -->
            <view class='mingxi'>
                <block wx:for="{{item.orderList}}" wx:for-item="arr_item" wx:key="key">
                    <view class="mingxi_item">
                            <text class="name">{{arr_item.name}}</text>
                            <view class="nameRoot">
                                <text class="mingxi_number"> x{{arr_item.number}}</text>
                                <text class="mingxi_price">{{arr_item.price}}</text>
                            </view>
                    </view>
                </block>
            </view>
        </view>
        <view class='totalPrice'>总价:<text class="pirce">{{item.totalPrice}}</text></view>
        <view class='dibuttxt'>备注:{{item.beizhu}}</view>
        <view class='dibuttxt'>下单时间:{{item._createTime}}</view>
    <!-- //-1订单取消,0新下单待上餐,1待用户评价,2订单已完成 -->
    <view wx:if="{{item}}" class='coent_list'>
                <label wx:if="{{item.status==0}}" class='dingdanbtn' data-item='{{item}}' bindtap='cancleOrder'>取消订单</label>
                <label wx:if="{{item.status==1}}" class='dingdanbtn' data-orderid='{{item._id}}' bindtap='showComment'>去评价</label>
                <label wx:if="{{item.status==2}}" class='dingdanbtn' bindtap='toFood'>再来一单</label>
                <label wx:if="{{item.status==-1}}" class='dingdanbtn' data-orderid='{{item._id}}' bindtap='deleteOrder'>删除订单</label>
            </view>
    </view>
</view>
<!-- 否则 -->
<view wx:else class="orderSpace">
  <image src="/images/space.png"></image>
  <view class="tip">您还没有订单~</view>
  <view class="toOrder" bindtap="toFood">去点餐</view>
</view>

<!-- 评论弹框 -->
<view class='toast-box' hidden='{{!isShowComment}}'>
<!-- 蒙层 -->
    <view class='toastbg'></view>
    <!-- 弹窗 -->
    <view class='showToast'>
    <!-- 弹窗标题 -->
        <view class='toast-title'>
            <text>填写评价</text>
        </view>
        <!-- 输入评价内容 -->
        <view class='toast-main'>
            <view class='toast-input'>
                <textarea class='textarea_comment' placeholder='请输入您的评价内容' bindinput='setValue'></textarea>
            </view>
        </view>
        <!-- 按钮 -->
        <view class='toast-button'>
            <view class='button1' bindtap='cancelComment'>
                <view>取消</view>
            </view>
            <view class='button2' bindtap='submitComment'>
                <view>确定</view>
            </view>
        </view>
    </view>
</view>

2、orderPay.wxss

page{
  background-color: #f2f2f2;
}
.orderSpace{
  margin-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
image{
  width: 150rpx;
  height: 150rpx;
}
.tip{
  font-size: 28rpx;
  margin: 20rpx 0;
}
.toOrder{
  width: 150rpx;
  height: 70rpx;
  background-color: #ff9966;
  color:#fff;
  font-size: 28rpx;
  border-radius: 50rpx;
  margin-top: 50rpx;
  /*文字居中显示*/
  text-align: center;
  line-height: 70rpx;
}

/* 顶部菜单切换 */
page {
  background-color:#f2f2f2;
}

.navbar {
  display: flex;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.none_tab {
  position: relative;
  top: 20rpx;
  color: #999;
  font-size: 32rpx;
}

.navbar .item {
  /* 默认选中菜单 */
  position: relative;
  flex: auto;
  font-size: 27rpx;
  width: 100rpx;
  text-align: center;
  line-height: 80rpx;
  color: #333;
  border-bottom: 1rpx solid #f2f2f3;
}

.navbar .item.active {
  /* 选中菜单样式 */
  color: #333;
  border-bottom: 6rpx solid #ff9966;
}

.navbar .item.active:after {
  /* 字体 */
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
}

/* 全部 */
.orderRoot{
  margin-top: 100rpx;
}
.cont_count {
  background-color: white;
  width: 100%;
  margin-top: 20rpx;
}
.totalPrice{
  display: flex;
  justify-content: flex-end;
  padding: 20rpx 50rpx;
}
.totalPrice .pirce{
  margin-left: 10rpx;
  font-size: 30rpx;
}
.totalPrice .pirce::before{
  margin-left: 10rpx;
  content: '￥';
  font-size: 24rpx;
}
.dingdanbianhao {
  /* 订单编号 */
  padding: 20rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #f2f2f2;
}
.dibuttxt {
  padding: 20rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #f2f2f2;
}

/* 内容区域 */
.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  justify-items: center;
  align-items: center;
}

.mingxi {
  /* 订单明细 */
  display: flex;
  flex-direction: column;
  flex: 5;
}

.mingxi_item {
  margin: 0 30rpx;
  padding: 20rpx;
  border-bottom: 1px solid #f2f2f2;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
}

.name{
  width:400rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 50rpx;
}

.mingxi_price {
  margin-left: 30rpx;
  color: #ff9966;
  font-size: 30rpx;
}
.mingxi_price::before{
  content: '￥';
  color: #ff9966;
  font-size: 24rpx;
}
.coent_list{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.dingdanbtn {
  width: 200rpx;
  color: #ff9966;
  margin: 30rpx;
  width: 180rpx;
  height: 56rpx;
  text-align: center;
  border: 1rpx solid #ff9966;
  border-radius: 10rpx;
  font-size: 30rpx;
  display: inline-block;
  line-height: 56rpx;
}

/* 评论弹窗 */
.toast-box {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*蒙层*/
.toastbg {
  opacity: 0.4;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 100vh;
  z-index:1
}

.showToast {
  width: 90%;
  position: fixed;
  top:300rpx;
  right:0;
  left:0;
  margin:0 auto;
  opacity: 1;
  z-index: 2;
}
/* 评论标题 */
.toast-title {
  padding-left: 5%;
  background-color: #ff9966;
  color: white;
  padding-top: 2vh;
  padding-bottom: 2vh;
  border-top-right-radius: 16rpx;
  border-top-left-radius: 16rpx;
}
/* 评论内容区 */
.toast-main {
  padding-top: 2vh;
  padding-bottom: 2vh;
  background-color: white;
  text-align: center;
}

.toast-input {
  margin-left: 5%;
  margin-right: 5%;
  border: 1px solid #ddd;
  padding-left: 2vh;
  padding-right: 2vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.textarea_comment {
  height: 80px;
  width: 100%;
}
/* 评论按钮区 */
.toast-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button1 {
  width: 50%;
  text-align: center;
  vertical-align: middle;
  padding: 20rpx 0;
  background-color: #fff;
  border-bottom-left-radius: 16rpx;
  border-right: 1rpx solid #f2f2f2;
}

.button2 {
  width: 50%;
  text-align: center;
  vertical-align: middle;
  padding: 20rpx 0;
  background-color: #fff;
  border-bottom-right-radius: 16rpx;
}

.button1 view {
  color: #c3c3c3;  
}

.button2 view {
  color: #ff9966;
} 

 

3、orderPay.js

//JS
const app = getApp()
let orderStatus = 0; //-1订单取消,0新下单待上餐,1待用户评价,2订单已完成
let db = wx.cloud.database();
var util = require('../../utils/util.js');
Page({
  data: {
    // 顶部菜单切换
    navbar: ["待上餐", "待评价", "已完成", "已取消"],
    // 默认选中菜单
    currentTab: 0,
    isShowComment: false, //是否显示评论框
    list: []
  },
  //顶部tab切换
  navbarTap: function (e) {
    let index = e.currentTarget.dataset.idx;
    this.setData({
      currentTab: index
    })
    if (index == 0) {
      orderStatus = 0;
    } else if (index == 1) {
      orderStatus = 1;
    } else if (index == 2) {
      orderStatus = 2;
    } else if (index == 3) {
      orderStatus = -1;
    } else {
      orderStatus = 0;
    }
    this.getMyOrderList();
  },

  onShow: function () {
    this.getMyOrderList();
  },

  getMyOrderList() {
    let openid = app._checkOpenid();
    if (!openid) {
      return;
    }
    wx.cloud.callFunction({
        name: 'getOrderList',
        data: {
          action: 'user',
          orderStatus: orderStatus
        }
      })
      .then(res => {
        console.log("获取我的订单列表成功", res)
        this.setData({
          list: res.result.data,
        })
      }).catch(res => {
        console.log("获取我的订单列表失败", res)
      })
  },

  //弹起评论框
  showComment(event) {
    let orderId = event.currentTarget.dataset.orderid;
    this.setData({
      isShowComment: true,
      orderId: orderId
    })
  },

  //隐藏评论框
  cancelComment() {
    this.setData({
      isShowComment: false
    })
  },

  //获取评论内容
  setValue(input) {
    this.setData({
      content: input.detail.value
    })
  },

  //提交评论
  submitComment() {
    let orderId = this.data.orderId;
    this.cancelComment(); //隐藏评论框
    let content = this.data.content;
    if (!content) {
      wx.showToast({
        title: '评论内容为空',
        icon:"none"
      })
      return;
    }
    let openid = app._checkOpenid();
    if (!openid) {
      return;
    }
    console.log("我的openid",openid);
    db.collection("order").where({
        _id: orderId
      }).update({
        data: {
          status: 2
        },
      }).then(res => {
        console.log("修改状态成功", res)
        var time = util.formatTime(new Date());
          //将评论数据存到数据库
          db.collection("pinglun").add({
            data: {
              orderId: orderId,
              name: app.globalData.userInfo.nickName,
              avatarUrl:app.globalData.userInfo.avatarUrl,
              content: content,
              // _createTime: db.serverDate() //创建的时间
              _createTime:new Date().getTime() || time //创建的时间
            }
          }).then(res => {
            console.log("评论成功", res)
            wx.showToast({
              title: '评论成功',
              icon:"success"
            })
            this.getMyOrderList()
          }).catch(res => {
            console.log("评论失败", res)
            wx.showToast({
              icon: "none",
              title: '评论失败',
            })
          })
      }).catch(res => {
        console.log("修改状态失败", res)
      })
  },

  //取消订单
  cancleOrder(event) {
    /**
     * 如果允许用户随意取消订单，就把下面注释解开
     */
    wx.showModal({
      title:'提示',
      content:'确定取消订单吗？'
    }).then(res=>{
      console.log("用户点击了确定",event)
      if(res.confirm){
        let orderId = event.currentTarget.dataset.item._id;
        db.collection('order').doc(orderId).update({
          data: {
            status: -1
          } 
        })
        console.log('取消订单成功', res)
        wx.showToast({
          title: '订单取消成功',
          icon:'success'
        })
        this.getMyOrderList()
      }else if(res.cancel){
        console.log("用户点击了取消",res)
      }
    }).catch(res => {
        console.log('取消订单失败', res)
      })
      return
    /**
     * 如果不允许用户随意取消订单，就用下面这段代码
     */
    // wx.showModal({
    //   title: '提示!',
    //   content: '菜品已在制作中,请去收银台联系店员进行取消',
    // })
  },

  //删除订单
  deleteOrder(event){
    console.log("用户点击了删除订单",event)
    let orderid = event.currentTarget.dataset.orderid
    wx.showModal({
      title:'提示',
      content:'确定删除订单吗？'
    }).then(res=>{
      if(res.confirm){
        db.collection('order').doc(orderid).remove()
        console.log("订单删除成功",res)
        wx.showToast({
          title: '订单删除成功',
          icon:'success'
        })
        this.getMyOrderList()
      }else if(res.cancel){
        console.log("订单删除失败",res)
      }
    })
  },

  //去点餐
  toFood(){
    wx.reLaunch({
      url: '/pages/food/food',
    })
  },
})

 

三、效果展示