微信小程序美团点餐

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

一.首页

部分代码：

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

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

有源码

相关推荐
爱上大树的小猪2 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
從南走到北6 小时前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·开源·微信公众平台
Java Fans9 小时前
微信小程序——访问服务器媒体文件的实现步骤
服务器·微信小程序·小程序
Evaporator Core12 小时前
微信小程序数据绑定与事件处理：打造动态交互体验
微信小程序·小程序·交互
流烟默1 天前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
乔冠宇1 天前
微信小程序中将图片截图为正方形（自动居中）
微信小程序·小程序·typescript·uniapp
V+zmm101341 天前
在线办公小程序（springboot论文源码调试讲解）
vue.js·spring boot·微信小程序·小程序·毕业设计
V+zmm101341 天前
自驾游拼团小程序的设计与实现（ssm论文源码调试讲解）
java·数据库·微信小程序·小程序·毕业设计
黑马源码库miui520862 天前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·微信公众平台
盛夏绽放2 天前
微信小程序地图map全方位解析
微信小程序·小程序
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10DeepSeek RAGFlow构建本地知识库系统