#小程序云开发挑战赛#-外卖系统-自由人
发布于 4 年前 作者 naxiang 2632 次浏览 来自 分享

该小程序是外卖系统,主要用于高校食堂点餐及外卖工作,为学生服务。

该小程序界面整洁简洁,便于学生快速点餐节约时间,做到真正的站在学生角度立场去设计该产品。

部分截图:

 

 

 

     项目部分代码:

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

}

1 回复

可以推给食堂使用。

回到顶部