微信小程序美团点餐

引言：外卖已经成为了都市人的必备，在无数个来不及（懒得）做饭的时刻拯救孤单寂寞的胃。美团外卖无疑是外卖届的领头羊，它的很多功能与设计都值得我们学习。本文将从五个方面，对美团外卖展开产品分析，希望对你有帮助。

一.首页

部分代码：

<view class="container"><view class="header {{scrollDown?'scrolled':''}}"><view class="location ellipsis" bindtap="toNearby"><image class="icon" src="/imgs/index/icon_location.png"/>{{address}}</view><view class="search" bindtap="tapSearch"><image class="icon" src="/imgs/index/icon_search.png"/><i class="fa fa-home"></i>烤鸭</view></view><scroll-view scroll-y="true" scroll-into-view="{{scrollIntoView}}" bindscroll="onScroll"><swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500"><block wx:for="{{banners}}" wx:key="id"><swiper-item><image bindtap="tapBanner" data-id="{{index}}" src="{{item.img}}"/></swiper-item></block></swiper><swiper class="section icons" indicator-dots="true" autoplay="" interval="" duration="500"><swiper-item wx:for="{{icons}}" wx:for-item="list" wx:key="id"><view class="icon" wx:for="{{list}}" wx:for-item="icon" wx:key="id" bindtap="toNearby"><image src="{{icon.img}}"/><text>{{icon.name}}</text></view></swiper-item></swiper><view class="section section-big discount"><view class="title">优惠专区</view><image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/dicount.jpg"/></view><view class="section section-big preferred"><view class="title">为你优选</view><image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/preferred.jpg"/></view><view class="section section-big special"><view class="title">特色频道</view><image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/special.jpg"/></view><view id="nearby" class="section section-big nearby"><view class="title">附近商家</view><view class="filters"><view class="filter {{filterId==1?'active':''}}" data-id="1" bindtap="tapFilter">综合排序<text class="v">↓</text></view><view class="filter {{filterId==2?'active':''}}" data-id="2" bindtap="tapFilter">销量最高<text class="v">↓</text></view><view class="filter {{filterId==3?'active':''}}" data-id="3" bindtap="tapFilter">距离最近<text class="v">↓</text></view></view><view class="shop" wx:for="{{shops}}" wx:key="id"><navigator url="/page/shop/shop?id={{item.id}}"><image src="{{item.img}}"/></navigator></view></view><view class="loading">努力加载中…</view></scroll-view>
</view>

效果图：

下拉：

二.详情页

部分代码：

<view class="container"><view class="header {{scrollDown?'hidden':''}}"><image class="logo" src="{{shop.logo}}"/><view class="name ellipsis">{{shop.name}}</view><view class="welcome ellipsis">公告：欢迎光临{{shop.name}}！</view><view class="follow" bindtap="follow">{{followed?'已收藏':'收藏'}}</view><view class="line"></view><view class="desc">{{shop.desc}}</view></view><view class="content-container"><scroll-view class="classify-container" scroll-y="true"><view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" data-id="{{classify.id}}" bindtap="tapClassify"><view class="name">{{classify.classifyName}}</view></view></scroll-view><scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll"><view wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" id="{{classify.id}}"><view class="title">{{classify.classifyName}}</view><view class="goods" wx:for="{{classify.goods}}" wx:for-item="id" wx:key="*this"><image class="pic" src="{{goods[id].pic}}"></image><view class="name ellipsis">{{goods[id].name}}</view><view class="sold">月售{{goods[id].sold}}</view><view class="price">￥{{goods[id].price}}</view><view class="addCart" bindtap="tapAddCart" data-id="{{id}}"><image src="/imgs/shop/plus.png"></image></view></view></view></scroll-view></view><view class="cart-detail" hidden="{{!showCartDetail||!cart.count}}"><view class="mask" bindtap="hideCartDetail"></view><view class="list"><view class="item" wx:for="{{cart.list}}" wx:for-index="id" wx:for-item="num" wx:key="id"><view class="name ellipsis">{{goods[id].name}}</view><view class="total">￥{{goods[id].price*cart.list[id]}}</view><view class="reduce" data-id="{{id}}" bindtap="tapReduceCart">-</view><view class="num">{{num}}</view><view class="add" data-id="{{id}}" bindtap="tapAddCart">+</view></view></view></view><view class="cart"><view class="data" bindtap="showCartDetail"><view class="icon"><image src="/imgs/shop/cart.png"></image><view class="count">{{cart.count}}</view></view><view class="total">￥{{cart.total}}</view></view><form bindsubmit="submit" report-submit="true"><!--<view formType="submit" class="submit">去结算</view>--><button class="yellow {{cart.count?'':'disabled'}}" formType="submit" disabled="{{!cart.count}}">去结算</button></form></view>
</view>

效果图：

三.我的

部分代码：

<!--index.wxml-->
<view class="container"> <view class="login-icon"> <image class="login-img" src="/imgs/index/lb.jpg"></image> </view> <view class="login-from"> <!--账号--> <view class="inputView"> <image class="nameImage" src="/imgs/index/lb.jpg"></image> <label class="loginLab">账号</label> <input class="inputText" placeholder="请输入账号" 
bindinput="phoneInput" /> </view> <view class="line"></view> 
<!--密码--> 
<view class="inputView"> <image class="keyImage" src="/imgs/index/lb.jpg"></image> <label class="loginLab">密码</label> <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> </view> <!--相关协议--><checkbox-group bindchange="bindAgreeChange"><label class="weui-agree" for="weuiAgree"><view class="weui-agree__text"><checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{}}" /><view class="weui-agree__checkbox-icon"><icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon></view>阅读并同意<navigator url=""class="weui-agree__link">《相关条款》</navigator></view></label></checkbox-group><!--按钮--> <view class="loginBtnView"> <button class="loginBtn" type="primary" size="{{primarySize}}" 
loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" 
bindtap="login">登录</button> </view> </view> 
</view>