该小程序是外卖系统,主要用于高校食堂点餐及外卖工作,为学生服务。
该小程序界面整洁简洁,便于学生快速点餐节约时间,做到真正的站在学生角度立场去设计该产品。
部分截图:
项目部分代码:
<view class=“container flex-wrap flex-direction-row”>
<!-- left aside -->
<view class=“aside flex-wrap flex-direction-col”>
<block wx:for="{{navList}}">
<text class=“type-nav {{curNav == item.id ? ‘selected’ : ‘’}}” bindtap=“selectNav” data-index="{{index}}" data-id="{{item.id}}">{{item.name}}</text> </block></view>
<!-- content -->
<view class=“content flex-item”>
<block wx:for="{{dishesList[curIndex]}}">
<view class=“dish flex-wrap flex-direction-row” catchtap=“selectDish” data-dish="{{item.id}}">
<view class=“flex-item”>
<text class=“title”>{{item.name}}</text>
<p>¥{{item.price}}</p>
</view>
<view class=“add-btn”><icon type="{{item.status ? ‘success’ : ‘circle’}}" color=“orange” size=“30”></icon></view></view>
</block>
</view>
</view>
<!-- cart -->
<view class=“cart”>
<text class=“total”>购物车:{{cartTotal}}</text>
</view>
<loading hidden="{{hidden}}">玩命加载中…</loading>
/**index.wxss**/
.my-swiper image{
width: 100%;
}
.wrap{
display: inline-block;
margin-top: .8rem;
}
.wrap-item{
display: inline-block;
width: 33%;
height: 6rem;
line-height: 6rem;
border-bottom: 1px solid #ddd;
background-color: #fff;
text-align: center;
}
/*不支持 :nth-child(2);*/
.wrap-item.exp{
border: 1px solid #ddd;
border-top: 0;
}