├── README.md ├── app.js ├── app.json ├── app.wxss ├── assets ├── img │ ├── avatar.jpg │ ├── cart.gif │ ├── cart1.gif │ └── search.jpg └── wxss │ ├── iconfont.wxss │ └── iconfont1.wxss ├── components ├── SearchInput │ ├── SearchInput.js │ ├── SearchInput.json │ ├── SearchInput.less │ ├── SearchInput.wxml │ └── SearchInput.wxss └── TabBar │ ├── TabBar.js │ ├── TabBar.json │ ├── TabBar.less │ ├── TabBar.wxml │ └── TabBar.wxss ├── icons ├── cart-o.png ├── cart.png ├── category-o.png ├── category.png ├── home-o.png ├── home.png ├── my-o.png └── my.png ├── pages ├── cart │ ├── cart.js │ ├── cart.json │ ├── cart.less │ ├── cart.wxml │ ├── cart.wxss │ ├── index.js │ ├── index.json │ ├── index.less │ └── index.wxml ├── category │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── collect │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── goods_detail │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── goods_list │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── index │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── order │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── pay │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── search │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss └── user │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ └── index.wxss ├── project.config.json ├── request └── index.js ├── sitemap.json └── utils └── asyncWX.js /README.md: -------------------------------------------------------------------------------- 1 | # ZZ-Shop 2 | **项目简介：** 3 | 该商城是基于原生微信小程序来实现的。 4 | **已完成功能：** 5 | - 登录授权 6 | - 商品添加进购物车、购物车删除商品 7 | - 展示个人中心、首页、商品详情 8 | - 搜索商品 9 | - 收藏商品 10 | - 订单查询 11 | 12 | 接口在此：https://blog.csdn.net/weixin_43950643/article/details/107796815 13 | ### 截图如下： 14 | ##### 首页： 15 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804205816667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 16 | 17 | ##### 商品分类： 18 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804205839639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 19 | 20 | ##### 有商品时的购物车： 21 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804205916933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 22 | 23 | ##### 无商品时的购物车： 24 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804205912643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 25 | 26 | 27 | ##### 购物车（删除商品）： 28 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804205933646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 29 | 30 | ##### 登录后的个人中心： 31 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804205948434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 32 | 33 | 34 | ##### 没有登录的个人中心： 35 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020080421000230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 36 | 37 | ##### 搜索商品页面： 38 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804210018547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 39 | 40 | ##### 商品详情页面： 41 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804210031485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 42 | 43 | 44 | ##### 商品列表页面： 45 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804210041952.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 46 | 47 | 48 | ##### 订单查询页面： 49 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804210104126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 50 | 51 | 52 | ##### 商品收藏页面： 53 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804210116247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70) 54 | 55 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | //onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData)) 4 | onLaunch: function(options){ 5 | 6 | }, 7 | onShow: function(options){ 8 | 9 | }, 10 | onHide: function(){ 11 | 12 | }, 13 | onError: function(msg){ 14 | 15 | }, 16 | //options(path,query,isEntryPage) 17 | onPageNotFound: function(options){ 18 | 19 | } 20 | }); -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/category/index", 5 | "pages/goods_list/index", 6 | "pages/goods_detail/index", 7 | "pages/cart/index", 8 | "pages/collect/index", 9 | "pages/order/index", 10 | "pages/search/index", 11 | "pages/user/index", 12 | "pages/pay/index", 13 | "pages/cart/cart" 14 | ], 15 | "window": { 16 | "backgroundTextStyle": "light", 17 | "navigationBarBackgroundColor": "#19CAAD", 18 | "navigationBarTitleText": "优购", 19 | "navigationBarTextStyle": "white" 20 | }, 21 | "tabBar": { 22 | "color": "#999", 23 | "selectedColor": "#ff2d4a", 24 | "backgroundColor": "#fafafa", 25 | "list": [ 26 | { 27 | "pagePath": "pages/index/index", 28 | "text": "首页", 29 | "iconPath": "icons/home.png", 30 | "selectedIconPath": "icons/home-o.png" 31 | }, 32 | { 33 | "pagePath": "pages/category/index", 34 | "text": "分类", 35 | "iconPath": "icons/category.png", 36 | "selectedIconPath": "icons/category-o.png" 37 | }, 38 | { 39 | "pagePath": "pages/cart/cart", 40 | "text": "购物车", 41 | "iconPath": "icons/cart.png", 42 | "selectedIconPath": "icons/cart-o.png" 43 | }, 44 | { 45 | "pagePath": "pages/user/index", 46 | "text": "我的", 47 | "iconPath": "icons/my.png", 48 | "selectedIconPath": "icons/my-o.png" 49 | } 50 | ] 51 | }, 52 | "style": "v2", 53 | "sitemapLocation": "sitemap.json" 54 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | 3 | @import "./assets/wxss/iconfont.wxss"; 4 | @import "./assets/wxss/iconfont1.wxss"; 5 | page, view, text, swiper, swiper-item, image, navigator{ 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | page { 11 | /* 主题颜色 */ 12 | --themeColor:#19CAAD; 13 | /* 定义统一的字体大小 假如设计稿是375px 14 | 1px = 2rpx 15 | 14px = 28rpx 16 | */ 17 | font-size: 28rpx; 18 | } 19 | .ellipsis{ 20 | overflow: hidden; 21 | display: -webkit-box; 22 | -webkit-line-clamp:2; 23 | -webkit-box-orient: vertical; 24 | } -------------------------------------------------------------------------------- /assets/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/assets/img/avatar.jpg -------------------------------------------------------------------------------- /assets/img/cart.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/assets/img/cart.gif -------------------------------------------------------------------------------- /assets/img/cart1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/assets/img/cart1.gif -------------------------------------------------------------------------------- /assets/img/search.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/assets/img/search.jpg -------------------------------------------------------------------------------- /assets/wxss/iconfont.wxss: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879'); /* IE9 */ 3 | src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), 5 | url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.woff?t=1558237601879') format('woff'), 6 | url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.ttf?t=1558237601879') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.svg?t=1558237601879#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-shoucang1:before { 19 | content: "\e631"; 20 | } 21 | 22 | .icon-shoucang:before { 23 | content: "\e66d"; 24 | } 25 | 26 | .icon-receipt-address:before { 27 | content: "\e673"; 28 | } 29 | 30 | .icon-kefu:before { 31 | content: "\e601"; 32 | } 33 | 34 | .icon-fukuantongzhi:before { 35 | content: "\e60c"; 36 | } 37 | 38 | .icon-ding_dan:before { 39 | content: "\e61b"; 40 | } 41 | 42 | .icon-yixianshi-:before { 43 | content: "\e616"; 44 | } 45 | 46 | .icon-gouwuche:before { 47 | content: "\e610"; 48 | } 49 | 50 | .icon-tuihuotuikuan_dianpu:before { 51 | content: "\e773"; 52 | } 53 | -------------------------------------------------------------------------------- /assets/wxss/iconfont1.wxss: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('//at.alicdn.com/t/font_1981701_1ym0r092sq4.eot?t=1596529950218'); /* IE9 */ 3 | src: url('//at.alicdn.com/t/font_1981701_1ym0r092sq4.eot?t=1596529950218#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), 5 | url('//at.alicdn.com/t/font_1981701_1ym0r092sq4.woff?t=1596529950218') format('woff'), 6 | url('//at.alicdn.com/t/font_1981701_1ym0r092sq4.ttf?t=1596529950218') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('//at.alicdn.com/t/font_1981701_1ym0r092sq4.svg?t=1596529950218#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-youjiantou:before { 19 | content: "\e60f"; 20 | } 21 | 22 | .icon-jiantou_youxia:before { 23 | content: "\e6e4"; 24 | } 25 | 26 | .icon-sousuo:before { 27 | content: "\e603"; 28 | } 29 | 30 | .icon-sousuo-:before { 31 | content: "\e64d"; 32 | } 33 | 34 | .icon-shoucang22:before { 35 | content: "\e679"; 36 | } 37 | 38 | .icon-shoucang11:before { 39 | content: "\e653"; 40 | } 41 | 42 | .icon-tuijian:before { 43 | content: "\e60e"; 44 | } 45 | 46 | .icon-yijian:before { 47 | content: "\e613"; 48 | } 49 | 50 | .icon-iconzhengli-:before { 51 | content: "\e60d"; 52 | } 53 | 54 | .icon-juminyijian:before { 55 | content: "\e631"; 56 | } 57 | 58 | .icon-daishouhuo2:before { 59 | content: "\e642"; 60 | } 61 | 62 | .icon-kefu:before { 63 | content: "\e699"; 64 | } 65 | 66 | .icon-yijian-tianchong:before { 67 | content: "\e64e"; 68 | } 69 | 70 | .icon-tuikuan:before { 71 | content: "\e75a"; 72 | } 73 | 74 | .icon-shouye:before { 75 | content: "\e628"; 76 | } 77 | 78 | .icon-shouye1:before { 79 | content: "\e643"; 80 | } 81 | 82 | .icon-dingdan:before { 83 | content: "\e635"; 84 | } 85 | 86 | .icon-sweep:before { 87 | content: "\e6c4"; 88 | } 89 | 90 | .icon-daishouhuo:before { 91 | content: "\e622"; 92 | } 93 | 94 | .icon-daishouhuo1:before { 95 | content: "\e641"; 96 | } 97 | 98 | .icon-tui:before { 99 | content: "\e62c"; 100 | } 101 | 102 | .icon-yonghu:before { 103 | content: "\e640"; 104 | } 105 | 106 | .icon-yonghu1:before { 107 | content: "\e607"; 108 | } 109 | 110 | .icon-yiliaohangyedeICON-:before { 111 | content: "\e627"; 112 | } 113 | 114 | .icon-jiantou:before { 115 | content: "\e7a7"; 116 | } 117 | 118 | .icon-dizhi:before { 119 | content: "\e6d4"; 120 | } 121 | 122 | .icon-shanchu:before { 123 | content: "\e620"; 124 | } 125 | 126 | .icon-shanchu1:before { 127 | content: "\e626"; 128 | } 129 | 130 | .icon-shanchu2:before { 131 | content: "\e606"; 132 | } 133 | 134 | .icon-xuanzhong:before { 135 | content: "\e611"; 136 | } 137 | 138 | .icon-gouwuche:before { 139 | content: "\e634"; 140 | } 141 | 142 | .icon-xuanzhong1:before { 143 | content: "\e60a"; 144 | } 145 | -------------------------------------------------------------------------------- /components/SearchInput/SearchInput.js: -------------------------------------------------------------------------------- 1 | // components/SearchInput/SearchInput.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | 8 | }, 9 | 10 | /** 11 | * 组件的初始数据 12 | */ 13 | data: { 14 | 15 | }, 16 | 17 | /** 18 | * 组件的方法列表 19 | */ 20 | methods: { 21 | 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /components/SearchInput/SearchInput.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/SearchInput/SearchInput.less: -------------------------------------------------------------------------------- 1 | /* components/SearchInput/SearchInput.wxss */ 2 | .search-input{ 3 | height: 90rpx; 4 | padding: 10rpx; 5 | background-color: var(--themeColor); 6 | navigator { 7 | height: 100%; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | background-color: #fff; 12 | border-radius: 15rpx; 13 | color: #666; 14 | } 15 | } -------------------------------------------------------------------------------- /components/SearchInput/SearchInput.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 搜索 5 | 6 | -------------------------------------------------------------------------------- /components/SearchInput/SearchInput.wxss: -------------------------------------------------------------------------------- 1 | /* components/SearchInput/SearchInput.wxss */ 2 | .search-input { 3 | height: 90rpx; 4 | padding: 10rpx; 5 | background-color: var(--themeColor); 6 | } 7 | .search-input navigator { 8 | height: 100%; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | background-color: #fff; 13 | border-radius: 15rpx; 14 | color: #666; 15 | } 16 | -------------------------------------------------------------------------------- /components/TabBar/TabBar.js: -------------------------------------------------------------------------------- 1 | // components/TabBar/TabBar.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | titles: { type: Array, value: [] } 8 | }, 9 | 10 | /** 11 | * 组件的初始数据 12 | */ 13 | data: { 14 | currentIndex: 0 15 | }, 16 | 17 | /** 18 | * 组件的方法列表 19 | */ 20 | methods: { 21 | handleItemTap(e) { 22 | const { index } = e.currentTarget.dataset; 23 | this.setData({ 24 | currentIndex:index 25 | }) 26 | this.triggerEvent("tabItemChange",{index}) 27 | } 28 | } 29 | }) 30 | -------------------------------------------------------------------------------- /components/TabBar/TabBar.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/TabBar/TabBar.less: -------------------------------------------------------------------------------- 1 | /* components/TabBar/TabBar.wxss */ 2 | .tabbar { 3 | background-color: #fff; 4 | .tabbar-title { 5 | display: flex; 6 | .tabbar-item { 7 | display: flex; 8 | justify-content: center; 9 | align-items:center; 10 | flex:1; 11 | padding: 15rpx 0; 12 | } 13 | } 14 | .active{ 15 | color: var(--themeColor); 16 | border-bottom: 5rpx solid; 17 | } 18 | } -------------------------------------------------------------------------------- /components/TabBar/TabBar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | {{item.name}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /components/TabBar/TabBar.wxss: -------------------------------------------------------------------------------- 1 | /* components/TabBar/TabBar.wxss */ 2 | .tabbar { 3 | background-color: #fff; 4 | } 5 | .tabbar .tabbar-title { 6 | display: flex; 7 | } 8 | .tabbar .tabbar-title .tabbar-item { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | flex: 1; 13 | padding: 15rpx 0; 14 | } 15 | .tabbar .active { 16 | color: var(--themeColor); 17 | border-bottom: 5rpx solid; 18 | } 19 | -------------------------------------------------------------------------------- /icons/cart-o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/cart-o.png -------------------------------------------------------------------------------- /icons/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/cart.png -------------------------------------------------------------------------------- /icons/category-o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/category-o.png -------------------------------------------------------------------------------- /icons/category.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/category.png -------------------------------------------------------------------------------- /icons/home-o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/home-o.png -------------------------------------------------------------------------------- /icons/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/home.png -------------------------------------------------------------------------------- /icons/my-o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/my-o.png -------------------------------------------------------------------------------- /icons/my.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/ZZ-Shop/5d47ecc8ea8c4a97198f2416bee03f4e13f95219/icons/my.png -------------------------------------------------------------------------------- /pages/cart/cart.js: -------------------------------------------------------------------------------- 1 | // pages/cart/cart.js 2 | /** 3 | * 购物车全选功能： 4 | * * onShow 获取缓存中的购物车数组 5 | * * 根据购物车中的商品数据 所有的商品都被选中 ischecked = true 6 | */ 7 | Page({ 8 | 9 | /** 10 | * 页面的初始数据 11 | */ 12 | data: { 13 | cart: [], 14 | allCheck: false, 15 | totalPrice: 0, 16 | isChecked: [], 17 | isManage: false 18 | }, 19 | onShow() { 20 | const cart = wx.getStorageSync("cart") || []; 21 | this.getTotalAndPrice(cart) 22 | }, 23 | /** 24 | * 商品选中按钮的更改 25 | * @param {*} e 26 | */ 27 | handleCheckChange(e) { 28 | const { id } = e.currentTarget.dataset; 29 | const { cart } = this.data; 30 | let currentItem = cart.find(item => { 31 | return item.goods_id === id 32 | }) 33 | currentItem.isChecked = !currentItem.isChecked 34 | this.setData({ 35 | cart 36 | }) 37 | wx.setStorageSync("cart", cart); 38 | this.getTotalAndPrice(cart) 39 | }, 40 | /** 41 | * 获取总数量和总价格 42 | * @param {*} cart 43 | */ 44 | getTotalAndPrice(cart) { 45 | 46 | /** 47 | * every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个会使 callback 返回 false 的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true 48 | */ 49 | const isChecked = this.filterCheck(cart,true) 50 | const allChecked = cart.length ? cart.every(item => item.isChecked) : false 51 | const totalPrice = isChecked.reduce((preValue, nowValue) => { 52 | return preValue + nowValue.goods_price * nowValue.num 53 | }, 0) 54 | this.setData({ 55 | cart, 56 | allCheck: allChecked, 57 | totalPrice, 58 | isChecked: isChecked 59 | }) 60 | }, 61 | /** 62 | * 全选按钮的反选 63 | */ 64 | handleAllChecked() { 65 | const { cart } = this.data; 66 | cart.length && cart.forEach(item => { 67 | item.isChecked = !item.isChecked 68 | }); 69 | this.getTotalAndPrice(cart) 70 | }, 71 | /** 72 | * 商品数量的增加或减少 73 | */ 74 | handleItemNumberEdit(e) { 75 | const { id, type } = e.currentTarget.dataset 76 | const { cart } = this.data 77 | const index = cart.findIndex(item => item.goods_id === id); 78 | /** 79 | * 如果num数量为1,type=-1时不能再减少 80 | */ 81 | if (type === 1) { 82 | cart[index].num += type; 83 | } else if (type === -1) { 84 | if (cart[index].num !== 1) { 85 | cart[index].num += type; 86 | } 87 | } 88 | wx.setStorageSync("cart", cart); 89 | this.getTotalAndPrice(cart) 90 | }, 91 | /** 92 | * 切换删除和购买管理 93 | */ 94 | handleManageTap() { 95 | const {cart} = this.data 96 | cart.map(item=>{ 97 | return item.isChecked=false 98 | }) 99 | wx.setStorageSync("cart", cart); 100 | this.setData({ 101 | isManage: !this.data.isManage, 102 | cart, 103 | allCheck:false 104 | }) 105 | }, 106 | handleDeleteGoods(){ 107 | const {cart} = this.data; 108 | const isDelete = this.filterCheck(cart,true) 109 | if(isDelete.length){ 110 | wx.showModal({ 111 | title: '温馨提示', 112 | content: '确定将这些宝贝删除', 113 | cancelText:'我再想想', 114 | confirmText:'删除', 115 | cancelColor:'#333', 116 | confirmColor:'#EE6363', 117 | success: (res)=> { 118 | if (res.confirm) { 119 | const noDeleteGoods = this.filterCheck(cart,false) 120 | wx.setStorageSync("cart",noDeleteGoods) 121 | this.getTotalAndPrice(noDeleteGoods) 122 | } else if (res.cancel) { 123 | console.log('用户点击取消') 124 | } 125 | } 126 | }) 127 | }else { 128 | wx.showToast({ 129 | title: '您还没有选择宝贝哦', 130 | icon:'none' 131 | }) 132 | } 133 | }, 134 | filterCheck(cart,type){ 135 | /** 136 | * type为true的时候，isChecked为true 137 | */ 138 | if(type){ 139 | return cart.filter(item => { 140 | return item.isChecked === true 141 | }) 142 | } else { 143 | return cart.filter(item => { 144 | return item.isChecked === false 145 | }) 146 | } 147 | }, 148 | // 点击结算功能 149 | handlePay(){ 150 | const {isChecked} = this.data; 151 | wx.setStorageSync("payGoods", isChecked); 152 | if(isChecked){ 153 | wx.navigateTo({ 154 | url: '/pages/pay/index' 155 | }); 156 | }else { 157 | wx.showToast({ 158 | title: '你还没有选购商品~', 159 | icon:"none" 160 | }); 161 | } 162 | } 163 | }) -------------------------------------------------------------------------------- /pages/cart/cart.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarTitleText": "购物车" 4 | } -------------------------------------------------------------------------------- /pages/cart/cart.less: -------------------------------------------------------------------------------- 1 | /* pages/cart/cart.wxss */ 2 | Page { 3 | background-color: rgba(218,218,218,0.2); 4 | } 5 | .hasGoods{ 6 | .cart-bg{ 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | left: 0; 11 | height: 240rpx; 12 | background-color: var(--themeColor); 13 | color: #ffffff; 14 | z-index:-1; 15 | } 16 | .cart-top{ 17 | background-color: #fff; 18 | border-radius: 10rpx; 19 | margin: 20rpx 40rpx; 20 | padding: 20rpx; 21 | font-weight: 600; 22 | font-size: 30rpx; 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | .top-right{ 27 | color: rgb(238, 132, 46); 28 | } 29 | .top-left{ 30 | font-size: 24rpx; 31 | color: #666666; 32 | } 33 | } 34 | .goods-list{ 35 | margin:10rpx 40rpx 0; 36 | .goods-item{ 37 | margin-top: 20rpx; 38 | border-radius: 10rpx; 39 | background-color: #fff; 40 | display: flex; 41 | padding: 20rpx; 42 | .check{ 43 | flex:0.5; 44 | color: rgba(100, 100, 100, 0.2); 45 | display: flex; 46 | align-items: center; 47 | padding-right: 10rpx; 48 | } 49 | .active { 50 | color: var(--themeColor); 51 | } 52 | .img-wrap{ 53 | flex: 3; 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | image { 58 | width: 70%; 59 | } 60 | } 61 | .goods-info{ 62 | flex:6; 63 | padding-left: 20rpx; 64 | display: flex; 65 | flex-direction:column; 66 | justify-content:space-around; 67 | .goods-name{ 68 | font-size: 30rpx; 69 | color: #000; 70 | } 71 | .goods-price-num{ 72 | display: flex; 73 | margin-top: 10rpx; 74 | .goods-price{ 75 | color: #fa0000; 76 | font-size: 32rpx; 77 | margin-right: 20rpx; 78 | } 79 | .goods-num{ 80 | display: flex; 81 | align-items:center; 82 | margin-left: 40rpx; 83 | .num { 84 | display: inline-block; 85 | padding:5rpx 20rpx; 86 | margin: 0 10rpx; 87 | background-color: #f5f5f5; 88 | } 89 | .increment, 90 | .decrement{ 91 | margin: 0; 92 | padding: 0; 93 | width: 50rpx !important; 94 | height: 50rpx !important; 95 | } 96 | } 97 | } 98 | } 99 | } 100 | } 101 | .footer-tool{ 102 | position: fixed; 103 | bottom: 0; 104 | right: 0; 105 | left: 0; 106 | display: flex; 107 | justify-content: space-between; 108 | align-items: center; 109 | background-color: #fff; 110 | border-top: 2rpx solid rgba(100, 100, 100, 0.2); 111 | height: 90rpx; 112 | .all-check-wrap{ 113 | display: flex; 114 | align-items: center; 115 | padding-left: 20rpx; 116 | .check { 117 | color: rgba(100, 100, 100, 0.2); 118 | margin-right: 10rpx; 119 | } 120 | .active { 121 | color: var(--themeColor); 122 | } 123 | } 124 | .isDelte{ 125 | display: flex; 126 | .collect, 127 | .delete{ 128 | margin: 0; 129 | padding: 20rpx; 130 | height: 40rpx; 131 | border-radius: 20rpx; 132 | border: 1px solid; 133 | font-weight: 400; 134 | font-size: 24rpx; 135 | display: flex; 136 | align-items: center; 137 | justify-content: center; 138 | } 139 | .collect{ 140 | width: 200rpx; 141 | color: #8A2BE2; 142 | margin-right: 20rpx; 143 | 144 | } 145 | .delete { 146 | width: 100rpx; 147 | color: #EE6363; 148 | margin-right: 20rpx; 149 | } 150 | } 151 | .total-pay{ 152 | display: flex; 153 | .total{ 154 | display: flex; 155 | justify-content: center; 156 | align-items: center; 157 | padding-right: 10rpx; 158 | text { 159 | color: var(--themeColor); 160 | font-weight: 600; 161 | } 162 | } 163 | .order-pay{ 164 | button{ 165 | margin: 0; 166 | padding:0; 167 | width: 200rpx; 168 | height: 90rpx; 169 | background-color: var(--themeColor); 170 | color: #ffffff; 171 | font-size: 30rpx; 172 | border-radius: 0; 173 | display: flex; 174 | justify-content: center; 175 | align-items: center; 176 | } 177 | } 178 | } 179 | } 180 | } 181 | .noGoods{ 182 | height: 100vh; 183 | background-color: #fefefe; 184 | display: flex; 185 | flex-direction:column; 186 | justify-content: center; 187 | text-align: center; 188 | align-items: center; 189 | image { 190 | margin-top: -100rpx; 191 | width: 70%; 192 | } 193 | .info { 194 | color: #666666; 195 | } 196 | .goToHome{ 197 | margin-top: 20rpx; 198 | padding: 10rpx 20rpx; 199 | width: 260rpx; 200 | background-color: #fea176; 201 | color: #ffffff; 202 | border: 1px solid; 203 | font-size: 28rpx; 204 | border-radius: 20rpx; 205 | } 206 | } -------------------------------------------------------------------------------- /pages/cart/cart.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 当前已选{{isChecked.length}}件(共{{cart.length}}件) 7 | 8 | 管理 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{item.goods_name}} 18 | 19 | ￥{{item.goods_price}} 20 | 21 | 24 | {{item.num}} 25 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 全选 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 总计： 46 | ￥{{totalPrice}} 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 一件商品都没有呢 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /pages/cart/cart.wxss: -------------------------------------------------------------------------------- 1 | /* pages/cart/cart.wxss */ 2 | Page { 3 | background-color: rgba(218, 218, 218, 0.2); 4 | } 5 | .hasGoods .cart-bg { 6 | position: absolute; 7 | top: 0; 8 | right: 0; 9 | left: 0; 10 | height: 240rpx; 11 | background-color: var(--themeColor); 12 | color: #ffffff; 13 | z-index: -1; 14 | } 15 | .hasGoods .cart-top { 16 | background-color: #fff; 17 | border-radius: 10rpx; 18 | margin: 20rpx 40rpx; 19 | padding: 20rpx; 20 | font-weight: 600; 21 | font-size: 30rpx; 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | } 26 | .hasGoods .cart-top .top-right { 27 | color: #ee842e; 28 | } 29 | .hasGoods .cart-top .top-left { 30 | font-size: 24rpx; 31 | color: #666666; 32 | } 33 | .hasGoods .goods-list { 34 | margin: 10rpx 40rpx 0; 35 | } 36 | .hasGoods .goods-list .goods-item { 37 | margin-top: 20rpx; 38 | border-radius: 10rpx; 39 | background-color: #fff; 40 | display: flex; 41 | padding: 20rpx; 42 | } 43 | .hasGoods .goods-list .goods-item .check { 44 | flex: 0.5; 45 | color: rgba(100, 100, 100, 0.2); 46 | display: flex; 47 | align-items: center; 48 | padding-right: 10rpx; 49 | } 50 | .hasGoods .goods-list .goods-item .active { 51 | color: var(--themeColor); 52 | } 53 | .hasGoods .goods-list .goods-item .img-wrap { 54 | flex: 3; 55 | display: flex; 56 | justify-content: center; 57 | align-items: center; 58 | } 59 | .hasGoods .goods-list .goods-item .img-wrap image { 60 | width: 70%; 61 | } 62 | .hasGoods .goods-list .goods-item .goods-info { 63 | flex: 6; 64 | padding-left: 20rpx; 65 | display: flex; 66 | flex-direction: column; 67 | justify-content: space-around; 68 | } 69 | .hasGoods .goods-list .goods-item .goods-info .goods-name { 70 | font-size: 30rpx; 71 | color: #000; 72 | } 73 | .hasGoods .goods-list .goods-item .goods-info .goods-price-num { 74 | display: flex; 75 | margin-top: 10rpx; 76 | } 77 | .hasGoods .goods-list .goods-item .goods-info .goods-price-num .goods-price { 78 | color: #fa0000; 79 | font-size: 32rpx; 80 | margin-right: 20rpx; 81 | } 82 | .hasGoods .goods-list .goods-item .goods-info .goods-price-num .goods-num { 83 | display: flex; 84 | align-items: center; 85 | margin-left: 40rpx; 86 | } 87 | .hasGoods .goods-list .goods-item .goods-info .goods-price-num .goods-num .num { 88 | display: inline-block; 89 | padding: 5rpx 20rpx; 90 | margin: 0 10rpx; 91 | background-color: #f5f5f5; 92 | } 93 | .hasGoods .goods-list .goods-item .goods-info .goods-price-num .goods-num .increment, 94 | .hasGoods .goods-list .goods-item .goods-info .goods-price-num .goods-num .decrement { 95 | margin: 0; 96 | padding: 0; 97 | width: 50rpx !important; 98 | height: 50rpx !important; 99 | } 100 | .hasGoods .footer-tool { 101 | position: fixed; 102 | bottom: 0; 103 | right: 0; 104 | left: 0; 105 | display: flex; 106 | justify-content: space-between; 107 | align-items: center; 108 | background-color: #fff; 109 | border-top: 2rpx solid rgba(100, 100, 100, 0.2); 110 | height: 90rpx; 111 | } 112 | .hasGoods .footer-tool .all-check-wrap { 113 | display: flex; 114 | align-items: center; 115 | padding-left: 20rpx; 116 | } 117 | .hasGoods .footer-tool .all-check-wrap .check { 118 | color: rgba(100, 100, 100, 0.2); 119 | margin-right: 10rpx; 120 | } 121 | .hasGoods .footer-tool .all-check-wrap .active { 122 | color: var(--themeColor); 123 | } 124 | .hasGoods .footer-tool .isDelte { 125 | display: flex; 126 | } 127 | .hasGoods .footer-tool .isDelte .collect, 128 | .hasGoods .footer-tool .isDelte .delete { 129 | margin: 0; 130 | padding: 20rpx; 131 | height: 40rpx; 132 | border-radius: 20rpx; 133 | border: 1px solid; 134 | font-weight: 400; 135 | font-size: 24rpx; 136 | display: flex; 137 | align-items: center; 138 | justify-content: center; 139 | } 140 | .hasGoods .footer-tool .isDelte .collect { 141 | width: 200rpx; 142 | color: #8A2BE2; 143 | margin-right: 20rpx; 144 | } 145 | .hasGoods .footer-tool .isDelte .delete { 146 | width: 100rpx; 147 | color: #EE6363; 148 | margin-right: 20rpx; 149 | } 150 | .hasGoods .footer-tool .total-pay { 151 | display: flex; 152 | } 153 | .hasGoods .footer-tool .total-pay .total { 154 | display: flex; 155 | justify-content: center; 156 | align-items: center; 157 | padding-right: 10rpx; 158 | } 159 | .hasGoods .footer-tool .total-pay .total text { 160 | color: var(--themeColor); 161 | font-weight: 600; 162 | } 163 | .hasGoods .footer-tool .total-pay .order-pay button { 164 | margin: 0; 165 | padding: 0; 166 | width: 200rpx; 167 | height: 90rpx; 168 | background-color: var(--themeColor); 169 | color: #ffffff; 170 | font-size: 30rpx; 171 | border-radius: 0; 172 | display: flex; 173 | justify-content: center; 174 | align-items: center; 175 | } 176 | .noGoods { 177 | height: 100vh; 178 | background-color: #fefefe; 179 | display: flex; 180 | flex-direction: column; 181 | justify-content: center; 182 | text-align: center; 183 | align-items: center; 184 | } 185 | .noGoods image { 186 | margin-top: -100rpx; 187 | width: 70%; 188 | } 189 | .noGoods .info { 190 | color: #666666; 191 | } 192 | .noGoods .goToHome { 193 | margin-top: 20rpx; 194 | padding: 10rpx 20rpx; 195 | width: 260rpx; 196 | background-color: #fea176; 197 | color: #ffffff; 198 | border: 1px solid; 199 | font-size: 28rpx; 200 | border-radius: 20rpx; 201 | } 202 | -------------------------------------------------------------------------------- /pages/cart/index.js: -------------------------------------------------------------------------------- 1 | // pages/cart/index.js 2 | 3 | /** 4 | * 获取用户收货地址 5 | * * 绑定点击事件 6 | * * 获取用户对小程序所授予获取地址的权限状态scope 7 | * * 假设用户点击获取收获地址的提示框 8 | * * 确定：scope为true authSetting: {scope.address: true} 直接获取收获地址 9 | * * 取消：scope为false 10 | * * 诱导用户自己打开授权设置页面(openSetting) 当用户重新给与获取地址权限的时候 11 | * * 获取收货地址 12 | * * 假设用户从未点击获取收获地址的提示框 13 | * * scope为undefined authSetting: {scope.address: undefined} 直接获取收获地址 14 | */ 15 | import { openSetting, chooseAddress, getSetting } from '../../utils/asyncWX' 16 | Page({ 17 | 18 | /** 19 | * 页面的初始数据 20 | */ 21 | data: { 22 | 23 | }, 24 | async handleChooseAddress() { 25 | try { 26 | const res1 = await getSetting(); 27 | const scopeAddress = res1.authSetting["scope.address"] 28 | // 2.判断权限状态 29 | if (scopeAddress === false) { 30 | // 用户拒接过授予权限，诱导用户打开授权界面 31 | await openSetting(); 32 | } 33 | // 3.调用获取地址API 34 | const address = await chooseAddress(); 35 | wx.setStorageSync("address", address); 36 | } catch (err) { 37 | console.log(err) 38 | } 39 | } 40 | }) -------------------------------------------------------------------------------- /pages/cart/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarTitleText": "购物车" 4 | } -------------------------------------------------------------------------------- /pages/cart/index.less: -------------------------------------------------------------------------------- 1 | /* pages/cart/index.wxss */ -------------------------------------------------------------------------------- /pages/cart/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /pages/category/index.js: -------------------------------------------------------------------------------- 1 | // pages/category/index.js 2 | import { request } from '../../request/index' 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | categoryTitle: [], 10 | categoryContent: [], 11 | currentIndex: 0, 12 | // 右侧滚动条距离顶部的距离 13 | scrollTop:0 14 | }, 15 | async getCategoryData() { 16 | const result = await request({ 17 | url: "/categories" 18 | }) 19 | const categories = result 20 | //把接口的数据存入到本地存储中 21 | wx.setStorageSync("categories",{time:Date.now(),data:categories}) 22 | this.setData({ 23 | categoryTitle: categories.map(item => { 24 | return item.cat_name 25 | }), 26 | categoryContent: categories.map(item => { 27 | return item.children 28 | }) 29 | }) 30 | }, 31 | // 左侧菜单的点击事件 32 | handleItemTap(e) { 33 | /** 34 | * 1.获取被点击的标题的索引 35 | * 2.给data中的currentIndex赋值 36 | */ 37 | const { index } = e.currentTarget.dataset 38 | this.setData({ 39 | currentIndex: index, 40 | scrollTop:0 41 | }) 42 | 43 | }, 44 | /** 45 | * 生命周期函数--监听页面加载 46 | */ 47 | onLoad: function (options) { 48 | /** 49 | * 1.先判断本地存储中有没有旧的数据 50 | * {time:Date.now(),data:[...]]} 51 | * 2.没有旧数据，直接发送新请求 52 | * 3.有旧的数据，并且旧的数据没有过期就使用本地存储中的旧数据即可 53 | */ 54 | // 1.获取本地存储的数据（小程序也是存在本地存储） 55 | const Categories = wx.getStorageSync("categories") 56 | // 2.判断 57 | if (!Categories) { 58 | // 获取分类数据 59 | this.getCategoryData(); 60 | }else { 61 | // 本地存储中有数据，定义过期时间：10s 62 | if(Date.now()-Categories.time>1000*60*5){ 63 | // 重新发送请求 64 | this.getCategoryData(); 65 | } else { 66 | this.setData({ 67 | categoryTitle: Categories.data.map(item => { 68 | return item.cat_name 69 | }), 70 | categoryContent: Categories.data.map(item => { 71 | return item.children 72 | }) 73 | }) 74 | } 75 | } 76 | }, 77 | 78 | /** 79 | * 生命周期函数--监听页面初次渲染完成 80 | */ 81 | onReady: function () { 82 | 83 | }, 84 | 85 | /** 86 | * 生命周期函数--监听页面显示 87 | */ 88 | onShow: function () { 89 | 90 | }, 91 | 92 | /** 93 | * 生命周期函数--监听页面隐藏 94 | */ 95 | onHide: function () { 96 | 97 | }, 98 | 99 | /** 100 | * 生命周期函数--监听页面卸载 101 | */ 102 | onUnload: function () { 103 | 104 | }, 105 | 106 | /** 107 | * 页面相关事件处理函数--监听用户下拉动作 108 | */ 109 | onPullDownRefresh: function () { 110 | 111 | }, 112 | 113 | /** 114 | * 页面上拉触底事件的处理函数 115 | */ 116 | onReachBottom: function () { 117 | 118 | }, 119 | 120 | /** 121 | * 用户点击右上角分享 122 | */ 123 | onShareAppMessage: function () { 124 | 125 | } 126 | }) -------------------------------------------------------------------------------- /pages/category/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "SearchInput":"/components/SearchInput/SearchInput" 4 | }, 5 | "navigationBarTitleText": "商品分类" 6 | } -------------------------------------------------------------------------------- /pages/category/index.less: -------------------------------------------------------------------------------- 1 | /* pages/category/index.wxss */ 2 | Page { 3 | height: 100%; 4 | } 5 | .category { 6 | display: flex; 7 | height: ~'calc(100vh - 90rpx)'; 8 | flex-wrap: wrap; 9 | .category-title { 10 | flex:2; 11 | text-align: center; 12 | height: 100%; 13 | .title-item { 14 | height: 80rpx; 15 | font-size: 30rpx; 16 | color:#666; 17 | padding: 20rpx 20rpx; 18 | } 19 | .active{ 20 | color:var(--themeColor); 21 | border-left: 5rpx solid var(--themeColor); 22 | } 23 | } 24 | .category-content { 25 | flex: 5; 26 | height: 100%; 27 | .goods-title { 28 | text-align: center; 29 | height: 80rpx; 30 | line-height: 80rpx; 31 | &::before{ 32 | content:"/"; 33 | color: #ccc; 34 | padding-right: 10rpx; 35 | } 36 | &::after{ 37 | content:"/"; 38 | color: #ccc; 39 | padding-left: 10rpx; 40 | } 41 | } 42 | .goods-list { 43 | display: flex; 44 | flex-wrap: wrap; 45 | navigator { 46 | width: 33.33%; 47 | text-align: center; 48 | image { 49 | width: 50%; 50 | } 51 | .goods-name{ 52 | 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /pages/category/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | {{item}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{item.cat_name}} 19 | 20 | 21 | 26 | 27 | 28 | {{item1.cat_name}} 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /pages/category/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/category/index.wxss */ 2 | Page { 3 | height: 100%; 4 | } 5 | .category { 6 | display: flex; 7 | height: calc(100vh - 90rpx); 8 | flex-wrap: wrap; 9 | } 10 | .category .category-title { 11 | flex: 2; 12 | text-align: center; 13 | height: 100%; 14 | } 15 | .category .category-title .title-item { 16 | height: 80rpx; 17 | font-size: 30rpx; 18 | color: #666; 19 | padding: 20rpx 20rpx; 20 | } 21 | .category .category-title .active { 22 | color: var(--themeColor); 23 | border-left: 5rpx solid var(--themeColor); 24 | } 25 | .category .category-content { 26 | flex: 5; 27 | height: 100%; 28 | } 29 | .category .category-content .goods-title { 30 | text-align: center; 31 | height: 80rpx; 32 | line-height: 80rpx; 33 | } 34 | .category .category-content .goods-title::before { 35 | content: "/"; 36 | color: #ccc; 37 | padding-right: 10rpx; 38 | } 39 | .category .category-content .goods-title::after { 40 | content: "/"; 41 | color: #ccc; 42 | padding-left: 10rpx; 43 | } 44 | .category .category-content .goods-list { 45 | display: flex; 46 | flex-wrap: wrap; 47 | } 48 | .category .category-content .goods-list navigator { 49 | width: 33.33%; 50 | text-align: center; 51 | } 52 | .category .category-content .goods-list navigator image { 53 | width: 50%; 54 | } 55 | -------------------------------------------------------------------------------- /pages/collect/index.js: -------------------------------------------------------------------------------- 1 | // pages/collect/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | titles: [ 9 | { id: 0, name: "商品收藏", isActive: true }, 10 | { id: 1, name: "店铺收藏", isActive: false }, 11 | { id: 2, name: "浏览足迹", isActive: false } 12 | ], 13 | collect:[] 14 | }, 15 | tabItemChange(e) { 16 | // 1.获取被点击的标题索引 17 | const { index } = e.detail 18 | // 2.重新发送请求 type=1 --> index=0 19 | this.changeTitleByIndex(index) 20 | }, 21 | changeTitleByIndex(index) { 22 | let { titles } = this.data 23 | titles.forEach((item, indey) => { 24 | index === indey ? item.isActive = true : item.isActive = false 25 | }) 26 | this.setData({ 27 | titles 28 | }) 29 | }, 30 | onShow(){ 31 | const collect = wx.getStorageSync("collect") || []; 32 | this.setData({ 33 | collect 34 | }) 35 | } 36 | }) -------------------------------------------------------------------------------- /pages/collect/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Tab":"../../components/TabBar/TabBar" 4 | }, 5 | "navigationBarTitleText":"商品收藏" 6 | } -------------------------------------------------------------------------------- /pages/collect/index.less: -------------------------------------------------------------------------------- 1 | /* pages/collect/index.wxss */ 2 | // page { 3 | // background-color: #f3f4f6; 4 | // } 5 | .collect-main{ 6 | .collect-title{ 7 | padding: 20rpx 0; 8 | .collect-tips{ 9 | padding: 15rpx; 10 | } 11 | .active{ 12 | color: var(--themeColor); 13 | } 14 | } 15 | .collect-content{ 16 | .goods-item { 17 | display: flex; 18 | border-bottom: 1rpx solid rgba(100,100,100, .4); 19 | .goods-img{ 20 | flex: 3; 21 | padding: 10rpx 0; 22 | text-align: center; 23 | image { 24 | width: 70%; 25 | } 26 | } 27 | .goods-info{ 28 | flex: 5; 29 | display: flex; 30 | flex-direction: column; 31 | justify-content: space-around; 32 | .good-name{ 33 | display: -webkit-box; 34 | overflow: hidden; 35 | -webkit-line-clamp: 2; 36 | -webkit-box-orient: vertical; 37 | text-overflow: ellipsis; 38 | } 39 | .good-price{ 40 | color: var(--themeColor); 41 | font-size: 32rpx; 42 | } 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /pages/collect/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 全部 7 | 正在热卖 8 | 即将上线 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | {{item.goods_name}} 21 | ￥{{item.goods_price}} 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /pages/collect/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/collect/index.wxss */ 2 | .collect-main .collect-title { 3 | padding: 20rpx 0; 4 | } 5 | .collect-main .collect-title .collect-tips { 6 | padding: 15rpx; 7 | } 8 | .collect-main .collect-title .active { 9 | color: var(--themeColor); 10 | } 11 | .collect-main .collect-content .goods-item { 12 | display: flex; 13 | border-bottom: 1rpx solid rgba(100, 100, 100, 0.4); 14 | } 15 | .collect-main .collect-content .goods-item .goods-img { 16 | flex: 3; 17 | padding: 10rpx 0; 18 | text-align: center; 19 | } 20 | .collect-main .collect-content .goods-item .goods-img image { 21 | width: 70%; 22 | } 23 | .collect-main .collect-content .goods-item .goods-info { 24 | flex: 5; 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-around; 28 | } 29 | .collect-main .collect-content .goods-item .goods-info .good-name { 30 | display: -webkit-box; 31 | overflow: hidden; 32 | -webkit-line-clamp: 2; 33 | -webkit-box-orient: vertical; 34 | text-overflow: ellipsis; 35 | } 36 | .collect-main .collect-content .goods-item .goods-info .good-price { 37 | color: var(--themeColor); 38 | font-size: 32rpx; 39 | } 40 | -------------------------------------------------------------------------------- /pages/goods_detail/index.js: -------------------------------------------------------------------------------- 1 | import { request } from '../../request/index' 2 | /** 3 | * 点击轮播图预览大图功能 4 | * * 给轮播图绑定点击事件 5 | * * 调用了小程序的API previewImage 6 | */ 7 | 8 | /** 9 | * 点击加入购物车 10 | * * 绑定点击事件 11 | * * 获取缓存中的购物车数据 数组格式存储 12 | * * 判断 当前商品是否存在于购物车 13 | * * 已经存在修改商品数据 执行购物车数量++ 重新把购物车数组填充回缓存中 14 | * * 不存在于购物车的数组中 直接给购物车数组添加一个新元素，带上购买数量属性 15 | * * 弹出提示 16 | */ 17 | 18 | /** 19 | * 商品收藏 20 | * 1.页面onShow的时候，加载缓存中的商品收藏的数据 21 | * 2.判断当前商品是否收藏 22 | * * 是：改变页面图标 23 | * * 不是：..... 24 | * 3.点击商品收藏按钮 25 | * * 判断该商品是否存在于缓存数组中 26 | * * 存在的话，把该商品删除 27 | * * 不存在，把商品添加到收藏数组中，存入到缓存中 28 | */ 29 | 30 | // pages/goods_detail/index.js 31 | Page({ 32 | 33 | /** 34 | * 页面的初始数据 35 | */ 36 | data: { 37 | goodsDeatilData: {}, 38 | isCollect: false 39 | }, 40 | goodsInfo: {}, 41 | async getGoodsDetailData(id) { 42 | const res = await request({ 43 | url: "/goods/detail", 44 | data: id 45 | }) 46 | this.goodsInfo = { 47 | goods_name: res.goods_name, 48 | goods_price: res.goods_price, 49 | pics: res.pics, 50 | goods_id: id.goods_id, 51 | num: 0, 52 | isChecked: true 53 | } 54 | this.setData({ 55 | goodsDeatilData: { 56 | goods_name: res.goods_name, 57 | goods_price: res.goods_price, 58 | // iphone部分手机不识别webp图片格式 59 | goods_introduce: res.goods_introduce.replace(/\.webp/g, ".jpg"), 60 | pics: res.pics 61 | } 62 | }) 63 | }, 64 | onShow() { 65 | let pages = getCurrentPages(); 66 | let currentPage = pages[pages.length - 1] 67 | console.log(currentPage) 68 | let options = currentPage.options 69 | this.getGoodsDetailData(options) 70 | // 1.获取缓存中的购物车数据 71 | let collect = wx.getStorageSync("collect") || []; 72 | // 2.判断该商品是否存在于缓存数组中 73 | // some() 方法用于检测数组中的元素是否满足指定条件（函数提供） 74 | let isCollect = collect.some(item => { 75 | return item.goods_id === options.goods_id 76 | }) 77 | this.setData({ 78 | goodsInfo: options.goods_id, 79 | isCollect 80 | }) 81 | }, 82 | // 点击轮播图放大预览 83 | handlePreviewImg(e) { 84 | const { index } = e.currentTarget.dataset 85 | // 1.先构造要预览的图片数组 86 | const urls = this.data.goodsDeatilData.pics.map(item => { 87 | return item.pics_mid 88 | }) 89 | wx.previewImage({ 90 | current: urls[index], // 当前显示图片的http链接 91 | urls // 需要预览的图片http链接列表 92 | }) 93 | }, 94 | // 点击加入购物车 95 | handleCartAdd() { 96 | let cart = wx.getStorageSync("cart") || []; 97 | let index = cart.findIndex(item => { 98 | return item.goods_id === this.goodsInfo.goods_id 99 | }) 100 | if (index === -1) { 101 | // 不存在 102 | this.goodsInfo.num = 1 103 | cart.push(this.goodsInfo) 104 | wx.showToast({ 105 | title: '添加购物车成功', 106 | icon: 'success', 107 | mask: true 108 | }) 109 | } else { 110 | // 存在 111 | cart[index].num++; 112 | wx.showToast({ 113 | title: '商品数量+1', 114 | icon: 'success', 115 | mask: true 116 | }) 117 | } 118 | wx.setStorageSync("cart", cart); 119 | }, 120 | // 收藏事件 121 | handleCollect() { 122 | // 1.获取缓存中的购物车数据 123 | let collect = wx.getStorageSync("collect") || []; 124 | // 2.判断该商品是否存在于缓存数组中 125 | let index = collect.findIndex(item => { 126 | return item.goods_id === this.goodsInfo.goods_id 127 | }) 128 | if (index === -1) { 129 | // 表示商品不存在于缓存数组中 130 | collect.push(this.goodsInfo) 131 | wx.showToast({ 132 | title: '收藏成功', 133 | mask: true 134 | }); 135 | } else{ 136 | // 表示商品存在于缓存数组中,删除该商品 137 | //splice修改原数组 138 | collect.splice(index,1) 139 | wx.showToast({ 140 | title: '取消收藏', 141 | mask: true 142 | }); 143 | } 144 | //把数组存入到缓存中 145 | wx.setStorageSync("collect", collect); 146 | this.setData({ 147 | isCollect:!this.data.isCollect 148 | }) 149 | } 150 | }) -------------------------------------------------------------------------------- /pages/goods_detail/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarTitleText": "商品详情" 4 | } -------------------------------------------------------------------------------- /pages/goods_detail/index.less: -------------------------------------------------------------------------------- 1 | /* pages/goods_detail/index.wxss */ 2 | Page { 3 | // padding-bottom: 90rpx; 4 | } 5 | .detail-swiper { 6 | swiper { 7 | height: 65vw; 8 | text-align: center; 9 | image { 10 | width: 60%; 11 | } 12 | } 13 | } 14 | .goods-price{ 15 | font-size: 38rpx; 16 | padding: 15rpx; 17 | color: var(--themeColor); 18 | font-weight: 600; 19 | } 20 | .goods-name-row{ 21 | display: flex; 22 | border-bottom: 10rpx solid #dedede; 23 | padding: 10rpx 0; 24 | .goods-name{ 25 | flex:5; 26 | border-right: 3rpx solid #ccc; 27 | padding:0 10rpx; 28 | color: #000; 29 | font-size: 30rpx; 30 | } 31 | .goods-collect{ 32 | flex:1; 33 | text-align: center; 34 | .icon-shoucang11{ 35 | color: #FF9900; 36 | } 37 | } 38 | } 39 | .goods-info{ 40 | .goods-info-title{ 41 | font-size: 32rpx; 42 | color: var(--themeColor); 43 | font-weight: 600; 44 | padding: 20rpx; 45 | } 46 | } 47 | .btn-tool{ 48 | border-top: 1rpx solid #ccc; 49 | display: flex; 50 | position: fixed; 51 | bottom: 0; 52 | left: 0; 53 | right: 0; 54 | height: 90rpx; 55 | background-color: #fff; 56 | .tool-item{ 57 | position: relative; 58 | flex:1; 59 | display: flex; 60 | flex-direction: column; 61 | justify-content:center; 62 | align-items:center; 63 | font-size: 24rpx; 64 | .contact{ 65 | position: absolute; 66 | top: 0; 67 | left: 0; 68 | right: 0; 69 | bottom: 0; 70 | opacity: 0; 71 | } 72 | } 73 | .btn-cart{ 74 | flex:2; 75 | background-color: #ffa500; 76 | color: #fff; 77 | font-size: 30rpx; 78 | font-weight: 600; 79 | } 80 | .btn-buy{ 81 | flex:2; 82 | background-color: #eb4450; 83 | color: #fff; 84 | font-size: 30rpx; 85 | font-weight: 600; 86 | } 87 | } -------------------------------------------------------------------------------- /pages/goods_detail/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ￥ {{goodsDeatilData.goods_price}} 12 | 13 | {{goodsDeatilData.goods_name}} 14 | 15 | 16 | {{isCollect?"已收藏":"收藏"}} 17 | 18 | 19 | 20 | 21 | 图文详情 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 客服 31 | 38 | -------------------------------------------------------------------------------- /pages/pay/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/pay/index.wxss */ 2 | Page { 3 | background-color: #eaeaea; 4 | } 5 | .address { 6 | height: 140rpx; 7 | background-color: #fff; 8 | display: flex; 9 | align-items: center; 10 | position: relative; 11 | } 12 | .address .font-dizhi { 13 | margin-left: 20rpx; 14 | color: var(--themeColor); 15 | font-size: 30rpx; 16 | } 17 | .address .write { 18 | color: #323232; 19 | font-size: 32rpx; 20 | } 21 | .address .noAddress { 22 | margin-left: 30rpx; 23 | color: #acacac; 24 | font-size: 28rpx; 25 | position: relative; 26 | top: 2rpx; 27 | padding: 0 20rpx; 28 | flex: 1; 29 | } 30 | .address .hasAddress { 31 | position: relative; 32 | } 33 | .address .hasAddress .nameAndPhone { 34 | display: flex; 35 | color: #333333; 36 | font-weight: 500; 37 | font-size: 32rpx; 38 | } 39 | .address .hasAddress .nameAndPhone .phone { 40 | margin-left: 20rpx; 41 | } 42 | .address .hasAddress .allAddress { 43 | color: #919191; 44 | } 45 | .address .right { 46 | position: absolute; 47 | top: 40%; 48 | right: 50rpx; 49 | margin-left: 250rpx; 50 | } 51 | .goods-list { 52 | margin: 10rpx 0 0; 53 | } 54 | .goods-list .goods-item { 55 | padding: 20rpx; 56 | background-color: #fff; 57 | display: flex; 58 | border-bottom: 2rpx solid #eeeeee; 59 | } 60 | .goods-list .goods-item .img-wrap { 61 | flex: 3; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | } 66 | .goods-list .goods-item .img-wrap image { 67 | width: 70%; 68 | } 69 | .goods-list .goods-item .goods-info { 70 | position: relative; 71 | flex: 6; 72 | padding-left: 20rpx; 73 | display: flex; 74 | flex-direction: column; 75 | justify-content: space-around; 76 | } 77 | .goods-list .goods-item .goods-info .goods-name { 78 | font-size: 32rpx; 79 | color: #000; 80 | } 81 | .goods-list .goods-item .goods-info .goods-price-num { 82 | display: flex; 83 | } 84 | .goods-list .goods-item .goods-info .goods-price-num .goods-price { 85 | color: #fa0000; 86 | font-size: 32rpx; 87 | margin-right: 20rpx; 88 | } 89 | .goods-list .goods-item .goods-info .goods-price-num .goods-num { 90 | position: absolute; 91 | right: 60rpx; 92 | top: 70%; 93 | display: flex; 94 | align-items: center; 95 | } 96 | .pay { 97 | position: fixed; 98 | bottom: 0; 99 | right: 0; 100 | left: 0; 101 | display: flex; 102 | justify-content: space-between; 103 | align-items: center; 104 | background-color: #fff; 105 | height: 90rpx; 106 | } 107 | .pay .total { 108 | margin-left: 30rpx; 109 | font-weight: 600; 110 | font-size: 32rpx; 111 | } 112 | .pay .total text { 113 | color: var(--themeColor); 114 | } 115 | .pay .goPay { 116 | margin: 0; 117 | padding: 16rpx 26rpx; 118 | background-color: var(--themeColor); 119 | color: #fff; 120 | font-size: 30rpx; 121 | width: 180rpx; 122 | line-height: 60rpx; 123 | height: 100%; 124 | border-radius: 0; 125 | } 126 | -------------------------------------------------------------------------------- /pages/search/index.js: -------------------------------------------------------------------------------- 1 | // pages/search/index.js 2 | import { request } from '../../request/index' 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | isInput: false, 10 | value: '', 11 | goods: [], 12 | hasGoods:true 13 | }, 14 | timeId: 0, 15 | handleInput(e) { 16 | const { value } = e.detail 17 | if (!value.trim()) { 18 | this.setData({ 19 | goods:[], 20 | isInput:false 21 | }) 22 | return; 23 | } 24 | if (value.length >= 1) { 25 | this.setData({ 26 | isInput: true, 27 | value 28 | }) 29 | } 30 | clearTimeout(this.timeId) 31 | this.timeId = setTimeout(() => { 32 | this.qSearch(value) 33 | }, 1000) 34 | }, 35 | // 发送请求获取搜索建议数据 36 | async qSearch(query) { 37 | const result = await request({ 38 | url: "/goods/qsearch", 39 | data: { query } 40 | }) 41 | this.setData({ 42 | goods: result.splice(0, 10) 43 | }) 44 | if(!result.length){ 45 | this.setData({ 46 | hasGoods:false 47 | }) 48 | } 49 | }, 50 | handleClear() { 51 | this.setData({ 52 | value: "", 53 | isInput: false 54 | }) 55 | }, 56 | handleSearch(){ 57 | wx.showToast({ 58 | title: '暂不支持该功能哦~', 59 | mask:true, 60 | icon:"none" 61 | }); 62 | } 63 | }) -------------------------------------------------------------------------------- /pages/search/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarTitleText":"搜索中心" 4 | } -------------------------------------------------------------------------------- /pages/search/index.less: -------------------------------------------------------------------------------- 1 | /* pages/search/index.wxss */ 2 | .search-h{ 3 | position: relative; 4 | display: flex; 5 | align-items: center; 6 | padding: 26rpx 10rpx 18rpx 20rpx; 7 | background-color: #f3f4f6; 8 | .icon-sousuo-{ 9 | position: absolute; 10 | color: var(--themeColor); 11 | top: 40rpx; 12 | left: 34rpx; 13 | font-size: 40rpx; 14 | } 15 | .icon-shanchu1{ 16 | position: absolute; 17 | top: 40rpx; 18 | right: 155rpx; 19 | font-size: 40rpx; 20 | color: #cccccc; 21 | } 22 | .input{ 23 | background-color: #fff; 24 | padding:14rpx 56rpx 14rpx 70rpx; 25 | border: 1rpx solid var(--themeColor); 26 | border-radius: 40rpx; 27 | flex: 6; 28 | } 29 | .search{ 30 | padding: 12rpx; 31 | margin: 0; 32 | flex: 1; 33 | background-color: var(--themeColor); 34 | color: #ffffff; 35 | font-size: 30rpx; 36 | margin-left: 20rpx; 37 | } 38 | } 39 | .search-b{ 40 | .search-item{ 41 | display: flex; 42 | justify-content: space-between; 43 | align-items: center; 44 | padding: 20rpx 28rpx; 45 | border-bottom: 1rpx solid #cccccc; 46 | .info{ 47 | flex: 1; 48 | font-size: #666666; 49 | font-size: 28rpx; 50 | overflow: hidden; 51 | text-overflow:ellipsis; 52 | white-space:nowrap; 53 | } 54 | .icon-youjiantou{ 55 | color: var(--themeColor); 56 | } 57 | } 58 | } 59 | 60 | .hasGoods{ 61 | width: 300rpx; 62 | position: absolute; 63 | top: 35%; 64 | left: 50%; 65 | transform: translate(-50%); 66 | } 67 | .noGoods{ 68 | position: absolute; 69 | top: 50%; 70 | left: 50%; 71 | transform: translate(-50%); 72 | color: #333; 73 | font-size: 30rpx; 74 | } 75 | .image{ 76 | width: 300rpx; 77 | position: absolute; 78 | bottom: 0; 79 | right: 0; 80 | } 81 | -------------------------------------------------------------------------------- /pages/search/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | {{item.goods_name}} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 搜索不到宝贝... 22 | -------------------------------------------------------------------------------- /pages/search/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/search/index.wxss */ 2 | .search-h { 3 | position: relative; 4 | display: flex; 5 | align-items: center; 6 | padding: 26rpx 10rpx 18rpx 20rpx; 7 | background-color: #f3f4f6; 8 | } 9 | .search-h .icon-sousuo- { 10 | position: absolute; 11 | color: var(--themeColor); 12 | top: 40rpx; 13 | left: 34rpx; 14 | font-size: 40rpx; 15 | } 16 | .search-h .icon-shanchu1 { 17 | position: absolute; 18 | top: 40rpx; 19 | right: 155rpx; 20 | font-size: 40rpx; 21 | color: #cccccc; 22 | } 23 | .search-h .input { 24 | background-color: #fff; 25 | padding: 14rpx 56rpx 14rpx 70rpx; 26 | border: 1rpx solid var(--themeColor); 27 | border-radius: 40rpx; 28 | flex: 6; 29 | } 30 | .search-h .search { 31 | padding: 12rpx; 32 | margin: 0; 33 | flex: 1; 34 | background-color: var(--themeColor); 35 | color: #ffffff; 36 | font-size: 30rpx; 37 | margin-left: 20rpx; 38 | } 39 | .search-b .search-item { 40 | display: flex; 41 | justify-content: space-between; 42 | align-items: center; 43 | padding: 20rpx 28rpx; 44 | border-bottom: 1rpx solid #cccccc; 45 | } 46 | .search-b .search-item .info { 47 | flex: 1; 48 | font-size: #666666; 49 | font-size: 28rpx; 50 | overflow: hidden; 51 | text-overflow: ellipsis; 52 | white-space: nowrap; 53 | } 54 | .search-b .search-item .icon-youjiantou { 55 | color: var(--themeColor); 56 | } 57 | .hasGoods { 58 | width: 300rpx; 59 | position: absolute; 60 | top: 35%; 61 | left: 50%; 62 | transform: translate(-50%); 63 | } 64 | .noGoods { 65 | position: absolute; 66 | top: 50%; 67 | left: 50%; 68 | transform: translate(-50%); 69 | color: #333; 70 | font-size: 30rpx; 71 | } 72 | .image { 73 | width: 300rpx; 74 | position: absolute; 75 | bottom: 0; 76 | right: 0; 77 | } 78 | -------------------------------------------------------------------------------- /pages/user/index.js: -------------------------------------------------------------------------------- 1 | // pages/user/index.js 2 | 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | userInfo:{}, 10 | collectNum:0 11 | }, 12 | /** 13 | * 获取用户信息 14 | * @param {*} e 15 | */ 16 | handleGetuserinfo(e){ 17 | const {userInfo} = e.detail; 18 | wx.setStorageSync("userinfo", userInfo); 19 | this.setData({ 20 | userInfo 21 | }) 22 | }, 23 | onShow(){ 24 | const userInfo = wx.getStorageSync("userinfo") || []; 25 | const collect = wx.getStorageSync("collect") || [] 26 | this.setData({ 27 | userInfo, 28 | collectNum:collect.length 29 | }) 30 | }, 31 | handleRefund(){ 32 | wx.showToast({ 33 | title: '暂不支持该功能~', 34 | mask: true 35 | }); 36 | } 37 | }) -------------------------------------------------------------------------------- /pages/user/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarTitleText":"个人中心", 4 | "enablePullDownRefresh": true 5 | } -------------------------------------------------------------------------------- /pages/user/index.less: -------------------------------------------------------------------------------- 1 | /* pages/user/index.wxss */ 2 | page { 3 | background-color: #eaf1e9; 4 | } 5 | .icon { 6 | width: 1em; 7 | height: 1em; 8 | vertical-align: -0.15em; 9 | fill: currentColor; 10 | overflow: hidden; 11 | } 12 | .cart-bg{ 13 | position: absolute; 14 | top: 0; 15 | right: 0; 16 | left: 0; 17 | height: 240rpx; 18 | background-color: var(--themeColor); 19 | color: #ffffff; 20 | z-index:-1; 21 | } 22 | .noUser{ 23 | margin-top: 30rpx; 24 | margin-left: 30rpx; 25 | display: flex; 26 | align-items: center; 27 | .avatar { 28 | width: 150rpx; 29 | height: 150rpx; 30 | border-radius: 50%; 31 | } 32 | .loginAndReg{ 33 | margin-left: 20rpx; 34 | .info { 35 | font-size: 28rpx; 36 | color: #ffffff; 37 | } 38 | .button{ 39 | display: flex; 40 | margin-top: 10rpx; 41 | .login, 42 | .register{ 43 | margin: 0; 44 | padding: 0; 45 | width: 160rpx; 46 | background-color: #ff9588; 47 | color: #ffffff; 48 | font-size: 26rpx; 49 | padding: 10rpx 30rpx; 50 | border-radius: 30rpx; 51 | font-weight: 400; 52 | } 53 | .login{ 54 | margin-right: 10rpx; 55 | } 56 | } 57 | } 58 | } 59 | .user-info-wrap{ 60 | height: 360rpx; 61 | .user-img-wrap{ 62 | position: relative; 63 | .user-bg{ 64 | height: 340rpx; 65 | width: 100vw; 66 | background-color: var(--themeColor); 67 | } 68 | .user-info{ 69 | position: absolute; 70 | left: 50%; 71 | transform: translate(-50%); 72 | top: 10%; 73 | text-align: center; 74 | .user-icon{ 75 | width: 150rpx; 76 | height: 150rpx; 77 | border-radius: 50%; 78 | } 79 | .user-name{ 80 | color: #ffffff; 81 | font-size: 40rpx; 82 | } 83 | } 84 | } 85 | } 86 | .use-content{ 87 | // position: absolute; 88 | .use-main{ 89 | position: absolute; 90 | left: 50%; 91 | transform: translate(-50%); 92 | top: 24%; 93 | // 历史足迹 94 | .history-wrap{ 95 | width: 98vw; 96 | background-color: #fff; 97 | display: flex; 98 | border-radius: 10rpx; 99 | navigator{ 100 | flex: 1; 101 | text-align: center; 102 | padding: 20rpx 0; 103 | .history-num{ 104 | color: var(--themeColor); 105 | font-size: 30rpx; 106 | } 107 | } 108 | } 109 | // 我的订单 110 | .order{ 111 | margin-top: 20rpx; 112 | background-color: #fff; 113 | border-radius: 10rpx; 114 | .order-top{ 115 | padding:20rpx 20rpx 12rpx 6rpx; 116 | font-size: 32rpx; 117 | &::before{ 118 | content: " "; 119 | display: inline-block; 120 | width: 10rpx; 121 | height: 30rpx; 122 | background-color: var(--themeColor); 123 | position: relative; 124 | top: 2rpx; 125 | } 126 | } 127 | .order-content{ 128 | display: flex; 129 | text-align: center; 130 | .content-item{ 131 | flex:1; 132 | padding:10rpx 20rpx; 133 | .order-icon{ 134 | color: var(--themeColor); 135 | font-size: 50rpx; 136 | } 137 | .allOrder{ 138 | margin-top: 6rpx; 139 | } 140 | } 141 | } 142 | } 143 | // 其他设置 144 | .other{ 145 | margin-top: 20rpx; 146 | border-radius: 10rpx; 147 | background-color: #fff; 148 | .other-item{ 149 | display: flex; 150 | padding: 20rpx; 151 | align-items: center; 152 | justify-content: space-between; 153 | // border-bottom: 1rpx solid #ccc; 154 | font-size: 32rpx; 155 | .iconAndTitle{ 156 | display: flex; 157 | 158 | .info{ 159 | flex:1; 160 | color: #301616; 161 | margin-left: 10rpx; 162 | font-size: 30rpx; 163 | margin: 0; 164 | padding: 0; 165 | border-radius: 0; 166 | font-weight: 400; 167 | width: auto; 168 | background-color: #fff; 169 | .icon{ 170 | color: #fea176; 171 | font-size: 34rpx; 172 | } 173 | } 174 | } 175 | 176 | &:nth-last-child(1){ 177 | border: none; 178 | } 179 | } 180 | } 181 | } 182 | } -------------------------------------------------------------------------------- /pages/user/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 | 15 | 16 | 登录领福利啦~ 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 0 29 | 收藏的店铺 30 | 31 | 32 | {{collectNum}} 33 | 收藏的商品 34 | 35 | 36 | 0 37 | 我的足迹 38 | 39 | 40 | 41 | 42 | 我的订单 43 | 44 | 45 | 46 | 全部订单 47 | 48 | 49 | 50 | 待付款 51 | 52 | 53 | 54 | 待收货 55 | 56 | 57 | 58 | 退款退货 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 收货地址管理 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 关于我们 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /pages/user/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/user/index.wxss */ 2 | page { 3 | background-color: #eaf1e9; 4 | } 5 | .icon { 6 | width: 1em; 7 | height: 1em; 8 | vertical-align: -0.15em; 9 | fill: currentColor; 10 | overflow: hidden; 11 | } 12 | .cart-bg { 13 | position: absolute; 14 | top: 0; 15 | right: 0; 16 | left: 0; 17 | height: 240rpx; 18 | background-color: var(--themeColor); 19 | color: #ffffff; 20 | z-index: -1; 21 | } 22 | .noUser { 23 | margin-top: 30rpx; 24 | margin-left: 30rpx; 25 | display: flex; 26 | align-items: center; 27 | } 28 | .noUser .avatar { 29 | width: 150rpx; 30 | height: 150rpx; 31 | border-radius: 50%; 32 | } 33 | .noUser .loginAndReg { 34 | margin-left: 20rpx; 35 | } 36 | .noUser .loginAndReg .info { 37 | font-size: 28rpx; 38 | color: #ffffff; 39 | } 40 | .noUser .loginAndReg .button { 41 | display: flex; 42 | margin-top: 10rpx; 43 | } 44 | .noUser .loginAndReg .button .login, 45 | .noUser .loginAndReg .button .register { 46 | margin: 0; 47 | padding: 0; 48 | width: 160rpx; 49 | background-color: #ff9588; 50 | color: #ffffff; 51 | font-size: 26rpx; 52 | padding: 10rpx 30rpx; 53 | border-radius: 30rpx; 54 | font-weight: 400; 55 | } 56 | .noUser .loginAndReg .button .login { 57 | margin-right: 10rpx; 58 | } 59 | .user-info-wrap { 60 | height: 360rpx; 61 | } 62 | .user-info-wrap .user-img-wrap { 63 | position: relative; 64 | } 65 | .user-info-wrap .user-img-wrap .user-bg { 66 | height: 340rpx; 67 | width: 100vw; 68 | background-color: var(--themeColor); 69 | } 70 | .user-info-wrap .user-img-wrap .user-info { 71 | position: absolute; 72 | left: 50%; 73 | transform: translate(-50%); 74 | top: 10%; 75 | text-align: center; 76 | } 77 | .user-info-wrap .user-img-wrap .user-info .user-icon { 78 | width: 150rpx; 79 | height: 150rpx; 80 | border-radius: 50%; 81 | } 82 | .user-info-wrap .user-img-wrap .user-info .user-name { 83 | color: #ffffff; 84 | font-size: 40rpx; 85 | } 86 | .use-content .use-main { 87 | position: absolute; 88 | left: 50%; 89 | transform: translate(-50%); 90 | top: 24%; 91 | } 92 | .use-content .use-main .history-wrap { 93 | width: 98vw; 94 | background-color: #fff; 95 | display: flex; 96 | border-radius: 10rpx; 97 | } 98 | .use-content .use-main .history-wrap navigator { 99 | flex: 1; 100 | text-align: center; 101 | padding: 20rpx 0; 102 | } 103 | .use-content .use-main .history-wrap navigator .history-num { 104 | color: var(--themeColor); 105 | font-size: 30rpx; 106 | } 107 | .use-content .use-main .order { 108 | margin-top: 20rpx; 109 | background-color: #fff; 110 | border-radius: 10rpx; 111 | } 112 | .use-content .use-main .order .order-top { 113 | padding: 20rpx 20rpx 12rpx 6rpx; 114 | font-size: 32rpx; 115 | } 116 | .use-content .use-main .order .order-top::before { 117 | content: " "; 118 | display: inline-block; 119 | width: 10rpx; 120 | height: 30rpx; 121 | background-color: var(--themeColor); 122 | position: relative; 123 | top: 2rpx; 124 | } 125 | .use-content .use-main .order .order-content { 126 | display: flex; 127 | text-align: center; 128 | } 129 | .use-content .use-main .order .order-content .content-item { 130 | flex: 1; 131 | padding: 10rpx 20rpx; 132 | } 133 | .use-content .use-main .order .order-content .content-item .order-icon { 134 | color: var(--themeColor); 135 | font-size: 50rpx; 136 | } 137 | .use-content .use-main .order .order-content .content-item .allOrder { 138 | margin-top: 6rpx; 139 | } 140 | .use-content .use-main .other { 141 | margin-top: 20rpx; 142 | border-radius: 10rpx; 143 | background-color: #fff; 144 | } 145 | .use-content .use-main .other .other-item { 146 | display: flex; 147 | padding: 20rpx; 148 | align-items: center; 149 | justify-content: space-between; 150 | font-size: 32rpx; 151 | } 152 | .use-content .use-main .other .other-item .iconAndTitle { 153 | display: flex; 154 | } 155 | .use-content .use-main .other .other-item .iconAndTitle .info { 156 | flex: 1; 157 | color: #301616; 158 | margin-left: 10rpx; 159 | font-size: 30rpx; 160 | margin: 0; 161 | padding: 0; 162 | border-radius: 0; 163 | font-weight: 400; 164 | width: auto; 165 | background-color: #fff; 166 | } 167 | .use-content .use-main .other .other-item .iconAndTitle .info .icon { 168 | color: #fea176; 169 | font-size: 34rpx; 170 | } 171 | .use-content .use-main .other .other-item:nth-last-child(1) { 172 | border: none; 173 | } 174 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "enhance": true, 10 | "postcss": true, 11 | "preloadBackgroundData": false, 12 | "minified": true, 13 | "newFeature": true, 14 | "coverView": true, 15 | "autoAudits": false, 16 | "showShadowRootInWxmlPanel": true, 17 | "scopeDataCheck": false, 18 | "checkInvalidKey": true, 19 | "checkSiteMap": true, 20 | "uploadWithSourceMap": true, 21 | "babelSetting": { 22 | "ignore": [], 23 | "disablePlugins": [], 24 | "outputPath": "" 25 | }, 26 | "useCompilerModule": false, 27 | "userConfirmedUseCompilerModuleSwitch": false 28 | }, 29 | "compileType": "miniprogram", 30 | "libVersion": "2.12.0", 31 | "appid": "wx0fbf8d93185ec423", 32 | "projectname": "yougou-shop", 33 | "debugOptions": { 34 | "hidedInDevtools": [] 35 | }, 36 | "isGameTourist": false, 37 | "simulatorType": "wechat", 38 | "simulatorPluginLibVersion": {}, 39 | "condition": { 40 | "search": { 41 | "current": -1, 42 | "list": [] 43 | }, 44 | "conversation": { 45 | "current": -1, 46 | "list": [] 47 | }, 48 | "plugin": { 49 | "current": -1, 50 | "list": [] 51 | }, 52 | "game": { 53 | "currentL": -1, 54 | "list": [] 55 | }, 56 | "gamePlugin": { 57 | "current": -1, 58 | "list": [] 59 | }, 60 | "miniprogram": { 61 | "current": -1, 62 | "list": [ 63 | { 64 | "id": -1, 65 | "name": "分类界面", 66 | "pathName": "pages/category/index", 67 | "query": "", 68 | "scene": null 69 | }, 70 | { 71 | "id": -1, 72 | "name": "商品列表", 73 | "pathName": "pages/goods_list/index", 74 | "query": "cid=5", 75 | "scene": null 76 | }, 77 | { 78 | "id": 2, 79 | "name": "商品详情", 80 | "pathName": "pages/goods_detail/index", 81 | "query": "goods_id=17926", 82 | "scene": null 83 | }, 84 | { 85 | "id": -1, 86 | "name": "购物车", 87 | "pathName": "pages/cart/index", 88 | "query": "goods_id=17926", 89 | "scene": null 90 | }, 91 | { 92 | "id": 4, 93 | "name": "购物车2", 94 | "pathName": "pages/cart/cart", 95 | "query": "", 96 | "scene": null 97 | }, 98 | { 99 | "id": -1, 100 | "name": "支付", 101 | "pathName": "pages/pay/index", 102 | "query": "", 103 | "scene": null 104 | }, 105 | { 106 | "id": 6, 107 | "name": "个人中心", 108 | "pathName": "pages/user/index", 109 | "query": "", 110 | "scene": null 111 | }, 112 | { 113 | "id": -1, 114 | "name": "订单参数", 115 | "pathName": "pages/order/index", 116 | "query": "type=1", 117 | "scene": null 118 | }, 119 | { 120 | "id": -1, 121 | "name": "商品收藏", 122 | "pathName": "pages/collect/index", 123 | "query": "", 124 | "scene": null 125 | }, 126 | { 127 | "id": -1, 128 | "name": "搜索中心", 129 | "pathName": "pages/search/index", 130 | "query": "", 131 | "scene": null 132 | } 133 | ] 134 | } 135 | } 136 | } -------------------------------------------------------------------------------- /request/index.js: -------------------------------------------------------------------------------- 1 | // 同时发送异步代码的次数 2 | let ajaxTimes = 0 3 | export const request = (params) => { 4 | ajaxTimes++ 5 | // 显示加载中效果 6 | wx.showLoading({ 7 | title: "加载中，请稍后~", 8 | mask: true 9 | }); 10 | //定义公共的URL 11 | const baseURL = "https://api-hmugo-web.itheima.net/api/public/v1" 12 | return new Promise((resolve, reject) => { 13 | wx.request({ 14 | ...params, 15 | url: baseURL + params.url, 16 | success: result => { 17 | resolve(result.data.message) 18 | }, 19 | fail: err => { 20 | reject(err) 21 | }, 22 | complete: () => { 23 | ajaxTimes--; 24 | //关闭加载 25 | ajaxTimes === 0 && wx.hideLoading(); 26 | 27 | } 28 | }); 29 | }) 30 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /utils/asyncWX.js: -------------------------------------------------------------------------------- 1 | /** 2 | * promise形式的 getsetting 3 | */ 4 | export const getSetting = () => { 5 | return new Promise((resolve, reject) => { 6 | wx.getSetting({ 7 | success: (result) => { 8 | resolve(result) 9 | }, 10 | fail: (err) => { 11 | reject(err) 12 | } 13 | }); 14 | }) 15 | } 16 | /** 17 | * promise形式的 chooseAddress 18 | */ 19 | export const chooseAddress = () => { 20 | return new Promise((resolve, reject) => { 21 | wx.chooseAddress({ 22 | success: (result) => { 23 | resolve(result) 24 | }, 25 | fail: (err) => { 26 | reject(err) 27 | } 28 | }); 29 | }) 30 | } 31 | /** 32 | * promise形式的 openSetting 33 | */ 34 | export const openSetting = () => { 35 | return new Promise((resolve, reject) => { 36 | wx.openSetting({ 37 | success: (result) => { 38 | resolve(result) 39 | }, 40 | fail: (err) => { 41 | reject(err) 42 | } 43 | }); 44 | }) 45 | } --------------------------------------------------------------------------------