微信小程序美团点餐

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

一.首页

部分代码:

<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> 

今天就分享到此,感谢预览~

有源码

相关推荐
.生产的驴6 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
yaosheng_VALVE8 小时前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king9 小时前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
汤姆yu12 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
曲辒净13 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
oil欧哟1 天前
🤔认真投入一个月做的小程序,能做成什么样子?有人用吗?
前端·vue.js·微信小程序
汤姆yu1 天前
基于微信小程序的消防隐患在线举报系统
微信小程序·小程序·消防隐患
郏国上1 天前
微信小程序的消息头增加的字段不能有下滑线,字段大写字母自动转换消息字母
微信小程序·小程序·
從南走到北1 天前
JAVA数字人创作文案视频链接提取数字人源码小程序+公众号+APP+H5
微信小程序·小程序·微信公众平台
FZUGO2 天前
EE308FZ_Sixth Assignment_Beta Sprint_Sprint Essay 3
java·微信小程序·sprint