• 【微信小程序】外卖点餐效果展示

    概述

    外卖点餐效果展示，左右布局，快速点餐，商家信息展示等...程序是模仿人家的，所以界面没做什么调整，功能是没啥问题，可以正常使用...

    详细

    直接看效果图：

    1625121211654.gif

    可以把这个点餐这个功能分为5部分组成

    1、第一部分头部信息

    2、第二部分左布局

    3、第三部分右布局

    4、第四部分点击购物车弹出，菜品信息

    5、结算信息

    部分代码展示：

    1. var app = getApp();
    2. var server = require('../../utils/server');
    3. Page({
    4. data: {
    5. goods: {
    6. 1: {
    7. id: 1,
    8. name: '娃娃菜',
    9. pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
    10. sold: 1014,
    11. price: 2
    12. },
    13. 2: {
    14. id: 2,
    15. name: '金针菇',
    16. pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
    17. sold: 1029,
    18. price: 3
    19. },
    20. 3: {
    21. id: 3,
    22. name: '方便面',
    23. pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
    24. sold: 1030,
    25. price: 2
    26. },
    27. 4: {
    28. id: 4,
    29. name: '粉丝',
    30. pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
    31. sold: 1059,
    32. price: 1
    33. },
    34. 5: {
    35. id: 5,
    36. name: '生菜',
    37. pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yweidao.com%2F2017%2F11%2F30%2Fgoods_pc_image%2F15120207612096u897w5a1l_600x600.jpg&refer=http%3A%2F%2Fimg.yweidao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627712306&t=aa990055843dc872e97646234fc6e075',
    38. sold: 1029,
    39. price: 2
    40. },
    41. 6: {
    42. id: 6,
    43. name: '白菜',
    44. pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
    45. sold: 1064,
    46. price: 2
    47. },
    48. 7: {
    49. id: 7,
    50. name: '杏鲍菇',
    51. pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
    52. sold: 814,
    53. price: 3
    54. },
    55. 8: {
    56. id: 8,
    57. name: '香菇',
    58. pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
    59. sold: 124,
    60. price: 3
    61. },
    62. 9: {
    63. id: 9,
    64. name: '猴头菇',
    65. pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
    66. sold: 102,
    67. price: 5
    68. }
    69. },
    70. goodsList: [
    71. {
    72. id: 'hot',
    73. classifyName: '热销',
    74. goods: [1, 2, 3, 4, 5]
    75. },
    76. {
    77. id: 'new',
    78. classifyName: '新品',
    79. goods: [1, 3]
    80. },
    81. {
    82. id: 'vegetable',
    83. classifyName: '蔬菜',
    84. goods: [1, 6, 5]
    85. },
    86. {
    87. id: 'mushroom',
    88. classifyName: '蘑菇',
    89. goods: [2, 7, 8, 9]
    90. },
    91. {
    92. id: 'food',
    93. classifyName: '主食',
    94. goods: [3, 4]
    95. }
    96. ],
    97. cart: {
    98. count: 0,
    99. total: 0,
    100. list: {}
    101. },
    102. showCartDetail: false
    103. },
    104. onLoad: function (options) {
    105. var shopId = options.id;
    106. for (var i = 0; i < app.globalData.shops.length; ++i) {
    107. if (app.globalData.shops[i].id == shopId) {
    108. this.setData({
    109. shop: app.globalData.shops[i]
    110. });
    111. break;
    112. }
    113. }
    114. },
    115. onShow: function () {
    116. this.setData({
    117. classifySeleted: this.data.goodsList[0].id
    118. });
    119. },
    120. tapAddCart: function (e) {
    121. this.addCart(e.target.dataset.id);
    122. },
    123. tapReduceCart: function (e) {
    124. this.reduceCart(e.target.dataset.id);
    125. },
    126. addCart: function (id) {
    127. var num = this.data.cart.list[id] || 0;
    128. this.data.cart.list[id] = num + 1;
    129. this.countCart();
    130. },
    131. reduceCart: function (id) {
    132. var num = this.data.cart.list[id] || 0;
    133. if (num <= 1) {
    134. delete this.data.cart.list[id];
    135. } else {
    136. this.data.cart.list[id] = num - 1;
    137. }
    138. this.countCart();
    139. },
    140. countCart: function () {
    141. var count = 0,
    142. total = 0;
    143. for (var id in this.data.cart.list) {
    144. var goods = this.data.goods[id];
    145. count += this.data.cart.list[id];
    146. total += goods.price * this.data.cart.list[id];
    147. }
    148. this.data.cart.count = count;
    149. this.data.cart.total = total;
    150. this.setData({
    151. cart: this.data.cart
    152. });
    153. },
    154. follow: function () {
    155. this.setData({
    156. followed: !this.data.followed
    157. });
    158. },
    159. onGoodsScroll: function (e) {
    160. if (e.detail.scrollTop > 10 && !this.data.scrollDown) {
    161. this.setData({
    162. scrollDown: true
    163. });
    164. } else if (e.detail.scrollTop < 10 && this.data.scrollDown) {
    165. this.setData({
    166. scrollDown: false
    167. });
    168. }
    169.  
    170. var scale = e.detail.scrollWidth / 570,
    171. scrollTop = e.detail.scrollTop / scale,
    172. h = 0,
    173. classifySeleted,
    174. len = this.data.goodsList.length;
    175. this.data.goodsList.forEach(function (classify, i) {
    176. var _h = 70 + classify.goods.length * (46 * 3 + 20 * 2);
    177. if (scrollTop >= h - 100 / scale) {
    178. classifySeleted = classify.id;
    179. }
    180. h += _h;
    181. });
    182. this.setData({
    183. classifySeleted: classifySeleted
    184. });
    185. },
    186. tapClassify: function (e) {
    187. var id = e.target.dataset.id;
    188. this.setData({
    189. classifyViewed: id
    190. });
    191. var self = this;
    192. setTimeout(function () {
    193. self.setData({
    194. classifySeleted: id
    195. });
    196. }, 100);
    197. },
    198. showCartDetail: function () {
    199. this.setData({
    200. showCartDetail: !this.data.showCartDetail
    201. });
    202. },
    203. hideCartDetail: function () {
    204. this.setData({
    205. showCartDetail: false
    206. });
    207. },
    208. submit: function (e) {
    209. server.sendTemplate(e.detail.formId, null, function (res) {
    210. if (res.data.errorcode == 0) {
    211. wx.showModal({
    212. showCancel: false,
    213. title: '恭喜',
    214. content: '订单发送成功！下订单过程顺利完成，本例不再进行后续订单相关的功能。',
    215. success: function(res) {
    216. if (res.confirm) {
    217. wx.navigateBack();
    218. }
    219. }
    220. })
    221. }
    222. }, function (res) {
    223. console.log(res)
    224. });
    225. }
    226. });

    部分代码：

    1. <view class="container">
    2. <view class="header {{scrollDown?'hidden':''}}">
    3. <image class="logo" src="https://img2.baidu.com/it/u=2421505363,3507499484&fm=26&fmt=auto&gp=0.jpg"/>
    4. <view class="name ellipsis">{{shop.name}}</view>
    5. <view class="welcome ellipsis">公告：欢迎光临{{shop.name}}！</view>
    6. <view class="follow" bindtap="follow">{{followed?'已收藏':'收藏'}}</view>
    7. <view class="line"></view>
    8. <view class="desc">{{shop.desc}}</view>
    9. </view>
    10. <view class="content-container">
    11. <scroll-view class="classify-container" scroll-y="true">
    12. <view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" data-id="{{classify.id}}" bindtap="tapClassify">
    13. <view class="name">{{classify.classifyName}}</view>
    14. </view>
    15. </scroll-view>
    16. <scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll">
    17. <view wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" id="{{classify.id}}">
    18. <view class="title">{{classify.classifyName}}</view>
    19. <view class="goods" wx:for="{{classify.goods}}" wx:for-item="id" wx:key="*this">
    20. <image class="pic" src="{{goods[id].pic}}"></image>
    21. <view class="name ellipsis">{{goods[id].name}}</view>
    22. <view class="sold">月售{{goods[id].sold}}</view>
    23. <view class="price">￥{{goods[id].price}}</view>
    24. <view class="addCart" bindtap="tapAddCart" data-id="{{id}}">
    25. <image src="/imgs/shop/plus.png"></image>
    26. </view>
    27. </view>
    28. </view>
    29. </scroll-view>
    30. </view>
    31. <view class="cart-detail" hidden="{{!showCartDetail||!cart.count}}">
    32. <view class="mask" bindtap="hideCartDetail"></view>
    33. <view class="list">
    34. <view class="item" wx:for="{{cart.list}}" wx:for-index="id" wx:for-item="num" wx:key="id">
    35. <view class="name ellipsis">{{goods[id].name}}</view>
    36. <view class="total">￥{{goods[id].price*cart.list[id]}}</view>
    37. <view class="reduce" data-id="{{id}}" bindtap="tapReduceCart">-</view>
    38. <view class="num">{{num}}</view>
    39. <view class="add" data-id="{{id}}" bindtap="tapAddCart">+</view>
    40. </view>
    41. </view>
    42. </view>
    43. <view class="cart">
    44. <view class="data" bindtap="showCartDetail">
    45. <view class="icon">
    46. <image src="/imgs/shop/cart.png"></image>
    47. <view class="count">{{cart.count}}</view>
    48. </view>
    49. <view class="total">￥{{cart.total}}</view>
    50. </view>
    51. <form bindsubmit="submit" report-submit="true">
    52. <!--<view formType="submit" class="submit">去结算</view>-->
    53. <button class="yellow {{cart.count?'':'disabled'}}" formType="submit" disabled="{{!cart.count}}">去结算</button>
    54. </form>
    55. </view>
    56. </view>

  • 相关阅读:
    fastapi实现websocket
    亲测一款超实用的在线制作产品册工具，一看就会
    对话框管理器第七章：消息循环中的更多细节
    【计算机考研】【英语一】必备词组
    KeyDB源码解析四——其他特性
    如何辨别优秀的人 选拔出最能打的选手
    web网页渗透测试
    47.各种类型的线程池
    适配LVGL界面图片和文字显示很虚，色阶明显的解决方法（全志R128适用）
    【LeetCode】二叉树相关题解汇总
  • 原文地址：https://blog.csdn.net/hanjiepo/article/details/132956151