├── page └── component │ ├── details │ ├── details.json │ ├── details.js │ ├── details.wxml │ └── details.wxss │ ├── index.json │ ├── cart │ ├── cart.json │ ├── cart.wxml │ ├── cart.wxss │ └── cart.js │ ├── list │ ├── list.json │ ├── list.wxss │ ├── list.wxml │ └── list.js │ ├── orders │ ├── orders.json │ ├── orders.wxss │ ├── orders.wxml │ └── orders.js │ ├── search │ ├── search.json │ ├── search.wxml │ ├── search.wxss │ └── search.js │ ├── user │ ├── user.json │ ├── user.wxml │ ├── user.js │ └── user.wxss │ ├── address │ ├── address.json │ ├── address.wxss │ ├── address.wxml │ └── address.js │ ├── category │ ├── category.json │ ├── category.wxss │ ├── category.js │ └── category.wxml │ ├── index.js │ ├── index.wxss │ └── index.wxml ├── pages ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js └── index │ ├── index.wxss │ ├── index.wxml │ └── index.js ├── image ├── 1.gif ├── 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 ├── icon3.png ├── list1.png └── goods1.png ├── sitemap.json ├── .gitignore ├── common └── common.wxss ├── app.js ├── utils └── util.js ├── README.md ├── project.config.json ├── REDEME.md ├── app.json └── app.wxss /page/component/details/details.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /page/component/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /page/component/cart/cart.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /page/component/list/list.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /page/component/list/list.wxss: -------------------------------------------------------------------------------- 1 | /* page/component/list/list.wxss */ -------------------------------------------------------------------------------- /page/component/orders/orders.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /page/component/search/search.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /page/component/user/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /page/component/address/address.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /page/component/orders/orders.wxss: -------------------------------------------------------------------------------- 1 | /* page/component/orders/orders.wxss */ -------------------------------------------------------------------------------- /image/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/1.gif -------------------------------------------------------------------------------- /image/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/11.png -------------------------------------------------------------------------------- /image/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/12.png -------------------------------------------------------------------------------- /image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/2.jpg -------------------------------------------------------------------------------- /image/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/21.png -------------------------------------------------------------------------------- /image/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/22.png -------------------------------------------------------------------------------- /image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/3.jpg -------------------------------------------------------------------------------- /image/31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/31.png -------------------------------------------------------------------------------- /image/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/32.png -------------------------------------------------------------------------------- /image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/4.jpg -------------------------------------------------------------------------------- /image/41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/41.png -------------------------------------------------------------------------------- /image/42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/42.png -------------------------------------------------------------------------------- /image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/5.jpg -------------------------------------------------------------------------------- /image/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/6.jpg -------------------------------------------------------------------------------- /image/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/b1.jpg -------------------------------------------------------------------------------- /image/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/b2.jpg -------------------------------------------------------------------------------- /image/b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/b3.jpg -------------------------------------------------------------------------------- /image/c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/c1.png -------------------------------------------------------------------------------- /image/c2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/c2.png -------------------------------------------------------------------------------- /image/c3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/c3.png -------------------------------------------------------------------------------- /image/c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/c4.png -------------------------------------------------------------------------------- /image/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/s1.png -------------------------------------------------------------------------------- /image/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/s2.png -------------------------------------------------------------------------------- /image/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/s3.png -------------------------------------------------------------------------------- /image/s4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/s4.png -------------------------------------------------------------------------------- /image/s5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/s5.png -------------------------------------------------------------------------------- /image/s6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/s6.png -------------------------------------------------------------------------------- /image/cart1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/cart1.png -------------------------------------------------------------------------------- /image/cart2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/cart2.png -------------------------------------------------------------------------------- /image/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/icon3.png -------------------------------------------------------------------------------- /image/list1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/list1.png -------------------------------------------------------------------------------- /image/goods1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Superljf/Wx-snacksShop/HEAD/image/goods1.png -------------------------------------------------------------------------------- /page/component/list/list.wxml: -------------------------------------------------------------------------------- 1 | 2 | page/component/list/list.wxml 3 | -------------------------------------------------------------------------------- /page/component/orders/orders.wxml: -------------------------------------------------------------------------------- 1 | 2 | page/component/orders/orders.wxml 3 | -------------------------------------------------------------------------------- /page/component/category/category.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "分类", 3 | "backgroundColor": "#eeeeee", 4 | "enablePullDownRefresh": false 5 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows 2 | [Dd]esktop.ini 3 | Thumbs.db 4 | $RECYCLE.BIN/ 5 | 6 | # macOS 7 | .DS_Store 8 | .fseventsd 9 | .Spotlight-V100 10 | .TemporaryItems 11 | .Trashes 12 | 13 | # Node.js 14 | node_modules/ 15 | -------------------------------------------------------------------------------- /common/common.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: #fff; 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 | } -------------------------------------------------------------------------------- /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 | }) -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad: function () { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return util.formatTime(new Date(log)) 12 | }) 13 | }) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .userinfo-avatar { 9 | width: 128rpx; 10 | height: 128rpx; 11 | margin: 20rpx; 12 | border-radius: 50%; 13 | } 14 | 15 | .userinfo-nickname { 16 | color: #aaa; 17 | } 18 | 19 | .usermotto { 20 | margin-top: 200px; 21 | } -------------------------------------------------------------------------------- /page/component/address/address.wxss: -------------------------------------------------------------------------------- 1 | /* page/component/address/address.wxss */ 2 | @import '../../../common/common.wxss'; 3 | 4 | .form-box { 5 | padding-left: 30rpx; 6 | } 7 | 8 | .form-box input { 9 | height: 90rpx; 10 | border-bottom: 1px solid #ededed; 11 | color: #999; 12 | } 13 | 14 | .form-box .input-placeholder { 15 | color: #aaa; 16 | } 17 | 18 | .form-box button { 19 | margin: 30rpx 30rpx 0 0; 20 | } -------------------------------------------------------------------------------- /page/component/address/address.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{userInfo.nickName}} 8 | 9 | 10 | 11 | {{motto}} 12 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Wx-snacksShop 2 | 零食商城购物微信小程序 3 | 4 | # wxapp-mall 5 | 微信小程序 商城 6 | 7 | ## 功能 8 | - [x] 首页 9 | - [x] 搜索 10 | - [x] 分类 11 | - [x] 购物车 12 | - [x] 个人中心 13 | - [x] 商品列表 14 | - [x] 商品详情 15 | - [x] 订单 16 | - [x] 地址管理 17 | 18 | ## 实现效果 19 | 20 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/2.jpg) 21 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/3.jpg) 22 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/5.jpg) 23 | 24 | ## 运行 25 | 需要安装有微信开发者工具。 26 | 把项目下载到本地。 27 | 在微信开发者工具中打开该项目则可预览。 28 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.0.8", 15 | "appid": "touristappid", 16 | "projectname": "%E9%9B%B6%E9%A3%9F%E5%95%86%E8%B4%A9", 17 | "simulatorType": "wechat", 18 | "simulatorPluginLibVersion": {}, 19 | "condition": { 20 | "search": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "conversation": { 25 | "current": -1, 26 | "list": [] 27 | }, 28 | "game": { 29 | "currentL": -1, 30 | "list": [] 31 | }, 32 | "miniprogram": { 33 | "current": -1, 34 | "list": [] 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /REDEME.md: -------------------------------------------------------------------------------- 1 | # wxapp-mall 2 | 微信小程序 商城 3 | 4 | ## 相关 5 | 文章：[微信小程序之购物车功能](https://github.com/lin-xin/blog/issues/14) 6 | 7 | 8 | ## 功能 9 | - [x] 首页 10 | - [x] 搜索 11 | - [x] 分类 12 | - [x] 购物车 13 | - [x] 个人中心 14 | - [x] 商品列表 15 | - [x] 商品详情 16 | - [x] 订单 17 | - [x] 地址管理 18 | 19 | ## 实现效果 20 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/1.jpg) 21 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/2.jpg) 22 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/3.jpg) 23 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/4.jpg) 24 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/5.jpg) 25 | ![image](https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/6.jpg) 26 | 27 | ## 运行 28 | 需要安装有微信开发者工具。 29 | 把项目下载到本地。 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 | }) -------------------------------------------------------------------------------- /page/component/list/list.js: -------------------------------------------------------------------------------- 1 | // page/component/list/list.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /page/component/orders/orders.js: -------------------------------------------------------------------------------- 1 | // page/component/orders/orders.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /page/component/index.js: -------------------------------------------------------------------------------- 1 | // page/component/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | imgUrls: [ 9 | '/image/b1.jpg', 10 | '/image/b2.jpg', 11 | '/image/b3.jpg' 12 | ], 13 | indicatorDots: false, 14 | autoplay: false, 15 | interval: 3000, 16 | duration: 800, 17 | }, 18 | 19 | /** 20 | * 生命周期函数--监听页面加载 21 | */ 22 | onLoad: function (options) { 23 | 24 | }, 25 | 26 | /** 27 | * 生命周期函数--监听页面初次渲染完成 28 | */ 29 | onReady: function () { 30 | 31 | }, 32 | 33 | /** 34 | * 生命周期函数--监听页面显示 35 | */ 36 | onShow: function () { 37 | 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面隐藏 42 | */ 43 | onHide: function () { 44 | 45 | }, 46 | 47 | /** 48 | * 生命周期函数--监听页面卸载 49 | */ 50 | onUnload: function () { 51 | 52 | }, 53 | 54 | /** 55 | * 页面相关事件处理函数--监听用户下拉动作 56 | */ 57 | onPullDownRefresh: function () { 58 | 59 | }, 60 | 61 | /** 62 | * 页面上拉触底事件的处理函数 63 | */ 64 | onReachBottom: function () { 65 | 66 | }, 67 | 68 | /** 69 | * 用户点击右上角分享 70 | */ 71 | onShareAppMessage: function () { 72 | 73 | } 74 | }) -------------------------------------------------------------------------------- /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 | }) -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | motto: 'Hello World', 8 | userInfo: {}, 9 | hasUserInfo: false, 10 | canIUse: wx.canIUse('button.open-type.getUserInfo') 11 | }, 12 | //事件处理函数 13 | bindViewTap: function() { 14 | wx.navigateTo({ 15 | url: '../logs/logs' 16 | }) 17 | }, 18 | onLoad: function () { 19 | if (app.globalData.userInfo) { 20 | this.setData({ 21 | userInfo: app.globalData.userInfo, 22 | hasUserInfo: true 23 | }) 24 | } else if (this.data.canIUse){ 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | app.userInfoReadyCallback = res => { 28 | this.setData({ 29 | userInfo: res.userInfo, 30 | hasUserInfo: true 31 | }) 32 | } 33 | } else { 34 | // 在没有 open-type=getUserInfo 版本的兼容处理 35 | wx.getUserInfo({ 36 | success: res => { 37 | app.globalData.userInfo = res.userInfo 38 | this.setData({ 39 | userInfo: res.userInfo, 40 | hasUserInfo: true 41 | }) 42 | } 43 | }) 44 | } 45 | }, 46 | getUserInfo: function(e) { 47 | console.log(e) 48 | app.globalData.userInfo = e.detail.userInfo 49 | this.setData({ 50 | userInfo: e.detail.userInfo, 51 | hasUserInfo: true 52 | }) 53 | } 54 | }) 55 | -------------------------------------------------------------------------------- /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?id:1', 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 | /* page/component/index.wxss */ 2 | @import '../../common/common.wxss'; 3 | 4 | .search { 5 | padding: 20rpx; 6 | } 7 | .search-text { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 50rpx; 12 | color: #aaa; 13 | text-align: center; 14 | border: 1px solid #ddd; 15 | border-radius: 20rpx; 16 | } 17 | .search-text icon { 18 | margin-right: 10rpx; 19 | } 20 | swiper { 21 | height: 421.5rpx; 22 | } 23 | swiper-item image { 24 | width: 100%; 25 | height: 100%; 26 | } 27 | .select-title, .newest-title { 28 | width: 100%; 29 | padding: 30rpx 0; 30 | height: 40rpx; 31 | color: #AB956D; 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 | } -------------------------------------------------------------------------------- /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 | .cate-box{ 30 | height: 100%; 31 | padding:40rpx; 32 | box-sizing: border-box; 33 | } 34 | .cate-box .cate-banner image{ 35 | display: block; 36 | width: 100%; 37 | height: 190rpx; 38 | } 39 | .cate-title{ 40 | position: relative; 41 | height: 30rpx; 42 | line-height: 30rpx; 43 | padding:30rpx 0 55rpx; 44 | text-align: center; 45 | color: #AB956D; 46 | font-size: 28rpx; 47 | } 48 | .cate-title::before{ 49 | position: absolute; 50 | left: 130rpx; 51 | top: 43rpx; 52 | content: ''; 53 | width: 70rpx; 54 | height: 4rpx; 55 | background: #AB956D; 56 | } 57 | .cate-title::after{ 58 | position: absolute; 59 | right: 130rpx; 60 | top: 43rpx; 61 | content: ''; 62 | width: 70rpx; 63 | height: 4rpx; 64 | background: #AB956D; 65 | } 66 | 67 | .product-list{ 68 | display: inline-block; 69 | width: 160rpx; 70 | height: 160rpx; 71 | text-align: center; 72 | margin:0 20rpx 20rpx 0; 73 | font-size: 24rpx; 74 | } 75 | .product-list image{ 76 | width: 80rpx; 77 | height: 80rpx; 78 | margin-bottom: 20rpx; 79 | } 80 | .product-list:nth-child(3n){ 81 | margin-right: 0; 82 | } -------------------------------------------------------------------------------- /page/component/category/category.js: -------------------------------------------------------------------------------- 1 | // page/component/category/category.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | category: [ 9 | {name: '果味', id: 'guowei'}, 10 | {name: '蔬菜', id:'shucai'}, 11 | {name: '炒货', id: 'chaohuo'}, 12 | {name: '点心', id: 'dianxin'}, 13 | {name: '粗茶', id: 'cucha'}, 14 | {name: '淡饭', id: 'danfan'} 15 | ], 16 | detail: [], 17 | curIndex: 0, 18 | isScoll: false, 19 | toView: 'guowei' 20 | }, 21 | 22 | 23 | /** 24 | * 生命周期函数--监听页面加载 25 | */ 26 | onLoad: function (options) { 27 | 28 | }, 29 | 30 | /** 31 | * 生命周期函数--监听页面初次渲染完成 32 | */ 33 | onReady: function () { 34 | var self = this; 35 | wx.request({ 36 | url:'', 37 | success(res) { 38 | self.setData({ 39 | detail : res.data 40 | }) 41 | } 42 | }); 43 | }, 44 | 45 | switchTab(e) { 46 | const self = this; 47 | this.setData({ 48 | isScoll: true 49 | }) 50 | setTimeout(function () { 51 | self.setData({ 52 | toView: e.target.dataset.id, 53 | curIndex: e.target.dataset.index 54 | }) 55 | }, 0) 56 | setTimeout(function () { 57 | self.setData({ 58 | isScoll: false 59 | }) 60 | }, 1) 61 | }, 62 | 63 | /** 64 | * 生命周期函数--监听页面显示 65 | */ 66 | onShow: function () { 67 | 68 | }, 69 | 70 | /** 71 | * 生命周期函数--监听页面隐藏 72 | */ 73 | onHide: function () { 74 | 75 | }, 76 | 77 | /** 78 | * 生命周期函数--监听页面卸载 79 | */ 80 | onUnload: function () { 81 | 82 | }, 83 | 84 | /** 85 | * 页面相关事件处理函数--监听用户下拉动作 86 | */ 87 | onPullDownRefresh: function () { 88 | 89 | }, 90 | 91 | /** 92 | * 页面上拉触底事件的处理函数 93 | */ 94 | onReachBottom: function () { 95 | 96 | }, 97 | 98 | /** 99 | * 用户点击右上角分享 100 | */ 101 | onShareAppMessage: function () { 102 | 103 | } 104 | }) 105 | 106 | -------------------------------------------------------------------------------- /page/component/cart/cart.wxml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {{item.title}} 15 | ￥{{item.price}} 16 | 17 | - 18 | {{item.num}} 19 | + 20 | 21 | x 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 全选 32 | ￥{{totalPrice}} 33 | 34 | 35 | 36 | 购物车是空的哦 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /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 | {{item.cate}} 15 | 16 | 17 | 18 | 19 | 20 | {{val.name}} 21 | 22 | 23 | 24 | 25 | 26 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /page/component/search/search.wxss: -------------------------------------------------------------------------------- 1 | /* page/component/search/search.wxss */ 2 | @import '../../../common/common.wxss'; 3 | .main{ 4 | padding: 0 20rpx; 5 | } 6 | .search-box { 7 | position: relative; 8 | display: flex; 9 | justify-content: space-between; 10 | padding-top: 26rpx; 11 | } 12 | .search-input { 13 | flex: 1; 14 | height: 60rpx; 15 | line-height: 60rpx; 16 | padding: 0 20rpx 0 54rpx; 17 | background: #f8f8f8; 18 | border-radius: 10rpx; 19 | font-size: 32rpx; 20 | border: 2rpx solid #ddd; 21 | } 22 | 23 | .search-icon { 24 | position: absolute; 25 | left: 15rpx; 26 | top: 44rpx; 27 | width: 35rpx; 28 | height: 35rpx; 29 | } 30 | .search-btn{ 31 | font-size: 32rpx; 32 | padding: 0 20rpx; 33 | line-height: 64rpx; 34 | } 35 | .title{ 36 | font-size: 32rpx; 37 | margin: 30rpx 0; 38 | } 39 | .title text{ 40 | padding-right: 30rpx; 41 | padding-bottom: 10rpx; 42 | color: #AB956D; 43 | border-bottom: 8rpx solid #AB956D; 44 | } 45 | .tags text{ 46 | display: inline-block; 47 | font-size: 28rpx; 48 | padding: 6rpx 20rpx; 49 | border: 2rpx solid #ddd; 50 | color: #aaa; 51 | margin: 0 30rpx 20rpx 0; 52 | border-radius: 40rpx; 53 | word-break: break-all; 54 | } 55 | .keywords{ 56 | position: absolute; 57 | width: 100%; 58 | left: 0; 59 | top: 90rpx; 60 | background: #fff; 61 | z-index: 9; 62 | padding: 20rpx; 63 | box-sizing: border-box; 64 | } 65 | .keywords-item{ 66 | line-height: 70rpx; 67 | border-bottom: 1px solid #eee; 68 | color: #787878; 69 | font-size: 28rpx; 70 | } 71 | .result{ 72 | margin-top: 40rpx; 73 | } 74 | 75 | .result-box, .recommend-box{ 76 | padding:0 20rpx; 77 | } 78 | .result-list{ 79 | display: inline-block; 80 | width: 325rpx; 81 | height: 325rpx; 82 | margin:0 20rpx 20rpx 0; 83 | border-radius: 10px; 84 | text-align: center; 85 | background: #f5f6f5; 86 | } 87 | .result-list:nth-child(2n){ 88 | margin-right: 0; 89 | } 90 | .result-list image{ 91 | width: 175rpx; 92 | height: 175rpx; 93 | margin: 20rpx 0 10rpx; 94 | } 95 | .result-list .result-text{ 96 | font-size: 32rpx; 97 | } 98 | .null-tips{ 99 | padding: 200rpx 0; 100 | text-align: center; 101 | color: #787878; 102 | } 103 | 104 | /* 相关推荐 */ 105 | .recommend-title{ 106 | position: relative; 107 | height: 0; 108 | width: 1005; 109 | border-bottom: 1px solid #f0f0f1; 110 | margin-bottom: 42rpx; 111 | } 112 | .recommend-title text{ 113 | position: absolute; 114 | left: 50%; 115 | top: -20rpx; 116 | width: 150rpx; 117 | height: 40rpx; 118 | margin-left: -75rpx; 119 | line-height: 40rpx; 120 | background: #ffffff; 121 | color: #5e5e5e; 122 | font-size: 28rpx; 123 | font-weight: bold; 124 | text-align: center; 125 | letter-spacing: 1px; 126 | } -------------------------------------------------------------------------------- /page/component/user/user.wxss: -------------------------------------------------------------------------------- 1 | /* page/component/user/user.wxss */ 2 | @import '../../../common/common.wxss'; 3 | 4 | 5 | 6 | .header{ 7 | position: relative; 8 | height: 160rpx; 9 | line-height: 100rpx; 10 | padding:30rpx 30rpx 30rpx 150rpx; 11 | box-sizing: border-box; 12 | background: #AB956D; 13 | font-size: 28rpx; 14 | color: #fff; 15 | } 16 | .header .thumb{ 17 | position: absolute; 18 | left: 30rpx; 19 | top: 30rpx; 20 | width: 100rpx; 21 | height: 100rpx; 22 | border-radius: 50%; 23 | } 24 | .header .about{ 25 | float: right; 26 | } 27 | 28 | .address-box{ 29 | border-bottom: 20rpx solid #ededed; 30 | color: #999; 31 | line-height: 90rpx; 32 | font-size: 28rpx; 33 | } 34 | .address-box .address-manage{ 35 | position: relative; 36 | height: 90rpx; 37 | border-bottom: 1rpx solid #e9e9e9; 38 | text-align: center; 39 | } 40 | .address-box .address-manage::after{ 41 | position: absolute; 42 | right: 30rpx; 43 | top: 34rpx; 44 | content: ''; 45 | width: 16rpx; 46 | height: 16rpx; 47 | border-top: 4rpx solid #7f7f7f; 48 | border-right: 4rpx solid #7f7f7f; 49 | -webkit-transform: rotate(45deg); 50 | transform: rotate(45deg); 51 | } 52 | .address-box .address-list{ 53 | padding-left: 30rpx; 54 | } 55 | .address-box .address-list view{ 56 | height: 90rpx; 57 | border-bottom: 1rpx solid #e9e9e9; 58 | } 59 | .address-box .address-list view:last-child{ 60 | border-bottom: 0; 61 | } 62 | 63 | .orders-box{ 64 | color: #999; 65 | font-size: 28rpx; 66 | } 67 | .orders{ 68 | height: 90rpx; 69 | line-height: 90rpx; 70 | border-bottom: 1rpx solid #e9e9e9; 71 | text-align: center; 72 | } 73 | .orders-list{ 74 | padding-left: 30rpx; 75 | border-bottom: 20rpx solid #ededed; 76 | } 77 | .orders-list:last-child{ 78 | border-bottom: 0; 79 | } 80 | .orders-number{ 81 | height: 90rpx; 82 | line-height: 90rpx; 83 | border-bottom: 1rpx solid #e9e9e9; 84 | } 85 | .orders-detail{ 86 | position: relative; 87 | height: 120rpx; 88 | padding: 35rpx 20rpx 35rpx 170rpx; 89 | border-bottom: 1rpx solid #e9e9e9; 90 | } 91 | .orders-detail image{ 92 | position: absolute; 93 | left: 0; 94 | top: 20rpx; 95 | width: 150rpx; 96 | height: 150rpx; 97 | } 98 | .orders-detail view{ 99 | line-height: 60rpx; 100 | } 101 | .orders-detail .orders-status{ 102 | position: absolute; 103 | right: 20rpx; 104 | top: 35rpx; 105 | height: 120rpx; 106 | line-height: 120rpx; 107 | color: #b42f2d; 108 | } 109 | .orders-footer{ 110 | height: 60rpx; 111 | line-height: 60rpx; 112 | color: #2f2f2f; 113 | padding:15rpx 30rpx 15rpx 0; 114 | } 115 | .orders-footer .orders-btn{ 116 | float: right; 117 | width: 170rpx; 118 | height: 60rpx; 119 | line-height:60rpx; 120 | border-radius: 6rpx; 121 | background: #b42f2d; 122 | color: #fff; 123 | } -------------------------------------------------------------------------------- /page/component/search/search.js: -------------------------------------------------------------------------------- 1 | // page/component/search/search.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | history: [], 9 | hot: ['新鲜芹菜', '大红枣', '滋补桂圆干'], 10 | result: [ 11 | { 12 | id: 1, 13 | url: '../details/details', 14 | thumb: '/image/s4.png', 15 | title: '瓜子 100g', 16 | price: 0.01 17 | }, 18 | { 19 | id: 2, 20 | url: '../details/details', 21 | thumb: '/image/s5.png', 22 | title: '新鲜芹菜 500g', 23 | price: 0.02 24 | } 25 | ], 26 | showKeywords: false, 27 | keywords: ['山东肚脐橙', '湖南冰糖橙', '麻涌香蕉', '冰糖心苹果'], 28 | value: '', 29 | showResult: false, 30 | }, 31 | cancelSearch() { 32 | this.setData({ 33 | showResult: false, 34 | showKeywords: false, 35 | value: '' 36 | }) 37 | }, 38 | searchInput(e) { 39 | if (!e.detail.value) { 40 | this.setData({ 41 | showKeywords: false 42 | }) 43 | } else { 44 | if(!this.data.showKeywords) { 45 | timeId && clearTimeout(timeId); 46 | timeId = setTimeout(() => { 47 | this.setData({ 48 | showKeywords: true 49 | }) 50 | }, 1000) 51 | } 52 | } 53 | }, 54 | keywordHandle(e) { 55 | const text = e.target.dataset.text; 56 | this.setData({ 57 | value: text, 58 | showKeywords: false, 59 | showResult: true 60 | }) 61 | this.historyHandle(text); 62 | }, 63 | historyHandle(value) { 64 | let history = this.data.history; 65 | const idx = history.indexOf(value); 66 | if (idx === -1) { 67 | // 搜索记录只保留8个 68 | if (history.length > 7) { 69 | history.pop(); 70 | } 71 | } else { 72 | history.splice(idx, 1); 73 | } 74 | history.unshift(value); 75 | wx.setStorageSync('history',JSON.stringify(history)); 76 | this.setData({ 77 | history 78 | }); 79 | }, 80 | /** 81 | * 生命周期函数--监听页面加载 82 | */ 83 | onLoad: function (options) { 84 | const history = wx.setStorageSync('history'); 85 | if (history) { 86 | this.setData({ 87 | history: JSON.parse(history) 88 | }) 89 | console.log(this.data.history); 90 | } 91 | 92 | }, 93 | 94 | /** 95 | * 生命周期函数--监听页面初次渲染完成 96 | */ 97 | onReady: function () { 98 | 99 | }, 100 | 101 | /** 102 | * 生命周期函数--监听页面显示 103 | */ 104 | onShow: function () { 105 | 106 | }, 107 | 108 | /** 109 | * 生命周期函数--监听页面隐藏 110 | */ 111 | onHide: function () { 112 | 113 | }, 114 | 115 | /** 116 | * 生命周期函数--监听页面卸载 117 | */ 118 | onUnload: function () { 119 | 120 | }, 121 | 122 | /** 123 | * 页面相关事件处理函数--监听用户下拉动作 124 | */ 125 | onPullDownRefresh: function () { 126 | 127 | }, 128 | 129 | /** 130 | * 页面上拉触底事件的处理函数 131 | */ 132 | onReachBottom: function () { 133 | 134 | }, 135 | 136 | /** 137 | * 用户点击右上角分享 138 | */ 139 | onShareAppMessage: function () { 140 | 141 | } 142 | }) -------------------------------------------------------------------------------- /page/component/details/details.wxss: -------------------------------------------------------------------------------- 1 | @import '../../../common/common.wxss'; 2 | 3 | .goods-box{ 4 | position: relative; 5 | padding: 40rpx 45rpx; 6 | text-align: center; 7 | color: #454552; 8 | border-bottom: 30rpx solid #ededed; 9 | } 10 | .goods-box .goods-thumb{ 11 | width: 300rpx; 12 | height: 300rpx; 13 | margin: 35rpx 0 125rpx; 14 | } 15 | 16 | .to-carts-icon{ 17 | position: absolute; 18 | right: 70rpx; 19 | top: 70rpx; 20 | width: 10rpx; 21 | height: 10rpx; 22 | border-radius: 50%; 23 | opacity: .6; 24 | -webkit-animation: to_cart .3s ease-out; 25 | animation: to_cart .3s ease-out; 26 | } 27 | @-webkit-keyframes to_cart { 28 | 0%{ 29 | right:100rpx; 30 | top:530rpx; 31 | -webkit-transform: scale(4); 32 | } 33 | /*60%{ 34 | top: 20rpx; 35 | }*/ 36 | } 37 | @keyframes to_cart { 38 | 0%{ 39 | right:100rpx; 40 | top:530rpx; 41 | transform: scale(4); 42 | } 43 | /*60%{ 44 | top: 20rpx; 45 | }*/ 46 | } 47 | .carts-icon{ 48 | position: absolute; 49 | right: 40rpx; 50 | top: 40rpx; 51 | width: 75rpx; 52 | height: 75rpx; 53 | } 54 | .carts-icon image{ 55 | width: 100%; 56 | height: 100%; 57 | } 58 | .carts-icon.on{ 59 | -webkit-animation: to_cart_scale .3s ease; 60 | animation: to_cart_scale .3s ease; 61 | } 62 | @-webkit-keyframes to_cart_scale { 63 | 50%{ 64 | -webkit-transform: scale(1.2); 65 | } 66 | } 67 | @keyframes to_cart_scale { 68 | 50%{ 69 | transform: scale(1.2); 70 | } 71 | } 72 | .carts-icon-num{ 73 | position: absolute; 74 | left: -15rpx; 75 | width: 40rpx; 76 | height: 40rpx; 77 | line-height: 40rpx; 78 | border-radius: 50%; 79 | background: #AB956D; 80 | color: #fff; 81 | font-size: 24rpx; 82 | } 83 | .goods-box .goods-operation{ 84 | position: relative; 85 | width: 100%; 86 | height: 100rpx; 87 | line-height: 100rpx; 88 | padding: 0 50rpx; 89 | margin-bottom: 60rpx; 90 | box-sizing: border-box; 91 | border-radius: 50rpx; 92 | background: #AB956D; 93 | color: #fff; 94 | font-size: 28rpx; 95 | } 96 | .goods-operation text{ 97 | display: inline-block; 98 | height: 100rpx; 99 | } 100 | .goods-operation-num{ 101 | width: 160rpx; 102 | } 103 | .goods-operation-add{ 104 | width: 80rpx; 105 | margin-right: 30rpx; 106 | } 107 | .goods-to-cart{ 108 | width: 210rpx; 109 | padding-right: 75rpx; 110 | } 111 | .goods-cart-img{ 112 | position: absolute; 113 | right: 50rpx; 114 | top: 28rpx; 115 | width: 45rpx; 116 | height: 45rpx; 117 | } 118 | 119 | .goods-stock{ 120 | font-size: 28rpx; 121 | margin-bottom: 20rpx; 122 | } 123 | .goods-title{ 124 | font-size: 40rpx; 125 | margin-bottom: 30rpx; 126 | } 127 | .goods-price{ 128 | font-size: 40rpx; 129 | } 130 | .goods-tab-nav{ 131 | display: inline-block; 132 | width: 33.33%; 133 | height: 90rpx; 134 | line-height: 90rpx; 135 | border-bottom: 1rpx solid #ededed; 136 | box-sizing: border-box; 137 | text-align: center; 138 | color: #c7c7cb; 139 | } 140 | .goods-tab-nav.on{ 141 | color: #bcaa8a; 142 | border-bottom: 5rpx solid #bcaa8a; 143 | } 144 | .goods-content{ 145 | padding: 40rpx; 146 | } -------------------------------------------------------------------------------- /page/component/cart/cart.js: -------------------------------------------------------------------------------- 1 | // page/component/cart/cart.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | carts: [], //购物车列表 9 | hasList: false, //列表是否有数据 10 | totalPrice: 0, // 总价 初始为0 11 | selectAllStatus: true, // 全选状态 默认全选 12 | obj: { 13 | name: "hello" 14 | } 15 | }, 16 | 17 | /** 18 | * 生命周期函数--监听页面加载 19 | */ 20 | onLoad: function (options) { 21 | 22 | }, 23 | 24 | /** 25 | * 生命周期函数--监听页面初次渲染完成 26 | */ 27 | onReady: function () { 28 | 29 | }, 30 | 31 | /** 32 | * 生命周期函数--监听页面显示 33 | */ 34 | onShow: function () { 35 | this.setData({ 36 | hasList: true, // 含有数据 设为true 37 | carts: [ 38 | {id: 1, title: '新鲜芹菜 半斤', image:'/image/s5.png',num:4,price: 0.01,seclected:true}, 39 | {id: 2, title: '素米 500g', image: '/image/s6.png', num: 1, price: 0.03, seclected:true} 40 | ] 41 | }); 42 | this.getTotalPrice(); 43 | }, 44 | // 当前商品选中事件 45 | selectList(e) { 46 | const index = e.currentTarget.dataset.index; //获取 data 传进来的index 47 | let carts = this.data.carts; // 获取购物车列表 48 | const seclected = carts[index].seclected; //获取当前商品的选中状态 49 | carts[index].seclected = !seclected; // 改变状态 50 | this.setData({ 51 | carts: carts 52 | }); 53 | this.getTotalPrice(); //重新获取总价 54 | }, 55 | 56 | // 删除购物车当前商品 57 | deleteList(e) { 58 | const index = e.currentTarget.dataset.index; 59 | let carts = this.data.carts; 60 | carts.splice(index, 1); // 删除购物车列表里这个商品 61 | this.setData({ 62 | carts: carts 63 | }); 64 | if (!carts.length) { // 如果购物车为空 65 | this.setData({ 66 | hasList: false // 修改标识为false 显示购物车为空页面 67 | }); 68 | } else { // 如果不为空 69 | this.getTotalPrice(); // 重新计算总价格 70 | } 71 | }, 72 | 73 | // 购物车全选事件 74 | 75 | selectAll(e) { 76 | let selectAllStatus = this.data.selectAllStatus; // 是否全选状态 77 | selectAllStatus = !selectAllStatus; 78 | let carts = this.data.carts; 79 | 80 | for (let i = 0; i < carts.length; i++) { 81 | carts[i].selected = selectAllStatus; 82 | } // 改变所有商品状态 83 | this.setData({ 84 | selectAllStatus: selectAllStatus, 85 | carts: carts 86 | }); 87 | this.getTotalPrice(); //重新获取总价 88 | }, 89 | 90 | // 绑定加数量事件 91 | addCount(e) { 92 | const index = e.currentTarget.dataset.index; 93 | let carts = this.data.carts; 94 | let num = carts[index].num; 95 | num = num + 1; 96 | carts[index].num = num; 97 | this.setData({ 98 | carts: carts 99 | }); 100 | this.getTotalPrice(); 101 | }, 102 | 103 | // 绑定减数量事件 104 | minusCount(e) { 105 | const index = e.currentTarget.dataset.index; 106 | const obj = e.currentTarget.dataset.obj; 107 | let carts = this.data.carts; 108 | let num = carts[index].num; 109 | if (num <= 1) { 110 | return false; 111 | } 112 | num = num - 1; 113 | carts[index].num = num; 114 | this.setData({ 115 | carts: carts 116 | }); 117 | this.getTotalPrice(); 118 | }, 119 | 120 | // 计算总价 121 | getTotalPrice() { 122 | let carts = this.data.carts; // 获取购物车列表 123 | let total = 0; 124 | for (let i = 0; i < carts.length; i ++) { // 循环列表得到每个数据 125 | if (carts[i].selected) { // 判断选中才会计算价格 126 | total += carts[i].num * carts[i].price; // 所有价格加起来 127 | } 128 | } 129 | this.setData({ // 最后赋值到data 中渲染到页面 130 | carts: carts, 131 | totalPrice: total.toFixed(2) 132 | }); 133 | }, 134 | 135 | /** 136 | * 生命周期函数--监听页面隐藏 137 | */ 138 | onHide: function () { 139 | 140 | }, 141 | 142 | /** 143 | * 生命周期函数--监听页面卸载 144 | */ 145 | onUnload: function () { 146 | 147 | }, 148 | 149 | /** 150 | * 页面相关事件处理函数--监听用户下拉动作 151 | */ 152 | onPullDownRefresh: function () { 153 | 154 | }, 155 | 156 | /** 157 | * 页面上拉触底事件的处理函数 158 | */ 159 | onReachBottom: function () { 160 | 161 | }, 162 | 163 | /** 164 | * 用户点击右上角分享 165 | */ 166 | onShareAppMessage: function () { 167 | 168 | } 169 | }) -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: #fbf9fe; 3 | height: 100%; 4 | } 5 | .container { 6 | display: flex; 7 | flex-direction: column; 8 | min-height: 100%; 9 | justify-content: space-between; 10 | } 11 | .page-header { 12 | display: flex; 13 | font-size: 32rpx; 14 | color: #aaa; 15 | justify-content: center; 16 | margin-top: 50rpx; 17 | } 18 | .page-header-text { 19 | padding: 20rpx 40rpx; 20 | border-bottom: 1px solid #ccc; 21 | } 22 | 23 | .page-body { 24 | width: 100%; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | flex-grow: 1; 29 | overflow-x: hidden; 30 | } 31 | .page-body-wrapper { 32 | margin-top: 100rpx; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | width: 100%; 37 | } 38 | .page-body-wrapper form { 39 | width: 100%; 40 | } 41 | .page-body-wording { 42 | text-align: center; 43 | padding: 200rpx 100rpx; 44 | } 45 | .page-body-info { 46 | display: flex; 47 | flex-direction: column; 48 | align-items: center; 49 | background-color: #fff; 50 | margin-bottom: 50rpx; 51 | width: 100%; 52 | padding: 50rpx 0 150rpx 0; 53 | } 54 | .page-body-title { 55 | margin-bottom: 100rpx; 56 | font-size: 32rpx; 57 | } 58 | .page-body-text { 59 | font-size: 30rpx; 60 | line-height: 26px; 61 | color: #ccc; 62 | } 63 | .page-body-text-small { 64 | font-size: 24rpx; 65 | color: #000; 66 | margin-bottom: 100rpx; 67 | } 68 | .page-body-form { 69 | width: 100%; 70 | background-color: #fff; 71 | display: flex; 72 | flex-direction: column; 73 | width: 100%; 74 | border: 1px solid #eee; 75 | } 76 | .page-body-form-item { 77 | display: flex; 78 | align-items: center; 79 | margin-left: 10rpx; 80 | border-bottom: 1px solid #eee; 81 | height: 80rpx; 82 | } 83 | .page-body-form-key { 84 | width: 180rpx; 85 | } 86 | .page-body-form-value { 87 | flex-grow: 1; 88 | } 89 | 90 | .page-body-form-picker { 91 | display: flex; 92 | justify-content: space-between; 93 | height: 100rpx; 94 | align-items: center; 95 | font-size: 36rpx; 96 | margin-left: 20rpx; 97 | padding-right: 20rpx; 98 | border-bottom: 1px solid #eee; 99 | } 100 | .page-body-form-picker-value { 101 | color: #ccc; 102 | } 103 | 104 | .page-body-buttons { 105 | width: 100%; 106 | } 107 | .page-body-button { 108 | margin: 25rpx; 109 | } 110 | .page-body-button image { 111 | width: 150rpx; 112 | height: 150rpx; 113 | } 114 | .page-footer { 115 | text-align: center; 116 | color: #1aad19; 117 | font-size: 24rpx; 118 | margin: 20rpx 0; 119 | } 120 | 121 | .green{ 122 | color: #09BB07; 123 | } 124 | .red{ 125 | color: #F76260; 126 | } 127 | .blue{ 128 | color: #10AEFF; 129 | } 130 | .yellow{ 131 | color: #FFBE00; 132 | } 133 | .gray{ 134 | color: #C9C9C9; 135 | } 136 | 137 | .strong{ 138 | font-weight: bold; 139 | } 140 | 141 | .bc_green{ 142 | background-color: #09BB07; 143 | } 144 | .bc_red{ 145 | background-color: #F76260; 146 | } 147 | .bc_blue{ 148 | background-color: #10AEFF; 149 | } 150 | .bc_yellow{ 151 | background-color: #FFBE00; 152 | } 153 | .bc_gray{ 154 | background-color: #C9C9C9; 155 | } 156 | 157 | .tc{ 158 | text-align: center; 159 | } 160 | 161 | .page input{ 162 | padding: 10px 15px; 163 | background-color: #fff; 164 | } 165 | checkbox, radio{ 166 | margin-right: 5px; 167 | } 168 | 169 | .btn-area{ 170 | padding: 0 15px; 171 | } 172 | .btn-area button{ 173 | margin-top: 10px; 174 | margin-bottom: 10px; 175 | } 176 | 177 | .page { 178 | min-height: 100%; 179 | flex: 1; 180 | background-color: #FBF9FE; 181 | font-size: 16px; 182 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 183 | overflow: hidden; 184 | } 185 | .page__hd{ 186 | padding: 40px; 187 | } 188 | .page__title{ 189 | display: block; 190 | font-size: 20px; 191 | } 192 | .page__desc{ 193 | margin-top: 5px; 194 | font-size: 14px; 195 | color: #888888; 196 | } 197 | 198 | .section{ 199 | margin-bottom: 40px; 200 | } 201 | .section_gap{ 202 | padding: 0 15px; 203 | } 204 | .section__title{ 205 | margin-bottom: 8px; 206 | padding-left: 15px; 207 | padding-right: 15px; 208 | } 209 | .section_gap .section__title{ 210 | padding-left: 0; 211 | padding-right: 0; 212 | } 213 | .section__ctn{ 214 | 215 | } 216 | -------------------------------------------------------------------------------- /page/component/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 搜 索 14 | 15 | 16 | 17 | 18 | 精选主题 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 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 | --------------------------------------------------------------------------------