微信小程序项目之一点点的点餐界面_微信小程序开发一点点

实现图

wxml代码

<!-- 左侧菜单 -->
<view class="list-left-menu">
  <view wx:for="{{listData}}" wx:key="unique" class="{{index==activeIndex?'list-left-menu-box-selected':'list-left-menu-box-unselect'}}" data-index="{{index}}" bindtap='selectMenu'>
    <view class="list-menu-name">{{item.name}}</view>
  </view>
</view>
<view>
  <image class="list-right-menu" src="/pages/diandan/resources/pic/diandna-pic.jpg"></image>
</view>
<!-- 右侧菜单 -->
<scroll-view class="scroll-view-t" scroll-y="true" style='height:{{scrollH}}rpx;' bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <view class="content" id="a{{index}}" wx:for="{{listData}}" wx:key="unique">
    <view class='list-tab'>{{item.name}}</view>
    <view class='content-list' wx:for="{{item.foods}}" wx:key="unique" wx:for-item="items" wx:for-index="index">
      <view class='list-image-box'>
        <image class="list-image" mode="widthFix" src="/pages/image/naicha.png" lazy-load></image>
      </view>
      <view class='issue-name'>
        <view>{{item.foods[index]}}</view>
        <view style='margin-top:20rpx;color:#824920'>
          ¥ {{item.price[index]}}.00
          <i class="iconfont icon-jiahao2fill plus-icon" data-type="{{index}}" data-index="{{indexs}}" bindtap="selectInfo"></i>
        </view>
      </view>
    </view>
  </view>
</scroll-view>
<!-- 底部操作菜单 -->
<view class="operate-bar">
  <view class='gouwuche'>
    <view style='padding:5px;display:flex'>
      <i class="iconfont icon-gouwuchefill gouwuche-icon {{sumMonney!=0?'activity-color':'' }}" bindtap="showCartList">
        <span class="number-msg" wx:if="{{cartList.length!=0}}">{{cupNumber}}</span>
      </i>

      <view class='gouwuche-price' wx:if="{{sumMonney==0}}">¥ 0</view>
      <view class='gouwuche-price' style='color:white;font-size:18px' wx:if="{{sumMonney!=0}}">¥ {{sumMonney}}.00</view>
    </view>
  </view>
  <view class="submit-btn {{sumMonney!=0?'activity-color-bg':'' }}" bindtap='goBalance'>
    <view class="submit-btn-label {{sumMonney!=0?'color-white':'' }}">去结算</view>
  </view>
</view>
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

js代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    listData: [{
        id: 1,
        name: '店长推荐',
        foods: ['四季春+珍波椰', '云朵百香青', '云朵葡萄柚青', '清香乌龙茶', '冰淇淋红茶'],
        price: [7, 17, 17, 7, 13],
        num: [0, 0, 0, 0, 0]
      },
      {
        id: 2,
        name: '找好茶',
        foods: ['阿萨姆红茶', '茉莉绿茶', '四季春茶', '清香乌龙茶', '翡翠柠檬', '蜂蜜绿'],
        price: [7, 7, 7, 7, 12, 12],
        num: [0, 0, 0, 0, 0, 0]
      },
      {
        id: 3,
        name: '找口感',
        foods: ['波霸奶茶', '波霸奶绿', '波霸红', '波霸绿', '珍珠奶茶', '珍珠奶绿'],
        price: [10, 10, 7, 7, 10, 10],
        num: [0, 0, 0, 0, 0, 0]
      },
      {
        id: 4,
        name: '找奶茶',
        foods: ['奶茶', '奶绿', '四季奶青', '乌龙奶茶', '红茶玛奇朵', '乌龙玛奇朵'],
        price: [10, 10, 10, 10, 12, 12],
        num: [0, 0, 0, 0, 0, 0]

      },
      {
        id: 5,
        name: '找新鲜',
        foods: ['柠檬汁', '金桔柠檬', '柠檬蜜', '柠檬养乐多', '蜜茶'],
        price: [12, 12, 13, 15, 12],
        num: [0, 0, 0, 0, 0]
      },
      {
        id: 6,
        name: '找拿铁',
        foods: ['红茶拿铁', '绿茶拿铁', '四季拿铁', '乌龙拿铁', '焦糖红茶拿铁'],
        price: [13, 13, 13, 13, 14],
        num: [0, 0, 0, 0, 0]
      }
    ],
    activeIndex: 0,
    scrollH: 1000,
    toView: 'a0',
    scrollTop: 100,
    cupNumber: 0,
    sumMonney: 0,
    loading: false,
    // 如果是true的话，会直接弹出来
    showModalStatus: false,
  },

  selectMenu: function(e) {
    var index = e.currentTarget.dataset.index
    // console.log(index)
    this.setData({
      activeIndex: index,
      toView: 'a' + index,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    var sysinfo = wx.getSystemInfoSync().windowHeight;
    console.log(sysinfo)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },
  selectInfo: function(e) {
    var type = e.currentTarget.dataset.type;
    var index = e.currentTarget.dataset.index;
    this.setData({
      showModalStatus: !this.data.showModalStatus,
      currentType: type,
      currentIndex: index,
      sizeIndex: 0,
      sugarIndex: 0,
      temIndex: 0
    });
  },
  notice: function() {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '因含有规格，请在购物车内删减',
      showCancel: false,
      success: function(res) {
        if (res.confirm) {
          that.setData({
            showCart: true
          });
        }
      }
    })
  },
  showCartList: function() {
    console.log(this.data.showCart)
    if (this.data.cartList.length != 0) {
      this.setData({
        showCart: !this.data.showCart,
      });
    }

  },
  clearCartList: function() {
    this.setData({
      cartList: [],
      showCart: false,
      sumMonney: 0
    });
  },
  goBalance: function() {
    if (this.data.sumMonney != 0) {
      wx.setStorageSync('cartList', this.data.cartList);
      wx.setStorageSync('sumMonney', this.data.sumMonney);
      wx.setStorageSync('cupNumber', this.data.cupNumber);
      wx.navigateTo({
        url: '../order/balance/balance'
      })
    }
  },
 })
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

项目地址：微信小程序——仿一点点地址