星之海

PCX的无铭小窝

微信小程序 点餐功能实现

发表于 | | 阅读数
字数统计: 1.7k 字 | 阅读时长 ≈ 8 分钟

毕业设计记录

微信小程序 点餐功能实现

image-20210208221939328

点餐功能的需求：

  1. 单选，全选和取消，而且会随着菜品选取计算总价（单选，全选功能暂时保留）
  2. 单个菜品购买数量的增加和减少

点餐功能需要的数据：

  1. 首先是一个菜单列表——carts,属性在数据库中定义

  2. 左下角需要的全选按钮 需要一个字段 selectAllStatus 表示是否全选了

  3. 右下角 显示 点单总价

小程序中var ,let ,const三者区别：

var let const
var申明的变量是全局变量 let声明的变量是局部变量 const声明一个只读的常量。一旦声明，常量的值就不能改变

var:

  • var申明的变量是全局变量，其作用域为所在的函数内
  • var命令会发生”变量提升“现象，即变量可以在声明之前使用

let:

  • let声明的变量是局部变量，该变量只会在最靠近{ }内的范围有效，出了{}之后，该变量就不能用了，否则会报该变量未定义的错误
  • let声明的变量只在它所在的代码块有效
  • for循环的计数器，就很合适使用let命令
  • let不允许在相同作用域内，重复声明同一个变量

const:

  • const声明一个只读的常量。一旦声明，常量的值就不能改变
  • const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值，只声明不赋值，就会报错
  • const声明的常量，也与let一样不可重复声明

代码实现

1.初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// pages/menus/menus.js
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  data: {
    carts:[],               //购物车列表
    hasList:false,          //列表是否有数据(购物车是否为空)
    totalPrice:0,           //总结初始为0
    selectAllStatus:false   //全选状态，默认全选
  },
  onShow(){
    var that = this;
    wx.request({
        url: 'http://localhost:8083/food/queryAllwx',//连接服务器从表中查询出信息
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        var carts = res.data.allFood;
        carts.forEach(item => {
          item.num= 0;
          })
        console.log(carts)
        this.setData({
          hasList:true ,       //既然有数据，就设置为true
          carts: carts         //将表中查询出来的信息传给carts
        })
      }
    })
  },

菜单列表数据我们一般是通过请求服务器拿到的数据，所以我们放在生命周期函数里给 carts 赋值。想到每次进到菜单都要获取菜单的最新状态，而onLoad和onReady只在初始化的时候执行一次，所以我需要把请求放在 onShow函数里。

2.wxml布局

与前端页面绑定数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!--pages/menus/menus.wxml-->
  <!-- 顶部店家logo -->
  <view class="weui-panel__bd posi_fiexd top_box" >
    <navigator url="" class="weui-media-box weui-media-box_appmsg new_padd  bc_green" hover-class="none">
      <view class="weui-media-box__hd weui-media-box__hd_in-appmsg" style="width:120rpx;height:120rpx">
        <image class="weui-media-box__thumb bd_radius" src="../../image/hi.jpg" />
      </view>
      <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
        <view class="weui-media-box__title  color_white">用户名</view>
        <view class="weui-media-box__desc color_white">欢迎下单</view>
      </view>
    </navigator>
  </view>
  <block wx:for="{{carts}}" data-item="item" class="block_t" wx:for-index="index">
    <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_example ">
            <!-- wx:if 是否选择显示不同图标 -->
            <icon wx:if="{{item.food_selected}}" type="success" color="rgb(235, 202, 56)" bindtap="selectList" data-index="{{index}}" />
            <icon wx:else type="waiting_circle" bindtap="selectList" data-index="{{index}}"/>
            <view class="weui-cell__hd">
                <image src="{{item.food_icon}}" style="margin-right: 10px;vertical-align: middle;width:50px; height: 50px;"></image>
            </view>
            <view class="weui-cell__bd">{{item.food_name}}</view>
            <view class="weui-cell__bd">{{item.food_price}}元</view>
            <!-- 增加/减少按钮 -->
            <view class="num_tool">
                <image bindtap="minusCount" data-index="{{index}}"  class="am_icon" src="../../image/minus-icon.png" />
                <text>{{item.food_num}}</text>
                <image bindtap="addCount" data-index="{{index}}"  class="am_icon" src="../../image/add-icon.png" />   
            </view> 
             <!-- 删除按钮 -->
            <text bindtap="deleteList" data-index="{{index}}"> × </text>  
        </view>
    </view>
  </block>
  <!--底部工具栏-->
