微信小程序项目实例——家居团购(1)

<view class='cont-title'>

    <view class='main-title'>装修百科</view>

    <view class='sub-head'>Decoration Pedia</view>

</view>

<view class='cont-wrap'>

    <block wx:for='{{decorate}}' wx:key='index'>

        <navigator url="/pages/baike/baike?art_id={{item.id}}">

            <view class='cont-photo'>

                <image src='{{IMGURL+item.img}}'></image>

                <view class='pedia-title'>{{item.name}}</view>

            </view>

        </navigator>

    </block>

</view>

  



[]( )三、购物车

======================================================================



购物车展示选购的列表  

核心代码如下：

<block wx:if="{{shopAndGoodList.length>0}}">

    <view class='buy' wx:for="{{shopAndGoodList}}" wx:for-item='shop' wx:key='shop_id'>

        <view class='buy-title'>

            <!-- <checkbox value='buy-store' ></checkbox> -->

            <view class='buy-title-wrap'>

                <image src='../../img/shop-iconBlack.png'></image>

                <text class='store-name'>{{shop.shop_name}}</text>

            </view>

        </view>

        <view class='buy-list' wx:for="{{shop.shop_goods}}" wx:for-item="good" wx:key="good_id">

            <!-- <checkbox value='value' ></checkbox> -->

            <view class='goods-wrap'>

                <navigator url='/pages/bDetail/bDetail?good_id={{good.good_id}}'>

                    <view class='goods-pic'>

                        <image src='{{imgurl+good.img}}'></image>

                    </view>

                </navigator>

                <view class='goods'>

                    <view class='top-goods'>

                        <view class='goods-name'>{{good.good_name}}</view>

                        <view class='format'>{{good.unit}}</view>

                    </view>

                    <view class='bottom-goods'>

                        <view class='goods-price'>

                            <view class='left-price'>

                                <text class='price'> ¥ {{good.price}} </text>

                                <text class='number'>*{{good.num}}</text>

                            </view>

                            <view class='right-price'>

                                <text class='price'>总价: {{good.num * good.price}}</text>

                            </view>

                        </view>

                    </view>

                </view>

                <view class='delete'>

                    <text bindtap='tapDelCartGood' data-cart_good_id="{{good.cart_good_id}}">删除</text>

                </view>

            </view>

        </view>

    </view>

</block>

<view class='cart-pay'>

    <view class='pay-acount'>

        <view class='left-count'>

            <!-- <checkbox></checkbox>

            <text class='total-slt'>全选</text> -->

        </view>

        <view class='right-count'>

            <text class='total-money'>合计: ¥<text class='red-money'>{{sum_price_all}}</text></text>

        </view>

    </view>

    <view class='pay-btn' bindtap='tapGoSubmit'>结算</view>

</view>

没有更多啦~

  



[]( )四、个人中心

=======================================================================



个人中心界面由**用户信息、收藏、评价、订单、报名、地址管理、在线咨询、客服、关于我们**组成  

核心代码如下

<image src='{{userInfo.avatarUrl}}' class='user-head-pic'></image>

{{userInfo.nickName}}

<navigator url='/pages/collection/collection' hover-class='none' >

  <image src='../../img/collect1-icon.png'></image>

  <view class='nav-name'>收藏</view>

</navigator>

<navigator url='/pages/orders/orders' hover-class='none'>

  <image src='../../img/order-icon.png' class='order-pic'></image>

  <view class='nav-name'>全部订单</view>

</navigator>

<navigator url='/pages/assess/assess' hover-class='none'>

  <image src='../../img/appraise-icon.png'></image>

  <view class='nav-name'>评价</view>

  </navigator>

<view class='option-list'>

  <view class='left-list'>

    <image src='../../img/sign-icon.png'></image>

    <text class='option-name'>我的报名</text>

  </view>

  <view class='right-list'>

    <image src='../../img/enter-icon.png'></image>

  </view>

</view>

<view class='option-list'>

  <view class='left-list'>

    <image src='../../img/add1-icon.png'></image>

    <text class='option-name'>地址管理</text>

  </view>

  <view class='right-list'>

    <image src='../../img/enter-icon.png'></image>

  </view>

</view>

<view class='option-list'>

  <view class='left-list'>

    <image src='../../img/consulting-icon.png'></image>

    <text class='option-name'>在线咨询</text>

  </view>

  <view class='right-list'>

    <image src='../../img/enter-icon.png'></image>

  </view>

  <view class='contact-wrap'>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

    <contact-button type='default-light' size="20" session-from="weapp"></contact-button>

最后，如果大伙有什么好的学习方法或建议欢迎大家在评论中积极留言哈，希望大家能够共同学习、共同努力、共同进步。

小编在这里祝小伙伴们在未来的日子里都可以 升职加薪，当上总经理，出任CEO，迎娶白富美，走上人生巅峰！！

不论遇到什么困难，都不应该成为我们放弃的理由！

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言，一定会认真查询，修正不足，谢谢。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！