├── .gitignore ├── README.md ├── app.js ├── app.json ├── app.wxss ├── assets ├── icons │ ├── add-active.png │ ├── add.png │ ├── allorder.png │ ├── base64.js │ ├── cart-active.png │ ├── cart.png │ ├── class-active.png │ ├── class.png │ ├── coupon.png │ ├── dianziquan.png │ ├── duihuan.png │ ├── event-active.png │ ├── event.png │ ├── face-active.png │ ├── face.png │ ├── friend.png │ ├── gotoyourhome.png │ ├── hemalogo-active.png │ ├── hemalogo.png │ ├── home-active.png │ ├── home.png │ ├── io-active.png │ ├── io.png │ ├── kefu.png │ ├── lipinka.png │ ├── mendian.png │ ├── myicon-active.png │ ├── myicon.png │ ├── pin.png │ ├── pingjia.png │ ├── place-active.png │ ├── place.png │ ├── right.png │ ├── shezhi.png │ ├── toutiao.png │ ├── waitcompent.png │ ├── waitpay.png │ ├── waitpublish.png │ ├── wangpai.png │ ├── web-active.png │ ├── web.png │ ├── welfare.png │ └── yinhangka.png └── images │ └── landscape.png ├── pages ├── class │ ├── myFruits │ │ ├── myFruits.js │ │ ├── myFruits.json │ │ ├── myFruits.wxml │ │ └── myFruits.wxss │ └── myMeat │ │ ├── myMeat.js │ │ ├── myMeat.json │ │ ├── myMeat.wxml │ │ └── myMeat.wxss ├── classify │ ├── classify.js │ ├── classify.json │ ├── classify.wxml │ └── classify.wxss ├── common │ ├── list.js │ ├── list.json │ ├── list.wxml │ └── list.wxss ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── myCart │ ├── myCart.js │ ├── myCart.json │ ├── myCart.wxml │ └── myCart.wxss └── person │ ├── person.js │ ├── person.json │ ├── person.wxml │ └── person.wxss ├── readme.md └── styles ├── action.wxss ├── base ├── fn.wxss ├── mixin │ ├── setArrow.wxss │ ├── setOnepx.wxss │ └── text.wxss ├── reset.wxss └── variable │ ├── color.wxss │ ├── global.wxss │ ├── weui-button.wxss │ ├── weui-cell.wxss │ ├── weui-dialog.wxss │ ├── weui-grid.wxss │ ├── weui-msg.wxss │ └── weui-progress.wxss ├── button.wxss ├── card.wxss ├── cover.wxss ├── hero.wxss ├── reset.wxss ├── spec.wxss ├── story.wxss ├── weui.wxss └── widget ├── weui-agree └── weui-agree.wxss ├── weui-animate └── weui-animate.wxss ├── weui-button └── weui-button.wxss ├── weui-cell ├── weui-access.wxss ├── weui-cell.wxss ├── weui-check.wxss ├── weui-form.wxss ├── weui-form │ ├── weui-form-preview.wxss │ ├── weui-form_common.wxss │ ├── weui-select.wxss │ └── weui-vcode.wxss ├── weui-switch.wxss └── weui-uploader.wxss ├── weui-flex └── weui-flex.wxss ├── weui-footer └── weui-footer.wxss ├── weui-grid └── weui-grid.wxss ├── weui-loading └── weui-loading.wxss ├── weui-media-box └── weui-media-box.wxss ├── weui-page ├── weui-article.wxss └── weui-msg.wxss ├── weui-panel └── weui-panel.wxss ├── weui-progress └── weui-progress.wxss ├── weui-searchbar └── weui-searchbar.wxss ├── weui-tab ├── weui-navbar.wxss └── weui-tab.wxss └── weui-tips ├── weui-badge.wxss └── weui-loadmore.wxss /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Packages # 11 | ############ 12 | # it's better to unpack these files and commit the raw source 13 | # git has its own built in compression methods 14 | *.7z 15 | *.dmg 16 | *.gz 17 | *.iso 18 | *.jar 19 | *.rar 20 | *.tar 21 | *.zip 22 | 23 | # Logs and databases # 24 | ###################### 25 | *.log 26 | *.sql 27 | *.sqlite 28 | 29 | # OS generated files # 30 | ###################### 31 | .DS_Store 32 | .DS_Store? 33 | ._* 34 | .Spotlight-V100 35 | .Trashes 36 | ehthumbs.db 37 | Thumbs.db 38 | 39 | # Node specific # 40 | ################# 41 | lib-cov 42 | *.seed 43 | *.log 44 | *.dat 45 | *.out 46 | *.pid 47 | *.gz 48 | pids 49 | logs 50 | #results 51 | npm-debug.log 52 | node_modules/ 53 | 54 | # Bower # 55 | ################# 56 | bower_components/ 57 | 58 | # Project # 59 | project.config.json 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 项目初览 2 | > 仿造盒马鲜生，实现了部分功能。
3 | 4 | 盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态，热度十分 5 | 6 | 7 | ![](https://user-gold-cdn.xitu.io/2017/12/1/1601101dde0a0185?w=343&h=631&f=gif&s=2404841) 8 | 9 | ![](https://user-gold-cdn.xitu.io/2017/12/1/1600fe4fd66b3587?w=237&h=420&f=png&s=117741) 10 | 11 | 12 | 13 | ![](https://user-gold-cdn.xitu.io/2017/12/1/16011022ca8663da?w=343&h=631&f=gif&s=589002) 14 | 15 | 16 | 17 | 18 | ![](https://user-gold-cdn.xitu.io/2017/12/1/16011026998ea9e9?w=365&h=640&f=gif&s=1556064) 19 | ![](https://user-gold-cdn.xitu.io/2017/12/1/16010029fe869d94?w=263&h=460&f=png&s=37249) 20 | 21 | #### 项目功能 22 | * 用户信息注册 23 | * 首页几个轮播和界面交互 24 | * 分类商品管理购买 25 | * 购物车界面交互及其操作 26 | * 个人信息界面 27 | 28 | ## 小程序设计过程 29 | 小程序是一个易上手的东西， 对于新手来说，多看官方文档，可以初步做出比较完整的小程序，正是因为简单上手，功能实现简单，小程序是越来越火，商业价值也越来越大。 30 | 31 | #### 1.项目工具和文档 32 | 1. 微信web开发者工具：[微信小程序官网](https://mp.weixin.qq.com/debug/wxadoc/dev/) 这是个比较好用的编辑器，对于小程序编辑很方便。 33 | 2. 开发文档：[微信小程序宝典秘籍](https://www.w3cschool.cn/weixinapp/9wou1q8j.html) 通过这个查找微信小程序的API，组件，框架等等。 34 | 3. 图标库： [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标，十分方便。 35 | 4. Easy Mork： [easy-mock](www.easy-mock.com) 用于后台的模拟，得到JSON数据； 36 | 5. weui框架引入， 例如个人信息界面，用weui可以很快很方便的做 37 | 38 | #### 2.项目开发 39 | 40 | 微信小程序开发和传统的H5开发还是有些不同的， 容易踩坑。 41 | 小程序是基于MVVM的的框架，合理利用数据绑定实现界面的更新是很关键的 42 | 开发时不要一股脑的写写写，多看看文档，你会发现你不小心原生写了个组件。。 43 | 44 | #### 3.项目发布 45 | 进入开发平台，注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线 46 | 47 | 48 | 49 | ## 部分功能解析 50 | 先看看我的项目目录 51 | ``` 52 | "pages": [ 53 | "pages/index/index", //主界面 54 | "pages/person/person", //个人界面 55 | "pages/classify/classify", //分类商品界面 56 | "pages/class/myFruits/myFruits", //水果商店 57 | "pages/class/myMeat/myMeat", //肉类食品商店 58 | "pages/myCart/myCart" //购物车 59 | ], 60 | ``` 61 | ### 1.首页轮播图 62 | 63 | 轮播有几种形式， 比如常见的横向海报图片展示， 还有横纵向商品列表展示，头条信息框轮换 64 | siwper组件很好的实现了横向海报图片展示，比如 65 | ``` 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ``` 74 | 然而横向滑动需要注意些别的细节 75 | 首先要给swiper组件加上scroll-x-="true" 76 | 然后给轮播的子元素父容器设置display: inline-block; white-space: nowrap; 77 | 78 | 头条信息框转换采用上下轮换， 使用scroll-view嵌套swiper完成 79 | 80 | ``` 81 | 82 | 83 | 84 | //内容 85 | 86 | 87 | 88 | ``` 89 | 90 | ### 2.分类商品管理 91 | 首先在index界面通过onLoad生命周期函数 ， 92 | 通过easy-moc获取后台数据，将必要的信息送给全局的globalData 93 | ``` 94 | wx.request({ 95 | url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline', 96 | complete: res => { 97 | this.globalData.classifyList = res.data; 98 | }, 99 | }) 100 | ``` 101 | 对于数据处理，需要理清哪些是全局信息， 哪些是局部信息 102 | 比如所有商品的信息，购物车里的商品，就得放到全局中 ，而有些比如当前界面的状态，一般放到当前界面的Data里面保存 103 | 104 | 而有些个人信息，比如出生年月，账号信息 则可以通过wx.setStorage 和wx.getStorage放入本地存储 105 | 106 | ### 3.购物车操作 107 | 购物车中的操作无非是些加加减减，需要自己不断调试，找出哪里不合常理 108 | 通过view，button里的bindtap等操作，实现对商品信息的修改，购物车状态的处理 109 | 110 | 111 | 举个例子 减少购物车中的商品的数量操作 112 | ``` 113 | reduceItems: function (e) { 114 | let carts = app.globalData.carts; //获取购物车的信息 115 | let classifyList = app.globalData.classifyList; //获取商品的信息 116 | for (let key of carts) { //遍历购物车数组 117 | if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找 118 | key.cartSelected = true; 119 | if (key.num === 1) { //如果数量为1还要减 120 | key.num--; 121 | key.cartSelected = false; //购物车不选中 122 | key.selected = false; //商品中不选中 123 | app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除 124 | return item.id != e.target.dataset.id; 125 | }) 126 | } else { 127 | key.num--; 128 | } 129 | } 130 | } 131 | let num = 0; //实时更新购物车小计界面显示 132 | let totalPrice = 0; 133 | for (let key of carts) { 134 | if (key.cartSelected) { 135 | num += key.num; 136 | totalPrice += key.num * key.price; 137 | } 138 | } 139 | this.setData({ //通过setData进行当前页面Data数据管理 140 | cart: app.globalData.carts, 141 | cartTotal: num, 142 | cartTotalPrice: totalPrice, 143 | }) 144 | }, 145 | ``` 146 | ### 4.weui框架引入 147 | **在全局CSS样式中 添加的CSS适配于所有的页面，由此可以引入weui ,做一些界面真的很方便** 148 | ``` 149 | @import './styles/weui.wxss'; 150 | ``` 151 | 152 | ## 总结 153 | 1. 微信小程序的组件，API很强大，需要不断的探索，不断的学习，多看文档 154 | 2. 善于利用有效资源， 比如iconfont esay-moc weui等 155 | 3. 切页面要细心，善于利用弹性布局等布局方法，小程序的rpx确实很好用 156 | 4. 不要一股脑的写代码， 当函数具有复用性，应该抽象出来，封装好，这样代码才易于维护，易读 157 | 158 | ### 项目地址: 159 | https://github.com/fishman17/wx_orderOnline 内含详细注释 160 | 161 | ### 个人简介 162 | github : https://github.com/fishman17 163 | 邮箱 : 734583898@qq.com 164 | 165 | **最后 如果您喜欢这个项目的话，给个star哦 谢谢！** 166 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch(options) { 3 | // 登录 4 | wx.login({ 5 | success: res => { 6 | console.log(res); 7 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 8 | } 9 | }) 10 | // 获取用户信息 11 | wx.getSetting({ 12 | success: res => { 13 | console.log(res); 14 | console.log('得到用户信息成功'); 15 | if (res.authSetting['scope.userInfo']) { 16 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 17 | wx.getUserInfo({ 18 | success: res => { 19 | console.log(res.userInfo); 20 | console.log(2); 21 | // 可以将 res 发送给后台解码出 unionId 22 | this.globalData.userInfo = res.userInfo 23 | 24 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 25 | // 所以此处加入 callback 以防止这种情况 26 | if (this.userInfoReadyCallback) { 27 | this.userInfoReadyCallback(res) 28 | } 29 | } 30 | }) 31 | } 32 | } 33 | }) 34 | 35 | // wx.request({ 36 | // url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline', 37 | // complete: res => { 38 | // console.log(res); 39 | // this.globalData.classifyList = res.data; 40 | // }, 41 | // }) 42 | }, 43 | onShow(options) { 44 | }, 45 | onHide() { 46 | }, 47 | onError(error) { 48 | }, 49 | 50 | globalData: { 51 | classifyList: {}, //商品列表 52 | userInfo: {}, //用户信息 53 | carts: [], //购物车信息 54 | cartTotal: 0, //购物车数量 55 | cartTotalPrice: 0, //购物车价值 56 | cartAllIn: false, //购物车是否全选 57 | }, 58 | 59 | }) 60 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/person/person", 5 | 6 | 7 | 8 | "pages/common/list", 9 | "pages/classify/classify", 10 | "pages/class/myFruits/myFruits", 11 | 12 | "pages/myCart/myCart", 13 | 14 | 15 | "pages/class/myMeat/myMeat" 16 | ], 17 | "window": { 18 | "navigationBarTitleText": "河马先生", 19 | "navigationBarBackgroundColor": "#11bcff", 20 | "navigationBarTextStyle": "black" 21 | }, 22 | "tabBar": { 23 | "color": "#dddddd", 24 | "selectedColor": "#3cc51f", 25 | "borderStyle": "black", 26 | "backgroundColor": "#ffffff", 27 | "list": [ 28 | { 29 | "pagePath": "pages/index/index", 30 | "iconPath": "assets/icons/hemalogo.png", 31 | "selectedIconPath": "assets/icons/hemalogo-active.png", 32 | "text": "首页" 33 | }, 34 | { 35 | "pagePath": "pages/classify/classify", 36 | "iconPath": "assets/icons/class.png", 37 | "selectedIconPath": "assets/icons/class-active.png", 38 | "text": "分类" 39 | }, 40 | { 41 | "pagePath": "pages/myCart/myCart", 42 | "iconPath": "assets/icons/cart.png", 43 | "selectedIconPath": "assets/icons/cart-active.png", 44 | "text": "购物车" 45 | }, 46 | { 47 | "pagePath": "pages/person/person", 48 | "iconPath": "assets/icons/myicon.png", 49 | "selectedIconPath": "assets/icons/myicon-active.png", 50 | "text": "我的" 51 | } 52 | ] 53 | }, 54 | "debug": false 55 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | @import './styles/weui.wxss'; 2 | 3 | /* 将样式模块化 */ 4 | @import 'styles/reset.wxss'; 5 | @import 'styles/hero.wxss'; 6 | @import 'styles/button.wxss'; 7 | @import 'styles/card.wxss'; 8 | @import 'styles/cover.wxss'; 9 | @import 'styles/spec.wxss'; 10 | @import 'styles/action.wxss'; 11 | @import 'styles/story.wxss'; 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/icons/add-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/add-active.png -------------------------------------------------------------------------------- /assets/icons/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/add.png -------------------------------------------------------------------------------- /assets/icons/allorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/allorder.png -------------------------------------------------------------------------------- /assets/icons/base64.js: -------------------------------------------------------------------------------- 1 | export default { 2 | trash: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAL1JREFUWIXtlkEKwjAQRV9diC4EFwreoGd3FQRPJHRd0C7EjS6qoDFJk05SKMyHD4UJncfMhwTiVAMGuAJPyx1wep8pohpoHY1tt6UgTETzj00JANfYfb6NbRLasdSDGYndsdTejKTsWOq/jFT0Y9/4xpNZ3YS9VDOWndyVVb8L6z9ayHllUgAFUAAFUAAFiAHYf31vgWViPVn2dXwGDsAOOI6oB6/jygOQU2v6N4JTs8jA5ACXjP9vgEfowAuA6JgDs9ZX7AAAAABJRU5ErkJggg==' 3 | } 4 | -------------------------------------------------------------------------------- /assets/icons/cart-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/cart-active.png -------------------------------------------------------------------------------- /assets/icons/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/cart.png -------------------------------------------------------------------------------- /assets/icons/class-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/class-active.png -------------------------------------------------------------------------------- /assets/icons/class.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/class.png -------------------------------------------------------------------------------- /assets/icons/coupon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/coupon.png -------------------------------------------------------------------------------- /assets/icons/dianziquan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/dianziquan.png -------------------------------------------------------------------------------- /assets/icons/duihuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/duihuan.png -------------------------------------------------------------------------------- /assets/icons/event-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/event-active.png -------------------------------------------------------------------------------- /assets/icons/event.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/event.png -------------------------------------------------------------------------------- /assets/icons/face-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/face-active.png -------------------------------------------------------------------------------- /assets/icons/face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/face.png -------------------------------------------------------------------------------- /assets/icons/friend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/friend.png -------------------------------------------------------------------------------- /assets/icons/gotoyourhome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/gotoyourhome.png -------------------------------------------------------------------------------- /assets/icons/hemalogo-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/hemalogo-active.png -------------------------------------------------------------------------------- /assets/icons/hemalogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/hemalogo.png -------------------------------------------------------------------------------- /assets/icons/home-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/home-active.png -------------------------------------------------------------------------------- /assets/icons/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/home.png -------------------------------------------------------------------------------- /assets/icons/io-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/io-active.png -------------------------------------------------------------------------------- /assets/icons/io.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/io.png -------------------------------------------------------------------------------- /assets/icons/kefu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/kefu.png -------------------------------------------------------------------------------- /assets/icons/lipinka.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/lipinka.png -------------------------------------------------------------------------------- /assets/icons/mendian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/mendian.png -------------------------------------------------------------------------------- /assets/icons/myicon-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/myicon-active.png -------------------------------------------------------------------------------- /assets/icons/myicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/myicon.png -------------------------------------------------------------------------------- /assets/icons/pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/pin.png -------------------------------------------------------------------------------- /assets/icons/pingjia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/pingjia.png -------------------------------------------------------------------------------- /assets/icons/place-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/place-active.png -------------------------------------------------------------------------------- /assets/icons/place.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/place.png -------------------------------------------------------------------------------- /assets/icons/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/right.png -------------------------------------------------------------------------------- /assets/icons/shezhi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/shezhi.png -------------------------------------------------------------------------------- /assets/icons/toutiao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/toutiao.png -------------------------------------------------------------------------------- /assets/icons/waitcompent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/waitcompent.png -------------------------------------------------------------------------------- /assets/icons/waitpay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/waitpay.png -------------------------------------------------------------------------------- /assets/icons/waitpublish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/waitpublish.png -------------------------------------------------------------------------------- /assets/icons/wangpai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/wangpai.png -------------------------------------------------------------------------------- /assets/icons/web-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/web-active.png -------------------------------------------------------------------------------- /assets/icons/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/web.png -------------------------------------------------------------------------------- /assets/icons/welfare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/welfare.png -------------------------------------------------------------------------------- /assets/icons/yinhangka.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/icons/yinhangka.png -------------------------------------------------------------------------------- /assets/images/landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/assets/images/landscape.png -------------------------------------------------------------------------------- /pages/class/myFruits/myFruits.js: -------------------------------------------------------------------------------- 1 | // pages/orderFood/orderFood.js 2 | const app = getApp(); 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | //scrollview 高度 10 | windowHeight: 0, //高度 11 | currentTab: 0, //导航栏指向 12 | cart: [], //购物车 13 | cartTotal: 0, //购物车件数 14 | cartTotalPrice: 0, //购物车价格总计 15 | foodList: [ // 分类 16 | { 17 | id: 0, 18 | name: '蓝莓草莓' 19 | }, 20 | { 21 | id: 1, 22 | name: '柑橘橙柚' 23 | }, 24 | { 25 | id: 2, 26 | name: '热带水果' 27 | }, 28 | { 29 | id: 3, 30 | name: '苹果/梨' 31 | }, 32 | { 33 | id: 4, 34 | name: '瓜类' 35 | } 36 | ], 37 | classifyList : [], //所有商品信息 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面加载 42 | */ 43 | 44 | //改变当前导航 45 | changeNav: function (event) { 46 | this.setData({ 47 | currentTab: event.target.dataset.currentab, 48 | }) 49 | }, 50 | //添加菜品操作 51 | ordinInCart: function (event) { 52 | console.log(event); 53 | let id = event.currentTarget.dataset.id; 54 | let stock = event.currentTarget.dataset.stock; 55 | if (stock) { 56 | this.changes(id); 57 | } else { 58 | } 59 | }, 60 | //前往购物车 61 | gotoCart:function(){ 62 | wx.switchTab({ 63 | url: `/pages/myCart/myCart`, 64 | }) 65 | }, 66 | //改变按钮，购物车操作 67 | changes: function (id) { 68 | var carts = app.globalData.carts; 69 | 70 | 71 | for (let key of this.data.classifyList) { 72 | key.forEach((item) => { 73 | if (item.id == id && item.stock) { 74 | if (!item.selected) { 75 | console.log("addsuccess"); 76 | carts.push(item); 77 | app.globalData.cartTotal++; 78 | app.globalData.cartTotalPrice += item.price; 79 | item.selected = true; 80 | console.log( this.data); 81 | }else if(item.selected){ 82 | console.log( this.data); 83 | console.log( this.data.cart); 84 | app.globalData.carts = carts.filter((cartItem)=>{ //filter返回新数组，所以不能用carts接受， 85 | //不然app.globalData.carts不能改变 86 | console.log(cartItem.id); 87 | return cartItem.id !=id; 88 | }); 89 | console.log("deletesuccess"); 90 | console.log(carts); 91 | app.globalData.cartTotal--; 92 | app.globalData.cartTotalPrice -= item.price; 93 | item.selected = false; 94 | } 95 | } 96 | }); 97 | } 98 | 99 | app.globalData.classifyList.myFruits=this.data.classifyList; 100 | console.log(app.globalData.carts); 101 | this.setData({ 102 | cart : app.globalData.carts, 103 | cartTotal: app.globalData.cartTotal, 104 | cartTotalPrice : app.globalData.cartTotalPrice, 105 | classifyList: this.data.classifyList, 106 | }); 107 | //将信息加入全局的购物车中 108 | console.log(app.globalData.carts); 109 | }, 110 | 111 | onLoad: function (options) { 112 | 113 | 114 | 115 | console.log(options); 116 | wx.getSystemInfo({ 117 | success: (res) => { 118 | console.log(res); 119 | this.setData({ 120 | windowHeight: res.windowHeight 121 | }) 122 | console.log(`屏幕高度：${res.windowHeight}`); 123 | } 124 | }) 125 | console.log(app.globalData); 126 | this.setData({ 127 | cart : app.globalData.carts, 128 | cartTotal: app.globalData.cartTotal, 129 | cartTotalPrice : app.globalData.cartTotalPrice, 130 | classifyList: app.globalData.classifyList.myFruits, 131 | }); 132 | 133 | }, 134 | 135 | /** 136 | * 生命周期函数--监听页面初次渲染完成 137 | */ 138 | onReady: function () { 139 | 140 | }, 141 | 142 | /** 143 | * 生命周期函数--监听页面显示 144 | */ 145 | onShow: function () { 146 | // 展示的时候刷新全局信息 147 | this.setData({ 148 | cart : app.globalData.carts, 149 | cartTotal: app.globalData.cartTotal, 150 | cartTotalPrice : app.globalData.cartTotalPrice, 151 | classifyList: app.globalData.classifyList.myFruits, 152 | }); 153 | }, 154 | 155 | /** 156 | * 生命周期函数--监听页面隐藏 157 | */ 158 | onHide: function () { 159 | 160 | }, 161 | 162 | /** 163 | * 生命周期函数--监听页面卸载 164 | */ 165 | onUnload: function () { 166 | 167 | }, 168 | 169 | /** 170 | * 页面相关事件处理函数--监听用户下拉动作 171 | */ 172 | onPullDownRefresh: function () { 173 | 174 | }, 175 | 176 | /** 177 | * 页面上拉触底事件的处理函数 178 | */ 179 | onReachBottom: function () { 180 | 181 | }, 182 | 183 | /** 184 | * 用户点击右上角分享 185 | */ 186 | onShareAppMessage: function () { 187 | 188 | } 189 | }) -------------------------------------------------------------------------------- /pages/class/myFruits/myFruits.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "新鲜水果" 3 | } -------------------------------------------------------------------------------- /pages/class/myFruits/myFruits.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 11 | {{item.name}} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | {{item.name}} 30 | {{item.introduce}} 31 | 特价 32 |

￥{{item.price}}

33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 购物车：{{cartTotal}}件 45 | 总价：￥{{cartTotalPrice}} 46 | 47 | 48 | -------------------------------------------------------------------------------- /pages/class/myFruits/myFruits.wxss: -------------------------------------------------------------------------------- 1 | /* pages/orderFood/orderFood.wxss */ 2 | .container{ 3 | width: 100%; 4 | display: flex; 5 | flex-direction: row; 6 | justify-content: flex-start; 7 | align-items: flex-start; 8 | } 9 | .navigation{ 10 | width: 25%; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: flex-start; 15 | align-items: center; 16 | background-color: #f7f7f7; 17 | 18 | 19 | 20 | } 21 | 22 | .navigation .navFood{ 23 | width: 100%; 24 | height: 100rpx; 25 | font-size: 30rpx; 26 | text-align: center; 27 | color: rgba(0, 0, 0, 0.548); 28 | line-height: 100rpx; 29 | border-right: 1rpx solid rgb(185, 182, 182); 30 | } 31 | .navigation .navFood.active{ 32 | margin-right: -2rpx; 33 | margin-left: -2rpx; 34 | color: black; 35 | background-color: white; 36 | border-right: 0 solid ; 37 | border-top: 1rpx solid rgb(185, 182, 182); 38 | border-bottom: 1rpx solid rgb(185, 182, 182); 39 | } 40 | .bottom{ 41 | width: 100%; 42 | height: 100%; 43 | border-right: 1rpx solid rgb(185, 182, 182); 44 | } 45 | .content{ 46 | width: 75%; 47 | height: 100vh; 48 | /* background-color: sandybrown; */ 49 | display: flex; 50 | flex-direction: column; 51 | justify-content: flex-start; 52 | align-items: flex-start; 53 | flex-wrap: wrap; 54 | margin-left: 1rpx; 55 | } 56 | .content .food{ 57 | width: 100%; 58 | height: 200rpx; 59 | /* background-color: silver; */ 60 | border-bottom: 1rpx solid rgb(185, 182, 182); 61 | display: flex; 62 | flex-direction: row; 63 | margin-top: 20rpx; 64 | } 65 | .content .food image{ 66 | width: 30%; 67 | height: 180rpx; 68 | margin: 10rpx; 69 | /* background-color: seagreen; */ 70 | } 71 | .content .food .mes{ 72 | width: 65%; 73 | height: 200rpx; 74 | /* background-color: rgb(157, 189, 190); */ 75 | position: relative; 76 | } 77 | .content .food .mes .foodName{ 78 | position: absolute; 79 | top: 0; 80 | left: 0; 81 | font-size: 35rpx; 82 | } 83 | .content .food .mes .foodIntroduce{ 84 | position: absolute; 85 | top: 50rpx; 86 | left: 0; 87 | color: rgb(185, 161, 161); 88 | font-size: 28rpx; 89 | } 90 | .content .food .mes .special{ 91 | position: absolute; 92 | width: 60rpx; 93 | height: 30rpx; 94 | border: 2rpx solid rgb(255, 60, 0); 95 | top: 120rpx; 96 | left: 0; 97 | color: rgb(255, 60, 0); 98 | font-size: 25rpx; 99 | line-height: 30rpx; 100 | text-align: center; 101 | } 102 | .content .food .mes p{ 103 | position: absolute; 104 | top: 150rpx; 105 | left: 0; 106 | color: rgb(255, 94, 0); 107 | font-size: 30rpx; 108 | } 109 | .content .food .mes .btn{ 110 | position: absolute; 111 | right: 20rpx; 112 | bottom: 10rpx; 113 | width: 200rpx; 114 | text-align: right; 115 | } 116 | 117 | 118 | .cart{ 119 | height: 10vh; 120 | width: 100%; 121 | display: flex; 122 | flex-direction: row; 123 | justify-content: space-between; 124 | align-items: center; 125 | position: fixed; 126 | left: 0; 127 | right: 0; 128 | bottom: 0; 129 | padding: 50rpx; 130 | background: #e7e7e7; 131 | } 132 | .cart .total{ 133 | margin-right: 25rpx; 134 | } 135 | .cart button{ 136 | margin-right: 60rpx; 137 | } 138 | -------------------------------------------------------------------------------- /pages/class/myMeat/myMeat.js: -------------------------------------------------------------------------------- 1 | // pages/orderFood/orderFood.js 2 | const app = getApp(); 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | //scrollview 高度 10 | windowHeight: 0, 11 | currentTab: 0, 12 | cart: [], 13 | cartTotal: 0, 14 | cartTotalPrice: 0, 15 | foodList: [ 16 | { 17 | id: 0, 18 | name: '火锅肉片' 19 | }, 20 | { 21 | id: 1, 22 | name: '羊肉' 23 | }, 24 | { 25 | id: 2, 26 | name: '牛肉' 27 | }, 28 | { 29 | id: 3, 30 | name: '牛排' 31 | }, 32 | { 33 | id: 4, 34 | name: '猪肉' 35 | } 36 | ], 37 | 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面加载 42 | */ 43 | 44 | //改变当前导航 45 | changeNav: function (event) { 46 | this.setData({ 47 | currentTab: event.target.dataset.currentab, 48 | }) 49 | }, 50 | //添加菜品操作 51 | ordinInCart: function (event) { 52 | console.log(event); 53 | let id = event.currentTarget.dataset.id; 54 | let stock = event.currentTarget.dataset.stock; 55 | if (stock) { 56 | this.changes(id); 57 | } else { 58 | } 59 | }, 60 | //改变按钮，购物车操作 61 | changes: function (id) { 62 | var carts = app.globalData.carts; 63 | 64 | 65 | for (let key of this.data.classifyList) { 66 | key.forEach((item) => { 67 | if (item.id == id && item.stock) { 68 | if (!item.selected) { 69 | console.log("addsuccess"); 70 | carts.push(item); 71 | app.globalData.cartTotal++; 72 | app.globalData.cartTotalPrice += item.price; 73 | item.selected = true; 74 | }else if(item.selected){ 75 | app.globalData.carts = carts.filter((cartItem)=>{ //filter返回新数组，所以不能用carts接受， 76 | //不然app.globalData.carts不能改变 77 | return cartItem.id !=id; 78 | }); 79 | console.log("deletesuccess"); 80 | app.globalData.cartTotal--; 81 | app.globalData.cartTotalPrice -= item.price; 82 | item.selected = false; 83 | } 84 | } 85 | }); 86 | } 87 | // app.globalData.cartTotal += this.data.cartTotal; 88 | // app.globalData.cartTotalPrice += this.data.cartTotalPrice; 89 | this.setData({ 90 | cart : app.globalData.carts, 91 | cartTotal: app.globalData.cartTotal, 92 | cartTotalPrice : app.globalData.cartTotalPrice, 93 | classifyList: this.data.classifyList, 94 | }); 95 | app.globalData.classifyList.myMeat=this.data.classifyList; 96 | //将信息加入全局的购物车中 97 | console.log(app.globalData.carts); 98 | }, 99 | 100 | onLoad: function (options) { 101 | 102 | console.log(options); 103 | wx.getSystemInfo({ 104 | success: (res) => { 105 | console.log(res); 106 | this.setData({ 107 | windowHeight: res.windowHeight 108 | }) 109 | console.log(`屏幕高度：${res.windowHeight}`); 110 | } 111 | }) 112 | this.setData({ 113 | cart : app.globalData.carts, 114 | cartTotal: app.globalData.cartTotal, 115 | cartTotalPrice : app.globalData.cartTotalPrice, 116 | classifyList: app.globalData.classifyList.myMeat, 117 | }); 118 | console.log(this.data.classifyList); 119 | console.log("ss"); 120 | }, 121 | gotoCart:function(){ 122 | wx.switchTab({ 123 | url: `/pages/myCart/myCart`, 124 | }) 125 | }, 126 | /** 127 | * 生命周期函数--监听页面初次渲染完成 128 | */ 129 | onReady: function () { 130 | 131 | }, 132 | 133 | /** 134 | * 生命周期函数--监听页面显示 135 | */ 136 | onShow: function () { 137 | this.setData({ 138 | cart : app.globalData.carts, 139 | cartTotal: app.globalData.cartTotal, 140 | cartTotalPrice : app.globalData.cartTotalPrice, 141 | classifyList: app.globalData.classifyList.myMeat, 142 | }); 143 | }, 144 | 145 | /** 146 | * 生命周期函数--监听页面隐藏 147 | */ 148 | onHide: function () { 149 | 150 | }, 151 | 152 | /** 153 | * 生命周期函数--监听页面卸载 154 | */ 155 | onUnload: function () { 156 | 157 | }, 158 | 159 | /** 160 | * 页面相关事件处理函数--监听用户下拉动作 161 | */ 162 | onPullDownRefresh: function () { 163 | 164 | }, 165 | 166 | /** 167 | * 页面上拉触底事件的处理函数 168 | */ 169 | onReachBottom: function () { 170 | 171 | }, 172 | 173 | /** 174 | * 用户点击右上角分享 175 | */ 176 | onShareAppMessage: function () { 177 | 178 | } 179 | }) -------------------------------------------------------------------------------- /pages/class/myMeat/myMeat.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "肉类食品" 3 | } -------------------------------------------------------------------------------- /pages/class/myMeat/myMeat.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | {{item.name}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {{item.name}} 27 | {{item.introduce}} 28 | 特价 29 |

￥{{item.price}}

30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 购物车：{{cartTotal}}件 43 | 总价：￥{{cartTotalPrice}} 44 | 45 | 46 | -------------------------------------------------------------------------------- /pages/class/myMeat/myMeat.wxss: -------------------------------------------------------------------------------- 1 | /* pages/orderFood/orderFood.wxss */ 2 | .container{ 3 | width: 100%; 4 | display: flex; 5 | flex-direction: row; 6 | justify-content: flex-start; 7 | align-items: flex-start; 8 | } 9 | .navigation{ 10 | width: 25%; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: flex-start; 15 | align-items: center; 16 | background-color: #f7f7f7; 17 | 18 | 19 | 20 | } 21 | 22 | .navigation .navFood{ 23 | width: 100%; 24 | height: 100rpx; 25 | font-size: 40rpx; 26 | text-align: center; 27 | color: rgba(0, 0, 0, 0.548); 28 | line-height: 100rpx; 29 | border-right: 1rpx solid rgb(185, 182, 182); 30 | } 31 | .navigation .navFood.active{ 32 | margin-right: -2rpx; 33 | margin-left: -2rpx; 34 | color: black; 35 | background-color: white; 36 | border-right: 0 solid ; 37 | border-top: 1rpx solid rgb(185, 182, 182); 38 | border-bottom: 1rpx solid rgb(185, 182, 182); 39 | } 40 | .bottom{ 41 | width: 100%; 42 | height: 100%; 43 | border-right: 1rpx solid rgb(185, 182, 182); 44 | } 45 | .content{ 46 | width: 75%; 47 | height: 100vh; 48 | /* background-color: sandybrown; */ 49 | display: flex; 50 | flex-direction: column; 51 | justify-content: flex-start; 52 | align-items: flex-start; 53 | flex-wrap: wrap; 54 | margin-left: 1rpx; 55 | } 56 | .content .food{ 57 | width: 100%; 58 | height: 200rpx; 59 | /* background-color: silver; */ 60 | border-bottom: 1rpx solid rgb(185, 182, 182); 61 | display: flex; 62 | flex-direction: row; 63 | margin-top: 20rpx; 64 | } 65 | .content .food image{ 66 | width: 30%; 67 | height: 180rpx; 68 | margin: 10rpx; 69 | /* background-color: seagreen; */ 70 | } 71 | .content .food .mes{ 72 | width: 65%; 73 | height: 200rpx; 74 | /* background-color: rgb(157, 189, 190); */ 75 | position: relative; 76 | } 77 | .content .food .mes .foodName{ 78 | position: absolute; 79 | top: 0; 80 | left: 0; 81 | font-size: 35rpx; 82 | } 83 | .content .food .mes .foodIntroduce{ 84 | position: absolute; 85 | top: 50rpx; 86 | left: 0; 87 | color: rgb(185, 161, 161); 88 | font-size: 28rpx; 89 | } 90 | .content .food .mes .special{ 91 | position: absolute; 92 | width: 60rpx; 93 | height: 30rpx; 94 | border: 2rpx solid rgb(255, 60, 0); 95 | top: 120rpx; 96 | left: 0; 97 | color: rgb(255, 60, 0); 98 | font-size: 25rpx; 99 | line-height: 30rpx; 100 | text-align: center; 101 | } 102 | .content .food .mes p{ 103 | position: absolute; 104 | top: 150rpx; 105 | left: 0; 106 | color: rgb(255, 94, 0); 107 | font-size: 30rpx; 108 | } 109 | .content .food .mes .btn{ 110 | position: absolute; 111 | right: 20rpx; 112 | bottom: 10rpx; 113 | width: 200rpx; 114 | text-align: right; 115 | } 116 | 117 | 118 | .cart{ 119 | height: 10vh; 120 | width: 100%; 121 | display: flex; 122 | flex-direction: row; 123 | justify-content: space-between; 124 | align-items: center; 125 | position: fixed; 126 | left: 0; 127 | right: 0; 128 | bottom: 0; 129 | padding: 50rpx; 130 | background: #e7e7e7; 131 | } 132 | .cart .total{ 133 | margin-right: 25rpx; 134 | } 135 | .cart button{ 136 | margin-right: 60rpx; 137 | } 138 | 139 | -------------------------------------------------------------------------------- /pages/classify/classify.js: -------------------------------------------------------------------------------- 1 | // pages/classify/classify.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | //分类信息存储 9 | classify:[ 10 | { 11 | url: "http://img1.imgtn.bdimg.com/it/u=228757436,1698566375&fm=27&gp=0.jpg", 12 | class: '新鲜水果', 13 | where: 'myFruits', 14 | }, 15 | { 16 | url: "http://img3.imgtn.bdimg.com/it/u=3977131877,3939061076&fm=200&gp=0.jpg", 17 | class: '肉类蛋品', 18 | where: 'myMeat', 19 | }, 20 | { 21 | url:"http://img0.imgtn.bdimg.com/it/u=2643138296,454739920&fm=27&gp=0.jpg", 22 | class: '粮油干货', 23 | }, 24 | 25 | { 26 | url: "http://img4.imgtn.bdimg.com/it/u=1467212894,102176156&fm=27&gp=0.jpg", 27 | class: '休闲零食', 28 | }, 29 | { 30 | url:"http://img1.imgtn.bdimg.com/it/u=3747107757,1957790606&fm=27&gp=0.jpg", 31 | class: '酒水饮料', 32 | }, 33 | { 34 | url: "http://img4.imgtn.bdimg.com/it/u=485778917,1868567867&fm=27&gp=0.jpg", 35 | class: '厨卫百货', 36 | }, 37 | ] 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面加载 42 | */ 43 | onLoad: function (options) { 44 | 45 | }, 46 | 47 | /** 48 | * 生命周期函数--监听页面初次渲染完成 49 | */ 50 | onReady: function () { 51 | 52 | }, 53 | 54 | /** 55 | * 生命周期函数--监听页面显示 56 | */ 57 | onShow: function () { 58 | 59 | }, 60 | 61 | /** 62 | * 生命周期函数--监听页面隐藏 63 | */ 64 | onHide: function () { 65 | 66 | }, 67 | 68 | /** 69 | * 生命周期函数--监听页面卸载 70 | */ 71 | onUnload: function () { 72 | 73 | }, 74 | 75 | /** 76 | * 页面相关事件处理函数--监听用户下拉动作 77 | */ 78 | onPullDownRefresh: function () { 79 | 80 | }, 81 | 82 | /** 83 | * 页面上拉触底事件的处理函数 84 | */ 85 | onReachBottom: function () { 86 | 87 | }, 88 | 89 | /** 90 | * 用户点击右上角分享 91 | */ 92 | onShareAppMessage: function () { 93 | 94 | } 95 | }) -------------------------------------------------------------------------------- /pages/classify/classify.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "分类" 3 | } -------------------------------------------------------------------------------- /pages/classify/classify.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{item.class}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /pages/classify/classify.wxss: -------------------------------------------------------------------------------- 1 | /* pages/classify/classify.wxss */ 2 | .classify-hd__img{ 3 | width: 100%; 4 | height: 35vh; 5 | } 6 | .classify-bd{ 7 | width: 100%; 8 | height: 40vh; 9 | margin-top: 50rpx; 10 | display: flex; 11 | flex-direction: row; 12 | flex-wrap: wrap; 13 | justify-content: space-around; 14 | align-items: center; 15 | } 16 | .classify-bd__class{ 17 | width: 200rpx; 18 | height: 250rpx; 19 | text-align: center; 20 | } 21 | .classify-bd__class__img{ 22 | width: 200rpx; 23 | height: 180rpx; 24 | } -------------------------------------------------------------------------------- /pages/common/list.js: -------------------------------------------------------------------------------- 1 | // pages/common/list.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/common/list.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/common/list.wxml: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /pages/common/list.wxss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100vh; 4 | 5 | background-color: sandybrown; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: flex-start; 9 | align-items: flex-start; 10 | flex-wrap: wrap; 11 | } 12 | .content .food{ 13 | width: 100%; 14 | height: 200rpx; 15 | background-color: silver; 16 | border: 2rpx solid firebrick; 17 | display: flex; 18 | flex-direction: row; 19 | margin-top: 20rpx; 20 | } 21 | .content .food image{ 22 | width: 35%; 23 | height: 200rpx; 24 | background-color: seagreen; 25 | } 26 | .content .food .mes{ 27 | width: 65%; 28 | height: 200rpx; 29 | background-color: rgb(157, 189, 190); 30 | position: relative; 31 | } 32 | .content .food .mes .foodName{ 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | font-size: 35rpx; 37 | } 38 | .content .food .mes .foodIntroduce{ 39 | position: absolute; 40 | top: 50rpx; 41 | left: 0; 42 | color: rgb(185, 161, 161); 43 | font-size: 28rpx; 44 | } 45 | .content .food .mes .special{ 46 | position: absolute; 47 | width: 60rpx; 48 | height: 30rpx; 49 | border: 2rpx solid rgb(255, 60, 0); 50 | top: 120rpx; 51 | left: 0; 52 | color: rgb(255, 60, 0); 53 | font-size: 25rpx; 54 | line-height: 30rpx; 55 | text-align: center; 56 | } 57 | .content .food .mes p{ 58 | position: absolute; 59 | top: 150rpx; 60 | left: 0; 61 | color: rgb(255, 94, 0); 62 | font-size: 30rpx; 63 | } 64 | .content .food .mes .btn{ 65 | position: absolute; 66 | right: 20rpx; 67 | bottom: 0rpx; 68 | width: 200rpx; 69 | text-align: right; 70 | } 71 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | // pages/index/index.js 2 | const app = getApp(); 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | imgUrls: [ 10 | "http://img0.imgtn.bdimg.com/it/u=880477421,2302497799&fm=27&gp=0.jpg", 11 | "http://img5.imgtn.bdimg.com/it/u=1741138662,3408053349&fm=27&gp=0.jpg", 12 | "http://img4.imgtn.bdimg.com/it/u=2930540385,1562266871&fm=27&gp=0.jpg", 13 | ], 14 | indicatorDots: true, //是否显示面板指示点 15 | autoplay: true, //是否自动切换 16 | interval: 3000, //自动切换时间间隔,3s 17 | interval1: 2000, 18 | duration: 1000, // 滑动动画时长1s 19 | //功能模块 20 | //大嘴头条图标 21 | headlinesImg: "../../assets/icons/toutiao.png", 22 | //大嘴头条内容 23 | headLines: [], 24 | components: [], 25 | //新品菜 26 | newGoods: [], 27 | //经典菜 28 | classicGoods: [], 29 | classifyList: [], 30 | }, 31 | 32 | changeTo: (event) => { 33 | console.log(event); 34 | let where = event.currentTarget.dataset.where; 35 | console.log(where); 36 | if (where === "orderFood") { 37 | wx.switchTab({ 38 | url: `/pages/${where}/${where}`, 39 | }) 40 | } else { 41 | wx.navigateTo({ 42 | // queryString 查询字符串 ? 43 | url: `/pages/class/${where}/${where}`, 44 | }); 45 | } 46 | }, 47 | /** 48 | * 生命周期函数--监听页面加载 49 | */ 50 | onLoad: function (options) { 51 | // 加载的时候从easymoc获取全局数据 52 | wx.request({ 53 | url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline', 54 | complete: res => { 55 | console.log(res); 56 | app.globalData.classifyList = res.data; 57 | console.log(app.globalData.classifyList); 58 | this.setData({ 59 | classifyList: app.globalData.classifyList.myTrump, 60 | newGoods: app.globalData.classifyList.newGoods, 61 | classicGoods: app.globalData.classifyList.classicGoods, 62 | components: app.globalData.classifyList.components, 63 | headLines: app.globalData.classifyList.headLines, 64 | }); 65 | }, 66 | }); 67 | 68 | 69 | console.log(111); 70 | console.log(this.data.classifyList); 71 | }, 72 | // 添加购物车操作 73 | ordinInCart: function(e){ 74 | 75 | console.log(e); 76 | let id = e.currentTarget.dataset.id; 77 | let classifyList = this.data.classifyList; 78 | let carts = app.globalData.carts; 79 | for(let item of classifyList) 80 | { 81 | if (item.id == id && item.stock) { 82 | if (!item.selected) { 83 | console.log("addsuccess"); 84 | carts.push(item); 85 | app.globalData.cartTotal++; 86 | app.globalData.cartTotalPrice += item.price; 87 | item.selected = true; 88 | wx.showToast({ 89 | title: '已添加到购物车', 90 | icon: "success", 91 | duration: 750, 92 | }); 93 | }else if(item.selected){ 94 | app.globalData.carts = carts.filter((cartItem)=>{ //filter返回新数组，所以不能用carts接受， 95 | //不然app.globalData.carts不能改变 96 | return cartItem.id !=id; 97 | }); 98 | console.log("deletesuccess"); 99 | app.globalData.cartTotal--; 100 | app.globalData.cartTotalPrice -= item.price; 101 | item.selected = false; 102 | } 103 | } 104 | 105 | } 106 | console.log( this.data.classifyList); 107 | this.setData({ 108 | cart : app.globalData.carts, 109 | cartTotal: app.globalData.cartTotal, 110 | cartTotalPrice : app.globalData.cartTotalPrice, 111 | classifyList: this.data.classifyList, 112 | }); 113 | app.globalData.classifyList.myTrump=this.data.classifyList; 114 | //将信息加入全局的购物车中 115 | console.log(this.data.classifyList); 116 | console.log(app.globalData.carts); 117 | }, 118 | /** 119 | * 生命周期函数--监听页面初次渲染完成 120 | */ 121 | onReady: function () { 122 | 123 | }, 124 | 125 | /** 126 | * 生命周期函数--监听页面显示 127 | */ 128 | onShow: function () { 129 | this.setData({ 130 | classifyList: app.globalData.classifyList.myTrump, 131 | newGoods: app.globalData.classifyList.newGoods, 132 | classicGoods: app.globalData.classifyList.classicGoods, 133 | components: app.globalData.classifyList.components, 134 | headLines: app.globalData.classifyList.headLines, 135 | 136 | }); 137 | }, 138 | 139 | /** 140 | * 生命周期函数--监听页面隐藏 141 | */ 142 | onHide: function () { 143 | 144 | }, 145 | 146 | /** 147 | * 生命周期函数--监听页面卸载 148 | */ 149 | onUnload: function () { 150 | 151 | }, 152 | 153 | /** 154 | * 页面相关事件处理函数--监听用户下拉动作 155 | */ 156 | onPullDownRefresh: function () { 157 | 158 | }, 159 | 160 | /** 161 | * 页面上拉触底事件的处理函数 162 | */ 163 | onReachBottom: function () { 164 | 165 | }, 166 | 167 | /** 168 | * 用户点击右上角分享 169 | */ 170 | onShareAppMessage: function () { 171 | 172 | } 173 | }) -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | {{item.function}} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | {{item.head}} 37 | 38 | 39 | {{item.body}} 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 今日王牌大赏 53 | 54 | 更多 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | {{item.name}} 69 | {{item.introduce}} 70 | 特价 71 |

￥{{item.price}}

72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 新品上架 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | ￥{{item.price}} 95 | {{item.introduce}} 96 | 97 | 98 | 99 | 100 | 经典系列 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | ￥{{item.price}} 110 | {{item.introduce}} 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/index/index.wxss */ 2 | .container{ 3 | width: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content:center; 7 | align-items: flex-start; 8 | } 9 | .myswiper{ 10 | width: 100%; 11 | height: 290rpx; 12 | background-size: cover; 13 | } 14 | .slide-image{ 15 | width: 100%; 16 | height: 290rpx; 17 | margin: 0 auto; 18 | } 19 | .headlines{ 20 | width: 100%; 21 | height: 80rpx; 22 | display: flex; 23 | flex-direction: row; 24 | justify-content: space-between; 25 | align-items: center; 26 | } 27 | .headlines-img{ 28 | 29 | width:60rpx; 30 | height: 60rpx; 31 | margin-left: 20rpx; 32 | } 33 | .headlines-text{ 34 | width: 700rpx; 35 | height: 70rpx; 36 | /* background-color: seagreen; */ 37 | /* position: relative; */ 38 | /* display: flex; 39 | flex-direction: column; 40 | justify-content: center; 41 | align-items: center; */ 42 | } 43 | .headLines-items{ 44 | height: 70rpx; 45 | } 46 | .headlines-text-items{ 47 | height: 70rpx; 48 | margin-top: 10rpx; 49 | display: flex; 50 | flex-direction: row; 51 | justify-content: space-between; 52 | align-items: center; 53 | } 54 | 55 | .headlines-text-hd{ 56 | /* position: absolute; 57 | top: 15rpx; */ 58 | margin-left: 15rpx; 59 | margin-top: 10rpx; 60 | margin-right: 15rpx; 61 | width: 80rpx; 62 | height: 30rpx; 63 | font-size: 20rpx; 64 | color: orange; 65 | border: 3rpx solid orange; 66 | border-radius: 10%; 67 | text-align: center; 68 | line-height: 30rpx; 69 | } 70 | .headlines-text-bd{ 71 | /* position: absolute; 72 | top: 15rpx; 73 | left: 130rpx; */ 74 | /* margin-left: 0rpx; */ 75 | /* float: left; */ 76 | flex: 1; 77 | width:400rpx; 78 | height: 40rpx; 79 | 80 | } 81 | .headlines-text-ft{ 82 | /* position: absolute; 83 | top: 15rpx; 84 | right: 30rpx; */ 85 | display: inline-block; 86 | width:100rpx; 87 | height: 60rpx; 88 | margin-right: 20rpx; 89 | } 90 | .components{ 91 | width: 100%; 92 | height: 15vh; 93 | display: flex; 94 | flex-direction: row; 95 | justify-content: space-around; 96 | align-items: center; 97 | background-size: cover; 98 | } 99 | .components .functions{ 100 | width: 150rpx; 101 | display: flex; 102 | flex-direction: column; 103 | justify-content: center; 104 | align-items: center; 105 | font-size: 25rpx; 106 | 107 | } 108 | 109 | .components .functions image{ 110 | width:100rpx; 111 | height: 100rpx; 112 | display: inline-block; 113 | } 114 | .components .functions text{ 115 | text-align: center; 116 | display: inline-block; 117 | } 118 | 119 | .todayTrump{ 120 | width: 90%; 121 | font-size: 40rpx; 122 | text-align: left; 123 | display: flex; 124 | flex-direction: row; 125 | justify-content: flex-start; 126 | align-items: center; 127 | margin-top: 20rpx; 128 | font-weight: 500; 129 | margin-left: 50rpx; 130 | } 131 | .todayTrump image{ 132 | width: 60rpx; 133 | height: 60rpx; 134 | } 135 | .todayTrump-right{ 136 | flex: 1; 137 | width: 180rpx; 138 | height: 40rpx; 139 | display: flex; 140 | flex-direction: row; 141 | justify-content: flex-end; 142 | align-items: center; 143 | font-size: 30rpx; 144 | font-weight: 600; 145 | align-items: right; 146 | margin-right: 0; 147 | } 148 | .todayTrump-right image{ 149 | margin-top: 2rpx; 150 | width: 40rpx; 151 | height: 40rpx; 152 | } 153 | 154 | 155 | .content{ 156 | width: 100%; 157 | height: 30vh; 158 | display: flex; 159 | flex-direction: row; 160 | justify-content: flex-start; 161 | align-items: flex-start; 162 | white-space: nowrap; 163 | } 164 | 165 | .myTrump{ 166 | width: 100%; 167 | height: 25vh; 168 | display: flex; 169 | /* justify-content: flex-start; 170 | align-items: center; 171 | flex-direction: row; 172 | flex-wrap: nowrap; 173 | background-color: salmon; 174 | white-space: nowrap; */ 175 | } 176 | 177 | .someTrumps{ 178 | display: inline-block; 179 | } 180 | .trumps{ 181 | margin-left: 15rpx; 182 | width: 600rpx; 183 | height: 250rpx; 184 | margin-top: 10rpx; 185 | border: 2rpx solid rgb(207, 207, 207); 186 | display: flex; 187 | flex-direction: row; 188 | 189 | } 190 | .trumps image{ 191 | margin:20rpx; 192 | width: 45%; 193 | height: 200rpx; 194 | } 195 | .trumps .mes{ 196 | width: 65%; 197 | height: 250rpx; 198 | position: relative; 199 | } 200 | .trumps .mes .foodName{ 201 | position: absolute; 202 | top: 0; 203 | left: 0; 204 | font-size: 35rpx; 205 | } 206 | .trumps .mes .foodIntroduce{ 207 | position: absolute; 208 | top: 50rpx; 209 | left: 0; 210 | color: rgb(185, 161, 161); 211 | font-size: 28rpx; 212 | } 213 | .trumps .mes .special{ 214 | position: absolute; 215 | width: 60rpx; 216 | height: 30rpx; 217 | border: 2rpx solid rgb(255, 60, 0); 218 | top: 160rpx; 219 | left: 0; 220 | color: rgb(255, 60, 0); 221 | font-size: 25rpx; 222 | line-height: 30rpx; 223 | text-align: center; 224 | } 225 | .trumps .mes p{ 226 | position: absolute; 227 | top: 200rpx; 228 | left: 0; 229 | color: rgb(255, 94, 0); 230 | font-size: 30rpx; 231 | } 232 | .trumps .mes .btn{ 233 | position: absolute; 234 | right: 20rpx; 235 | bottom: 10rpx; 236 | width: 200rpx; 237 | text-align: right; 238 | } 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | .GoodsLabel{ 247 | width: 30%; 248 | height: 5vh; 249 | margin: 0 auto; 250 | text-align: center; 251 | font-weight: 600; 252 | color: rgba(15, 63, 196, 0.577); 253 | } 254 | .newGoods{ 255 | width: 100%; 256 | display: flex; 257 | flex-direction: row; 258 | justify-content:space-around; 259 | align-items: center; 260 | flex-wrap: wrap; 261 | } 262 | .newGoods .goods{ 263 | margin-top: 5rpx; 264 | width: 300rpx; 265 | height: 300rpx; 266 | display: block; 267 | border-bottom: 2rpx solid #EEEEEE; 268 | text-align: center; 269 | position: relative; 270 | } 271 | .newGoods .goods image{ 272 | width: 300rpx; 273 | height: 200rpx; 274 | border: 5rpx solid white; 275 | margin: 0 auto; 276 | } 277 | .newGoods .goods .goods-price{ 278 | position: absolute; 279 | right: 0; 280 | bottom: 80rpx; 281 | color: orangered; 282 | 283 | } 284 | -------------------------------------------------------------------------------- /pages/myCart/myCart.js: -------------------------------------------------------------------------------- 1 | // pages/myCart/myCart.js 2 | const app = getApp(); 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | cart: [], 10 | cartAllIn: false, 11 | }, 12 | 13 | /** 14 | * 生命周期函数--监听页面加载 15 | */ 16 | onLoad: function (options) { 17 | 18 | 19 | console.log("跳转至购物车") 20 | this.setData({ 21 | cart: app.globalData.carts, 22 | }) 23 | console.log(this.data.cart) 24 | console.log(app.globalData.carts) 25 | }, 26 | // 点击减号 27 | reduceItems: function (e) { 28 | let carts = app.globalData.carts; 29 | let classifyList = app.globalData.classifyList; 30 | let i = 0; 31 | for (let key of carts) { 32 | console.log(i); 33 | if (key.id === e.target.dataset.id) { 34 | key.cartSelected = true; 35 | 36 | if (key.num === 1) { 37 | console.log("没了"); 38 | key.num--; 39 | key.cartSelected = false; 40 | // classifyList.forEach((otherKey)=>{ 41 | // otherKey.forEach((anotherKey)=>{ 42 | // if(anotherKey.id ===e.target.dataset.id) 43 | // { 44 | // anotherKey.selected = false; 45 | // } 46 | // }) 47 | // }); 48 | // for(let keyy in classifyList) 49 | // { 50 | // for(let keyyy in classifyList[keyy]) 51 | // { 52 | 53 | // for(let keyyyy in classifyList[keyy][keyyy]){ 54 | // console.log(classifyList[keyy][keyyy]); 55 | // if(classifyList[keyy][keyyy][keyyy].id ===e.target.dataset.id ){ 56 | // classifyList[keyy][keyyy][keyyy].id .selected =false; 57 | // } 58 | // } 59 | // } 60 | // } 61 | 62 | 63 | key.selected = false; 64 | app.globalData.carts = carts.filter((item) => { 65 | return item.id != e.target.dataset.id; 66 | }) 67 | } else { 68 | key.num--; 69 | console.log(key.num); 70 | } 71 | } 72 | i++; 73 | } 74 | 75 | let num = 0; 76 | let totalPrice = 0; 77 | for (let key of carts) { 78 | if (key.cartSelected) { 79 | num += key.num; 80 | totalPrice += key.num * key.price; 81 | } 82 | } 83 | this.setData({ 84 | cart: app.globalData.carts, 85 | cartTotal: num, 86 | cartTotalPrice: totalPrice, 87 | }) 88 | 89 | }, 90 | // 点击加号 91 | addItems: function (e) { 92 | let carts = app.globalData.carts; 93 | for (let key of carts) { 94 | console.log(carts); 95 | if (key.id === e.target.dataset.id) { 96 | key.cartSelected = true; 97 | console.log("add"); 98 | key.num++; 99 | console.log(key.num); 100 | console.log(carts); 101 | } 102 | 103 | } 104 | let num = 0; 105 | let totalPrice = 0; 106 | for (let key of carts) { 107 | if (key.cartSelected) { 108 | num += key.num; 109 | totalPrice += key.num * key.price; 110 | } 111 | } 112 | this.setData({ 113 | cart: app.globalData.carts, 114 | cartTotal: num, 115 | cartTotalPrice: totalPrice, 116 | }) 117 | }, 118 | // 购物车添加事件 119 | cartAdd: function (e) { 120 | console.log(e); 121 | let carts = this.data.cart; 122 | for (let key of carts) { 123 | if (key.id === e.currentTarget.dataset.id) { 124 | 125 | if (key.cartSelected) { 126 | key.cartSelected = false; 127 | } else { 128 | key.cartSelected = true; 129 | } 130 | console.log(key.cartSelected); 131 | } 132 | } 133 | 134 | let num = 0; 135 | let totalPrice = 0; 136 | for (let key of carts) { 137 | if (key.cartSelected) { 138 | num += key.num; 139 | totalPrice += key.num * key.price; 140 | } 141 | } 142 | console.log(totalPrice); 143 | this.setData({ 144 | cart: carts, 145 | cartTotal: num, 146 | cartTotalPrice: totalPrice, 147 | }); 148 | app.globalData.carts = carts; 149 | }, 150 | 151 | // 购物车全选操作 152 | cartAllIn: function () { 153 | 154 | for (let key of this.data.cart) { 155 | if (this.data.cartAllIn) { 156 | key.cartSelected = false; 157 | } else { 158 | key.cartSelected = true; 159 | } 160 | } 161 | if (this.data.cartAllIn) { 162 | this.data.cartAllIn = false; 163 | app.globalData.cartAllIn = false; 164 | } else { 165 | this.data.cartAllIn = true; 166 | app.globalData.cartAllIn = true; 167 | } 168 | let num = 0; 169 | let totalPrice = 0; 170 | let carts = this.data.cart; 171 | for (let key of carts) { 172 | if (key.cartSelected) { 173 | num += key.num; 174 | totalPrice += key.num * key.price; 175 | } 176 | } 177 | 178 | this.setData({ 179 | cartAllIn: this.data.cartAllIn, 180 | cart: this.data.cart, 181 | cartTotal: num, 182 | cartTotalPrice: totalPrice, 183 | }); 184 | app.globalData.carts = this.data.cart; 185 | }, 186 | 187 | // 点击购物车操作 188 | finishedOrder: function () { 189 | wx.showToast({ 190 | title: "您好像没钱", 191 | icon: "loading", 192 | duration: 2000, 193 | }); 194 | }, 195 | /** 196 | * 生命周期函数--监听页面初次渲染完成 197 | */ 198 | onReady: function () { 199 | 200 | }, 201 | 202 | /** 203 | * 生命周期函数--监听页面显示 204 | */ 205 | onShow: function () { 206 | console.log(1); 207 | this.setData({ 208 | cart: app.globalData.carts, 209 | }) 210 | }, 211 | 212 | /** 213 | * 生命周期函数--监听页面隐藏 214 | */ 215 | onHide: function () { 216 | 217 | }, 218 | 219 | /** 220 | * 生命周期函数--监听页面卸载 221 | */ 222 | onUnload: function () { 223 | 224 | }, 225 | 226 | /** 227 | * 页面相关事件处理函数--监听用户下拉动作 228 | */ 229 | onPullDownRefresh: function () { 230 | 231 | }, 232 | 233 | /** 234 | * 页面上拉触底事件的处理函数 235 | */ 236 | onReachBottom: function () { 237 | 238 | }, 239 | 240 | /** 241 | * 用户点击右上角分享 242 | */ 243 | onShareAppMessage: function () { 244 | 245 | } 246 | }) -------------------------------------------------------------------------------- /pages/myCart/myCart.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "购物车" 3 | } -------------------------------------------------------------------------------- /pages/myCart/myCart.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | {{item.name}} 26 | {{item.introduce}} 27 | 特价 28 |

￥{{item.price}}

29 | 30 | 31 | - 32 | 33 | 34 | {{item.num}} 35 | 36 | 37 | + 38 | 39 | 40 | 41 | 42 | 43 | 小计: 44 | ￥{{item.price*item.num}} 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 全选 55 | 56 | 57 | 合计： 58 | ￥{{cartTotalPrice}} 59 | 60 | 去结算 61 | 62 | -------------------------------------------------------------------------------- /pages/myCart/myCart.wxss: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100%; 3 | display: flex; 4 | flex-direction: row; 5 | justify-content: flex-start; 6 | align-items: flex-start; 7 | background-color: #f7f7f7; 8 | } 9 | 10 | .content{ 11 | width: 100%; 12 | height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: flex-start; 16 | align-items: flex-start; 17 | flex-wrap: wrap; 18 | } 19 | .content .subtotal{ 20 | width: 100%; 21 | height: 80rpx; 22 | text-align: right; 23 | border-bottom: 1rpx solid #cecece; 24 | } 25 | .content .subtotal text{ 26 | color: orange; 27 | font-size: 40rpx; 28 | margin-right: 20rpx; 29 | } 30 | .content .food{ 31 | width: 100%; 32 | height: 200rpx; 33 | background-color: white; 34 | display: flex; 35 | flex-direction: row; 36 | align-items: center; 37 | margin-top: 20rpx; 38 | border-bottom: 1rpx solid #f7f7f7; 39 | } 40 | .content .food image{ 41 | width: 30%; 42 | height: 180rpx; 43 | margin: 20rpx; 44 | 45 | } 46 | .content .food .mes{ 47 | width: 65%; 48 | height: 200rpx; 49 | position: relative; 50 | } 51 | .content .food .mes .foodName{ 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | font-size: 35rpx; 56 | } 57 | .content .food .mes .foodIntroduce{ 58 | position: absolute; 59 | top: 50rpx; 60 | left: 0; 61 | color: rgb(185, 161, 161); 62 | font-size: 28rpx; 63 | } 64 | .content .food .mes .special{ 65 | position: absolute; 66 | width: 60rpx; 67 | height: 30rpx; 68 | border: 2rpx solid rgb(255, 60, 0); 69 | top: 120rpx; 70 | left: 0; 71 | color: rgb(255, 60, 0); 72 | font-size: 25rpx; 73 | line-height: 30rpx; 74 | text-align: center; 75 | } 76 | .content .food .mes p{ 77 | position: absolute; 78 | top: 150rpx; 79 | left: 0; 80 | color: rgb(255, 94, 0); 81 | font-size: 30rpx; 82 | } 83 | .content .food .mes .number{ 84 | position: absolute; 85 | right: 10rpx; 86 | bottom: 20rpx; 87 | width: 200rpx; 88 | height: 50rpx; 89 | border: 2rpx solid silver; 90 | display: flex; 91 | flex-direction: row; 92 | justify-content: space-between; 93 | align-items: center; 94 | font-size: 35rpx; 95 | } 96 | .content .food .mes .number .reduce{ 97 | font-size: 35rpx; 98 | font-weight: 700; 99 | text-align: center; 100 | border-right: 2rpx solid silver; 101 | flex: 1; 102 | } 103 | .content .food .mes .number .num{ 104 | flex: 2; 105 | text-align: center; 106 | } 107 | .content .food .mes .number .add{ 108 | font-size: 35rpx; 109 | font-weight: 700; 110 | border-left: 2rpx solid silver; 111 | text-align: center; 112 | color: blue; 113 | flex: 1; 114 | } 115 | 116 | 117 | 118 | 119 | .cart{ 120 | height: 10vh; 121 | position: fixed; 122 | left: 0; 123 | right: 0; 124 | bottom: 0; 125 | background: white; 126 | display: flex; 127 | flex-direction: row; 128 | justify-content: space-between; 129 | align-items: center; 130 | } 131 | .cart .totalall{ 132 | flex: 1; 133 | text-align: right; 134 | margin-right: 20rpx; 135 | } 136 | .cart .totalall text{ 137 | font-size: 40rpx; 138 | color: orange; 139 | } 140 | .cart .cart-btn{ 141 | margin-right: 0; 142 | width: 200rpx; 143 | height: 100%; 144 | font-size: 35rpx; 145 | text-align: center; 146 | line-height: 10vh; 147 | color: white; 148 | background-color: #23a3ff; 149 | } 150 | -------------------------------------------------------------------------------- /pages/person/person.js: -------------------------------------------------------------------------------- 1 | // pages/peoson/person.js 2 | const app = getApp(); 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | userInfo: {}, 10 | hasUserInfo: false, 11 | canIUse: wx.canIUse('button.open-type.getUserInfo'), 12 | userInfoList: { //商品信息 13 | first: [{ 14 | icon: '../../assets/icons/coupon.png', 15 | text: '优惠券', 16 | alreadRead: true, 17 | unreadNum: 2, 18 | mes: "", 19 | }, 20 | { 21 | icon: '../../assets/icons/welfare.png', 22 | text: '福利社', 23 | alreadRead: false, 24 | unreadNum: 0, 25 | mes: "养盒马，能赚钱", 26 | }, 27 | { 28 | icon: '../../assets/icons/friend.png', 29 | text: '邀请好友', 30 | alreadRead: true, 31 | unreadNum: 1, 32 | mes: "得6元，可叠加", 33 | }, ], 34 | 35 | second:[ 36 | { 37 | icon: '../../assets/icons/yinhangka.png', 38 | text: '银行卡活动', 39 | alreadRead: false, 40 | unreadNum: 0, 41 | mes: "浦发满50减10", 42 | }, 43 | { 44 | icon: '../../assets/icons/dianziquan.png', 45 | text: '电子券', 46 | alreadRead: false, 47 | unreadNum: 0, 48 | mes: "", 49 | }, 50 | { 51 | icon: '../../assets/icons/lipinka.png', 52 | text: '礼品卡', 53 | alreadRead: false, 54 | unreadNum: 0, 55 | mes: "电子卡赠亲友", 56 | }, 57 | { 58 | icon: '../../assets/icons/duihuan.png', 59 | text: '兑换优惠码', 60 | alreadRead: false, 61 | unreadNum: 0, 62 | mes: "", 63 | }, 64 | { 65 | icon: '../../assets/icons/kefu.png', 66 | text: '盒马小蜜', 67 | alreadRead: false, 68 | unreadNum: 0, 69 | mes: "客观，吐槽轻点", 70 | }, 71 | { 72 | icon: '../../assets/icons/pingjia.png', 73 | text: '评价', 74 | alreadRead: false, 75 | unreadNum: 0, 76 | mes: "", 77 | }, 78 | ], 79 | third: [ 80 | { 81 | icon: '../../assets/icons/mendian.png', 82 | text: '盒马门店', 83 | alreadRead: false, 84 | unreadNum: 0, 85 | mes: "", 86 | }, 87 | { 88 | icon: '../../assets/icons/shezhi.png', 89 | text: '设置', 90 | alreadRead: false, 91 | unreadNum: 0, 92 | mes: "", 93 | }, 94 | ] 95 | } 96 | 97 | }, 98 | 99 | /** 100 | * 生命周期函数--监听页面加载 101 | */ 102 | onLoad: function (options) { 103 | //调用应用实例的方法获取全局数据 104 | 105 | // console.log(app.globalData.userInfo); 106 | if (!app.globalData.userInfo) { 107 | console.log("从全局global获取到了"); 108 | this.setData({ 109 | userInfo: app.globalData.userInfo, 110 | hasUserInfo: true 111 | }) 112 | }else { 113 | console.log("failed"); 114 | // 在没有 open-type=getUserInfo 版本的兼容处理 115 | wx.getUserInfo({ 116 | success: res => { 117 | console.log("首次从global对象获取失败"); 118 | app.globalData.userInfo = res.userInfo 119 | this.setData({ 120 | userInfo: res.userInfo, 121 | hasUserInfo: true 122 | }) 123 | } 124 | }) 125 | } 126 | 127 | }, 128 | 129 | //button按钮 设置bindgetuserinfo可以加载用户信息 现在没加 130 | getUserInfo: function(e) { 131 | console.log(e) 132 | app.globalData.userInfo = e.detail.userInfo 133 | this.setData({ 134 | userInfo: e.detail.userInfo, 135 | hasUserInfo: true 136 | }) 137 | console.log(this.data.userInfo); 138 | }, 139 | // getUserInfo: function (e) { 140 | // console.log(e) 141 | // app.globalData.userInfo = e.detail.userInfo 142 | // this.setData({ 143 | // userInfo: e.detail.userInfo, 144 | // hasUserInfo: true 145 | // }) 146 | // }, 147 | /** 148 | * 生命周期函数--监听页面初次渲染完成 149 | */ 150 | onReady: function () { 151 | 152 | }, 153 | 154 | /** 155 | * 生命周期函数--监听页面显示 156 | */ 157 | onShow: function () { 158 | 159 | }, 160 | 161 | /** 162 | * 生命周期函数--监听页面隐藏 163 | */ 164 | onHide: function () { 165 | 166 | }, 167 | 168 | /** 169 | * 生命周期函数--监听页面卸载 170 | */ 171 | onUnload: function () { 172 | 173 | }, 174 | 175 | /** 176 | * 页面相关事件处理函数--监听用户下拉动作 177 | */ 178 | onPullDownRefresh: function () { 179 | 180 | }, 181 | 182 | /** 183 | * 页面上拉触底事件的处理函数 184 | */ 185 | onReachBottom: function () { 186 | 187 | }, 188 | 189 | /** 190 | * 用户点击右上角分享 191 | */ 192 | onShareAppMessage: function () { 193 | 194 | } 195 | }) -------------------------------------------------------------------------------- /pages/person/person.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "个人信息" 3 | } -------------------------------------------------------------------------------- /pages/person/person.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{userInfo.nickName}} 8 | 9 | 10 | 11 | 12 | 13 | 待付款 14 | 15 | 16 | 17 | 待配送 18 | 19 | 20 | 21 | 配送中 22 | 23 | 24 | 25 | 待评价 26 | 27 | 28 | 29 | 全部订单 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | {{item.text}} 43 | 44 | 45 | 46 | {{item.unreadNum}} 47 | 48 | {{item.mes}} 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | {{item.text}} 63 | 64 | 65 | {{item.mes}} 66 | 67 | {{item.unreadNum}} 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | {{item.text}} 82 | 83 | 84 | {{item.mes}} 85 | 86 | {{item.unreadNum}} 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /pages/person/person.wxss: -------------------------------------------------------------------------------- 1 | /* pages/peoson/person.wxss */ 2 | .container{ 3 | background-color: #f7f7f7; 4 | } 5 | .userinfo{ 6 | width: 100%; 7 | height: 15vh; 8 | background-color: #11bcff; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | .userinfo-nickname { 15 | color: #333; 16 | } 17 | 18 | .foodState{ 19 | width: 100%; 20 | height: 130rpx; 21 | display: flex; 22 | flex-direction: row; 23 | justify-content: space-around; 24 | align-items: center; 25 | border-bottom: 1rpx solid #f7f7f7; 26 | background-color: white; 27 | } 28 | 29 | .foodState image{ 30 | width: 60rpx; 31 | height: 60rpx; 32 | } 33 | .foodState .states{ 34 | width: 200rpx; 35 | position: relative; 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | justify-content: center; 40 | font-size: 25rpx; 41 | border-right: 1rpx solid silver; 42 | } 43 | /* .states:after{ 44 | height: 60%; 45 | position: absolute; 46 | top: 20rpx; 47 | right: 0; 48 | bottom: 20rpx; 49 | width: 1rpx; 50 | border-right: 1rpx solid saddlebrown; 51 | } */ 52 | .weui-cell{ 53 | /* position: relative; 54 | display: flex; 55 | padding: 15rpx; 56 | 57 | -webkit-box-align: center; 58 | -ms-flex-align: center; 59 | align-items: center; 60 | border-bottom: 1px solid #dadada; */ 61 | } 62 | 63 | .weui-cell:before{ 64 | left: 0; 65 | } 66 | .weui_cell_hd{ 67 | display: inline-block; 68 | width: 20rpx; 69 | margin-right: 5rpx; 70 | } 71 | .weui-cell__hd image{ 72 | width: 60rpx; 73 | height: 60rpx; 74 | margin-right: 15rpx; 75 | vertical-align: -2px; 76 | } 77 | .weui_cell_bd{ 78 | display: inline-block; 79 | 80 | } 81 | .weui_cell_bd_p{ 82 | font-size: 14rpx; 83 | color: #939393; 84 | } 85 | .badge{ 86 | position: absolute; 87 | top: 30rpx; 88 | right: 20rpx; 89 | width: 30rpx; 90 | height: 30rpx; 91 | background: #ff0000; 92 | color: #fff; 93 | border-radius: 50%; 94 | text-align: center; 95 | font-size: 20rpx; 96 | } 97 | .weui-cell__ft{ 98 | 99 | margin-right: 20rpx; 100 | } 101 | .weui-cell__ft:after { 102 | margin-right: 20rpx; 103 | content: " "; 104 | display: inline-block; 105 | height: 6px; 106 | width: 6px; 107 | border-width: 2px 2px 0 0; 108 | border-color: #C8C8CD; 109 | border-style: solid; 110 | -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 111 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 112 | position: relative; 113 | top: -2px; 114 | position: absolute; 115 | top: 50%; 116 | margin-top: -4px; 117 | right: 2px; 118 | } 119 | .userinfo-avatar{ 120 | background-size: cover; 121 | width: 80rpx; 122 | height: 80rpx; 123 | margin: 20rpx; 124 | border-radius: 50%; 125 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### 项目初览 2 | > 仿造盒马鲜生，实现了部分功能。
3 | 4 | 盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态，热度十分 5 | 6 | 7 | ![](https://user-gold-cdn.xitu.io/2017/12/1/1601101dde0a0185?w=343&h=631&f=gif&s=2404841) 8 | 9 | ![](https://user-gold-cdn.xitu.io/2017/12/1/1600fe4fd66b3587?w=237&h=420&f=png&s=117741) 10 | 11 | 12 | 13 | ![](https://user-gold-cdn.xitu.io/2017/12/1/16011022ca8663da?w=343&h=631&f=gif&s=589002) 14 | 15 | 16 | 17 | 18 | ![](https://user-gold-cdn.xitu.io/2017/12/1/16011026998ea9e9?w=365&h=640&f=gif&s=1556064) 19 | ![](https://user-gold-cdn.xitu.io/2017/12/1/16010029fe869d94?w=263&h=460&f=png&s=37249) 20 | 21 | #### 项目功能 22 | * 用户信息注册 23 | * 首页几个轮播和界面交互 24 | * 分类商品管理购买 25 | * 购物车界面交互及其操作 26 | * 个人信息界面 27 | 28 | ## 小程序设计过程 29 | 小程序是一个易上手的东西， 对于新手来说，多看官方文档，可以初步做出比较完整的小程序，正是因为简单上手，功能实现简单，小程序是越来越火，商业价值也越来越大。 30 | 31 | #### 1.项目工具和文档 32 | 1. 微信web开发者工具：[微信小程序官网](https://mp.weixin.qq.com/debug/wxadoc/dev/) 这是个比较好用的编辑器，对于小程序编辑很方便。 33 | 2. 开发文档：[微信小程序宝典秘籍](https://www.w3cschool.cn/weixinapp/9wou1q8j.html) 通过这个查找微信小程序的API，组件，框架等等。 34 | 3. 图标库： [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标，十分方便。 35 | 4. Easy Mork： [easy-mock](www.easy-mock.com) 用于后台的模拟，得到JSON数据； 36 | 5. weui框架引入， 例如个人信息界面，用weui可以很快很方便的做 37 | 38 | #### 2.项目开发 39 | 40 | 微信小程序开发和传统的H5开发还是有些不同的， 容易踩坑。 41 | 小程序是基于MVVM的的框架，合理利用数据绑定实现界面的更新是很关键的 42 | 开发时不要一股脑的写写写，多看看文档，你会发现你不小心原生写了个组件。。 43 | 44 | #### 3.项目发布 45 | 进入开发平台，注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线 46 | 47 | 48 | 49 | ## 部分功能解析 50 | 先看看我的项目目录 51 | ``` 52 | "pages": [ 53 | "pages/index/index", //主界面 54 | "pages/person/person", //个人界面 55 | "pages/classify/classify", //分类商品界面 56 | "pages/class/myFruits/myFruits", //水果商店 57 | "pages/class/myMeat/myMeat", //肉类食品商店 58 | "pages/myCart/myCart" //购物车 59 | ], 60 | ``` 61 | ### 1.首页轮播图 62 | 63 | 轮播有几种形式， 比如常见的横向海报图片展示， 还有横纵向商品列表展示，头条信息框轮换 64 | siwper组件很好的实现了横向海报图片展示，比如 65 | ``` 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ``` 74 | 然而横向滑动需要注意些别的细节 75 | 首先要给swiper组件加上scroll-x-="true" 76 | 然后给轮播的子元素父容器设置display: inline-block; white-space: nowrap; 77 | 78 | 头条信息框转换采用上下轮换， 使用scroll-view嵌套swiper完成 79 | 80 | ``` 81 | 82 | 83 | 84 | //内容 85 | 86 | 87 | 88 | ``` 89 | 90 | ### 2.分类商品管理 91 | 首先在index界面通过onLoad生命周期函数 ， 92 | 通过easy-moc获取后台数据，将必要的信息送给全局的globalData 93 | ``` 94 | wx.request({ 95 | url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline', 96 | complete: res => { 97 | this.globalData.classifyList = res.data; 98 | }, 99 | }) 100 | ``` 101 | 对于数据处理，需要理清哪些是全局信息， 哪些是局部信息 102 | 比如所有商品的信息，购物车里的商品，就得放到全局中 ，而有些比如当前界面的状态，一般放到当前界面的Data里面保存 103 | 104 | 而有些个人信息，比如出生年月，账号信息 则可以通过wx.setStorage 和wx.getStorage放入本地存储 105 | 106 | ### 3.购物车操作 107 | 购物车中的操作无非是些加加减减，需要自己不断调试，找出哪里不合常理 108 | 通过view，button里的bindtap等操作，实现对商品信息的修改，购物车状态的处理 109 | 110 | 111 | 举个例子 减少购物车中的商品的数量操作 112 | ``` 113 | reduceItems: function (e) { 114 | let carts = app.globalData.carts; //获取购物车的信息 115 | let classifyList = app.globalData.classifyList; //获取商品的信息 116 | for (let key of carts) { //遍历购物车数组 117 | if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找 118 | key.cartSelected = true; 119 | if (key.num === 1) { //如果数量为1还要减 120 | key.num--; 121 | key.cartSelected = false; //购物车不选中 122 | key.selected = false; //商品中不选中 123 | app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除 124 | return item.id != e.target.dataset.id; 125 | }) 126 | } else { 127 | key.num--; 128 | } 129 | } 130 | } 131 | let num = 0; //实时更新购物车小计界面显示 132 | let totalPrice = 0; 133 | for (let key of carts) { 134 | if (key.cartSelected) { 135 | num += key.num; 136 | totalPrice += key.num * key.price; 137 | } 138 | } 139 | this.setData({ //通过setData进行当前页面Data数据管理 140 | cart: app.globalData.carts, 141 | cartTotal: num, 142 | cartTotalPrice: totalPrice, 143 | }) 144 | }, 145 | ``` 146 | ### 4.weui框架引入 147 | **在全局CSS样式中 添加的CSS适配于所有的页面，由此可以引入weui ,做一些界面真的很方便** 148 | ``` 149 | @import './styles/weui.wxss'; 150 | ``` 151 | 152 | ## 总结 153 | 1. 微信小程序的组件，API很强大，需要不断的探索，不断的学习，多看文档 154 | 2. 善于利用有效资源， 比如iconfont esay-moc weui等 155 | 3. 切页面要细心，善于利用弹性布局等布局方法，小程序的rpx确实很好用 156 | 4. 不要一股脑的写代码， 当函数具有复用性，应该抽象出来，封装好，这样代码才易于维护，易读 157 | 158 | ### 项目地址: 159 | https://github.com/fishman17/wx_orderOnline 内含详细注释 160 | 161 | ### 个人简介 162 | github : https://github.com/fishman17 163 | 邮箱 : 734583898@qq.com 164 | 165 | **最后 如果您喜欢这个项目的话，给个star哦 谢谢！** 166 | -------------------------------------------------------------------------------- /styles/action.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/styles/action.wxss -------------------------------------------------------------------------------- /styles/base/fn.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/mixin/setArrow.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/mixin/setOnepx.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/mixin/text.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/reset.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle} -------------------------------------------------------------------------------- /styles/base/variable/color.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/variable/global.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/variable/weui-button.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/variable/weui-cell.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/variable/weui-dialog.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/variable/weui-grid.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/variable/weui-msg.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/base/variable/weui-progress.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /styles/button.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/styles/button.wxss -------------------------------------------------------------------------------- /styles/card.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/styles/card.wxss -------------------------------------------------------------------------------- /styles/cover.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/styles/cover.wxss -------------------------------------------------------------------------------- /styles/hero.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/styles/hero.wxss -------------------------------------------------------------------------------- /styles/reset.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | line-height: 1.5; 3 | font-size: 32rpx; 4 | 5 | } 6 | 7 | video{ 8 | width: 100%; 9 | 10 | } 11 | image{ 12 | display: block; 13 | width: 100%; 14 | } 15 | -------------------------------------------------------------------------------- /styles/spec.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/styles/spec.wxss -------------------------------------------------------------------------------- /styles/story.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fishman17/wx_orderOnline/7ee8f6f7280570d1a6c3f5bbd188b08dabe518e1/styles/story.wxss -------------------------------------------------------------------------------- /styles/weui.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle}.weui-cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}.weui-cells:before{top:0;border-top:1rpx solid #d9d9d9}.weui-cells:after,.weui-cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#999;font-size:14px}.weui-cells_after-title{margin-top:0}.weui-cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}.weui-cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-cell:first-child:before{display:none}.weui-cell_active{background-color:#ececec}.weui-cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-cell__ft{text-align:right;color:#999}.weui-cell_access{color:inherit}.weui-cell__ft_in-access{padding-right:13px;position:relative}.weui-cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}.weui-cell_link{color:#586c94;font-size:14px}.weui-cell_link:active{background-color:#ececec}.weui-cell_link:first-child:before{display:block}.weui-icon-radio{margin-left:3.2px;margin-right:3.2px}.weui-icon-checkbox_circle,.weui-icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}.weui-check__label:active{background-color:#ececec}.weui-check{position:absolute;left:-9999px}.weui-check__hd_in-checkbox{padding-right:.35em}.weui-cell__ft_in-radio{padding-left:.35em}.weui-cell_input{padding-top:0;padding-bottom:0}.weui-label{width:105px;word-wrap:break-word;word-break:break-all}.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.weui-toptips_warn{background-color:#e64340}.weui-textarea{display:block;width:100%}.weui-textarea-counter{color:#b2b2b2;text-align:right}.weui-cell_warn,.weui-textarea-counter_warn{color:#e64340}.weui-form-preview{position:relative;background-color:#fff}.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.weui-form-preview:after,.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-form-preview__value{font-size:14px}.weui-form-preview__value_in-hd{font-size:26px}.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__item{overflow:hidden}.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__btn:first-child:after{display:none}.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}.weui-form-preview__btn_primary{color:#0bb20c}.weui-cell_select{padding:0}.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.weui-select_in-select-after{padding-left:0}.weui-cell__bd_in-select-before,.weui-cell__hd_in-select-after{padding-left:15px}.weui-cell_vcode{padding-right:0}.weui-vcode-btn,.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.weui-vcode-btn:active{color:#52a341}.weui-cell_switch{padding-top:6px;padding-bottom:6px}.weui-uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-uploader__info{color:#b2b2b2}.weui-uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}.weui-uploader__file{float:left;margin-right:9px;margin-bottom:9px}.weui-uploader__img{display:block;width:79px;height:79px}.weui-uploader__file_status{position:relative}.weui-uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.weui-uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.weui-uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}.weui-uploader__input-box:after,.weui-uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}.weui-uploader__input-box:before{width:2px;height:39.5px}.weui-uploader__input-box:after{width:39.5px;height:2px}.weui-uploader__input-box:active{border-color:#999}.weui-uploader__input-box:active:after,.weui-uploader__input-box:active:before{background-color:#999}.weui-uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0}.weui-article{padding:20px 15px;font-size:15px}.weui-article__section{margin-bottom:1.5em}.weui-article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}.weui-article__h2{font-size:16px;font-weight:400;margin-bottom:.34em}.weui-article__h3{font-weight:400;font-size:15px;margin-bottom:.34em}.weui-article__p{margin:0 0 .8em}.weui-msg{padding-top:36px;text-align:center}.weui-msg__link{display:inline;color:#586c94}.weui-msg__icon-area{margin-bottom:30px}.weui-msg__text-area{margin-bottom:25px;padding:0 20px}.weui-msg__title{margin-bottom:5px;font-weight:400;font-size:20px}.weui-msg__desc{font-size:14px;color:#999}.weui-msg__opr-area{margin-bottom:25px}.weui-msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.weui-msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}}.weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-btn{margin-top:15px}.weui-btn:first-child{margin-top:0}.weui-btn-area{margin:1.17647059em 15px .3em}.weui-agree{display:block;padding:.5em 15px;font-size:13px}.weui-agree__text{color:#999}.weui-agree__link{display:inline;color:#586c94}.weui-agree__checkbox{position:absolute;left:-9999px}.weui-agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}.weui-agree__checkbox-icon-check{position:absolute;top:1px;left:1px}.weui-footer{color:#999;font-size:14px;text-align:center}.weui-footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}.weui-footer__links{font-size:0}.weui-footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}.weui-footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}.weui-footer__link:first-child:before{display:none}.weui-footer__text{padding:0 .34em;font-size:12px}.weui-grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}.weui-grid_active{background-color:#ececec}.weui-grid__icon{display:block;width:28px;height:28px;margin:0 auto}.weui-grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.weui-loading{margin:0 5px;width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:a 1s steps(12) infinite;animation:a 1s steps(12) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.weui-loading.weui-loading_transparent{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.weui-badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}.weui-badge_dot{padding:.4em;min-width:0}.weui-loadmore{width:65%;margin:0.5em auto;line-height:1.6em;font-size:14px;text-align:center}.weui-loadmore__tips{display:inline-block;vertical-align:middle}.weui-loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}.weui-loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}.weui-loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}.weui-loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5}.weui-panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.weui-panel:first-child{margin-top:0}.weui-panel:before{top:0;border-top:1rpx solid #e5e5e5}.weui-panel:after,.weui-panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.weui-panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}.weui-panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.weui-panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box{padding:15px;position:relative}.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box:first-child:before{display:none}.weui-media-box__title{font-weight:400;font-size:17px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.weui-media-box__desc{color:#999;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.weui-media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}.weui-media-box__info__meta{float:left;padding-right:1em}.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}.weui-media-box__title_in-text{margin-bottom:8px}.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-media-box__thumb{width:100%;height:100%;vertical-align:top}.weui-media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}.weui-media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.weui-media-box_small-appmsg{padding:0}.weui-cells_in-small-appmsg{margin-top:0}.weui-cells_in-small-appmsg:before{display:none}.weui-progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-progress__opr{margin-left:15px;font-size:0}.weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ededed}.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;text-align:center;font-size:0;color:#999999}.weui-navbar__item.weui-bar__item_on{color:#f788ab}.weui-navbar__title{font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.weui-tab{position:relative;height:100%}.weui-tab__panel{box-sizing:border-box;height:100%;padding-top:44px;overflow:auto;-webkit-overflow-scrolling:touch}.weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}.weui-icon-search{margin-right:8px;font-size:inherit}.weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap} -------------------------------------------------------------------------------- /styles/widget/weui-agree/weui-agree.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .agree{display:block;padding:.5em 15px;font-size:13px}.agree__text{color:#999}.agree__link{display:inline;color:#586c94}.agree__checkbox{position:absolute;left:-9999px}.agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}.agree__checkbox-icon-check{position:absolute;top:1px;left:1px} -------------------------------------------------------------------------------- /styles/widget/weui-animate/weui-animate.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | @-webkit-keyframes a{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes a{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate-slide-up{-webkit-animation:a ease .3s forwards;animation:a ease .3s forwards}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate-slide-down{-webkit-animation:b ease .3s forwards;animation:b ease .3s forwards}@-webkit-keyframes c{0%{opacity:0}to{opacity:1}}@keyframes c{0%{opacity:0}to{opacity:1}}.animate-fade-in{-webkit-animation:c ease .3s forwards;animation:c ease .3s forwards}@-webkit-keyframes d{0%{opacity:1}to{opacity:0}}@keyframes d{0%{opacity:1}to{opacity:0}}.animate-fade-out{-webkit-animation:d ease .3s forwards;animation:d ease .3s forwards} -------------------------------------------------------------------------------- /styles/widget/weui-button/weui-button.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .btn{margin-top:15px}.btn:first-child{margin-top:0}.btn-area{margin:1.17647059em 15px .3em} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-access.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .cell_access{color:inherit}.cell__ft_in-access{padding-right:13px;position:relative}.cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}.cell_link{color:#586c94;font-size:14px}.cell_link:active{background-color:#ececec}.cell_link:first-child:before{display:block} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-cell.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}.cells:before{top:0;border-top:1rpx solid #d9d9d9}.cells:after,.cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#999;font-size:14px}.cells_after-title{margin-top:0}.cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}.cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.cell:first-child:before{display:none}.cell_active{background-color:#ececec}.cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}.cell__ft{text-align:right;color:#999} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-check.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .icon-radio{margin-left:3.2px;margin-right:3.2px}.icon-checkbox_circle,.icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}.check__label:active{background-color:#ececec}.check{position:absolute;left:-9999px}.check__hd_in-checkbox{padding-right:.35em}.cell__ft_in-radio{padding-left:.35em} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-form.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .cell_input{padding-top:0;padding-bottom:0}.label{width:105px;word-wrap:break-word;word-break:break-all}.input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.toptips_warn{background-color:#e64340}.textarea{display:block;width:100%}.textarea-counter{color:#b2b2b2;text-align:right}.cell_warn,.textarea-counter_warn{color:#e64340}.form-preview{position:relative;background-color:#fff}.form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.form-preview:after,.form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.form-preview__value{font-size:14px}.form-preview__value_in-hd{font-size:26px}.form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.form-preview__item{overflow:hidden}.form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.form-preview__btn:first-child:after{display:none}.form-preview__btn_active{background-color:#eee}.form-preview__btn_default{color:#999}.form-preview__btn_primary{color:#0bb20c}.cell_select{padding:0}.select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.select_in-select-after{padding-left:0}.cell__bd_in-select-before,.cell__hd_in-select-after{padding-left:15px}.cell_vcode{padding-right:0}.vcode-btn,.vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.vcode-btn:active{color:#52a341} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-form/weui-form-preview.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .form-preview{position:relative;background-color:#fff}.form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.form-preview:after,.form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.form-preview__value{font-size:14px}.form-preview__value_in-hd{font-size:26px}.form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.form-preview__item{overflow:hidden}.form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.form-preview__btn:first-child:after{display:none}.form-preview__btn_active{background-color:#eee}.form-preview__btn_default{color:#999}.form-preview__btn_primary{color:#0bb20c} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-form/weui-form_common.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .cell_input{padding-top:0;padding-bottom:0}.label{width:105px;word-wrap:break-word;word-break:break-all}.input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.toptips_warn{background-color:#e64340}.textarea{display:block;width:100%}.textarea-counter{color:#b2b2b2;text-align:right}.cell_warn,.textarea-counter_warn{color:#e64340} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-form/weui-select.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .cell_select{padding:0}.select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.select_in-select-after{padding-left:0}.cell__bd_in-select-before,.cell__hd_in-select-after{padding-left:15px} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-form/weui-vcode.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .cell_vcode{padding-right:0}.vcode-btn,.vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.vcode-btn:active{color:#52a341} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-switch.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .cell_switch{padding-top:6px;padding-bottom:6px} -------------------------------------------------------------------------------- /styles/widget/weui-cell/weui-uploader.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.uploader__info{color:#b2b2b2}.uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}.uploader__file{float:left;margin-right:9px;margin-bottom:9px}.uploader__img{display:block;width:79px;height:79px}.uploader__file_status{position:relative}.uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}.uploader__input-box:after,.uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}.uploader__input-box:before{width:2px;height:39.5px}.uploader__input-box:after{width:39.5px;height:2px}.uploader__input-box:active{border-color:#999}.uploader__input-box:active:after,.uploader__input-box:active:before{background-color:#999}.uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0} -------------------------------------------------------------------------------- /styles/widget/weui-flex/weui-flex.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .flex{display:-webkit-box;display:-webkit-flex;display:flex}.flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1} -------------------------------------------------------------------------------- /styles/widget/weui-footer/weui-footer.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .footer{color:#999;font-size:14px;text-align:center}.footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}.footer__links{font-size:0}.footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}.footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}.footer__link:first-child:before{display:none}.footer__text{padding:0 .34em;font-size:12px} -------------------------------------------------------------------------------- /styles/widget/weui-grid/weui-grid.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}.grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}.grid_active{background-color:#ececec}.grid__icon{display:block;width:28px;height:28px;margin:0 auto}.grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} -------------------------------------------------------------------------------- /styles/widget/weui-loading/weui-loading.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .loading{margin:0 5px;width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:a 1s steps(12) infinite;animation:a 1s steps(12) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.loading.loading_transparent{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} -------------------------------------------------------------------------------- /styles/widget/weui-media-box/weui-media-box.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .media-box{padding:15px;position:relative}.media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.media-box:first-child:before{display:none}.media-box__title{font-weight:400;font-size:17px;width:auto;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.media-box__desc,.media-box__title{overflow:hidden;text-overflow:ellipsis}.media-box__desc{color:#999;font-size:13px;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}.media-box__info__meta{float:left;padding-right:1em}.media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}.media-box__title_in-text{margin-bottom:8px}.media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.media-box__thumb{width:100%;height:100%;vertical-align:top}.media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}.media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.media-box_small-appmsg{padding:0}.cells_in-small-appmsg{margin-top:0}.cells_in-small-appmsg:before{display:none} -------------------------------------------------------------------------------- /styles/widget/weui-page/weui-article.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .article{padding:20px 15px;font-size:15px}.article__section{margin-bottom:1.5em}.article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}.article__h2{font-size:16px}.article__h2,.article__h3{font-weight:400;margin-bottom:.34em}.article__h3{font-size:15px}.article__p{margin:0 0 .8em} -------------------------------------------------------------------------------- /styles/widget/weui-page/weui-msg.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .msg{padding-top:36px;text-align:center}.msg__link{display:inline;color:#586c94}.msg__icon-area{margin-bottom:30px}.msg__text-area{margin-bottom:25px;padding:0 20px}.msg__title{margin-bottom:5px;font-weight:400;font-size:20px}.msg__desc{font-size:14px;color:#999}.msg__opr-area{margin-bottom:25px}.msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}} -------------------------------------------------------------------------------- /styles/widget/weui-panel/weui-panel.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.panel:first-child{margin-top:0}.panel:before{top:0;border-top:1rpx solid #e5e5e5}.panel:after,.panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}.panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px} -------------------------------------------------------------------------------- /styles/widget/weui-progress/weui-progress.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.progress__opr{margin-left:15px;font-size:0} -------------------------------------------------------------------------------- /styles/widget/weui-searchbar/weui-searchbar.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}.icon-search{margin-right:8px;font-size:inherit}.icon-search_in-box{position:absolute;left:10px;top:7px}.search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}.search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}.search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}.search-bar__input{height:28px;line-height:28px;font-size:14px}.icon-clear{padding:7px 8px;font-size:0}.icon-clear,.search-bar__label{position:absolute;top:0;right:0}.search-bar__label{bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}.search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap} -------------------------------------------------------------------------------- /styles/widget/weui-tab/weui-navbar.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}.navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}.navbar__item.bar__item_on{color:#1aad19}.navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal} -------------------------------------------------------------------------------- /styles/widget/weui-tab/weui-tab.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}.navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}.navbar__item.bar__item_on{color:#1aad19}.navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.tab{position:relative;height:100%}.tab__panel{box-sizing:border-box;height:100%;padding-top:50px;overflow:auto;-webkit-overflow-scrolling:touch} -------------------------------------------------------------------------------- /styles/widget/weui-tips/weui-badge.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}.badge_dot{padding:.4em;min-width:0} -------------------------------------------------------------------------------- /styles/widget/weui-tips/weui-loadmore.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .loadmore{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.loadmore__tips{display:inline-block;vertical-align:middle}.loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}.loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}.loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}.loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5} --------------------------------------------------------------------------------