├── README.md ├── app.js ├── app.json ├── app.wxss ├── image ├── 1.gif ├── 1.jpg ├── 11.png ├── 12.png ├── 2.jpg ├── 21.png ├── 22.png ├── 3.jpg ├── 31.png ├── 32.png ├── 4.jpg ├── 41.png ├── 42.png ├── 5.jpg ├── 6.jpg ├── b1.jpg ├── b2.jpg ├── b3.jpg ├── c1.png ├── c2.png ├── c3.png ├── c4.png ├── cart1.png ├── cart2.png ├── goods1.png ├── icon3.png ├── list1.png ├── s1.png ├── s2.png ├── s3.png ├── s4.png ├── s5.png └── s6.png ├── page ├── common │ └── common.wxss └── component │ ├── address │ ├── address.js │ ├── address.json │ ├── address.wxml │ └── address.wxss │ ├── cart │ ├── cart.js │ ├── cart.json │ ├── cart.wxml │ └── cart.wxss │ ├── category │ ├── category.js │ ├── category.json │ ├── category.wxml │ └── category.wxss │ ├── details │ ├── details.js │ ├── details.json │ ├── details.wxml │ └── details.wxss │ ├── index.js │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── list │ ├── list.js │ ├── list.json │ ├── list.wxml │ └── list.wxss │ ├── orders │ ├── orders.js │ ├── orders.json │ ├── orders.wxml │ └── orders.wxss │ └── user │ ├── user.js │ ├── user.json │ ├── user.wxml │ └── user.wxss └── util └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # wxapp-mall 2 | 微信小程序 商城 3 | 4 | ## 相关 5 | 文章：[微信小程序之购物车功能](https://github.com/lin-xin/blog/issues/14) 6 | 7 | ## 前言 8 | 无意中在慕课网看到一个小程序商城的视频教程，居然要收388元，真是太贵了。看到上面已经贴了个小程序二维码demo，既然有了，那就来照着做一个练练手吧。 9 | 10 | ## 功能 11 | - [x] 首页 12 | - [x] 分类 13 | - [x] 购物车 14 | - [x] 个人中心 15 | - [x] 商品列表 16 | - [x] 商品详情 17 | - [x] 订单 18 | - [x] 地址管理 19 | 20 | ## 实现效果 21 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/1.jpg) 22 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/2.jpg) 23 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/3.jpg) 24 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/4.jpg) 25 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/5.jpg) 26 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/6.jpg) 27 | 28 | ## 运行 29 | 需要安装有微信开发者工具。 30 | 把项目下载到本地。 31 | 在微信开发者工具中打开该项目则可预览。 -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | console.log('App Launch') 4 | }, 5 | onShow: function () { 6 | console.log('App Show') 7 | }, 8 | onHide: function () { 9 | console.log('App Hide') 10 | }, 11 | globalData: { 12 | hasLogin: false 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "page/component/index", 4 | "page/component/category/category", 5 | "page/component/cart/cart", 6 | "page/component/user/user", 7 | "page/component/address/address", 8 | "page/component/orders/orders", 9 | "page/component/details/details", 10 | "page/component/list/list" 11 | ], 12 | "window": { 13 | "navigationBarTextStyle": "#ffffff", 14 | "navigationBarTitleText": "零食商贩", 15 | "navigationBarBackgroundColor": "#AB956D", 16 | "backgroundColor": "#eeeeee", 17 | "enablePullDownRefresh": true 18 | }, 19 | "tabBar": { 20 | "color": "#b7b7b7", 21 | "selectedColor": "#AB956D", 22 | "borderStyle": "#f5f5f5", 23 | "backgroundColor": "#f5f5f5", 24 | "list": [{ 25 | "pagePath": "page/component/index", 26 | "iconPath": "image/12.png", 27 | "selectedIconPath": "image/11.png", 28 | "text": "主页" 29 | }, { 30 | "pagePath": "page/component/category/category", 31 | "iconPath": "image/22.png", 32 | "selectedIconPath": "image/21.png", 33 | "text": "分类" 34 | }, { 35 | "pagePath": "page/component/cart/cart", 36 | "iconPath": "image/32.png", 37 | "selectedIconPath": "image/31.png", 38 | "text": "购物车" 39 | }, { 40 | "pagePath": "page/component/user/user", 41 | "iconPath": "image/42.png", 42 | "selectedIconPath": "image/41.png", 43 | "text": "我的" 44 | }] 45 | }, 46 | "networkTimeout": { 47 | "request": 10000, 48 | "connectSocket": 10000, 49 | "uploadFile": 10000, 50 | "downloadFile": 10000 51 | }, 52 | "debug": false 53 | } 54 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: #fbf9fe; 3 | height: 100%; 4 | } 5 | .container { 6 | display: flex; 7 | flex-direction: column; 8 | min-height: 100%; 9 | justify-content: space-between; 10 | } 11 | .page-header { 12 | display: flex; 13 | font-size: 32rpx; 14 | color: #aaa; 15 | justify-content: center; 16 | margin-top: 50rpx; 17 | } 18 | .page-header-text { 19 | padding: 20rpx 40rpx; 20 | border-bottom: 1px solid #ccc; 21 | } 22 | 23 | .page-body { 24 | width: 100%; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | flex-grow: 1; 29 | overflow-x: hidden; 30 | } 31 | .page-body-wrapper { 32 | margin-top: 100rpx; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | width: 100%; 37 | } 38 | .page-body-wrapper form { 39 | width: 100%; 40 | } 41 | .page-body-wording { 42 | text-align: center; 43 | padding: 200rpx 100rpx; 44 | } 45 | .page-body-info { 46 | display: flex; 47 | flex-direction: column; 48 | align-items: center; 49 | background-color: #fff; 50 | margin-bottom: 50rpx; 51 | width: 100%; 52 | padding: 50rpx 0 150rpx 0; 53 | } 54 | .page-body-title { 55 | margin-bottom: 100rpx; 56 | font-size: 32rpx; 57 | } 58 | .page-body-text { 59 | font-size: 30rpx; 60 | line-height: 26px; 61 | color: #ccc; 62 | } 63 | .page-body-text-small { 64 | font-size: 24rpx; 65 | color: #000; 66 | margin-bottom: 100rpx; 67 | } 68 | .page-body-form { 69 | width: 100%; 70 | background-color: #fff; 71 | display: flex; 72 | flex-direction: column; 73 | width: 100%; 74 | border: 1px solid #eee; 75 | } 76 | .page-body-form-item { 77 | display: flex; 78 | align-items: center; 79 | margin-left: 10rpx; 80 | border-bottom: 1px solid #eee; 81 | height: 80rpx; 82 | } 83 | .page-body-form-key { 84 | width: 180rpx; 85 | } 86 | .page-body-form-value { 87 | flex-grow: 1; 88 | } 89 | 90 | .page-body-form-picker { 91 | display: flex; 92 | justify-content: space-between; 93 | height: 100rpx; 94 | align-items: center; 95 | font-size: 36rpx; 96 | margin-left: 20rpx; 97 | padding-right: 20rpx; 98 | border-bottom: 1px solid #eee; 99 | } 100 | .page-body-form-picker-value { 101 | color: #ccc; 102 | } 103 | 104 | .page-body-buttons { 105 | width: 100%; 106 | } 107 | .page-body-button { 108 | margin: 25rpx; 109 | } 110 | .page-body-button image { 111 | width: 150rpx; 112 | height: 150rpx; 113 | } 114 | .page-footer { 115 | text-align: center; 116 | color: #1aad19; 117 | font-size: 24rpx; 118 | margin: 20rpx 0; 119 | } 120 | 121 | .green{ 122 | color: #09BB07; 123 | } 124 | .red{ 125 | color: #F76260; 126 | } 127 | .blue{ 128 | color: #10AEFF; 129 | } 130 | .yellow{ 131 | color: #FFBE00; 132 | } 133 | .gray{ 134 | color: #C9C9C9; 135 | } 136 | 137 | .strong{ 138 | font-weight: bold; 139 | } 140 | 141 | .bc_green{ 142 | background-color: #09BB07; 143 | } 144 | .bc_red{ 145 | background-color: #F76260; 146 | } 147 | .bc_blue{ 148 | background-color: #10AEFF; 149 | } 150 | .bc_yellow{ 151 | background-color: #FFBE00; 152 | } 153 | .bc_gray{ 154 | background-color: #C9C9C9; 155 | } 156 | 157 | .tc{ 158 | text-align: center; 159 | } 160 | 161 | .page input{ 162 | padding: 10px 15px; 163 | background-color: #fff; 164 | } 165 | checkbox, radio{ 166 | margin-right: 5px; 167 | } 168 | 169 | .btn-area{ 170 | padding: 0 15px; 171 | } 172 | .btn-area button{ 173 | margin-top: 10px; 174 | margin-bottom: 10px; 175 | } 176 | 177 | .page { 178 | min-height: 100%; 179 | flex: 1; 180 | background-color: #FBF9FE; 181 | font-size: 16px; 182 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 183 | overflow: hidden; 184 | } 185 | .page__hd{ 186 | padding: 40px; 187 | } 188 | .page__title{ 189 | display: block; 190 | font-size: 20px; 191 | } 192 | .page__desc{ 193 | margin-top: 5px; 194 | font-size: 14px; 195 | color: #888888; 196 | } 197 | 198 | .section{ 199 | margin-bottom: 40px; 200 | } 201 | .section_gap{ 202 | padding: 0 15px; 203 | } 204 | .section__title{ 205 | margin-bottom: 8px; 206 | padding-left: 15px; 207 | padding-right: 15px; 208 | } 209 | .section_gap .section__title{ 210 | padding-left: 0; 211 | padding-right: 0; 212 | } 213 | .section__ctn{ 214 | 215 | } 216 | -------------------------------------------------------------------------------- /image/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/1.gif -------------------------------------------------------------------------------- /image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/1.jpg -------------------------------------------------------------------------------- /image/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/11.png -------------------------------------------------------------------------------- /image/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/12.png -------------------------------------------------------------------------------- /image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/2.jpg -------------------------------------------------------------------------------- /image/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/21.png -------------------------------------------------------------------------------- /image/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/22.png -------------------------------------------------------------------------------- /image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/3.jpg -------------------------------------------------------------------------------- /image/31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/31.png -------------------------------------------------------------------------------- /image/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/32.png -------------------------------------------------------------------------------- /image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/4.jpg -------------------------------------------------------------------------------- /image/41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/41.png -------------------------------------------------------------------------------- /image/42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/42.png -------------------------------------------------------------------------------- /image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/5.jpg -------------------------------------------------------------------------------- /image/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/6.jpg -------------------------------------------------------------------------------- /image/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/b1.jpg -------------------------------------------------------------------------------- /image/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/b2.jpg -------------------------------------------------------------------------------- /image/b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/b3.jpg -------------------------------------------------------------------------------- /image/c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/c1.png -------------------------------------------------------------------------------- /image/c2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/c2.png -------------------------------------------------------------------------------- /image/c3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/c3.png -------------------------------------------------------------------------------- /image/c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/c4.png -------------------------------------------------------------------------------- /image/cart1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/cart1.png -------------------------------------------------------------------------------- /image/cart2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/cart2.png -------------------------------------------------------------------------------- /image/goods1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/goods1.png -------------------------------------------------------------------------------- /image/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/icon3.png -------------------------------------------------------------------------------- /image/list1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/list1.png -------------------------------------------------------------------------------- /image/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/s1.png -------------------------------------------------------------------------------- /image/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/s2.png -------------------------------------------------------------------------------- /image/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/s3.png -------------------------------------------------------------------------------- /image/s4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/s4.png -------------------------------------------------------------------------------- /image/s5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/s5.png -------------------------------------------------------------------------------- /image/s6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HeroBarry/wxapp-mall/1882134c04ad407a5871990ac2bc1f9951a4c7e8/image/s6.png -------------------------------------------------------------------------------- /page/common/common.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #ffffff; 3 | font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif; 4 | font-size: 32rpx; 5 | } 6 | .navigator-hover{ 7 | background: none; 8 | } -------------------------------------------------------------------------------- /page/component/address/address.js: -------------------------------------------------------------------------------- 1 | // page/component/new-pages/user/address/address.js 2 | Page({ 3 | data:{ 4 | address:{ 5 | name:'', 6 | phone:'', 7 | detail:'' 8 | } 9 | }, 10 | onLoad(){ 11 | var self = this; 12 | 13 | wx.getStorage({ 14 | key: 'address', 15 | success: function(res){ 16 | self.setData({ 17 | address : res.data 18 | }) 19 | } 20 | }) 21 | }, 22 | formSubmit(){ 23 | var self = this; 24 | if(self.data.address.name && self.data.address.phone && self.data.address.detail){ 25 | wx.setStorage({ 26 | key: 'address', 27 | data: self.data.address, 28 | success(){ 29 | wx.navigateBack(); 30 | } 31 | }) 32 | }else{ 33 | wx.showModal({ 34 | title:'提示', 35 | content:'请填写完整资料', 36 | showCancel:false 37 | }) 38 | } 39 | }, 40 | bindName(e){ 41 | this.setData({ 42 | 'address.name' : e.detail.value 43 | }) 44 | }, 45 | bindPhone(e){ 46 | this.setData({ 47 | 'address.phone' : e.detail.value 48 | }) 49 | }, 50 | bindDetail(e){ 51 | this.setData({ 52 | 'address.detail' : e.detail.value 53 | }) 54 | } 55 | }) -------------------------------------------------------------------------------- /page/component/address/address.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "地址管理", 3 | "enablePullDownRefresh": false 4 | } -------------------------------------------------------------------------------- /page/component/address/address.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /page/component/address/address.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | 3 | .form-box{ 4 | padding-left: 30rpx; 5 | } 6 | .form-box input{ 7 | height: 90rpx; 8 | border-bottom: 1rpx solid #ededed; 9 | font-size: 28rpx; 10 | color: #999; 11 | } 12 | .form-box .input-placeholder{ 13 | color: #aaa; 14 | } 15 | .form-box button{ 16 | margin:30rpx 30rpx 0 0; 17 | } -------------------------------------------------------------------------------- /page/component/cart/cart.js: -------------------------------------------------------------------------------- 1 | // page/component/new-pages/cart/cart.js 2 | Page({ 3 | data: { 4 | carts:[], // 购物车列表 5 | hasList:false, // 列表是否有数据 6 | totalPrice:0, // 总价，初始为0 7 | selectAllStatus:true // 全选状态，默认全选 8 | }, 9 | onShow() { 10 | this.setData({ 11 | hasList: true, 12 | carts:[ 13 | {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true}, 14 | {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true} 15 | ] 16 | }); 17 | this.getTotalPrice(); 18 | }, 19 | /** 20 | * 当前商品选中事件 21 | */ 22 | selectList(e) { 23 | const index = e.currentTarget.dataset.index; 24 | let carts = this.data.carts; 25 | const selected = carts[index].selected; 26 | carts[index].selected = !selected; 27 | this.setData({ 28 | carts: carts 29 | }); 30 | this.getTotalPrice(); 31 | }, 32 | 33 | /** 34 | * 删除购物车当前商品 35 | */ 36 | deleteList(e) { 37 | const index = e.currentTarget.dataset.index; 38 | let carts = this.data.carts; 39 | carts.splice(index,1); 40 | this.setData({ 41 | carts: carts 42 | }); 43 | if(!carts.length){ 44 | this.setData({ 45 | hasList: false 46 | }); 47 | }else{ 48 | this.getTotalPrice(); 49 | } 50 | }, 51 | 52 | /** 53 | * 购物车全选事件 54 | */ 55 | selectAll(e) { 56 | let selectAllStatus = this.data.selectAllStatus; 57 | selectAllStatus = !selectAllStatus; 58 | let carts = this.data.carts; 59 | 60 | for (let i = 0; i < carts.length; i++) { 61 | carts[i].selected = selectAllStatus; 62 | } 63 | this.setData({ 64 | selectAllStatus: selectAllStatus, 65 | carts: carts 66 | }); 67 | this.getTotalPrice(); 68 | }, 69 | 70 | /** 71 | * 绑定加数量事件 72 | */ 73 | addCount(e) { 74 | const index = e.currentTarget.dataset.index; 75 | let carts = this.data.carts; 76 | let num = carts[index].num; 77 | num = num + 1; 78 | carts[index].num = num; 79 | this.setData({ 80 | carts: carts 81 | }); 82 | this.getTotalPrice(); 83 | }, 84 | 85 | /** 86 | * 绑定减数量事件 87 | */ 88 | minusCount(e) { 89 | const index = e.currentTarget.dataset.index; 90 | let carts = this.data.carts; 91 | let num = carts[index].num; 92 | if(num <= 1){ 93 | return false; 94 | } 95 | num = num - 1; 96 | carts[index].num = num; 97 | this.setData({ 98 | carts: carts 99 | }); 100 | this.getTotalPrice(); 101 | }, 102 | 103 | /** 104 | * 计算总价 105 | */ 106 | getTotalPrice() { 107 | let carts = this.data.carts; // 获取购物车列表 108 | let total = 0; 109 | for(let i = 0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{item.title}} 9 | ￥{{item.price}} 10 | 11 | - 12 | {{item.num}} 13 | + 14 | 15 | × 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 全选 24 | ￥{{totalPrice}} 25 | 26 | 27 | 28 | 购物车是空的哦~ 29 | 30 | -------------------------------------------------------------------------------- /page/component/cart/cart.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | 3 | .cart-box{ 4 | padding-bottom: 100rpx; 5 | } 6 | .cart-list{ 7 | position: relative; 8 | padding: 20rpx 20rpx 20rpx 285rpx; 9 | height: 185rpx; 10 | border-bottom: 1rpx solid #e9e9e9; 11 | } 12 | .cart-list .cart-pro-select{ 13 | position: absolute; 14 | left: 20rpx; 15 | top: 90rpx; 16 | width: 45rpx; 17 | height: 45rpx; 18 | } 19 | 20 | .cart-list .cart-thumb{ 21 | position: absolute; 22 | top: 20rpx; 23 | left: 85rpx; 24 | width: 185rpx; 25 | height: 185rpx; 26 | } 27 | .cart-list .cart-pro-name{ 28 | display: inline-block; 29 | width: 300rpx; 30 | height: 105rpx; 31 | line-height: 50rpx; 32 | overflow: hidden; 33 | } 34 | .cart-list .cart-pro-price{ 35 | display: inline-block; 36 | float: right; 37 | height: 105rpx; 38 | line-height: 50rpx; 39 | } 40 | .cart-list .cart-count-box{ 41 | position: absolute; 42 | left: 285; 43 | bottom: 20rpx; 44 | width: 250rpx; 45 | height: 80rpx; 46 | } 47 | .cart-list .cart-count-box text{ 48 | display: inline-block; 49 | line-height: 80rpx; 50 | text-align: center; 51 | } 52 | .cart-count-down,.cart-count-add{ 53 | font-size: 44rpx; 54 | width: 50rpx; 55 | height: 100%; 56 | } 57 | .cart-count-num{ 58 | width: 150rpx; 59 | } 60 | .cart-del{ 61 | position: absolute; 62 | right: 20rpx; 63 | bottom: 20rpx; 64 | width: 80rpx; 65 | height: 80rpx; 66 | line-height: 80rpx; 67 | text-align: center; 68 | font-size: 44rpx; 69 | } 70 | .cart-footer{ 71 | position: fixed; 72 | bottom: 0; 73 | left: 0; 74 | width: 100%; 75 | height: 90rpx; 76 | line-height: 90rpx; 77 | padding:0 100rpx 0 80rpx; 78 | box-sizing: border-box; 79 | background: #AB956D; 80 | color: #fff; 81 | } 82 | .total-select{ 83 | position: absolute; 84 | left: 20rpx; 85 | top: 25rpx; 86 | width: 45rpx; 87 | height: 45rpx; 88 | } 89 | .order-icon{ 90 | position: absolute; 91 | right: 40rpx; 92 | top: 25rpx; 93 | width: 45rpx; 94 | height: 45rpx; 95 | background-image: url(/image/icon3.png); 96 | background-size: 100%; 97 | } 98 | .cart-toatl-price{ 99 | float: right; 100 | width: 120rpx; 101 | } 102 | 103 | .cart-no-data{ 104 | padding:40rpx 0; 105 | color: #999; 106 | text-align: center; 107 | } -------------------------------------------------------------------------------- /page/component/category/category.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | category: [ 4 | {name:'果味',id:'guowei'}, 5 | {name:'蔬菜',id:'shucai'}, 6 | {name:'炒货',id:'chaohuo'}, 7 | {name:'点心',id:'dianxin'}, 8 | {name:'粗茶',id:'cucha'}, 9 | {name:'淡饭',id:'danfan'} 10 | ], 11 | detail:[], 12 | curIndex: 0, 13 | isScroll: false, 14 | toView: 'guowei' 15 | }, 16 | onReady(){ 17 | var self = this; 18 | wx.request({ 19 | url:'http://www.gdfengshuo.com/api/wx/cate-detail.txt', 20 | success(res){ 21 | console.log(res.data) 22 | self.setData({ 23 | detail : res.data.result 24 | }) 25 | } 26 | }); 27 | 28 | }, 29 | switchTab(e){ 30 | this.setData({ 31 | toView : e.target.dataset.id, 32 | curIndex : e.target.dataset.index 33 | }) 34 | } 35 | 36 | }) -------------------------------------------------------------------------------- /page/component/category/category.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "分类", 3 | "backgroundColor": "#eeeeee", 4 | "enablePullDownRefresh": false 5 | } -------------------------------------------------------------------------------- /page/component/category/category.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{item.name}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{item.cate}} 16 | 17 | 18 | 19 | 20 | 21 | {{val.name}} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /page/component/category/category.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | 3 | page,.main{ 4 | height: 100%; 5 | } 6 | .categroy-left{ 7 | float: left; 8 | width: 150rpx; 9 | height: 100%; 10 | border-right: 1px solid #ddd; 11 | box-sizing: border-box; 12 | } 13 | .categroy-left .cate-list{ 14 | height: 90rpx; 15 | line-height: 90rpx; 16 | text-align: center; 17 | border-left: 3px solid #fff; 18 | } 19 | .categroy-left .cate-list.on{ 20 | color: #AB956D; 21 | border-color: #AB956D; 22 | } 23 | .categroy-right{ 24 | float: right; 25 | width: 600rpx; 26 | height: 100%; 27 | overflow: hidden; 28 | 29 | } 30 | .cate-box{ 31 | height: 100%; 32 | padding:40rpx; 33 | box-sizing: border-box; 34 | } 35 | .cate-box .cate-banner image{ 36 | display: block; 37 | width: 100%; 38 | height: 190rpx; 39 | } 40 | .cate-title{ 41 | position: relative; 42 | height: 30rpx; 43 | line-height: 30rpx; 44 | padding:30rpx 0 55rpx; 45 | text-align: center; 46 | color: #AB956D; 47 | font-size: 28rpx; 48 | } 49 | .cate-title::before{ 50 | position: absolute; 51 | left: 130rpx; 52 | top: 43rpx; 53 | content: ''; 54 | width: 70rpx; 55 | height: 4rpx; 56 | background: #AB956D; 57 | } 58 | .cate-title::after{ 59 | position: absolute; 60 | right: 130rpx; 61 | top: 43rpx; 62 | content: ''; 63 | width: 70rpx; 64 | height: 4rpx; 65 | background: #AB956D; 66 | } 67 | 68 | .product-list{ 69 | display: inline-block; 70 | width: 160rpx; 71 | height: 160rpx; 72 | text-align: center; 73 | margin:0 20rpx 20rpx 0; 74 | font-size: 24rpx; 75 | } 76 | .product-list image{ 77 | width: 80rpx; 78 | height: 80rpx; 79 | margin-bottom: 20rpx; 80 | } 81 | .product-list:nth-child(3n){ 82 | margin-right: 0; 83 | } -------------------------------------------------------------------------------- /page/component/details/details.js: -------------------------------------------------------------------------------- 1 | // page/component/details/details.js 2 | Page({ 3 | data:{ 4 | goods: { 5 | id: 1, 6 | image: '/image/goods1.png', 7 | title: '新鲜梨花带雨', 8 | price: 0.01, 9 | stock: '有货', 10 | detail: '这里是梨花带雨详情。', 11 | parameter: '125g/个', 12 | service: '不支持退货' 13 | }, 14 | num: 1, 15 | totalNum: 0, 16 | hasCarts: false, 17 | curIndex: 0, 18 | show: false, 19 | scaleCart: false 20 | }, 21 | 22 | addCount() { 23 | let num = this.data.num; 24 | num++; 25 | this.setData({ 26 | num : num 27 | }) 28 | }, 29 | 30 | addToCart() { 31 | const self = this; 32 | const num = this.data.num; 33 | let total = this.data.totalNum; 34 | 35 | self.setData({ 36 | show: true 37 | }) 38 | setTimeout( function() { 39 | self.setData({ 40 | show: false, 41 | scaleCart : true 42 | }) 43 | setTimeout( function() { 44 | self.setData({ 45 | scaleCart: false, 46 | hasCarts : true, 47 | totalNum: num + total 48 | }) 49 | }, 200) 50 | }, 300) 51 | 52 | }, 53 | 54 | bindTap(e) { 55 | const index = parseInt(e.currentTarget.dataset.index); 56 | this.setData({ 57 | curIndex: index 58 | }) 59 | } 60 | 61 | }) -------------------------------------------------------------------------------- /page/component/details/details.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/component/details/details.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{totalNum}} 9 | 10 | 11 | 12 | 13 | 数量 {{num}} 14 | + 15 | 加入购物车 16 | 17 | 18 | 19 | {{goods.stock}} 20 | {{goods.title}} 21 | ￥ {{goods.price}} 22 | 23 | 24 | 商品详情 25 | 产品参数 26 | 售后保障 27 | 28 | {{goods.detail}} 29 | {{goods.parameter}} 30 | {{goods.service}} 31 | 32 | 33 | -------------------------------------------------------------------------------- /page/component/details/details.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | 3 | .goods-box{ 4 | position: relative; 5 | padding: 40rpx 45rpx; 6 | text-align: center; 7 | color: #454552; 8 | border-bottom: 30rpx solid #ededed; 9 | } 10 | .goods-box .goods-thumb{ 11 | width: 300rpx; 12 | height: 300rpx; 13 | margin: 35rpx 0 125rpx; 14 | } 15 | 16 | .to-carts-icon{ 17 | position: absolute; 18 | right: 70rpx; 19 | top: 70rpx; 20 | width: 10rpx; 21 | height: 10rpx; 22 | border-radius: 50%; 23 | opacity: .6; 24 | -webkit-animation: to_cart .3s ease-out; 25 | animation: to_cart .3s ease-out; 26 | } 27 | @-webkit-keyframes to_cart { 28 | 0%{ 29 | right:100rpx; 30 | top:530rpx; 31 | -webkit-transform: scale(4); 32 | } 33 | /*60%{ 34 | top: 20rpx; 35 | }*/ 36 | } 37 | @keyframes to_cart { 38 | 0%{ 39 | right:100rpx; 40 | top:530rpx; 41 | transform: scale(4); 42 | } 43 | /*60%{ 44 | top: 20rpx; 45 | }*/ 46 | } 47 | .carts-icon{ 48 | position: absolute; 49 | right: 40rpx; 50 | top: 40rpx; 51 | width: 75rpx; 52 | height: 75rpx; 53 | } 54 | .carts-icon image{ 55 | width: 100%; 56 | height: 100%; 57 | } 58 | .carts-icon.on{ 59 | -webkit-animation: to_cart_scale .3s ease; 60 | animation: to_cart_scale .3s ease; 61 | } 62 | @-webkit-keyframes to_cart_scale { 63 | 50%{ 64 | -webkit-transform: scale(1.2); 65 | } 66 | } 67 | @keyframes to_cart_scale { 68 | 50%{ 69 | transform: scale(1.2); 70 | } 71 | } 72 | .carts-icon-num{ 73 | position: absolute; 74 | left: -15rpx; 75 | width: 40rpx; 76 | height: 40rpx; 77 | line-height: 40rpx; 78 | border-radius: 50%; 79 | background: #AB956D; 80 | color: #fff; 81 | font-size: 24rpx; 82 | } 83 | .goods-box .goods-operation{ 84 | position: relative; 85 | width: 100%; 86 | height: 100rpx; 87 | line-height: 100rpx; 88 | padding: 0 50rpx; 89 | margin-bottom: 60rpx; 90 | box-sizing: border-box; 91 | border-radius: 50rpx; 92 | background: #AB956D; 93 | color: #fff; 94 | font-size: 28rpx; 95 | } 96 | .goods-operation text{ 97 | display: inline-block; 98 | height: 100rpx; 99 | } 100 | .goods-operation-num{ 101 | width: 160rpx; 102 | } 103 | .goods-operation-add{ 104 | width: 80rpx; 105 | margin-right: 30rpx; 106 | } 107 | .goods-to-cart{ 108 | width: 210rpx; 109 | padding-right: 75rpx; 110 | } 111 | .goods-cart-img{ 112 | position: absolute; 113 | right: 50rpx; 114 | top: 28rpx; 115 | width: 45rpx; 116 | height: 45rpx; 117 | } 118 | 119 | .goods-stock{ 120 | font-size: 28rpx; 121 | margin-bottom: 20rpx; 122 | } 123 | .goods-title{ 124 | font-size: 40rpx; 125 | margin-bottom: 30rpx; 126 | } 127 | .goods-price{ 128 | font-size: 40rpx; 129 | } 130 | .goods-tab-nav{ 131 | display: inline-block; 132 | width: 33.33%; 133 | height: 90rpx; 134 | line-height: 90rpx; 135 | border-bottom: 1rpx solid #ededed; 136 | box-sizing: border-box; 137 | text-align: center; 138 | color: #c7c7cb; 139 | } 140 | .goods-tab-nav.on{ 141 | color: #bcaa8a; 142 | border-bottom: 5rpx solid #bcaa8a; 143 | } 144 | .goods-content{ 145 | padding: 40rpx; 146 | } -------------------------------------------------------------------------------- /page/component/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | imgUrls: [ 4 | '/image/b1.jpg', 5 | '/image/b2.jpg', 6 | '/image/b3.jpg' 7 | ], 8 | indicatorDots: false, 9 | autoplay: false, 10 | interval: 3000, 11 | duration: 800, 12 | } 13 | }) -------------------------------------------------------------------------------- /page/component/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/component/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 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 | 瓜子 100g 36 | ￥ 0.01 37 | 38 | 39 | 40 | 41 | 42 | 芹菜 半斤 43 | ￥ 0.02 44 | 45 | 46 | 47 | 48 | 49 | 素米 375g 50 | ￥ 0.03 51 | 52 | 53 | 54 | 55 | 56 | 瓜子 100g 57 | ￥ 0.01 58 | 59 | 60 | 61 | 62 | 63 | 芹菜 半斤 64 | ￥ 0.02 65 | 66 | 67 | 68 | 69 | 70 | 素米 375g 71 | ￥ 0.03 72 | 73 | 74 | 75 | 76 | 77 | 瓜子 100g 78 | ￥ 0.01 79 | 80 | 81 | 82 | 83 | 84 | 芹菜 半斤 85 | ￥ 0.02 86 | 87 | 88 | 89 | 90 | 91 | 素米 375g 92 | ￥ 0.03 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /page/component/index.wxss: -------------------------------------------------------------------------------- 1 | @import '../common/common.wxss'; 2 | swiper { 3 | height: 421.5rpx; 4 | } 5 | swiper-item image { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .select-title,.newest-title{ 11 | width: 100%; 12 | padding:30rpx 0; 13 | height: 40rpx; 14 | color: #AB956D; 15 | text-align: center; 16 | } 17 | .select-top-small{ 18 | width: 375rpx; 19 | height: 375rpx; 20 | float: left; 21 | } 22 | .select-bottom,.select-top{ 23 | width: 100%; 24 | height: 375rpx; 25 | } 26 | .select-top-small image,.select-bottom image,.select-top-small navigator,.select-bottom navigator{ 27 | display: block; 28 | width: 100%; 29 | height: 100%; 30 | } 31 | 32 | .newest-box{ 33 | padding:0 40rpx; 34 | } 35 | .newest-box .newest-list{ 36 | display: inline-block; 37 | width: 325rpx; 38 | height: 325rpx; 39 | margin:0 20rpx 20rpx 0; 40 | border-radius: 10px; 41 | text-align: center; 42 | background: #f5f6f5; 43 | } 44 | .newest-box .newest-list:nth-child(2n){ 45 | margin-right: 0; 46 | } 47 | .newest-box .newest-list image{ 48 | width: 175rpx; 49 | height: 175rpx; 50 | margin: 20rpx 0 10rpx; 51 | } 52 | .newest-box .newest-list .newest-text{ 53 | font-size: 32rpx; 54 | } -------------------------------------------------------------------------------- /page/component/list/list.js: -------------------------------------------------------------------------------- 1 | // page/component/list/list.js 2 | Page({ 3 | data:{}, 4 | onLoad:function(options){ 5 | // 页面初始化 options为页面跳转所带来的参数 6 | }, 7 | onReady:function(){ 8 | // 页面渲染完成 9 | }, 10 | onShow:function(){ 11 | // 页面显示 12 | }, 13 | onHide:function(){ 14 | // 页面隐藏 15 | }, 16 | onUnload:function(){ 17 | // 页面关闭 18 | } 19 | }) -------------------------------------------------------------------------------- /page/component/list/list.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/component/list/list.wxml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 瓜子 100g 11 | ￥ 0.01 12 | 13 | 14 | 15 | 16 | 17 | 芹菜 半斤 18 | ￥ 0.02 19 | 20 | 21 | 22 | 23 | 24 | 素米 375g 25 | ￥ 0.03 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /page/component/list/list.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | 3 | .banner image{ 4 | width: 100%; 5 | height: 400rpx; 6 | } 7 | .list-box{ 8 | padding: 30rpx 20rpx; 9 | } 10 | .newest-list{ 11 | display: inline-block; 12 | width: 347rpx; 13 | height: 347rpx; 14 | margin:0 15rpx 10rpx 0; 15 | border-radius: 10px; 16 | text-align: center; 17 | background: #f5f6f5; 18 | } 19 | .newest-list:nth-child(2n){ 20 | margin-right: 0; 21 | } 22 | .newest-list image{ 23 | width: 180rpx; 24 | height: 180rpx; 25 | margin: 30rpx 0 20rpx; 26 | } 27 | .newest-list .newest-text{ 28 | font-size: 32rpx; 29 | line-height: 45rpx; 30 | } -------------------------------------------------------------------------------- /page/component/orders/orders.js: -------------------------------------------------------------------------------- 1 | // page/component/orders/orders.js 2 | Page({ 3 | data:{ 4 | address:{}, 5 | hasAddress: false, 6 | total:0, 7 | orders:[ 8 | {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01}, 9 | {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03} 10 | ] 11 | }, 12 | 13 | onReady() { 14 | this.getTotalPrice(); 15 | }, 16 | 17 | onShow:function(){ 18 | const self = this; 19 | wx.getStorage({ 20 | key:'address', 21 | success(res) { 22 | self.setData({ 23 | address: res.data, 24 | hasAddress: true 25 | }) 26 | } 27 | }) 28 | }, 29 | 30 | /** 31 | * 计算总价 32 | */ 33 | getTotalPrice() { 34 | let orders = this.data.orders; 35 | let total = 0; 36 | for(let i = 0; i < orders.length; i++) { 37 | total += orders[i].num * orders[i].price; 38 | } 39 | this.setData({ 40 | total: total 41 | }) 42 | }, 43 | 44 | toPay() { 45 | wx.showModal({ 46 | title: '提示', 47 | content: '本系统只做演示，支付系统已屏蔽', 48 | complete() { 49 | wx.switchTab({ 50 | url: '/page/component/user/user' 51 | }) 52 | } 53 | }) 54 | } 55 | }) -------------------------------------------------------------------------------- /page/component/orders/orders.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "订单详情" 3 | } -------------------------------------------------------------------------------- /page/component/orders/orders.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 收货人: {{address.name}} 5 | 电话: {{address.phone}} 6 | {{address.detail}} 7 | 8 | 添加收货地址 9 | 10 | 11 | 12 | 13 | 14 | {{item.title}} 15 | ￥{{item.price}} 16 | ×{{item.num}} 17 | 18 | 19 | 20 | 21 | 付款合计：￥{{total}} 22 | 去付款 23 | 24 | -------------------------------------------------------------------------------- /page/component/orders/orders.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | 3 | .orders-address{ 4 | position: relative; 5 | padding: 20rpx 50rpx 20rpx 35rpx; 6 | font-size: 14px; 7 | line-height: 25px; 8 | border-bottom: 20rpx solid #ededed; 9 | color: #adadad; 10 | } 11 | .orders-address::after{ 12 | position: absolute; 13 | right: 30rpx; 14 | top: 60rpx; 15 | content: ''; 16 | width: 8px; 17 | height: 8px; 18 | border-top: 4rpx solid #7f7f7f; 19 | border-right: 4rpx solid #7f7f7f; 20 | -webkit-transform: rotate(45deg); 21 | transform: rotate(45deg); 22 | } 23 | .orders-address-name{ 24 | display: inline-block; 25 | width: 300rpx; 26 | } 27 | 28 | .orders-no-address{ 29 | position: relative; 30 | height: 90rpx; 31 | line-height: 90rpx; 32 | color: #adadad; 33 | border-bottom: 20rpx solid #ededed; 34 | text-align: center; 35 | } 36 | .orders-no-address::after{ 37 | position: absolute; 38 | right: 30rpx; 39 | top: 34rpx; 40 | content: ''; 41 | width: 16rpx; 42 | height: 16rpx; 43 | border-top: 4rpx solid #7f7f7f; 44 | border-right: 4rpx solid #7f7f7f; 45 | -webkit-transform: rotate(45deg); 46 | transform: rotate(45deg); 47 | } 48 | 49 | .orders-box{ 50 | padding-bottom: 105rpx; 51 | } 52 | .orders-list{ 53 | position: relative; 54 | padding:20rpx 20rpx 20rpx 220rpx; 55 | height: 180rpx; 56 | border-bottom: 1rpx solid #ededed; 57 | } 58 | .orders-thumb{ 59 | position: absolute; 60 | top: 20rpx; 61 | left: 20rpx; 62 | width: 180rpx; 63 | height: 180rpx; 64 | } 65 | .orders-list view{ 66 | line-height: 60rpx; 67 | } 68 | 69 | .orders-footer{ 70 | position: fixed; 71 | bottom: 0; 72 | left: 0; 73 | width: 100%; 74 | height: 95rpx; 75 | line-height: 95rpx; 76 | border-top: 1rpx solid #ededed; 77 | } 78 | .orders-footer .orders-footer-total{ 79 | display: inline-block; 80 | width: 510rpx; 81 | padding-left: 30rpx; 82 | box-sizing: border-box; 83 | color: #a55350; 84 | } 85 | .orders-footer .orders-footer-btn{ 86 | display: inline-block; 87 | width: 240rpx; 88 | text-align: center; 89 | color: #fff; 90 | background: #AB956D; 91 | } -------------------------------------------------------------------------------- /page/component/user/user.js: -------------------------------------------------------------------------------- 1 | // page/component/new-pages/user/user.js 2 | Page({ 3 | data:{ 4 | thumb:'', 5 | nickname:'', 6 | orders:[], 7 | hasAddress:false, 8 | address:{} 9 | }, 10 | onLoad(){ 11 | var self = this; 12 | /** 13 | * 获取用户信息 14 | */ 15 | wx.getUserInfo({ 16 | success: function(res){ 17 | self.setData({ 18 | thumb: res.userInfo.avatarUrl, 19 | nickname: res.userInfo.nickName 20 | }) 21 | } 22 | }), 23 | 24 | /** 25 | * 发起请求获取订单列表信息 26 | */ 27 | wx.request({ 28 | url: 'http://www.gdfengshuo.com/api/wx/orders.txt', 29 | success(res){ 30 | self.setData({ 31 | orders: res.data.orders 32 | }) 33 | } 34 | }) 35 | }, 36 | onShow(){ 37 | var self = this; 38 | /** 39 | * 获取本地缓存 地址信息 40 | */ 41 | wx.getStorage({ 42 | key: 'address', 43 | success: function(res){ 44 | self.setData({ 45 | hasAddress: true, 46 | address: res.data 47 | }) 48 | } 49 | }) 50 | }, 51 | /** 52 | * 发起支付请求 53 | */ 54 | payOrders(){ 55 | wx.requestPayment({ 56 | timeStamp: 'String1', 57 | nonceStr: 'String2', 58 | package: 'String3', 59 | signType: 'MD5', 60 | paySign: 'String4', 61 | success: function(res){ 62 | console.log(res) 63 | }, 64 | fail: function(res) { 65 | wx.showModal({ 66 | title:'支付提示', 67 | content:'', 68 | showCancel: false 69 | }) 70 | } 71 | }) 72 | } 73 | }) -------------------------------------------------------------------------------- /page/component/user/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "我的" 3 | } -------------------------------------------------------------------------------- /page/component/user/user.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{nickname}} 5 | 关于我们 6 | 7 | 8 | 9 | 地址管理 10 | 11 | 12 | {{address.name}} 13 | {{address.phone}} 14 | {{address.detail}} 15 | 16 | 17 | 18 | 我的订单 19 | 20 | 订单编号：{{item.number}} 21 | 22 | 23 | {{item.name}} 24 | {{item.count}} 25 | {{item.status}} 26 | 27 | 28 | 实付：￥{{item.money}} 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /page/component/user/user.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | 3 | .header{ 4 | position: relative; 5 | height: 160rpx; 6 | line-height: 100rpx; 7 | padding:30rpx 30rpx 30rpx 150rpx; 8 | box-sizing: border-box; 9 | background: #AB956D; 10 | font-size: 28rpx; 11 | color: #fff; 12 | } 13 | .header .thumb{ 14 | position: absolute; 15 | left: 30rpx; 16 | top: 30rpx; 17 | width: 100rpx; 18 | height: 100rpx; 19 | border-radius: 50%; 20 | } 21 | .header .about{ 22 | float: right; 23 | } 24 | 25 | .address-box{ 26 | border-bottom: 20rpx solid #ededed; 27 | color: #999; 28 | line-height: 90rpx; 29 | font-size: 28rpx; 30 | } 31 | .address-box .address-manage{ 32 | position: relative; 33 | height: 90rpx; 34 | border-bottom: 1rpx solid #e9e9e9; 35 | text-align: center; 36 | } 37 | .address-box .address-manage::after{ 38 | position: absolute; 39 | right: 30rpx; 40 | top: 34rpx; 41 | content: ''; 42 | width: 16rpx; 43 | height: 16rpx; 44 | border-top: 4rpx solid #7f7f7f; 45 | border-right: 4rpx solid #7f7f7f; 46 | -webkit-transform: rotate(45deg); 47 | transform: rotate(45deg); 48 | } 49 | .address-box .address-list{ 50 | padding-left: 30rpx; 51 | } 52 | .address-box .address-list view{ 53 | height: 90rpx; 54 | border-bottom: 1rpx solid #e9e9e9; 55 | } 56 | .address-box .address-list view:last-child{ 57 | border-bottom: 0; 58 | } 59 | 60 | .orders-box{ 61 | color: #999; 62 | font-size: 28rpx; 63 | } 64 | .orders{ 65 | height: 90rpx; 66 | line-height: 90rpx; 67 | border-bottom: 1rpx solid #e9e9e9; 68 | text-align: center; 69 | } 70 | .orders-list{ 71 | padding-left: 30rpx; 72 | border-bottom: 20rpx solid #ededed; 73 | } 74 | .orders-list:last-child{ 75 | border-bottom: 0; 76 | } 77 | .orders-number{ 78 | height: 90rpx; 79 | line-height: 90rpx; 80 | border-bottom: 1rpx solid #e9e9e9; 81 | } 82 | .orders-detail{ 83 | position: relative; 84 | height: 120rpx; 85 | padding: 35rpx 20rpx 35rpx 170rpx; 86 | border-bottom: 1rpx solid #e9e9e9; 87 | } 88 | .orders-detail image{ 89 | position: absolute; 90 | left: 0; 91 | top: 20rpx; 92 | width: 150rpx; 93 | height: 150rpx; 94 | } 95 | .orders-detail view{ 96 | line-height: 60rpx; 97 | } 98 | .orders-detail .orders-status{ 99 | position: absolute; 100 | right: 20rpx; 101 | top: 35rpx; 102 | height: 120rpx; 103 | line-height: 120rpx; 104 | color: #b42f2d; 105 | } 106 | .orders-footer{ 107 | height: 60rpx; 108 | line-height: 60rpx; 109 | color: #2f2f2f; 110 | padding:15rpx 30rpx 15rpx 0; 111 | } 112 | .orders-footer .orders-btn{ 113 | float: right; 114 | width: 170rpx; 115 | height: 60rpx; 116 | line-height:60rpx; 117 | border-radius: 6rpx; 118 | background: #b42f2d; 119 | color: #fff; 120 | } -------------------------------------------------------------------------------- /util/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(time) { 2 | if (typeof time !== 'number' || time < 0) { 3 | return time 4 | } 5 | 6 | var hour = parseInt(time / 3600) 7 | time = time % 3600 8 | var minute = parseInt(time / 60) 9 | time = time % 60 10 | // 这里秒钟也取整 11 | var second = parseInt(time) 12 | 13 | return ([hour, minute, second]).map(function (n) { 14 | n = n.toString() 15 | return n[1] ? n : '0' + n 16 | }).join(':') 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } --------------------------------------------------------------------------------