├── page ├── component │ ├── index.json │ ├── list │ │ ├── list.json │ │ ├── list.js │ │ ├── list.wxss │ │ └── list.wxml │ ├── details │ │ ├── details.json │ │ ├── details.js │ │ ├── details.wxml │ │ └── details.wxss │ ├── user │ │ ├── user.json │ │ ├── user.wxml │ │ ├── user.js │ │ └── user.wxss │ ├── cart │ │ ├── cart.json │ │ ├── cart.wxml │ │ ├── cart.wxss │ │ └── cart.js │ ├── orders │ │ ├── orders.json │ │ ├── orders.wxml │ │ ├── orders.js │ │ └── orders.wxss │ ├── search │ │ ├── search.json │ │ ├── search.js │ │ ├── search.wxml │ │ └── search.wxss │ ├── address │ │ ├── address.json │ │ ├── address.wxss │ │ ├── address.wxml │ │ └── address.js │ ├── category │ │ ├── category.json │ │ ├── category.js │ │ ├── category.wxss │ │ └── category.wxml │ ├── index.js │ ├── index.wxss │ └── index.wxml └── common │ └── common.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 ├── s1.png ├── s2.png ├── s3.png ├── s4.png ├── s5.png ├── s6.png ├── cart1.png ├── cart2.png ├── goods1.png ├── icon3.png └── list1.png ├── sitemap.json ├── app.js ├── README.md ├── project.config.json ├── app.json └── app.wxss /page/component/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/component/list/list.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/component/details/details.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/component/user/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "我的" 3 | } -------------------------------------------------------------------------------- /image/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/1.gif -------------------------------------------------------------------------------- /image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/1.jpg -------------------------------------------------------------------------------- /image/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/11.png -------------------------------------------------------------------------------- /image/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/12.png -------------------------------------------------------------------------------- /image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/2.jpg -------------------------------------------------------------------------------- /image/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/21.png -------------------------------------------------------------------------------- /image/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/22.png -------------------------------------------------------------------------------- /image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/3.jpg -------------------------------------------------------------------------------- /image/31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/31.png -------------------------------------------------------------------------------- /image/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/32.png -------------------------------------------------------------------------------- /image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/4.jpg -------------------------------------------------------------------------------- /image/41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/41.png -------------------------------------------------------------------------------- /image/42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/42.png -------------------------------------------------------------------------------- /image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/5.jpg -------------------------------------------------------------------------------- /image/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/6.jpg -------------------------------------------------------------------------------- /image/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/b1.jpg -------------------------------------------------------------------------------- /image/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/b2.jpg -------------------------------------------------------------------------------- /image/b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/b3.jpg -------------------------------------------------------------------------------- /image/c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/c1.png -------------------------------------------------------------------------------- /image/c2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/c2.png -------------------------------------------------------------------------------- /image/c3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/c3.png -------------------------------------------------------------------------------- /image/c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/c4.png -------------------------------------------------------------------------------- /image/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/s1.png -------------------------------------------------------------------------------- /image/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/s2.png -------------------------------------------------------------------------------- /image/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/s3.png -------------------------------------------------------------------------------- /image/s4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/s4.png -------------------------------------------------------------------------------- /image/s5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/s5.png -------------------------------------------------------------------------------- /image/s6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/s6.png -------------------------------------------------------------------------------- /page/component/cart/cart.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "购物车" 3 | } -------------------------------------------------------------------------------- /page/component/orders/orders.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "订单详情" 3 | } -------------------------------------------------------------------------------- /page/component/search/search.json: -------------------------------------------------------------------------------- 1 | { 2 | "enablePullDownRefresh": false 3 | } -------------------------------------------------------------------------------- /image/cart1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/cart1.png -------------------------------------------------------------------------------- /image/cart2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/cart2.png -------------------------------------------------------------------------------- /image/goods1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/goods1.png -------------------------------------------------------------------------------- /image/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/icon3.png -------------------------------------------------------------------------------- /image/list1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zwq-009/SmallStore/HEAD/image/list1.png -------------------------------------------------------------------------------- /page/component/address/address.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "地址管理", 3 | "enablePullDownRefresh": false 4 | } -------------------------------------------------------------------------------- /page/component/category/category.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "分类", 3 | "backgroundColor": "#eeeeee", 4 | "enablePullDownRefresh": false 5 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /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/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 | }) -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | color: #999; 10 | } 11 | .form-box .input-placeholder{ 12 | color: #aaa; 13 | } 14 | .form-box button{ 15 | margin:30rpx 30rpx 0 0; 16 | } -------------------------------------------------------------------------------- /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/address/address.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /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/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(e){ 23 | const value = e.detail.value; 24 | if (value.name && value.phone && value.detail){ 25 | wx.setStorage({ 26 | key: 'address', 27 | data: value, 28 | success(){ 29 | wx.navigateBack(); 30 | } 31 | }) 32 | }else{ 33 | wx.showModal({ 34 | title:'提示', 35 | content:'请填写完整资料', 36 | showCancel:false 37 | }) 38 | } 39 | } 40 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wxapp-mall 2 | 微信小程序 商城（uni-app 版本的代码请看[uni分支](https://github.com/lin-xin/wxapp-mall/tree/uni)，可打包成APP、小程序、H5） 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 | - [x] 地址管理 20 | 21 | ## 实现效果 22 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/1.jpg) 23 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/2.jpg) 24 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/3.jpg) 25 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/4.jpg) 26 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/5.jpg) 27 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/6.jpg) 28 | 29 | ## 运行 30 | 需要安装有微信开发者工具。 31 | 把项目下载到本地。 32 | 在微信开发者工具中打开该项目则可预览。 -------------------------------------------------------------------------------- /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/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/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 | self.setData({ 22 | detail : res.data 23 | }) 24 | } 25 | }); 26 | 27 | }, 28 | switchTab(e){ 29 | const self = this; 30 | this.setData({ 31 | isScroll: true 32 | }) 33 | setTimeout(function(){ 34 | self.setData({ 35 | toView: e.target.dataset.id, 36 | curIndex: e.target.dataset.index 37 | }) 38 | },0) 39 | setTimeout(function () { 40 | self.setData({ 41 | isScroll: false 42 | }) 43 | },1) 44 | 45 | } 46 | 47 | }) -------------------------------------------------------------------------------- /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 | text:'center', 49 | complete() { 50 | wx.switchTab({ 51 | url: '/page/component/user/user' 52 | }) 53 | } 54 | }) 55 | } 56 | }) -------------------------------------------------------------------------------- /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/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.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 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/index.wxss: -------------------------------------------------------------------------------- 1 | @import '../common/common.wxss'; 2 | .search{ 3 | padding: 20rpx; 4 | } 5 | .search-text{ 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 50rpx; 10 | color: #aaa; 11 | text-align: center; 12 | border: 1px solid #ddd; 13 | border-radius: 20rpx; 14 | } 15 | .search-text icon{ 16 | margin-right: 10rpx; 17 | } 18 | swiper { 19 | height: 421.5rpx; 20 | } 21 | swiper-item image { 22 | width: 100%; 23 | height: 100%; 24 | } 25 | 26 | .select-title,.newest-title{ 27 | width: 100%; 28 | padding:30rpx 0; 29 | height: 40rpx; 30 | color: #AB956D; 31 | text-align: center; 32 | } 33 | .select-top-small{ 34 | width: 375rpx; 35 | height: 375rpx; 36 | float: left; 37 | } 38 | .select-bottom,.select-top{ 39 | width: 100%; 40 | height: 375rpx; 41 | } 42 | .select-top-small image,.select-bottom image,.select-top-small navigator,.select-bottom navigator{ 43 | display: block; 44 | width: 100%; 45 | height: 100%; 46 | } 47 | 48 | .newest-box{ 49 | padding:0 40rpx; 50 | } 51 | .newest-box .newest-list{ 52 | display: inline-block; 53 | width: 325rpx; 54 | height: 325rpx; 55 | margin:0 20rpx 20rpx 0; 56 | border-radius: 10px; 57 | text-align: center; 58 | background: #f5f6f5; 59 | } 60 | .newest-box .newest-list:nth-child(2n){ 61 | margin-right: 0; 62 | } 63 | .newest-box .newest-list image{ 64 | width: 175rpx; 65 | height: 175rpx; 66 | margin: 20rpx 0 10rpx; 67 | } 68 | .newest-box .newest-list .newest-text{ 69 | font-size: 32rpx; 70 | } -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "enhance": false, 10 | "postcss": true, 11 | "preloadBackgroundData": false, 12 | "minified": true, 13 | "newFeature": true, 14 | "coverView": true, 15 | "nodeModules": false, 16 | "autoAudits": false, 17 | "showShadowRootInWxmlPanel": true, 18 | "scopeDataCheck": false, 19 | "uglifyFileName": false, 20 | "checkInvalidKey": true, 21 | "checkSiteMap": true, 22 | "uploadWithSourceMap": true, 23 | "compileHotReLoad": false, 24 | "useMultiFrameRuntime": false, 25 | "useApiHook": true, 26 | "babelSetting": { 27 | "ignore": [], 28 | "disablePlugins": [], 29 | "outputPath": "" 30 | }, 31 | "enableEngineNative": false, 32 | "bundle": false, 33 | "useIsolateContext": true, 34 | "useCompilerModule": true, 35 | "userConfirmedUseCompilerModuleSwitch": false, 36 | "userConfirmedBundleSwitch": false, 37 | "packNpmManually": false, 38 | "packNpmRelationList": [], 39 | "minifyWXSS": true 40 | }, 41 | "compileType": "miniprogram", 42 | "libVersion": "1.9.98", 43 | "appid": "wx3fcd3d1f852bac09", 44 | "projectname": "wxapp-mall", 45 | "isGameTourist": false, 46 | "simulatorType": "wechat", 47 | "simulatorPluginLibVersion": {}, 48 | "condition": { 49 | "search": { 50 | "list": [] 51 | }, 52 | "conversation": { 53 | "list": [] 54 | }, 55 | "plugin": { 56 | "list": [] 57 | }, 58 | "game": { 59 | "currentL": -1, 60 | "list": [] 61 | }, 62 | "miniprogram": { 63 | "list": [] 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /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 | "page/component/search/search" 12 | ], 13 | "window": { 14 | "navigationBarTextStyle": "white", 15 | "navigationBarTitleText": "零食商贩", 16 | "navigationBarBackgroundColor": "#AB956D", 17 | "backgroundColor": "#eeeeee", 18 | "enablePullDownRefresh": true 19 | }, 20 | "tabBar": { 21 | "color": "#b7b7b7", 22 | "selectedColor": "#AB956D", 23 | "borderStyle": "white", 24 | "backgroundColor": "#f5f5f5", 25 | "list": [ 26 | { 27 | "pagePath": "page/component/index", 28 | "iconPath": "image/12.png", 29 | "selectedIconPath": "image/11.png", 30 | "text": "主页" 31 | }, 32 | { 33 | "pagePath": "page/component/category/category", 34 | "iconPath": "image/22.png", 35 | "selectedIconPath": "image/21.png", 36 | "text": "分类" 37 | }, 38 | { 39 | "pagePath": "page/component/cart/cart", 40 | "iconPath": "image/32.png", 41 | "selectedIconPath": "image/31.png", 42 | "text": "购物车" 43 | }, 44 | { 45 | "pagePath": "page/component/user/user", 46 | "iconPath": "image/42.png", 47 | "selectedIconPath": "image/41.png", 48 | "text": "我的" 49 | } 50 | ] 51 | }, 52 | "networkTimeout": { 53 | "request": 10000, 54 | "connectSocket": 10000, 55 | "uploadFile": 10000, 56 | "downloadFile": 10000 57 | }, 58 | "debug": false, 59 | "sitemapLocation": "sitemap.json" 60 | } -------------------------------------------------------------------------------- /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/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/cart/cart.wxml: -------------------------------------------------------------------------------- 1 | 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 | 25 | 全选 26 | ￥{{totalPrice}} 27 | 28 | 29 | 30 | 购物车是空的哦~ 31 | 32 | -------------------------------------------------------------------------------- /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/search/search.js: -------------------------------------------------------------------------------- 1 | let timeId = null; 2 | Page({ 3 | data: { 4 | history: [], 5 | hot: ['新鲜芹菜', '大红枣', '滋补桂圆干'], 6 | result: [ 7 | { 8 | id: 1, 9 | url: '../details/details', 10 | thumb: '/image/s4.png', 11 | title: '瓜子 100g', 12 | price: 0.01 13 | }, 14 | { 15 | id: 2, 16 | url: '../details/details', 17 | thumb: '/image/s5.png', 18 | title: '新鲜芹菜 500g', 19 | price: 0.02 20 | } 21 | ], 22 | showKeywords: false, 23 | keywords: ['山东肚脐橙', '湖南冰糖橙', '麻涌香蕉', '冰糖心苹果'], 24 | value: '', 25 | showResult: false, 26 | }, 27 | cancelSearch() { 28 | this.setData({ 29 | showResult: false, 30 | showKeywords: false, 31 | value: '' 32 | }) 33 | }, 34 | searchInput(e) { 35 | if(!e.detail.value){ 36 | this.setData({ 37 | showKeywords: false 38 | }) 39 | }else{ 40 | if(!this.data.showKeywords){ 41 | timeId && clearTimeout(timeId); 42 | timeId = setTimeout(() => { 43 | this.setData({ 44 | showKeywords: true 45 | }) 46 | }, 1000) 47 | } 48 | } 49 | }, 50 | keywordHandle(e) { 51 | const text = e.target.dataset.text; 52 | this.setData({ 53 | value: text, 54 | showKeywords: false, 55 | showResult: true 56 | }) 57 | this.historyHandle(text); 58 | }, 59 | historyHandle(value) { 60 | let history = this.data.history; 61 | const idx = history.indexOf(value); 62 | if (idx === -1) { 63 | // 搜索记录只保留8个 64 | if (history.length > 7) { 65 | history.pop(); 66 | } 67 | } else { 68 | history.splice(idx, 1); 69 | } 70 | history.unshift(value); 71 | wx.setStorageSync('history', JSON.stringify(history)); 72 | this.setData({ 73 | history 74 | }); 75 | }, 76 | onLoad() { 77 | const history = wx.getStorageSync('history'); 78 | if (history) { 79 | this.setData({ 80 | history: JSON.parse(history) 81 | }) 82 | console.log(this.data.history); 83 | } 84 | } 85 | }) -------------------------------------------------------------------------------- /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 | } 96 | .order-icon image,.order-icon navigator{ 97 | display: block; 98 | width: 45rpx; 99 | height: 45rpx; 100 | } 101 | .cart-toatl-price{ 102 | float: right; 103 | width: 120rpx; 104 | } 105 | 106 | .cart-no-data{ 107 | padding:40rpx 0; 108 | color: #999; 109 | text-align: center; 110 | } -------------------------------------------------------------------------------- /page/component/search/search.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 取消 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{item.title}} 14 | 15 | 16 | ￥ {{item.price}} 17 | 18 | 19 | 20 | 21 | 22 | Oh~~ 搜索结果为空！ 23 | 24 | 相关推荐 25 | 26 | 27 | 28 | 29 | 30 | 31 | {{item.title}} 32 | 33 | 34 | ￥ {{item.price}} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 搜索记录 45 | 46 | 47 | {{item}} 48 | 49 | 50 | 51 | 热点推荐 52 | 53 | 54 | {{item}} 55 | 56 | 57 | 58 | 59 | {{item}} 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /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 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /page/component/search/search.wxss: -------------------------------------------------------------------------------- 1 | @import '../../common/common.wxss'; 2 | .main{ 3 | padding: 0 20rpx; 4 | } 5 | .search-box { 6 | position: relative; 7 | display: flex; 8 | justify-content: space-between; 9 | padding-top: 26rpx; 10 | } 11 | .search-input { 12 | flex: 1; 13 | height: 60rpx; 14 | line-height: 60rpx; 15 | padding: 0 20rpx 0 54rpx; 16 | background: #f8f8f8; 17 | border-radius: 10rpx; 18 | font-size: 32rpx; 19 | border: 2rpx solid #ddd; 20 | } 21 | 22 | .search-icon { 23 | position: absolute; 24 | left: 15rpx; 25 | top: 44rpx; 26 | width: 35rpx; 27 | height: 35rpx; 28 | } 29 | .search-btn{ 30 | font-size: 32rpx; 31 | padding: 0 20rpx; 32 | line-height: 64rpx; 33 | } 34 | .title{ 35 | font-size: 32rpx; 36 | margin: 30rpx 0; 37 | } 38 | .title text{ 39 | padding-right: 30rpx; 40 | padding-bottom: 10rpx; 41 | color: #AB956D; 42 | border-bottom: 8rpx solid #AB956D; 43 | } 44 | .tags text{ 45 | display: inline-block; 46 | font-size: 28rpx; 47 | padding: 6rpx 20rpx; 48 | border: 2rpx solid #ddd; 49 | color: #aaa; 50 | margin: 0 30rpx 20rpx 0; 51 | border-radius: 40rpx; 52 | word-break: break-all; 53 | } 54 | .keywords{ 55 | position: absolute; 56 | width: 100%; 57 | left: 0; 58 | top: 90rpx; 59 | background: #fff; 60 | z-index: 9; 61 | padding: 20rpx; 62 | box-sizing: border-box; 63 | } 64 | .keywords-item{ 65 | line-height: 70rpx; 66 | border-bottom: 1px solid #eee; 67 | color: #787878; 68 | font-size: 28rpx; 69 | } 70 | .result{ 71 | margin-top: 40rpx; 72 | } 73 | 74 | .result-box, .recommend-box{ 75 | padding:0 20rpx; 76 | } 77 | .result-list{ 78 | display: inline-block; 79 | width: 325rpx; 80 | height: 325rpx; 81 | margin:0 20rpx 20rpx 0; 82 | border-radius: 10px; 83 | text-align: center; 84 | background: #f5f6f5; 85 | } 86 | .result-list:nth-child(2n){ 87 | margin-right: 0; 88 | } 89 | .result-list image{ 90 | width: 175rpx; 91 | height: 175rpx; 92 | margin: 20rpx 0 10rpx; 93 | } 94 | .result-list .result-text{ 95 | font-size: 32rpx; 96 | } 97 | .null-tips{ 98 | padding: 200rpx 0; 99 | text-align: center; 100 | color: #787878; 101 | } 102 | 103 | /* 相关推荐 */ 104 | .recommend-title{ 105 | position: relative; 106 | height: 0; 107 | width: 1005; 108 | border-bottom: 1px solid #f0f0f1; 109 | margin-bottom: 42rpx; 110 | } 111 | .recommend-title text{ 112 | position: absolute; 113 | left: 50%; 114 | top: -20rpx; 115 | width: 150rpx; 116 | height: 40rpx; 117 | margin-left: -75rpx; 118 | line-height: 40rpx; 119 | background: #ffffff; 120 | color: #5e5e5e; 121 | font-size: 28rpx; 122 | font-weight: bold; 123 | text-align: center; 124 | letter-spacing: 1px; 125 | } -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | obj:{ 9 | name:"hello" 10 | } 11 | }, 12 | onShow() { 13 | this.setData({ 14 | hasList: true, 15 | carts:[ 16 | {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true}, 17 | {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true} 18 | ] 19 | }); 20 | this.getTotalPrice(); 21 | }, 22 | /** 23 | * 当前商品选中事件 24 | */ 25 | selectList(e) { 26 | const index = e.currentTarget.dataset.index; 27 | let carts = this.data.carts; 28 | const selected = carts[index].selected; 29 | carts[index].selected = !selected; 30 | this.setData({ 31 | carts: carts 32 | }); 33 | this.getTotalPrice(); 34 | }, 35 | 36 | /** 37 | * 删除购物车当前商品 38 | */ 39 | deleteList(e) { 40 | const index = e.currentTarget.dataset.index; 41 | let carts = this.data.carts; 42 | carts.splice(index,1); 43 | this.setData({ 44 | carts: carts 45 | }); 46 | if(!carts.length){ 47 | this.setData({ 48 | hasList: false 49 | }); 50 | }else{ 51 | this.getTotalPrice(); 52 | } 53 | }, 54 | 55 | /** 56 | * 购物车全选事件 57 | */ 58 | selectAll(e) { 59 | let selectAllStatus = this.data.selectAllStatus; 60 | selectAllStatus = !selectAllStatus; 61 | let carts = this.data.carts; 62 | 63 | for (let i = 0; i < carts.length; i++) { 64 | carts[i].selected = selectAllStatus; 65 | } 66 | this.setData({ 67 | selectAllStatus: selectAllStatus, 68 | carts: carts 69 | }); 70 | this.getTotalPrice(); 71 | }, 72 | 73 | /** 74 | * 绑定加数量事件 75 | */ 76 | addCount(e) { 77 | const index = e.currentTarget.dataset.index; 78 | let carts = this.data.carts; 79 | let num = carts[index].num; 80 | num = num + 1; 81 | carts[index].num = num; 82 | this.setData({ 83 | carts: carts 84 | }); 85 | this.getTotalPrice(); 86 | }, 87 | 88 | /** 89 | * 绑定减数量事件 90 | */ 91 | minusCount(e) { 92 | const index = e.currentTarget.dataset.index; 93 | const obj = e.currentTarget.dataset.obj; 94 | let carts = this.data.carts; 95 | let num = carts[index].num; 96 | if(num <= 1){ 97 | return false; 98 | } 99 | num = num - 1; 100 | carts[index].num = num; 101 | this.setData({ 102 | carts: carts 103 | }); 104 | this.getTotalPrice(); 105 | }, 106 | 107 | /** 108 | * 计算总价 109 | */ 110 | getTotalPrice() { 111 | let carts = this.data.carts; // 获取购物车列表 112 | let total = 0; 113 | for(let i = 0; i 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 | 36 | 37 | 38 | 最近新品 39 | 40 | 41 | 42 | 43 | 瓜子 100g 44 | ￥ 0.01 45 | 46 | 47 | 48 | 49 | 50 | 芹菜 半斤 51 | ￥ 0.02 52 | 53 | 54 | 55 | 56 | 57 | 素米 375g 58 | ￥ 0.03 59 | 60 | 61 | 62 | 63 | 64 | 瓜子 100g 65 | ￥ 0.01 66 | 67 | 68 | 69 | 70 | 71 | 芹菜 半斤 72 | ￥ 0.02 73 | 74 | 75 | 76 | 77 | 78 | 素米 375g 79 | ￥ 0.03 80 | 81 | 82 | 83 | 84 | 85 | 瓜子 100g 86 | ￥ 0.01 87 | 88 | 89 | 90 | 91 | 92 | 芹菜 半斤 93 | ￥ 0.02 94 | 95 | 96 | 97 | 98 | 99 | 素米 375g 100 | ￥ 0.03 101 | 102 | 103 | 104 | 105 | --------------------------------------------------------------------------------