小程序外卖订单界面的示例代码小程序外卖订单界面的示例代码
主要介绍了小程序外卖订单界面的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的
参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1.效果界面效果界面
2.涉及功能涉及功能
*左侧商品类型、右侧商品可以相互控制;
*商品列表加减及购物车商品加减icon消失、显示;
*商品每一次加减,页面视图变化(数量、价格变化、购物车置灰);
3.贴上所有代码贴上所有代码
1.wxml
<view class="container">
<view class="index-cont">
<!-- 左边类型 -->
<view class="index-left">
<view wx:for="{{foodsList}}" wx:key="index" class="item {{curId === 'item'+index?'on':''}}" data-id="item{{index}}" bindtap="scrollToViewFn">{{item.name}}</view>
</view>
<!-- 右边产品 -->
<scroll-view class="index-right" scroll-y="{{true}}" scroll-into-view="{{initView}}" scroll-with-animation="true" bindscroll="onPageScroll">
<view class="boxs">
<block wx:for="{{foodsList}}" wx:key="index">
<view class="index-title" id="item{{index}}">{{item.name}}</view>
<view class="item" wx:for="{{item.list}}" wx:key="ind" wx:for-item="itm" wx:for-index="ind" bindtap="showGoodDetail(itm)">
<view class="pic"><image src="{{itm.pic}}" mode="aspectFill"></image></view>
<view class="main">
<view class="tit">{{itm.title}}</view>
<view class="desc">{{itm.info}}</view>
<view class="money">¥{{itm.price}}</view>
</view>
<view class="box">
<view wx:if="{{itm.num !== 0}}" class="icon" catchtap="reduceNum(index, ind, itm)"><image src="../../../static/images/reduce-icon.png" alt=""></image></view>
<input wx:if="{{itm.num !== 0}}" type="text" disabled wx:model="{{itm.num}}"/>
<view class="icon" catchtap="addNum(index, ind, itm)"><image src="../../../static/images/add-icon.png" alt=""></image></view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
<view class="index-cart">
<view class="left">
<view class="cart-num" wx:if="{{cartList.length === 0}}">
<image src="../../../static/images/cart.png"></image>
</view>
<view class="cart-num on" wx:else bindtap="showCartMask">
<image src="../../../static/images/cart.png"></image>
<text>{{totalNum}}</text>
</view>
<view class="cart-money">¥{{totalMoney}}</view>
</view>
<view class="order-btn" bindtap="submitOrder">去结算</view>
</view>
<!--购物车弹窗-->
<view class="dialog" wx:if="{{isShowCartMask && cartList.length !== 0}}" bindtap="hiddenCartMak()">
<view class="boxs" catchtap="stopMaopao()">
<view class="title-block">
<text>已选商品</text>
<view class="clear" bindtap="clearCart"><image src="../../../static/images/del.png"></image>清空</view>
</view>
<scroll-view class="content" scroll-y="{{true}}" scroll-with-animation="true">
<block wx:for="{{cartList}}" wx:key="index">
<view class="item" id="{{item.view}}">
<view class="tit">{{item.name}}</view>
<view class="right">
<text>¥{{item.price}}</text>
<view class="box">
<view class="icon" bindtap="reduceCart(index, item)"><image src="../../../static/images/reduce-icon.png" alt=""></image></view>
<input type="text" disabled wx:model="{{item.num}}"/>
<view class="icon" bindtap="addCart(index, item)"><image src="../../../static/images/add-icon.png" alt=""></image></view>
</view>