微信小程序項目實例——家居團購

文章目錄

• 微信小程序項目實例——家居團購
• 一、項目展示
• 二、首頁
• 三、購物車
• 四、個人中心

項目代碼見文字底部

---

一、項目展示

二、首頁

首頁由建材市場、團購活動、公益驗房和線上拼團組成
從上到下分為廣告區、導航區、內容區
核心代碼如下：

<!--index.wxml--><!-- 輪播圖 --> <swiper indicator-dots="{{indicatorDots}}" class='swiper' indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='{{circular}}'><block wx:for="{{advs}}" wx:key="index"><swiper-item><navigator url='{{item.url}}'><image src="{{IMGURL+item.img}}" class="slide-image" /></navigator></swiper-item></block> </swiper><!-- 導航區 --> <view class='nav'><view class='conlumn'><navigator url="/pages/goods/goods" hover-class='none'><image src='../../img/shop-bg.png' class='nav-pic'><view class='icon-wrap'><image src='../../img/shop-icon.png'></image><view>建材商城</view></view></image></navigator><navigator url='/pages/groupList/groupList' hover-class='none'><image src='../../img/activity-bg.png' class='nav-pic'><view class='icon-wrap'><image src='../../img/activity-icon.png'></image><view>團購活動</view></view></image></navigator></view><view class='conlumn'><navigator url='/pages/house/house' hover-class='none'><image src='../../img/home-bg.png' class='nav-pic'><view class='icon-wrap'><image src='../../img/home-icon.png'></image><view>{{message}}</view></view></image></navigator><navigator url='/pages/teamBuy/teamBuy' hover-class='none'><image src='../../img/online-bg.png' class='nav-pic'><view class='icon-wrap'><image src='../../img/online-icon.png'></image><view>線上拼團</view></view></image></navigator></view> </view><!-- 內容區 --><view class='index-cont'><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> </view>

三、購物車

購物車展示選購的列表
核心代碼如下：

<!--pages/shopCart/shopCart.wxml 購物車列表--><view class='shopCart-wrap'><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><block wx:if="{{shopAndGoodList.length>0}}"> <view class='pay-wrap'><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> </view> </block> <block wx:else> <view class='no-goods'>沒有更多啦~</view> </block>

四、個人中心

個人中心界面由用戶信息、收藏、評價、訂單、報名、地址管理、在線咨詢、客服、關于我們組成
核心代碼如下

<!-- header --> <view class='user-head'><image src='../../img/mine-bg.jpg' class='mine-bg'></image><view class='user-head-pic-wrap'><image src='{{userInfo.avatarUrl}}' class='user-head-pic'></image><text class='user-name'>{{userInfo.nickName}}</text></view> </view> <!-- nav --> <view class='user-nav'><view class='nav-list'><navigator url='/pages/collection/collection' hover-class='none' ><image src='../../img/collect1-icon.png'></image><view class='nav-name'>收藏</view></navigator></view><view class='nav-list'><navigator url='/pages/orders/orders' hover-class='none'><image src='../../img/order-icon.png' class='order-pic'></image><view class='nav-name'>全部訂單</view></navigator></view><!-- <view class='nav-list'><navigator url='/pages/cancel/cancel' hover-class='none'><image src='../../img/return-icon.png'></image><view class='nav-name'>退貨</view></navigator></view> --><view class='nav-list'><navigator url='/pages/assess/assess' hover-class='none'><image src='../../img/appraise-icon.png'></image><view class='nav-name'>評價</view></navigator></view> </view><!-- option-list --><view class='option-cont'> <navigator url='/pages/register/register' hover-class='none'><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></navigator><navigator url='/pages/address/address' hover-class='none'><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></navigator><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><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></view></view> <view class='option-list' bindtap='contact'><view class='left-list'><image src='../../img/service-icon.png'></image><text class='option-name'>聯系客服</text></view><view class='right-list'><image src='../../img/enter-icon.png'></image></view></view> <navigator url='/pages/about/about' hover-class='none'><view class='option-list'><view class='left-list'><image src='../../img/about-icon.png'></image><text class='option-name'>關于我們</text></view><view class='right-list'><image src='../../img/enter-icon.png'></image></view></view></navigator> </view>

項目代碼如下：

項目代碼

總結

以上是生活随笔為你收集整理的微信小程序项目实例——家居团购的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。