微信小程序项目实例——家居团购
微信小程序项目实例——家居团购
文章目录
- 微信小程序项目实例——家居团购
- 一、项目展示
- 二、首页
- 三、购物车
- 四、个人中心
项目代码见文字底部
一、项目展示
二、首页
首页由建材市场、团购活动、公益验房和线上拼团组成
从上到下分为广告区、导航区、内容区
核心代码如下:
<!--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>
项目代码如下:
项目代码
微信小程序项目实例——家居团购相关推荐
- 微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器 文章目录 微信小程序项目实例--二维码生成器 一.项目展示 二.项目核心代码 三.效果展示 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 项目是一个简单实 ...
- 微信小程序项目实例——手势解锁
微信小程序项目实例--手势解锁 文章目录 微信小程序项目实例--手势解锁 一.项目展示 二.设置手势.手势解锁 三.手势重置 文末:项目代码 项目代码见文字底部 一.项目展示 这是一款简单实用的手势解 ...
- 微信小程序项目实例——摇色子
微信小程序项目实例--摇色子 文章目录 微信小程序项目实例--摇色子 一.项目展示 二.核心代码 三.效果图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 摇色子是一款简易的游戏类小程序 用 ...
- 微信小程序项目实例——食堂吃哪个
微信小程序项目实例--食堂吃哪个 文章目录 微信小程序项目实例--食堂吃哪个 一.项目展示 二.操作流程和核心代码 三.效果展示 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 这是一款娱乐性 ...
- 微信小程序项目实例——体质计算器
微信小程序项目实例--体质计算器 文章目录 微信小程序项目实例--体质计算器 一.项目展示 二.项目核心代码 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 体质计算器是一款简单的健康类小程序 ...
- 微信小程序项目实例——记账本
微信小程序项目实例--记账本 文章目录 微信小程序项目实例--记账本 一.项目展示 二.首页 三.效果图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 这是一款简易的记账本小程序 用户可以记 ...
- 微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本 文章目录 微信小程序项目实例--心情记事本 一.项目展示 二.首页 三.效果图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 心情记事本是一款可以记录当前心 ...
- 微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘 文章目录 微信小程序项目实例--幸运大转盘 一.项目展示 二.抽奖页 三.领奖页 文末:项目代码 项目代码见文字底部,点赞关注有惊喜 一.项目展示 幸运大转盘是一个简 ...
- 微信小程序项目实例——狼人杀
微信小程序项目实例--狼人杀 文章目录 微信小程序项目实例--狼人杀 一.项目展示 二.首页 三.游戏页 四.特殊角色 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 狼人杀是一款多人参与的, ...
- 微信小程序项目实例——我有一支画笔(画画)
微信小程序项目实例--我有一支画笔(画画) 文章目录 微信小程序项目实例--我有一支画笔(画画) 一.项目展示 二.首页 三.自由绘图 四.照片绘图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目 ...
最新文章
- Map集合练习之对字符串中字母出现的次数求和
- Windows 10 系统安装教程
- PhoneGap与Jquery Mobile结合开发android应用配置
- Xcode 6制作动态及静态Framework
- 支付宝信用分数678高么?
- at指令返回值检验c语言,学渣求指教,如何识别字符串中的AT命令并逐个输出,求程序!!!...
- Gentoo man手册指南
- 使用 vscode将本地项目上传到github、从github克隆项目以及删除github上的某个文件夹...
- ASP.NET笔记(二)
- 智还王项目中出现的问题和使用的一些方法
- Java设计模式中的单例模式
- Docker系列教程26-Docker Compose控制服务启动顺序
- ​领域模型vs数据模型,应该怎么用?
- 运算放大器(OPA)超详细参数讲解-运放---以及8个型号的运算放大器分析对比
- 集成学习(ensemble learning)基础知识
- WPS或者office对PPT的压缩 慎用,会把git,视频全都压缩没了。
- 再见2022,你好2023
- 2020年中高级Android面试秘籍(Android高级篇-3)
- 实现美团、饿了么购物车效果,并本地存储相关数据
- 一、注册功能怎么测试