├── page ├── good │ ├── good.json │ ├── good.js │ ├── good.wxml │ └── good.wxss ├── index │ ├── index.json │ ├── shop.json │ ├── shop.js │ ├── index.wxml │ ├── shop.wxml │ ├── index.wxss │ ├── index.js │ └── shop.wxss ├── order │ ├── order.json │ ├── order.js │ ├── order.wxss │ └── order.wxml ├── pay │ ├── pay.json │ ├── wechatpay.json │ ├── wechatpay.js │ ├── pay.js │ ├── pay.wxml │ ├── pay.wxss │ ├── wechatpay.wxml │ └── wechatpay.wxss └── detail │ ├── detail.json │ ├── detail.js │ ├── detail.wxss │ └── detail.wxml ├── imgs ├── mjbg.png ├── icon_03.png ├── icon_05.png ├── icon_07.png ├── index │ ├── bg.jpg │ ├── del.jpg │ ├── kh.jpg │ ├── bottom.jpg │ ├── fl_03.jpg │ ├── fl_06.jpg │ ├── fl_11.jpg │ ├── fl_14.jpg │ ├── good.jpg │ ├── loca.jpg │ ├── wx │ │ ├── del.jpg │ │ ├── kh.jpg │ │ ├── loca.jpg │ │ └── bottom.jpg │ └── gooddetail.jpg └── shop │ ├── cart.png │ ├── plus.png │ ├── star.jpg │ ├── pic_03.png │ ├── shoppic_03.png │ ├── shoppic_05.png │ └── shoppic_08.png ├── app.wxss ├── README.md ├── app.json ├── utils ├── server.js └── autoheight.js └── app.js /page/good/good.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/index/shop.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/order/order.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/pay/pay.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/detail/detail.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /page/pay/wechatpay.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /imgs/mjbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/mjbg.png -------------------------------------------------------------------------------- /imgs/icon_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/icon_03.png -------------------------------------------------------------------------------- /imgs/icon_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/icon_05.png -------------------------------------------------------------------------------- /imgs/icon_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/icon_07.png -------------------------------------------------------------------------------- /imgs/index/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/bg.jpg -------------------------------------------------------------------------------- /imgs/index/del.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/del.jpg -------------------------------------------------------------------------------- /imgs/index/kh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/kh.jpg -------------------------------------------------------------------------------- /imgs/shop/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/shop/cart.png -------------------------------------------------------------------------------- /imgs/shop/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/shop/plus.png -------------------------------------------------------------------------------- /imgs/shop/star.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/shop/star.jpg -------------------------------------------------------------------------------- /imgs/index/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/bottom.jpg -------------------------------------------------------------------------------- /imgs/index/fl_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/fl_03.jpg -------------------------------------------------------------------------------- /imgs/index/fl_06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/fl_06.jpg -------------------------------------------------------------------------------- /imgs/index/fl_11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/fl_11.jpg -------------------------------------------------------------------------------- /imgs/index/fl_14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/fl_14.jpg -------------------------------------------------------------------------------- /imgs/index/good.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/good.jpg -------------------------------------------------------------------------------- /imgs/index/loca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/loca.jpg -------------------------------------------------------------------------------- /imgs/index/wx/del.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/wx/del.jpg -------------------------------------------------------------------------------- /imgs/index/wx/kh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/wx/kh.jpg -------------------------------------------------------------------------------- /imgs/shop/pic_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/shop/pic_03.png -------------------------------------------------------------------------------- /imgs/index/wx/loca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/wx/loca.jpg -------------------------------------------------------------------------------- /imgs/index/gooddetail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/gooddetail.jpg -------------------------------------------------------------------------------- /imgs/index/wx/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/index/wx/bottom.jpg -------------------------------------------------------------------------------- /imgs/shop/shoppic_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/shop/shoppic_03.png -------------------------------------------------------------------------------- /imgs/shop/shoppic_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/shop/shoppic_05.png -------------------------------------------------------------------------------- /imgs/shop/shoppic_08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getweapp/weapp-store/HEAD/imgs/shop/shoppic_08.png -------------------------------------------------------------------------------- /page/order/order.js: -------------------------------------------------------------------------------- 1 | var app = getApp() 2 | Page({ 3 | data: {}, 4 | onLoad: function () {}, 5 | onShow: function() {} 6 | }); 7 | 8 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: #efefef; 3 | } 4 | 5 | .section { 6 | background: #fff; 7 | border-bottom: 1rpx solid #dedede; 8 | margin-bottom: 15rpx; 9 | padding: 20rpx; 10 | } 11 | 12 | .ellipsis { 13 | white-space: nowrap; 14 | text-overflow: ellipsis; 15 | overflow: hidden; 16 | } 17 | 18 | 19 | .clear{clear:both;} 20 | -------------------------------------------------------------------------------- /page/detail/detail.js: -------------------------------------------------------------------------------- 1 | // page/detail/detail.js 2 | Page({ 3 | data:{}, 4 | onLoad:function(options){ 5 | // 页面初始化 options为页面跳转所带来的参数 6 | }, 7 | onReady:function(){ 8 | // 页面渲染完成 9 | }, 10 | onShow:function(){ 11 | // 页面显示 12 | }, 13 | onHide:function(){ 14 | // 页面隐藏 15 | }, 16 | onUnload:function(){ 17 | // 页面关闭 18 | } 19 | }) -------------------------------------------------------------------------------- /page/pay/wechatpay.js: -------------------------------------------------------------------------------- 1 | // page/pay/wechatpay.js 2 | Page({ 3 | data:{ 4 | imageUrl:"/imgs/index/bottom.jpg" 5 | }, 6 | onLoad:function(options){ 7 | // 页面初始化 options为页面跳转所带来的参数 8 | }, 9 | onReady:function(){ 10 | // 页面渲染完成 11 | }, 12 | onShow:function(){ 13 | // 页面显示 14 | }, 15 | onHide:function(){ 16 | // 页面隐藏 17 | }, 18 | onUnload:function(){ 19 | // 页面关闭 20 | } 21 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序－DQ(上海七宝嘉茂店) 2 | 3 | ### 说明： 4 | 5 | 实现点餐功能。 6 | 7 | ### 数据接口: 8 | 9 | 使用本地数据 10 | 11 | ### 目录结构： 12 | 13 | - imgs — 存放项目图片文件 14 | - page — 存放项目页面文件 15 | - utils — 存放格式化文件 16 | 17 | ### 开发环境： 18 | 19 | 微信web开发者工具 v0.11.122100 20 | 21 | ### 项目截图： 22 | 23 | https://www.getweapp.com/project?projectId=58a574f252e1e8733dc567fe 24 | 25 | ### 感谢： 26 | 27 | 本项目原始版本由MMMsCheng提供：https://github.com/MMMsCheng/wxapp -------------------------------------------------------------------------------- /page/index/shop.js: -------------------------------------------------------------------------------- 1 | // page/index/shop.js 2 | var  imageUtil  =  require('../../utils/autoheight.js'); 3 | Page({ 4 | data: {}, 5 | onLoad: function (options) { 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady: function () { 9 | // 页面渲染完成 10 | }, 11 | onShow: function () { 12 | // 页面显示 13 | }, 14 | onHide: function () { 15 | // 页面隐藏 16 | }, 17 | onUnload: function () { 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /page/pay/pay.js: -------------------------------------------------------------------------------- 1 | // page/pay/pay.js 2 | Page({ 3 | data:{}, 4 | onLoad:function(options){ 5 | // 页面初始化 options为页面跳转所带来的参数 6 | }, 7 | onReady:function(){ 8 | // 页面渲染完成 9 | }, 10 | onShow:function(){ 11 | // 页面显示 12 | }, 13 | onHide:function(){ 14 | // 页面隐藏 15 | }, 16 | onUnload:function(){ 17 | // 页面关闭 18 | }, 19 | pay: function () { 20 | wx.navigateTo({ 21 | url: '../pay/wechatpay' 22 | }) 23 | }, 24 | 25 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "debug": true, 3 | "pages": [ 4 | "page/index/index", 5 | "page/index/shop", 6 | "page/order/order", 7 | "page/detail/detail", 8 | "page/pay/pay", 9 | "page/pay/wechatpay", 10 | "page/good/good" 11 | ], 12 | "window": { 13 | "navigationBarBackgroundColor": "#3c3c40", 14 | "navigationBarTextStyle": "white", 15 | "backgroundColor": "#efefef", 16 | "backgroundTextStyle": "dark", 17 | "navigationBarTitleText": "DQ(上海七宝嘉茂店)" 18 | }, 19 | "networkTimeout": { 20 | "request": 10000, 21 | "connectSocket": 10000, 22 | "uploadFile": 10000, 23 | "downloadFile": 10000 24 | }, 25 | "tabBar": { 26 | "backgroundColor": "#202020", 27 | "color": "#fff", 28 | "list": [ 29 | { 30 | "selectedIconPath": "imgs/icon_03.png", 31 | "iconPath": "imgs/icon_03.png", 32 | "pagePath": "page/index/index", 33 | "text": "首页" 34 | }, 35 | { 36 | "selectedIconPath": "imgs/icon_07.png", 37 | "iconPath": "imgs/icon_07.png", 38 | "pagePath": "page/order/order", 39 | "text": "订单" 40 | } 41 | ] 42 | }, 43 | "debug": true 44 | } -------------------------------------------------------------------------------- /page/pay/pay.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 |
-------------------------------------------------------------------------------- /page/pay/pay.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | font-family: "微软雅黑"; 3 | background: #f5f5f5; 4 | padding-bottom: 150rpx; 5 | width:100%;overflow-x: hidden; 6 | } 7 | .form{background: #fff;margin-top:50rpx;} 8 | .payli{border-bottom:1px solid #e8e8e8;height:90rpx;line-height:90rpx;padding:0 20rpx;overflow-x: hidden;} 9 | .paylable{width:150rpx;float:left;font-size:30rpx;color:#4a4a4a} 10 | .payinput{float:left;height:80rpx;font-size:30rpx;color:#4a4a4a;font-family: "微软雅黑";line-height:80rpx;} 11 | .textarea{float:left;height:auto;min-height:150rpx;padding:0;font-size:30rpx;color:#4a4a4a;font-family: "微软雅黑";} 12 | .textarea0{float:left;height:auto;min-height:120rpx;font-size:30rpx;padding:0;color:#4a4a4a;font-family: "微软雅黑";} 13 | .payli0{padding:8rpx 20rpx;border-bottom:1px solid #e8e8e8;background:#fff;font-size:30rpx;font-family: "微软雅黑";color:#4a4a4a} 14 | .formbot{padding:0 20rpx;margin-top:50rpx;} 15 | .delect{width:45%;background: #a4a4a4;text-align: center;font-size:30rpx;color:#fff;height:100rpx;line-height: 100rpx;float:left} 16 | .submit{width:45%;background: #f38815;text-align: center;font-size:30rpx;color:#fff;height:100rpx;line-height: 100rpx;float:right} 17 | .paylable0{width:150rpx;padding-top:12rpx;float:left;font-size:30rpx;color:#4a4a4a} 18 | -------------------------------------------------------------------------------- /utils/server.js: -------------------------------------------------------------------------------- 1 | function __args() { 2 | var setting = {}; 3 | if (arguments.length === 1 && typeof arguments[0] !== 'string') { 4 | setting = arguments[0]; 5 | } else { 6 | setting.url = arguments[0]; 7 | if (typeof arguments[1] === 'object') { 8 | setting.data = arguments[1]; 9 | setting.success = arguments[2]; 10 | } else { 11 | setting.success = arguments[1]; 12 | } 13 | } 14 | if (setting.url.indexOf('https://') !== 0) { 15 | setting.url = 'https://wxapp.im20.com.cn' + setting.url; 16 | } 17 | return setting; 18 | } 19 | function __json(method, setting) { 20 | setting.method = method; 21 | setting.header = { 22 | 'content-type': 'application/json' 23 | }; 24 | wx.request(setting); 25 | } 26 | 27 | module.exports = { 28 | getJSON: function () { 29 | __json('GET', __args.apply(this, arguments)); 30 | }, 31 | postJSON: function () { 32 | __json('POST', __args.apply(this, arguments)); 33 | }, 34 | sendTemplate: function(formId, templateData, success, fail) { 35 | var app = getApp(); 36 | this.getJSON({ 37 | url: '/WxAppApi/sendTemplate', 38 | data: { 39 | rd_session: app.rd_session, 40 | form_id: formId, 41 | data: templateData, 42 | }, 43 | success: success, // errorcode==0时发送成功 44 | fail: fail 45 | }); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /utils/autoheight.js: -------------------------------------------------------------------------------- 1 | //autoheight.js 2 | function imageUtil(e) { 3 | var imageSize = {}; 4 | var originalWidth = e.detail.width;//图片原始宽 5 | var originalHeight = e.detail.height;//图片原始高 6 | var originalScale = originalHeight/originalWidth;//图片高宽比 7 | console.log('originalWidth: ' + originalWidth) 8 | console.log('originalHeight: ' + originalHeight) 9 | //获取屏幕宽高 10 | wx.getSystemInfo({ 11 | success: function (res) { 12 | var windowWidth = res.windowWidth; 13 | var windowHeight = res.windowHeight; 14 | var windowscale = windowHeight/windowWidth;//屏幕高宽比 15 | console.log('windowWidth: ' + windowWidth) 16 | console.log('windowHeight: ' + windowHeight) 17 | if(originalScale < windowscale){//图片高宽比小于屏幕高宽比 18 | //图片缩放后的宽为屏幕宽 19 | imageSize.imageWidth = windowWidth; 20 | imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; 21 | }else{//图片高宽比大于屏幕高宽比 22 | //图片缩放后的高为屏幕高 23 | imageSize.imageHeight = windowHeight; 24 | imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; 25 | } 26 | 27 | } 28 | }) 29 | console.log('缩放后的宽: ' + imageSize.imageWidth) 30 | console.log('缩放后的高: ' + imageSize.imageHeight) 31 | return imageSize; 32 | } 33 | 34 | module.exports = { 35 | imageUtil: imageUtil 36 | } 37 | -------------------------------------------------------------------------------- /page/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | font-family: "微软雅黑"; 3 | background: #f5f5f5; 4 | padding-bottom: 150rpx; 5 | } 6 | 7 | .detailtop { 8 | height: 300rpx; 9 | background: #fff; 10 | text-align: center; 11 | } 12 | 13 | .detailtoppic image { 14 | width: 100rpx; 15 | height: 100rpx; 16 | border-radius: 50%; 17 | border: 3px solid #f38815; 18 | margin-top: 50rpx; 19 | } 20 | 21 | .detailtoptit { 22 | font-size: 30rpx; 23 | color: #4a4a4a; 24 | margin-top: 10rpx; 25 | } 26 | 27 | .detailtopstate { 28 | font-size: 36rpx; 29 | color: #4a4a4a; 30 | font-weight: bold; 31 | margin-top: 10rpx; 32 | } 33 | 34 | .detaillist{background: #fff;margin-top:30rpx;padding:30rpx 0 0} 35 | .detaillist .table{width: 100%;font-size:30rpx;color:#606060;text-align: center;border-bottom:1px solid #e8e8e8} 36 | .tr{display: flex;padding:15rpx 20rpx;} 37 | .th,.td{border:0;width:100%;} 38 | .ordername{width:70%;text-align: left} 39 | .ordernum{width:15%;} 40 | .orderprice{width:15%;text-align: right} 41 | .trbom{display: flex;padding:15rpx 20rpx;} 42 | .tdbomtit{text-align: left;width:85%;font-size:28rpx;} 43 | .tdbomprice{text-align: right;width:15%;color:#f38815} 44 | .tabletotal{font-size:36rpx;color:#f38815;text-align: right;padding:20rpx;} 45 | 46 | .detailinfo{background: #fff;margin-top:30rpx;padding:20rpx 20rpx 30rpx;font-size:30rpx;color:#606060;} 47 | .detailtit{padding:15rpx 0;font-size:30rpx;font-weight:bold} 48 | .detailtxt{padding:5rpx 0} -------------------------------------------------------------------------------- /page/pay/wechatpay.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 王大锤　　15745784854 4 | 上海七宝七宝宝龙城50号854室 5 | 6 | 7 | 8 | 9 | 10 | 支付方式：在线支a付 11 | 12 | 13 | 14 | 15 | 超享至尊披萨6寸/盘 16 | ×2 17 | ￥48 18 | 19 | 20 | 超享至尊披萨6寸/盘 21 | ×2 22 | ￥48 23 | 24 | 25 | 超享至尊披萨6寸/盘 26 | ×2 27 | ￥48 28 | 29 | 30 | 满减活动 31 | -￥10 32 | 33 | 34 | 35 | 订单￥116 36 | 优惠￥10 37 | 待支付 ￥106 38 | 39 | 40 | 41 | 待支付￥106 42 | | 优惠 ￥10 43 | 46 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var server = require('./utils/server'); 2 | App({ 3 | onLaunch: function () { 4 | console.log('App Launch') 5 | var self = this; 6 | var rd_session = wx.getStorageSync('rd_session'); 7 | console.log('rd_session', rd_session) 8 | if (!rd_session) { 9 | self.login(); 10 | } else { 11 | wx.checkSession({ 12 | success: function () { 13 | // 登录态未过期 14 | console.log('登录态未过期') 15 | self.rd_session = rd_session; 16 | self.getUserInfo(); 17 | }, 18 | fail: function () { 19 | //登录态过期 20 | self.login(); 21 | } 22 | }) 23 | } 24 | }, 25 | onShow: function () { 26 | console.log('App Show') 27 | }, 28 | onHide: function () { 29 | console.log('App Hide') 30 | }, 31 | rd_session: null, 32 | login: function() { 33 | var self = this; 34 | wx.login({ 35 | success: function (res) { 36 | console.log('wx.login', res) 37 | /* 38 | server.getJSON('/WxAppApi/setUserSessionKey', {code: res.code}, function (res) { 39 | console.log('setUserSessionKey', res) 40 | self.rd_session = res.data.data.rd_session; 41 | self.globalData.hasLogin = true; 42 | wx.setStorageSync('rd_session', self.rd_session); 43 | self.getUserInfo(); 44 | }); 45 | */ 46 | } 47 | }); 48 | }, 49 | getUserInfo: function() { 50 | var self = this; 51 | wx.getUserInfo({ 52 | success: function(res) { 53 | console.log('getUserInfo', res) 54 | self.globalData.userInfo = res.userInfo; 55 | /* 56 | server.getJSON('/WxAppApi/checkSignature', { 57 | rd_session: self.rd_session, 58 | result: res 59 | }, function (res) { 60 | console.log('checkSignature', res) 61 | if (res.data.errorcode) { 62 | // TODO:验证有误处理 63 | } 64 | }); 65 | */ 66 | } 67 | }); 68 | } 69 | }) 70 | -------------------------------------------------------------------------------- /page/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DQ(上海七宝嘉茂店) 8 | 9 | 订单已完成 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 超享至尊披萨6寸/盘 18 | ×2 19 | ￥48 20 | 21 | 22 | 超享至尊披萨6寸/盘 23 | ×2 24 | ￥48 25 | 26 | 27 | 超享至尊披萨6寸/盘 28 | ×2 29 | ￥48 30 | 31 | 32 | 满减活动 33 | -￥10 34 | 35 | 36 | 37 | 实付 ￥106 38 | 39 | 40 | 41 | 42 | 43 | 44 | 配送信息 45 | 46 | 47 | 收货地址：王海龙 先生 48 | 　　　　　15735945124 49 | 　　　　　上海市普陀区真北路1549弄45号 50 | 51 | 52 | 53 | 物流单号：145 455 1221（顺丰快递） 54 | 55 | 56 | 57 | 58 | 59 | 60 | 订单信息 61 | 62 | 63 | 订单号：1212 1212 2222 21212 64 | 65 | 66 | 支付方式：在线支付 67 | 68 | 69 | 下单时间：2017年01月10日 11:23 70 | 71 | 72 | -------------------------------------------------------------------------------- /page/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | DQ(上海七宝嘉茂店) 9 | 10 | 11 | 12 | 满 13 | 14 | 2017年2月10日前店内商品满50立减10元 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 | 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 | -------------------------------------------------------------------------------- /page/order/order.wxss: -------------------------------------------------------------------------------- 1 | page{font-family: "微软雅黑"} 2 | .container{height: 100%;} 3 | scroll-view{height: 100%;} 4 | .clear{clear:both;} 5 | .header{position: fixed;display: -webkit-flex;left: 0;top: 0;width: 100%;padding: 0;box-sizing: border-box;z-index: 1;background: #fff;height: 80rpx;line-height: 80rpx;} 6 | .header{display: -webkit-flex;position: fixed;display: -webkit-flex;left: 0;top: 0;width: 100%;padding: 0;box-sizing: border-box;z-index: 1;background: #fff;height: 80rpx;line-height: 80rpx;} 7 | .header .filter{width:50%;text-align: center;color:#3c3c3c;font-size: 30rpx;} 8 | .header .right{color:#f38815;border-bottom:1px solid #f38815} 9 | .shop{position:relative;top:70rpx;padding: 10rpx 0;margin-bottom:200rpx;} 10 | .shop .goods{width: 50%;float:left;text-align: center;} 11 | .shop .goods .goodsbox{background:#fff;width:90%;margin:0 auto;height:400rpx;position:relative;margin-top:30rpx;box-shadow:0 0 5px #eee;} 12 | .shop .goods image{width: 100%;height:250rpx;} 13 | .shop .goods .title1{color:#3c3c3c;font-size: 24rpx;height:100rpx;width:100rpx;line-height:65rpx;background:#fff;border-radius:50%;text-align:center;position:absolute;top:200rpx;left:50%;margin-left:-50rpx;} 14 | .shop .goods .title2{width:100%;color:#3c3c3c;font-size: 30rpx;position:absolute;top:270rpx;left:0;z-index: 99;text-align: center} 15 | .shop .goods .title3{width:40%;background:#393939;color:#fff;font-size: 30rpx;position:absolute;top:320rpx;left:30%;z-index: 99;text-align: center;border-radius:5px;font-size: 24rpx;height:50rpx;line-height: 50rpx;} 16 | 17 | .orderlist{padding:20rpx 0 80rpx} 18 | .orderli{height:240rpx;background: #fff;color:#4a4a4a;margin-top: 40rpx;} 19 | .orderlitop{width:95%;margin:0 auto;height:140rpx;border-bottom:1px solid #f1f1f1} 20 | .orderlileft{width:80%;height:140rpx;float:left;font-size:30rpx;text-align: left;} 21 | .orderliright{width:20%;height:140rpx;float:right;font-size:30rpx;text-align: right;line-height:140rpx;} 22 | .orderlitit1{margin-top:35rpx} 23 | .orderlitit2{font-size:24rpx;margin-top: 5rpx} 24 | .orderlibottom{width:95%;margin:0 auto;height:100rpx;font-size:24rpx;line-height: 100rpx;text-align: right} 25 | .paybtn{float:right;width:150rpx;height:50rpx;background: #393939;font-size:24rpx;color:#fff;line-height: 50rpx;text-align: center;margin-top:25rpx;border-radius:5px;} -------------------------------------------------------------------------------- /page/index/shop.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DQ(上海七宝嘉茂店) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 上海市闵行区七宝路888号 16 | 17 | 18 | 19 | 上海市闵行区七宝路888号 20 | 21 | 22 | 23 | 关于主题，或许“小”本来就是一个极其柔软的汉字，小笨蛋，小傻瓜，小妖精，本来是骂人的话语却可以变成甜蜜称呼。似乎用“小”开头，曲风大都会走清爽自然，似乎用“小”开头曲风大都会走清爽自然。 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /page/pay/wechatpay.wxss: -------------------------------------------------------------------------------- 1 | /* page/pay/wechatpay.wxss */ 2 | page { 3 | font-family: "微软雅黑"; 4 | background: #f5f5f5; 5 | padding-bottom: 150rpx; 6 | } 7 | 8 | 9 | .address{font-size:30rpx;color:#606060;height:150rpx;background: #fff url(http://www.jibuu.cn/ImgServer/wx/bottom.jpg) repeat-x bottom;background-size:auto 1px} 10 | .location{width:80%;margin-left:20rpx;padding-left:50rpx;height:150rpx;float:left;background:url(http://www.jibuu.cn/ImgServer/wx/loca.jpg) no-repeat left center;background-size:auto 50rpx} 11 | .locationL{width:10%;height:150rpx;float:right;background:url(http://www.jibuu.cn/ImgServer/wx/kh.jpg) no-repeat center;background-size:auto 30rpx} 12 | .lotit{font-size:30rpx;color:#4a4a4a;margin-top:38rpx} 13 | .lotxt{font-size:24rpx;color:#a4a4a4;margin-top:5rpx} 14 | 15 | .paytype{background:#fff;padding:30rpx 20rpx;margin-top:30rpx;font-size:30rpx;color:#4a4a4a;} 16 | 17 | .detaillist{background: #fff;margin-top:30rpx;padding:30rpx 0 0} 18 | .detaillist .table{width: 100%;font-size:30rpx;color:#606060;text-align: center;border-bottom:1px solid #e8e8e8} 19 | .tr{display: flex;padding:15rpx 20rpx;} 20 | .th,.td{border:0;width:100%;} 21 | .ordername{width:70%;text-align: left} 22 | .ordernum{width:15%;} 23 | .orderprice{width:15%;text-align: right} 24 | .trbom{display: flex;padding:15rpx 20rpx;} 25 | .tdbomtit{text-align: left;width:85%;font-size:28rpx;} 26 | .tdbomprice{text-align: right;width:15%;color:#f38815} 27 | .tabletotal0{font-size:30rpx;color:#4a4a4a;text-align: right;padding:20rpx;} 28 | .tabletotal1{display:inline;font-size:30rpx;color:#606060;margin-right:10px} 29 | .tabletotal2{display:inline;font-size:30rpx;color:#606060;margin-right:10px} 30 | .tabletotal3{display:inline;font-size:36rpx;color:#f38815;} 31 | 32 | .paybom{ 33 | position:fixed; 34 | left:0; 35 | bottom:0; 36 | width:100%; 37 | height:100rpx; 38 | background:#3c3d41; 39 | z-index:999999; 40 | } 41 | 42 | .paybtn{ 43 | 44 | width:200rpx; 45 | height:100%; 46 | font-size:30rpx; 47 | background:#f38815; 48 | color:#fff; 49 | line-height:100rpx; 50 | border-radius:0; 51 | float:right; 52 | display: inline-block; 53 | } 54 | 55 | .paybom1{font-size:30rpx;color:#fff;display: inline-block;float:left;line-height:100rpx;margin-left:10px} 56 | .paybom2{font-size:24rpx;color:#eee;display: inline-block;float:left;line-height:100rpx;margin-left:5px} -------------------------------------------------------------------------------- /page/index/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | font-family: "微软雅黑"; 3 | background: #f5f5f5; 4 | padding-bottom: 150rpx; 5 | } 6 | 7 | .detailtop { 8 | height: 360rpx; 9 | background: #fff; 10 | text-align: center; 11 | background: url(http://www.jibuu.cn/ImgServer/wx/bg.jpg) no-repeat top center; 12 | background-size: cover; 13 | } 14 | 15 | .detailtoppic image { 16 | width: 100rpx; 17 | height: 100rpx; 18 | border-radius: 50%; 19 | border: 3px solid #f38815; 20 | margin-top: 50rpx; 21 | } 22 | 23 | .indexbom{width:95%;margin: 0 auto;} 24 | .indexbom image { 25 | width: 100%; 26 | height: 240rpx; 27 | margin:1% 1%; 28 | 29 | } 30 | 31 | .indexbomli{ width: 48%; 32 | height: 240rpx; 33 | margin:1% 1%; float:left;} 34 | 35 | .indexbom-tit{border-left:3px solid #f38815;width:93%;height:30rpx;margin:20rpx auto;font-size:30rpx;color: #424242;line-height:30rpx;text-indent:10px;} 36 | .indextop{width:95%;text-align:left;font-size:24rpx;color:#fff;background:url(/imgs/mjbg.png) repeat-x top left;background-size:20rpx auto;margin:0 auto;padding-top:20rpx;margin-top:60rpx;} 37 | .indextopSpan{display:inline-block;text-align:center;width:40rpx;height:40rpx;border-radius:5px;background:#3ba2f9; font-size:24rpx;color:#fff;line-height:40rpx;} 38 | 39 | .detailtoptit { 40 | font-size: 30rpx; 41 | color: #fff; 42 | margin-top: 10rpx; 43 | } 44 | 45 | .detailtopstate { 46 | font-size: 36rpx; 47 | color: #4a4a4a; 48 | font-weight: bold; 49 | margin-top: 10rpx; 50 | } 51 | 52 | .detaillist { 53 | background: #fff; 54 | margin-top: 30rpx; 55 | padding: 30rpx 0 0; 56 | } 57 | 58 | .detaillist .table { 59 | width: 100%; 60 | font-size: 30rpx; 61 | color: #606060; 62 | text-align: center; 63 | border-bottom: 1px solid #e8e8e8; 64 | } 65 | 66 | .tr { 67 | display: flex; 68 | padding: 15rpx 20rpx; 69 | } 70 | 71 | .th, .td { 72 | border: 0; 73 | width: 100%; 74 | } 75 | 76 | .ordername { 77 | width: 70%; 78 | text-align: left; 79 | } 80 | 81 | .ordernum { 82 | width: 15%; 83 | } 84 | 85 | .orderprice { 86 | width: 15%; 87 | text-align: right; 88 | } 89 | 90 | .trbom { 91 | display: flex; 92 | padding: 15rpx 20rpx; 93 | } 94 | 95 | .tdbomtit { 96 | text-align: left; 97 | width: 85%; 98 | font-size: 28rpx; 99 | } 100 | 101 | .tdbomprice { 102 | text-align: right; 103 | width: 15%; 104 | color: #f38815; 105 | } 106 | 107 | .tabletotal { 108 | font-size: 36rpx; 109 | color: #f38815; 110 | text-align: right; 111 | padding: 20rpx; 112 | } 113 | 114 | .detailinfo { 115 | background: #fff; 116 | margin-top: 30rpx; 117 | padding: 20rpx 20rpx 30rpx; 118 | font-size: 30rpx; 119 | color: #606060; 120 | } 121 | 122 | .detailtit { 123 | padding: 15rpx 0; 124 | font-size: 30rpx; 125 | font-weight: bold; 126 | } 127 | 128 | .detailtxt { 129 | padding: 5rpx 0; 130 | } 131 | -------------------------------------------------------------------------------- /page/good/good.js: -------------------------------------------------------------------------------- 1 | var app = getApp(); 2 | Page({ 3 | data: { 4 | filterId: 1, 5 | goods: 6 | [ 7 | { 8 | id: 1, 9 | name: '周杰伦', 10 | pic: '/imgs/index/good.jpg', 11 | price: 2 12 | }, 13 | { 14 | id: 2, 15 | name: '彭于晏', 16 | pic: '/imgs/index/good.jpg', 17 | price: 3 18 | }, 19 | { 20 | id: 3, 21 | name: '蔡依林', 22 | pic: '/imgs/index/good.jpg', 23 | price: 2 24 | }, 25 | { 26 | id: 4, 27 | name: '林俊杰', 28 | pic: '/imgs/index/good.jpg', 29 | price: 2 30 | }, 31 | { 32 | id: 5, 33 | name: '蔡依林', 34 | pic: '/imgs/index/good.jpg', 35 | price: 2 36 | }, 37 | { 38 | id: 6, 39 | name: '林俊杰', 40 | pic: '/imgs/index/good.jpg', 41 | price: 2 42 | } 43 | ], 44 | 45 | cart: { 46 | count: 0, 47 | total: 0, 48 | list: {} 49 | }, 50 | 51 | 52 | 53 | }, 54 | 55 | onLoad: function () { 56 | console.log("onLoad"); 57 | this.setData({ 58 | id: 0 59 | }); 60 | 61 | }, 62 | 63 | //计算 64 | tapAddCart: function (e) { 65 | this.addCart(e.target.dataset.id); 66 | console.log(e.target.dataset.id); 67 | }, 68 | tapReduceCart: function (e) { 69 | this.reduceCart(e.target.dataset.id); 70 | }, 71 | addCart: function (id) { 72 | console.log(this.data.cart.list); 73 | var num = this.data.cart.list[id] || 0; 74 | console.log("num" + num); 75 | 76 | this.data.cart.list[id] = num + 1; 77 | this.countCart(); 78 | }, 79 | reduceCart: function (id) { 80 | var num = this.data.cart.list[id] || 0; 81 | if (num <= 1) { 82 | delete this.data.cart.list[id]; 83 | } else { 84 | this.data.cart.list[id] = num - 1; 85 | } 86 | this.countCart(); 87 | }, 88 | countCart: function () { 89 | var count = 0, 90 | total = 0; 91 | for (var id in this.data.cart.list) { 92 | var goods = this.data.goods[id]; 93 | count += this.data.cart.list[id]; 94 | total += goods.price * this.data.cart.list[id]; 95 | } 96 | this.data.cart.count = count; 97 | this.data.cart.total = total; 98 | this.setData({ 99 | cart: this.data.cart 100 | }); 101 | }, 102 | 103 | //显示隐藏购物车 104 | showCartDetail: function () { 105 | this.setData({ 106 | showCartDetail: !this.data.showCartDetail 107 | }); 108 | }, 109 | hideCartDetail: function () { 110 | this.setData({ 111 | showCartDetail: false 112 | }); 113 | }, 114 | 115 | //显示隐藏商品详情弹窗 116 | showGoodsDetail: function (e) { 117 | 118 | this.setData({ 119 | showGoodsDetail: !this.data.showGoodsDetail, 120 | id: e.target.dataset.id 121 | }); 122 | }, 123 | hideGoodsDetail: function () { 124 | this.setData({ 125 | showGoodsDetail: false 126 | }); 127 | }, 128 | 129 | 130 | pay: function () { 131 | wx.navigateTo({ 132 | url: '../pay/pay' 133 | }) 134 | }, 135 | 136 | 137 | 138 | 139 | 140 | 141 | }); 142 | 143 | -------------------------------------------------------------------------------- /page/index/index.js: -------------------------------------------------------------------------------- 1 | var app = getApp(); 2 | Page({ 3 | data: { 4 | filterId: 1, 5 | goods: 6 | [ 7 | { 8 | id: 1, 9 | name: '周杰伦', 10 | pic: '/imgs/index/good.jpg', 11 | price: 2 12 | }, 13 | { 14 | id: 2, 15 | name: '彭于晏', 16 | pic: '/imgs/index/good.jpg', 17 | price: 3 18 | }, 19 | { 20 | id: 3, 21 | name: '蔡依林', 22 | pic: '/imgs/index/good.jpg', 23 | price: 2 24 | }, 25 | { 26 | id: 4, 27 | name: '林俊杰', 28 | pic: '/imgs/index/good.jpg', 29 | price: 2 30 | }, 31 | { 32 | id: 5, 33 | name: '蔡依林', 34 | pic: '/imgs/index/good.jpg', 35 | price: 2 36 | }, 37 | { 38 | id: 6, 39 | name: '林俊杰', 40 | pic: '/imgs/index/good.jpg', 41 | price: 2 42 | } 43 | ], 44 | 45 | cart: { 46 | count: 0, 47 | total: 0, 48 | list: {} 49 | }, 50 | 51 | 52 | 53 | }, 54 | 55 | onLoad: function () { 56 | console.log("onLoad"); 57 | this.setData({ 58 | id: 0 59 | }); 60 | 61 | 62 | 63 | }, 64 | 65 | //计算 66 | tapAddCart: function (e) { 67 | this.addCart(e.target.dataset.id); 68 | console.log(e.target.dataset.id); 69 | }, 70 | tapReduceCart: function (e) { 71 | this.reduceCart(e.target.dataset.id); 72 | }, 73 | addCart: function (id) { 74 | console.log(this.data.cart.list); 75 | var num = this.data.cart.list[id] || 0; 76 | console.log("num" + num); 77 | 78 | this.data.cart.list[id] = num + 1; 79 | this.countCart(); 80 | }, 81 | reduceCart: function (id) { 82 | var num = this.data.cart.list[id] || 0; 83 | if (num <= 1) { 84 | delete this.data.cart.list[id]; 85 | } else { 86 | this.data.cart.list[id] = num - 1; 87 | } 88 | this.countCart(); 89 | }, 90 | countCart: function () { 91 | var count = 0, 92 | total = 0; 93 | for (var id in this.data.cart.list) { 94 | var goods = this.data.goods[id]; 95 | count += this.data.cart.list[id]; 96 | total += goods.price * this.data.cart.list[id]; 97 | } 98 | this.data.cart.count = count; 99 | this.data.cart.total = total; 100 | this.setData({ 101 | cart: this.data.cart 102 | }); 103 | }, 104 | 105 | //显示隐藏购物车 106 | showCartDetail: function () { 107 | this.setData({ 108 | showCartDetail: !this.data.showCartDetail 109 | }); 110 | }, 111 | hideCartDetail: function () { 112 | this.setData({ 113 | showCartDetail: false 114 | }); 115 | }, 116 | 117 | //显示隐藏商品详情弹窗 118 | showGoodsDetail: function (e) { 119 | 120 | this.setData({ 121 | showGoodsDetail: !this.data.showGoodsDetail, 122 | id: e.target.dataset.id 123 | }); 124 | }, 125 | hideGoodsDetail: function () { 126 | this.setData({ 127 | showGoodsDetail: false 128 | }); 129 | }, 130 | 131 | 132 | pay: function () { 133 | wx.navigateTo({ 134 | url: '../pay/pay' 135 | }) 136 | }, 137 | 138 | 139 | 140 | 141 | 142 | 143 | }); 144 | 145 | -------------------------------------------------------------------------------- /page/order/order.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 7寸缤纷水果披萨等3件商品 8 | 2017年01月10日 16:15 9 | 10 | 11 | ¥75 12 | 13 | 14 | 订单已完成 > 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 7寸缤纷水果披萨等3件商品 24 | 2017年01月10日 16:15 25 | 26 | 27 | ¥75 28 | 29 | 30 | 订单已完成 > 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 7寸缤纷水果披萨等3件商品 40 | 2017年01月10日 16:15 41 | 42 | 43 | ¥75 44 | 45 | 46 | 订单已完成 > 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 7寸缤纷水果披萨等3件商品 56 | 2017年01月10日 16:15 57 | 58 | 59 | ¥75 60 | 61 | 62 | 订单已完成 > 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 7寸缤纷水果披萨等3件商品 72 | 2017年01月10日 16:15 73 | 74 | 75 | ¥75 76 | 77 | 78 | 订单已完成 > 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 7寸缤纷水果披萨等3件商品 88 | 2017年01月10日 16:15 89 | 90 | 91 | ¥75 92 | 93 | 94 | 订单已完成 > 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /page/index/shop.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | font-family: "微软雅黑"; 3 | background: #fff; 4 | padding-bottom: 150rpx; 5 | } 6 | 7 | .detailtop { 8 | height: 320rpx; 9 | background: #fff; 10 | text-align: center; 11 | } 12 | 13 | .detailtoppic image { 14 | width: 150rpx; 15 | height: 150rpx; 16 | border-radius: 50%; 17 | border: 3px solid #f38815; 18 | margin-top: 50rpx; 19 | } 20 | 21 | .indexbom{width:95%;margin: 0 auto;} 22 | .indexbom image { 23 | width: 48%; 24 | height: 240rpx; 25 | margin:1% 1%; 26 | } 27 | .indexbom-tit{border-left:3px solid #f38815;width:93%;height:30rpx;margin:20rpx auto;font-size:30rpx;color:#4a4a4a;line-height:30rpx;text-indent:10px;} 28 | .indextop{width:95%;text-align:left;font-size:24rpx;color:#fff;background:url(/imgs/mjbg.png) repeat-x top left;background-size:20rpx auto;margin:0 auto;padding-top:20rpx;margin-top:60rpx;} 29 | .indextopSpan{display:inline-block;text-align:center;width:40rpx;height:40rpx;border-radius:5px;background:#3ba2f9; font-size:24rpx;color:#fff;line-height:40rpx;} 30 | 31 | .detailtoptit { 32 | font-size: 30rpx; 33 | color: #4a4a4a; 34 | margin-top: 10rpx; 35 | } 36 | 37 | .detailtopstate { 38 | font-size: 36rpx; 39 | color: #4a4a4a; 40 | font-weight: bold; 41 | margin-top: 10rpx; 42 | } 43 | 44 | .detaillist { 45 | background: #fff; 46 | margin-top: 30rpx; 47 | padding: 30rpx 0 0; 48 | } 49 | 50 | .detaillist .table { 51 | width: 100%; 52 | font-size: 30rpx; 53 | color: #606060; 54 | text-align: center; 55 | border-bottom: 1px solid #e8e8e8; 56 | } 57 | 58 | .detailmid{background: #fff;font-size:30rpx;color:#565656;} 59 | .detailmidli{position:relative;border-top:1px solid #efefef;height:100rpx;line-height:100rpx;} 60 | .detailmidlileft{width:50rpx;height:100rpx;display: inline-block;float:left;margin-left:20rpx;} 61 | .detailmidliright{float:left} 62 | .detailmidpic{width:30rpx;height:100rpx} 63 | .detailmidli0{position:relative;border-top:1px solid #efefef;height:auto;line-height:40rpx;border-bottom:1px solid #efefef;padding:30rpx 0 30rpx 70rpx} 64 | .detailmidpic0{width:30rpx;height:100rpx;position:absolute;top:0;left:20rpx} 65 | 66 | 67 | 68 | .tr { 69 | display: flex; 70 | padding: 15rpx 20rpx; 71 | } 72 | 73 | .th, .td { 74 | border: 0; 75 | width: 100%; 76 | } 77 | 78 | .ordername { 79 | width: 70%; 80 | text-align: left; 81 | } 82 | 83 | .ordernum { 84 | width: 15%; 85 | } 86 | 87 | .orderprice { 88 | width: 15%; 89 | text-align: right; 90 | } 91 | 92 | .trbom { 93 | display: flex; 94 | padding: 15rpx 20rpx; 95 | } 96 | 97 | .tdbomtit { 98 | text-align: left; 99 | width: 85%; 100 | font-size: 28rpx; 101 | } 102 | 103 | .tdbomprice { 104 | text-align: right; 105 | width: 15%; 106 | color: #f38815; 107 | } 108 | 109 | .tabletotal { 110 | font-size: 36rpx; 111 | color: #f38815; 112 | text-align: right; 113 | padding: 20rpx; 114 | } 115 | 116 | .detailinfo { 117 | background: #fff; 118 | margin-top: 30rpx; 119 | padding: 20rpx 20rpx 30rpx; 120 | font-size: 30rpx; 121 | color: #606060; 122 | } 123 | 124 | .detailtit { 125 | padding: 15rpx 0; 126 | font-size: 30rpx; 127 | font-weight: bold; 128 | } 129 | 130 | .detailtxt { 131 | padding: 5rpx 0; 132 | } 133 | -------------------------------------------------------------------------------- /page/good/good.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ￥{{goods[id].price}} 7 | {{goods[id].name}} 8 | 选择 9 | 10 | 11 | 12 | 13 | 14 | 15 | 41 | 42 | 43 | 63 | 64 | 65 | 66 | 67 | {{cart.count}} 68 | 69 | ￥{{cart.total}} 70 | 71 |
72 | 75 |
76 | 77 | -------------------------------------------------------------------------------- /page/good/good.wxss: -------------------------------------------------------------------------------- 1 | page{font-family: "微软雅黑";padding-bottom:100rpx} 2 | .clear{clear:both;} 3 | .header{position: fixed;display: -webkit-flex;left: 0;top: 0;width: 100%;padding: 0;box-sizing: border-box;z-index: 1;background: #fff;height: 80rpx;line-height: 80rpx;} 4 | .header{display: -webkit-flex;position: fixed;display: -webkit-flex;left: 0;top: 0;width: 100%;padding: 0;box-sizing: border-box;z-index: 19999999999999999999;background: #fff;height: 80rpx;line-height: 80rpx;} 5 | .header .filter{width:50%;text-align: center;color:#3c3c3c;font-size: 30rpx;} 6 | .header .left{color:#f38815;border-bottom:1px solid #f38815} 7 | .shop{position:relative;top:20rpx;padding: 10rpx 0;margin-bottom:200rpx;} 8 | .shop .goods{width: 50%;float:left;text-align: center;} 9 | .shop .goods .goodsbox{background:#fff;width:90%;margin:0 auto;height:400rpx;position:relative;margin-top:30rpx;box-shadow:0 0 5px #eee;} 10 | .shop .goods image{width: 100%;height:250rpx;} 11 | .shop .goods .title1{color:#3c3c3c;font-size: 24rpx;height:100rpx;width:100rpx;line-height:65rpx;background:#fff;border-radius:50%;text-align:center;position:absolute;top:200rpx;left:50%;margin-left:-50rpx;} 12 | .shop .goods .title2{width:100%;color:#3c3c3c;font-size: 30rpx;position:absolute;top:270rpx;left:0;z-index: 99;text-align: center} 13 | .shop .goods .title3{width:150rpx;background:#393939;color:#fff;font-size:24rpx;position:absolute;top:320rpx;left:30%;z-index: 99;text-align: center;border-radius:5px;font-size: 24rpx;height:50rpx;line-height: 50rpx;} 14 | 15 | /*下方购物车*/ 16 | .cart-detail, .cart-detail .mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999999} 17 | .cart-detail .mask{background: rgba(0,0,0,0.7);} 18 | .cart-detail .list{position: absolute;left: 0;bottom: 100rpx;width: 100%;background: #f7f7f7;padding:0 0 70rpx;z-index:9999999} 19 | .cart-detail .list .item{display: -webkit-flex;color: #333;font-size: 36rpx;line-height: 50rpx;padding: 20rpx 40rpx;border-bottom:1px solid #d5d5d5} 20 | .cart-detail .list .item .name{-webkit-flex: 1;font-size:30rpx;color:#606060} 21 | .cart-detail .list .item .total{width: 120rpx;font-size:36rpx;color:#373737;font-weight: bold} 22 | .cart-detail .list .item .reduce, 23 | .cart-detail .list .item .add{font-size: 50rpx;background: #4a4a4a;width: 50rpx;height: 50rpx;text-align: center;border-radius: 50%;color:#fff;line-height: 40rpx;border:1px solid #4a4a4a} 24 | .cart-detail .list .item .reduce{background: #ffffff;color:#4a4a4a;border:1px solid #4a4a4a} 25 | .cart-detail .list .item .num{width: 50rpx;text-align: center;margin: 0 5rpx;color:#4a4a4a} 26 | .cart{display: -webkit-flex;position: fixed;left: 0;bottom: 0;width: 100%;height: 100rpx;background: #3c3d41;z-index: 999999} 27 | .cart .data{-webkit-flex: 1;/*border-top: 1rpx solid #e7e7e7;*/} 28 | .cart .data .icon{position: absolute;left: 40rpx;top: -40rpx;width: 100rpx;height: 100rpx;background: #393939;border-radius: 50%;border:5px solid #3c3d41;box-shadow:0 0 5px #000} 29 | .cart .data .icon image{position: absolute;left: 15rpx;top: 15rpx;width: 70rpx;height: 70rpx;} 30 | .cart .data .icon .count{position: absolute;left: 70rpx;top: -20rpx;font-size: 30rpx;width: 50rpx;height: 50rpx;line-height: 50rpx;color: #fff;background: #f45044;border-radius: 50%;text-align: center} 31 | .cart .data .total{color: #f45044;font-size: 36rpx;line-height: 100rpx;padding-left: 160rpx;} 32 | .cart button{width: 200rpx;height: 100%;font-size: 30rpx;background:#f38815;color:#fff;line-height:100rpx;border-radius:0} 33 | .cart button[disabled][type="default"], wx-button[disabled]:not([type]) {color:#fff;background-color:#333333;} 34 | .carttit{background:#e5e5e5;padding:0 20rpx;height:100rpx;line-height:100rpx;} 35 | .carttit0{width:200rpx;height:50rpx;font-size: 30rpx;float:left;color:#4a4a4a;margin-top:25rpx;line-height:50rpx;border-left:3px solid #ffd600;text-indent:15rpx;} 36 | .cartempty{font-size: 30rpx;float:right;color:#4a4a4a;text-align: right} 37 | .carttxt{padding:0 20rpx;height:80rpx;line-height:80rpx;border-bottom:1px solid #d5d5d5} 38 | .carttxt0{width:100rpx;height:50rpx;font-size:24rpx;float:left;color:#f38d1e;margin-top:15rpx;line-height:50rpx;border:1px solid #f38d1e;text-align: center;border-radius:3px;margin-right:5px;} 39 | .carttxt1{float:left;font-size:24rpx;color:#4a4a4a;text-align: right} 40 | .cartimg{width:30rpx;height:40rpx;position:relative;top:8rpx;margin-right:3px;} 41 | 42 | /*弹窗*/ 43 | .goods-detail .mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999999} 44 | .goods-detail .mask{background: rgba(0,0,0,0.7);} 45 | .goodsdetail{position: fixed;top:50%;width:80%;height:800rpx;left:10%;margin-top:-450rpx;background: #fff;z-index: 99999999999999;border-radius:10px;overflow: hidden} 46 | .banner{height: 500rpx;border-radius:10px;} 47 | .banner image{width: 100%;height: 100%;border-radius:10px 10px 0 0;} 48 | .goodsdetail .title1{padding:10rpx 20rpx;color:#3c3c3c;font-size: 36rpx;} 49 | .goodsdetail .title2{padding:5rpx 20rpx;color:#3c3c3c;font-size: 24rpx;} 50 | .goodsdetail .title3{padding:5rpx 20rpx;color:#3c3c3c;font-size: 24rpx;} 51 | .goodsdetail .title3 image{width:24rpx;height:24rpx} 52 | .goodsdetail .title4{width:100%;position:absolute;bottom:20rpx;color:#3c3c3c;} 53 | .goodsdetail .title5{width:50%;float:left;font-size:36rpx;margin-left:20rpx;font-size: 36rpx;} 54 | .goodsdetail .title6{width:200rpx;height:80rpx;font-size: 24rpx;line-height:80rpx;float:right;background:#393939;color:#fff;text-align:center;margin-right:20rpx;border-radius:5px;} 55 | .goodsdetail .title7{height:80rpx;font-size: 24rpx;float:right;color:#4a4a4a;text-align:center;margin-right:30rpx;border-radius:5px;} 56 | 57 | 58 | .goodsdetail .title7 .reduce, 59 | .goodsdetail .title7 .add{font-size: 50rpx;background: #feb70f;width: 50rpx;height: 50rpx;text-align: center;border-radius: 50%;float:left;line-height:50rpx;} 60 | .goodsdetail .title7 .num{float:left;width:50rpx;line-height:50rpx;text-align: center;margin: 0 10rpx;} 61 | 62 | 63 | 64 | --------------------------------------------------------------------------------