<view class="footer_tool">
    <icon wx:if="{{selectAllStatus}}" type="success" color="rgb(235, 202, 56)" bindtap = "selectAll"/>
    <icon wx:else type="waiting_circle" bindtap = "selectAll"/>
    <text>全选</text>
        <!--总价格-->
    <view class="total_price_wrap">
        <view class="total_price">
            合计: <text class="total_price_text">{{totalPrice}}</text>
        </view>
    </view>
    <!--结算-->
    <view class="order_pay_wrap">
        支付
    </view>
</view>

3.计算总价

总价 = 选中的菜品1的 价格 * 数量 + 选中的菜品2的 价格 * 数量 + …
根据公式，可以得到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//计算总价
getTotalPrice(){
  let carts = this.data.carts;    //获取购物车列表
  let total = 0;
  for(let i = 0; i<carts.length; i++){                  //循环列表每个数据
    total += carts[i].food_num * carts[i].food_price;         //所有价格相加    总价 = 选中的商品1的 价格 * 数量 + 选中的商品2的 价格 * 数量 + ...
    // if(carts[i].food_selected){                         //判断选中才会计算价格
    //   total += carts[i].food_num * carts[i].food_price;         //所有价格相加    总价 = 选中的商品1的 价格 * 数量 + 选中的商品2的 价格 * 数量 + ...
    // }
  }
  console.log("总价为："+total);
  this.setData({
    carts: carts,
    totalPrice: total.toFixed(2)
  });
},

页面中的其他操作会导致总价格变化的都需要调用该方法。

4.选择事件

点击时选中，再点击又变成没选中状态，其实就是改变 food_selected 字段。通过 data-index=”“ 把当前商品在列表数组中的下标传给事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
//选择事件
selectList(e){
  const index = e.currentTarget.dataset.index;          //获取date-出入的index
  let carts = this.data.carts;                          //获取购物车列表
  const food_selected = carts.food_selected;
  console.log("当前选中状态1："+carts[index].food_selected);           //获取当前商品的选中状态
  carts[index].food_selected = !carts[index].food_selected;          //改变状态
  console.log("当前选中状态："+carts[index].food_selected);
  this.setData({
    carts: carts
  });
  this.getTotalPrice();                                 //重新获取总价
},

5.全选事件

全选就是根据全选状态 selectAllStatus 去改变每个商品的 food_selected

1
2
3
4
5
6
7
8
9
10
11
12
13
14
selectAll(e){
  let selectAllStatus = this.data.selectAllStatus;      //是否全选状态
  selectAllStatus = !selectAllStatus;
  let carts = this.data.carts;

  for(let i = 0; i < carts.length; i++){
    carts[i].food_selected = selectAllStatus;          //改变所有商品状态
  }
  this.setData({
    selectAllStatus: selectAllStatus,
    carts: carts
  });
  this.getTotalPrice();                                //重新获取总价
},

6.增减数量

点击+号，num加1，点击-号，如果num > 1，则减1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//增减数量        逻辑 ---> 点击+号，num加1，点击-号，如果num > 1，则减1
//增加数量
addCount(e){
  const index = e.currentTarget.dataset.index;
  let carts = this.data.carts;
  let num = carts[index].food_num;
  console.log("num是："+num);
  num = num + 1;
  carts[index].food_num = num;
  console.log("num是2："+num);
  this.setData({
    carts: carts
  });
  this.getTotalPrice();
},
    
//减少数量
minusCount(e){
  const index = e.currentTarget.dataset.index;
  let carts = this.data.carts;
  let num = carts[index].food_num;
  if(num <= 0){
    return false;
  }
  num = num - 1;
  carts[index].food_num = num;
  this.setData({
    carts: carts
  });
  this.getTotalPrice();
},
更多创作支持内容请移步至顶端标签💖发电💖