├── .gitignore ├── LICENSE ├── README.md ├── app.js ├── app.json ├── app.wxss ├── assets └── img │ ├── ic_add.svg │ ├── ic_appointment.svg │ ├── ic_back.svg │ ├── ic_labixiaoxin.jpg │ ├── ic_p6.jpg │ ├── ic_p9.jpg │ ├── ic_phone.svg │ └── ic_position.svg ├── components └── appointment_progress │ ├── appointment_progress.js │ ├── appointment_progress.json │ ├── appointment_progress.wxml │ └── appointment_progress.wxss ├── pages ├── appointmentDetail │ ├── appointmentDetail.js │ ├── appointmentDetail.json │ ├── appointmentDetail.wxml │ └── appointmentDetail.wxss ├── appointments │ ├── appointments.js │ ├── appointments.json │ ├── appointments.wxml │ └── appointments.wxss ├── edit_appointment │ ├── edit_appointment.js │ ├── edit_appointment.json │ ├── edit_appointment.wxml │ └── edit_appointment.wxss ├── goods │ ├── goods.js │ ├── goods.json │ ├── goods.wxml │ └── goods.wxss ├── goods_detail │ ├── goods_detail.js │ ├── goods_detail.json │ ├── goods_detail.wxml │ └── goods_detail.wxss ├── home │ ├── home.js │ ├── home.json │ ├── home.wxml │ └── home.wxss ├── index │ ├── index.js │ ├── index.wxml │ └── index.wxss └── logs │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss ├── project.config.json ├── screenshot ├── Screenshot_20180703-090152.jpg ├── Screenshot_20180703-090201.jpg ├── Screenshot_20180703-090206.jpg └── Screenshot_20180703-090210.jpg └── utils └── util.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Build and Release Folders 2 | bin-debug/ 3 | bin-release/ 4 | [Oo]bj/ 5 | [Bb]in/ 6 | 7 | # Other files and folders 8 | .settings/ 9 | 10 | # Executables 11 | *.swf 12 | *.air 13 | *.ipa 14 | *.apk 15 | 16 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 17 | # should NOT be excluded as they contain compiler settings and other important 18 | # information for Eclipse / Flash Builder. 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # xiaochengxu-appointment 2 | 小程序开发-预约 3 | 前言： 4 | 5 | 上个礼拜开始，想做一个预约功能的APP之类的，最后还是决定以小程序的方式去实现。一来是这个新兴的流量入口潜力无限，二是借这个机会去逼自己学习一下小程序开发，不能纸上谈兵。小程序的开发真的会让人耳目一新、找到初恋的感觉。 6 | 7 | 用了两天时间整理需求、两天时间设计原型，到目前为止用了3天时间开发，因为不是全职做的，所以3天开发出来的完成度不是很高，不过会一直完善这个项目。 8 | 9 | 路过的同学麻烦留个star 10 | 11 | 先上效果图： 12 | csdn: https://blog.csdn.net/bigname22/article/details/80894354 13 | 14 | *对UI方面还是挺满意的，不过首页的地方实在丑，但不知道要怎么修改，希望路过的同学不吝赐教，尤其UI设计的留个宝贵的建议 。* 15 | 16 | 用过vue、ionic之类的框架的同学应该很容易上手这个东东、目前来说相对比vue、ionic来说，小程序只是换换语法、少了一些功能而已。能记起来几个不顺手的地方，一个就是双向绑定数据源那边做了修改还必须要用setData去改变值才会得到响应、html的标签不能用、wx:for标签用的不顺手(心理作用)。 17 | 18 | 工作了一年半，学的很杂乱无章，很多东西都懂一点、但又什么都不懂；对某个技术没有够硬的基础、没有深度的挖掘，加上慵懒散漫的性格，使得技术层次方面没有大的进步，只能偶尔看看书维持下程序员的生活。 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | mainColor1: "#F7654E", 38 | mainColor2: "#FB8C7A", 39 | mainColor3: "#FBA99D", 40 | mainColor4: "#A12C19", 41 | userInfo: null 42 | }, 43 | // 通过订单status返回订单状态描述getValuesByStatus 44 | getValuesByStatus: function (status) { 45 | let valueObj = { 46 | desc: '', 47 | color: '' 48 | }; 49 | switch (status) { 50 | case 0: 51 | valueObj.desc = '未接单'; 52 | valueObj.color = '#FF0000' 53 | break; 54 | case 1: 55 | valueObj.desc = '已接单'; 56 | valueObj.color = '#228B22' 57 | break; 58 | case 2: 59 | valueObj.desc = '已取消'; 60 | valueObj.color = '#BEBEBE' 61 | break; 62 | case 3: 63 | valueObj.desc = '已取消'; 64 | valueObj.color = '#BEBEBE' 65 | break; 66 | case 4: 67 | valueObj.desc = '已结单'; 68 | valueObj.color = '#FFD700' 69 | break; 70 | } 71 | return valueObj; 72 | } 73 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/home/home", 4 | "pages/appointmentDetail/appointmentDetail", 5 | "pages/goods_detail/goods_detail", 6 | "pages/appointments/appointments", 7 | "pages/goods/goods", 8 | "pages/edit_appointment/edit_appointment", 9 | 10 | "pages/index/index", 11 | "pages/logs/logs" 12 | ], 13 | "window": { 14 | "backgroundTextStyle": "light", 15 | "navigationBarBackgroundColor": "#fff", 16 | "navigationBarTitleText": "理发预约", 17 | "navigationBarTextStyle": "black" 18 | } 19 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | .class_block { 13 | display: block; 14 | } 15 | 16 | .iv_48 { 17 | width: 48px; 18 | height: 48px 19 | } 20 | 21 | .iv_78 { 22 | width: 78px; 23 | height: 78px; 24 | } 25 | 26 | .tv_color1 { 27 | color: #F7654E !important; 28 | } 29 | 30 | .tv_color2 { 31 | color: #FB8C7A !important; 32 | } 33 | 34 | .tv_color3 { 35 | color: #FBA99D !important; 36 | 37 | } 38 | 39 | .tv_color4 { 40 | color: #A12C19 !important; 41 | } 42 | 43 | .tv_color5 { 44 | color: rgba(251, 169, 157, 0.5) !important; 45 | } 46 | 47 | .bg_color1 { 48 | background-color: #F7654E !important; 49 | } 50 | 51 | .bg_color2 { 52 | background-color: #FB8C7A !important; 53 | } 54 | 55 | .bg_color3 { 56 | background-color: #FBA99D !important; 57 | } 58 | 59 | .bg_color4 { 60 | background-color: #A12C19 !important; 61 | } 62 | 63 | .bg_color5 { 64 | background-color: rgba(251, 169, 157, 0.1) !important; 65 | } 66 | 67 | .tv_white { 68 | color: white; 69 | } 70 | 71 | .divider { 72 | border-top: 1px solid #eee; 73 | } 74 | 75 | .v-divider { 76 | background-color: #eee; 77 | height: 1px; 78 | width: 100%; 79 | } 80 | 81 | .box_shadow { 82 | box-shadow: 0px 0px 1px 0px #ccc; 83 | } 84 | 85 | 86 | @font-face { 87 | font-family: 'iconfont'; /* project id 518032 */ 88 | src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); 89 | src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') format('embedded-opentype'), 90 | url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.woff') format('woff'), 91 | url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.ttf') format('truetype'), 92 | url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.svg#iconfont') format('svg'); 93 | } 94 | .iconfont { 95 | font-family:"iconfont" !important; 96 | font-size:60rpx; 97 | font-style:normal; 98 | -webkit-font-smoothing: antialiased; 99 | -moz-osx-font-smoothing: grayscale; 100 | } 101 | /*本项目使用的18个图标 */ 102 | .icon-zhiding:before{content: '\e739';} 103 | .icon-zuojiantou:before{content: '\e736';} 104 | .icon-youjiantou:before{content: '\e735';} 105 | .icon-shangjiantou:before{content: '\e734';} 106 | .icon-xiajiantou1:before{content: '\e733';} 107 | .icon-xiajiantou:before{content: '\e6cc';} 108 | .icon-gengduotianchong:before{content: '\e67f';} 109 | .icon-erweima:before{content: '\e65f';} 110 | .icon-fenleiorguangchangorqita:before{content: '\e64f';} 111 | .icon-dibiao:before{content: '\e64d';} 112 | .icon-bangzhu:before{content: '\e64a';} 113 | .icon-xinfeng:before{content: '\e640';} 114 | .icon-duihuaxinxi:before{content: '\e639';} 115 | .icon-sousuo:before{content: '\e62f';} 116 | .icon-shouye:before{content: '\e62d';} 117 | .icon-shezhi:before{content: '\e62a';} 118 | .icon-shanchu:before{content: '\e629';} 119 | .icon-dianhua:before{content: '\e61b';} 120 | -------------------------------------------------------------------------------- /assets/img/ic_add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/ic_appointment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/ic_back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/ic_labixiaoxin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigname22/xiaochengxu-appointment/26cfe9838e9af484c24322a2ee35ec64302282bf/assets/img/ic_labixiaoxin.jpg -------------------------------------------------------------------------------- /assets/img/ic_p6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigname22/xiaochengxu-appointment/26cfe9838e9af484c24322a2ee35ec64302282bf/assets/img/ic_p6.jpg -------------------------------------------------------------------------------- /assets/img/ic_p9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigname22/xiaochengxu-appointment/26cfe9838e9af484c24322a2ee35ec64302282bf/assets/img/ic_p9.jpg -------------------------------------------------------------------------------- /assets/img/ic_phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/ic_position.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/appointment_progress/appointment_progress.js: -------------------------------------------------------------------------------- 1 | // components/appointment_progress/appointment_progress.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | status: { 8 | type: Number, 9 | } 10 | }, 11 | 12 | /** 13 | * 组件的初始数据 14 | */ 15 | data: { 16 | statues: [ 17 | { 18 | status: 0, 19 | desc: '未接单', 20 | icon: '', 21 | isLight: false, 22 | }, 23 | { 24 | status: 1, 25 | desc: '已接单', 26 | icon: '', 27 | isLight: false, 28 | }, 29 | { 30 | status: 2, 31 | desc: '已取消', 32 | icon: '', 33 | isLight: false, 34 | }, 35 | { 36 | status: 4, 37 | desc: '已结单', 38 | icon: '', 39 | isLight: false, 40 | } 41 | ] 42 | }, 43 | 44 | /** 45 | * 组件的方法列表 46 | */ 47 | methods: { 48 | 49 | } 50 | }) 51 | -------------------------------------------------------------------------------- /components/appointment_progress/appointment_progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/appointment_progress/appointment_progress.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.desc}} 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components/appointment_progress/appointment_progress.wxss: -------------------------------------------------------------------------------- 1 | /* components/appointment_progress/appointment_progress.wxss */ 2 | .appointment_progress_container { 3 | display: flex; 4 | flex-direction: row; 5 | justify-content: space-around; 6 | align-items: center; 7 | max-height: 48px; 8 | box-shadow: 0px 0px 1px 1px #eee; 9 | margin: 16px; 10 | padding: 6px 16px; 11 | font-size: 14px; 12 | } 13 | 14 | 15 | .item_status { 16 | } 17 | 18 | .divider_left { 19 | border-bottom: 1px solid #eee; 20 | display: inline-block; 21 | flex: 1; 22 | background-color: red; 23 | } 24 | 25 | .divider_right { 26 | border-bottom: 1px solid #eee; 27 | display: inline-block; 28 | } -------------------------------------------------------------------------------- /pages/appointmentDetail/appointmentDetail.js: -------------------------------------------------------------------------------- 1 | // pages/appointmentDetail/appointmentDetail.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | appointmentDetail: { 9 | name: '周润发', // 预留姓名 10 | phone: '18828384234', // 预留电话 11 | status: 4, // 0:未接单 1：已接单 2：用户取消 3：商家取消 4：已接单 12 | editTime: '150050304353', // 编辑时间 13 | appointmentTime: '150050304353', // 预约时间 14 | appointmentNumberOfPeople: 2, // 预约到店人数 15 | remarks: '先帮忙倒杯水', // 备注 16 | barber: { // 预约理发师 17 | name: '盲辉', 18 | price: '68', 19 | job: '店长', 20 | goodRate: 100, 21 | reservationNum: 440 22 | }, 23 | store: { 24 | name: '奥莱呀呀美发店', 25 | address: '广东省广州市白云区西槎路聚龙商业广场8号', 26 | phone: '18829193123', 27 | wechatCount: 'bignamesss', 28 | boss: { 29 | 30 | } 31 | } 32 | } 33 | }, 34 | 35 | /** 36 | * 生命周期函数--监听页面加载 37 | */ 38 | onLoad: function (options) { 39 | this.fixData(); 40 | }, 41 | 42 | /** 43 | * 生命周期函数--监听页面初次渲染完成 44 | */ 45 | onReady: function () { 46 | }, 47 | 48 | /** 49 | * 生命周期函数--监听页面显示 50 | */ 51 | onShow: function () { 52 | 53 | }, 54 | 55 | /** 56 | * 生命周期函数--监听页面隐藏 57 | */ 58 | onHide: function () { 59 | 60 | }, 61 | 62 | /** 63 | * 生命周期函数--监听页面卸载 64 | */ 65 | onUnload: function () { 66 | 67 | }, 68 | 69 | /** 70 | * 页面相关事件处理函数--监听用户下拉动作 71 | */ 72 | onPullDownRefresh: function () { 73 | 74 | }, 75 | 76 | /** 77 | * 页面上拉触底事件的处理函数 78 | */ 79 | onReachBottom: function () { 80 | 81 | }, 82 | 83 | /** 84 | * 用户点击右上角分享 85 | */ 86 | onShareAppMessage: function () { 87 | 88 | }, 89 | 90 | fixData: function () { 91 | let valueObj = getApp().getValuesByStatus(this.data.appointmentDetail.status); 92 | this.data.appointmentDetail.color = valueObj.color; 93 | this.data.appointmentDetail.statusDesc = valueObj.desc; 94 | this.setData({ 95 | appointmentDetail: this.data.appointmentDetail 96 | }) 97 | console.log(valueObj.color) 98 | wx.setNavigationBarColor({ 99 | frontColor: '#ffffff', 100 | backgroundColor: this.data.appointmentDetail.color, 101 | animation: { 102 | duration: 400, 103 | timingFunc: 'easeIn' 104 | } 105 | }) 106 | } 107 | }) -------------------------------------------------------------------------------- /pages/appointmentDetail/appointmentDetail.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "预约详情", 3 | "navigationBarTextStyle": "white", 4 | "usingComponents": { 5 | "appointmentProgress": "/components/appointment_progress/appointment_progress" 6 | } 7 | } -------------------------------------------------------------------------------- /pages/appointmentDetail/appointmentDetail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{appointmentDetail.statusDesc}} 5 | 6 | 7 | 8 | 9 | 10 | 到店倒计时 11 | 01 12 | 天 13 | 12 14 | H 15 | 01 16 | m 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 评价 26 | 27 | 28 | 29 | 30 | {{appointmentDetail.store.name}} 31 | 32 | 33 | 34 | 35 | 到店时间 36 | 37 | 38 | {{appointmentDetail.appointmentTime}} 39 | 40 | 41 | 42 | 43 | 44 | 到店人数 45 | 46 | 47 | {{appointmentDetail.appointmentNumberOfPeople}} 48 | 49 | 50 | 51 | 52 | 53 | 预约理发师 54 | 55 | 56 | {{appointmentDetail.barber.name}} 57 | 58 | 59 | 60 | 61 | 62 | 预留姓名 63 | 64 | 65 | {{appointmentDetail.name}} 66 | 67 | 68 | 69 | 70 | 71 | 预留号码 72 | 73 | 74 | {{appointmentDetail.phone}} 75 | 76 | 77 | 78 | 79 | 80 | 提交时间 81 | 82 | 83 | {{appointmentDetail.editTime}} 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 取消预约 94 | 联系商家 95 | 96 | 97 | -------------------------------------------------------------------------------- /pages/appointmentDetail/appointmentDetail.wxss: -------------------------------------------------------------------------------- 1 | /* pages/appointmentDetail/appointmentDetail.wxss */ 2 | .item_top { 3 | display: flex; 4 | justify-content: space-between; 5 | background-color: red; 6 | padding: 24px 16px 8px 16px; 7 | align-items:flex-end; 8 | } 9 | 10 | .item_detail { 11 | margin: 16px; 12 | padding: 16px; 13 | box-shadow: 0px 0px 1px #ccc; 14 | } 15 | 16 | .btn_func { 17 | text-align: center; 18 | line-height: 24px; 19 | /* border: 1px solid #aaa; */ 20 | border-radius: 12px; 21 | font-size: 14px; 22 | margin: 4px; 23 | } 24 | 25 | .tv_func { 26 | text-align: center; 27 | font-size: 16px; 28 | margin: 6px 4px; 29 | } 30 | 31 | .tv_title { 32 | font-size: 28px; 33 | color: white; 34 | } 35 | 36 | .tv_count_down { 37 | color: #ddd; 38 | font-size: 12px; 39 | margin-right: 8px; 40 | } 41 | 42 | 43 | .item_left { 44 | display: flex; 45 | align-items: center; 46 | } 47 | 48 | .circle { 49 | width: 14px; 50 | height: 14px; 51 | background: #ececec; 52 | border-radius: 50%; 53 | margin-right: 12px; 54 | } 55 | 56 | .item_detail_item { 57 | display: flex; 58 | align-items: center; 59 | justify-content: space-between; 60 | margin-bottom: 12px; 61 | } 62 | 63 | .tv_key { 64 | color: #7a7a7a; 65 | font-size: 16px; 66 | 67 | } 68 | 69 | .tv_value { 70 | color: #7a7a7a; 71 | font-size: 16px; 72 | } 73 | 74 | .tv_store_name { 75 | font-size: 18px; 76 | } 77 | 78 | .iv_divider { 79 | border-bottom: 1px solid #eee; 80 | margin: 12px 0px; 81 | } 82 | 83 | .item_func { 84 | display: flex; 85 | align-items: center; 86 | justify-content: space-around; 87 | position: absolute; 88 | bottom: 0px; 89 | left: 0px; 90 | width: 100%; 91 | line-height: 58px; 92 | border-top: 1px solid #eee; 93 | } -------------------------------------------------------------------------------- /pages/appointments/appointments.js: -------------------------------------------------------------------------------- 1 | // pages/appointments/appointments.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | appointments: [ 9 | { 10 | id: '1231', 11 | name: '周润发', // 预留姓名 12 | phone: '18828384234', // 预留电话 13 | status: 1, // 0:未接单 1：已接单 2：用户取消 3：商家取消 4：已接单 14 | editTime: '150050304353', // 编辑时间 15 | appointmentTime: '150050304353', // 预约时间 16 | appointmentNumberOfPeople: 2, // 预约到店人数 17 | remarks: '先帮忙倒杯水', // 备注 18 | statusDesc: '--12', 19 | barber: { // 预约理发师 20 | name: '盲辉', 21 | price: '68', 22 | job: '店长', 23 | goodRate: 100, 24 | reservationNum: 440 25 | }, 26 | }, 27 | { 28 | id: '1232', 29 | name: '周润发', // 预留姓名 30 | phone: '18828384234', // 预留电话 31 | status: 4, // 0:未接单 1：已接单 2：用户取消 3：商家取消 4：已结单 32 | editTime: '150050304353', // 编辑时间 33 | appointmentTime: '150050304353', // 预约时间 34 | appointmentNumberOfPeople: 2, // 预约到店人数 35 | remarks: '先帮忙倒杯水', // 备注 36 | statusDesc: '--13', 37 | barber: { // 预约理发师 38 | name: '盲辉', 39 | price: '68', 40 | job: '店长', 41 | goodRate: 100, 42 | reservationNum: 440 43 | }, 44 | }, 45 | ] 46 | }, 47 | 48 | /** 49 | * 生命周期函数--监听页面加载 50 | */ 51 | onLoad: function (options) { 52 | 53 | }, 54 | 55 | /** 56 | * 生命周期函数--监听页面初次渲染完成 57 | */ 58 | onReady: function () { 59 | this.fixData(); 60 | }, 61 | 62 | /** 63 | * 生命周期函数--监听页面显示 64 | */ 65 | onShow: function () { 66 | 67 | }, 68 | 69 | /** 70 | * 生命周期函数--监听页面隐藏 71 | */ 72 | onHide: function () { 73 | 74 | }, 75 | 76 | /** 77 | * 生命周期函数--监听页面卸载 78 | */ 79 | onUnload: function () { 80 | 81 | }, 82 | 83 | /** 84 | * 页面相关事件处理函数--监听用户下拉动作 85 | */ 86 | onPullDownRefresh: function () { 87 | 88 | }, 89 | 90 | /** 91 | * 页面上拉触底事件的处理函数 92 | */ 93 | onReachBottom: function () { 94 | 95 | }, 96 | 97 | /** 98 | * 用户点击右上角分享 99 | */ 100 | onShareAppMessage: function () { 101 | 102 | }, 103 | 104 | fixData: function () { 105 | for (let i=0; i< this.data.appointments.length; i++) { 106 | let item = this.data.appointments[i]; 107 | let valueObj = getApp().getValuesByStatus(item.status) 108 | console.log('---', valueObj); 109 | item.statusDesc = valueObj.desc; 110 | item.color = valueObj.color; 111 | } 112 | console.log('appointments', this.data.appointments); 113 | this.setData({ 114 | appointments: this.data.appointments, 115 | }) 116 | }, 117 | 118 | btnClickItem: function (e) { 119 | wx.navigateTo({ 120 | url: '../appointmentDetail/appointmentDetail?appointmentId=' + e.currentTarget.dataset.item.id 121 | }) 122 | } 123 | }) -------------------------------------------------------------------------------- /pages/appointments/appointments.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "我的预约" 3 | } -------------------------------------------------------------------------------- /pages/appointments/appointments.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.statusDesc}} 7 | 8 | 9 | 10 | 11 | 到店时间 12 | {{item.appointmentTime}} 13 | 14 | 15 | 16 | 17 | 18 | 预约理发师 19 | {{item.barber.name}} 20 | 21 | 22 | 23 | 人数 24 | {{item.appointmentNumberOfPeople}} 25 | 26 | 27 | 28 | 29 | 30 | 31 | 取消预约 32 | 33 | 34 | 35 | 到店倒计时 36 | 37 | 01 38 | 天 39 | 12 40 | H 41 | 01 42 | m 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 评价 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /pages/appointments/appointments.wxss: -------------------------------------------------------------------------------- 1 | /* pages/appointments/appointments.wxss */ 2 | .item{ 3 | margin: 16px; 4 | padding: 16px 16px; 5 | box-shadow: 0px 0px 2px 1px #ccc; 6 | } 7 | 8 | .tv_appointment_time { 9 | text-align: center; 10 | padding: 8px 0px; 11 | } 12 | 13 | .item-detail { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | margin: 16px 0px; 18 | } 19 | 20 | .item_key_value { 21 | text-align: center; 22 | } 23 | 24 | .tv_key { 25 | color: #aaa; 26 | font-size: 12px; 27 | margin-bottom: 12px; 28 | } 29 | 30 | .tv_value { 31 | font-size: 18px; 32 | color: #F7654E; 33 | } 34 | 35 | .divider { 36 | width: 1px; 37 | height: 28px; 38 | background-color: #eee; 39 | } 40 | 41 | .tv_status { 42 | font-size: 12px; 43 | } 44 | 45 | .btn_func { 46 | text-align: center; 47 | line-height: 24px; 48 | /* border: 1px solid #aaa; */ 49 | border-radius: 12px; 50 | font-size: 14px; 51 | margin: 4px; 52 | } 53 | 54 | .tv_func { 55 | font-size: 14px; 56 | margin: 8px 4px; 57 | color: #6a6a6a; 58 | } 59 | 60 | .circle { 61 | width: 14px; 62 | height: 14px; 63 | border-radius: 50%; 64 | background-color: green; 65 | margin-right: 12px; 66 | } 67 | 68 | .tv_title { 69 | display: flex; 70 | align-items: center; 71 | margin-bottom: 16px; 72 | } 73 | 74 | .v_divider { 75 | width: 100%; 76 | height: 1px; 77 | background-color: #eee; 78 | } 79 | 80 | .tv_count_down { 81 | font-size: 18px; 82 | } -------------------------------------------------------------------------------- /pages/edit_appointment/edit_appointment.js: -------------------------------------------------------------------------------- 1 | // pages/appointments/appointments.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | barber: {}, 9 | peopleNums: [ 10 | { 11 | check: true, 12 | text: '1人', 13 | num: 1 14 | }, 15 | { 16 | check: false, 17 | text: '2人', 18 | num: 2 19 | }, 20 | { 21 | check: false, 22 | text: '3人', 23 | num: 3 24 | }, 25 | { 26 | check: false, 27 | text: '4人', 28 | num: 4 29 | }, 30 | { 31 | check: false, 32 | text: '多人', 33 | num: -1 34 | }, 35 | ], 36 | appointmentDate: '2018-06-12', 37 | appointmentTime: '15:00', 38 | showBarber: false, 39 | loading: false, 40 | }, 41 | 42 | /** 43 | * 生命周期函数--监听页面加载 44 | */ 45 | onLoad: function (options) { 46 | let barberStr = options.barber; 47 | console.log('---收到理发师', barberStr) 48 | if(barberStr) { 49 | this.setData({ 50 | barber: JSON.parse(barberStr), 51 | showBarber: true 52 | }) 53 | } 54 | }, 55 | 56 | /** 57 | * 生命周期函数--监听页面初次渲染完成 58 | */ 59 | onReady: function () { 60 | 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 | checkInput: function () { 106 | let result = { 107 | pass: false, 108 | msg: '', 109 | } 110 | if (this.data.barber.name) { 111 | result.pass = true 112 | } else { 113 | result.pass = false; 114 | result.msg = '请选择理发师' 115 | } 116 | return result; 117 | }, 118 | 119 | // ------------------ 点击事件 ----------------------------- 120 | bindDateChange: function (e) { 121 | console.log('picker发送选择改变，携带值为', e.detail.value) 122 | this.setData({ 123 | appointmentDate: e.detail.value 124 | }) 125 | }, 126 | 127 | bindTimeChange: function (e) { 128 | console.log('picker发送选择改变，携带值为', e) 129 | this.setData({ 130 | appointmentTime: e.detail.value 131 | }) 132 | }, 133 | 134 | btnClickAddGood: function (e) { 135 | wx.navigateTo({ 136 | url: '../goods/goods?mark=edit_appointment' 137 | }) 138 | }, 139 | 140 | btnClickNum: function (e) { 141 | for (let i = 0; i < this.data.peopleNums.length; i++) { 142 | let numItem = this.data.peopleNums[i]; 143 | if (e.currentTarget.dataset.item.num == numItem.num) { 144 | numItem.check = true; 145 | }else { 146 | numItem.check = false; 147 | } 148 | } 149 | this.setData({ 150 | peopleNums: this.data.peopleNums 151 | }) 152 | }, 153 | 154 | // 提交预约单 155 | btnClickAppointment: function (e) { 156 | let result = this.checkInput(); 157 | if (result) { 158 | if (result.pass) { 159 | wx.showToast({ 160 | title: '预约成功', 161 | icon: 'success' 162 | }) 163 | } else { 164 | wx.showToast({ 165 | title: result.msg, 166 | icon: 'none' 167 | }) 168 | } 169 | } 170 | } 171 | }) -------------------------------------------------------------------------------- /pages/edit_appointment/edit_appointment.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "开始预约" 3 | } -------------------------------------------------------------------------------- /pages/edit_appointment/edit_appointment.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 周润发 9 | 18827272712 10 | 11 | 12 | 13 | 14 | 到店人数 15 | 16 | {{item.text}} 17 | 18 | 19 | 20 | 21 | 到店时间 22 | 23 | 24 | 预约日期 25 | 26 | 27 | {{appointmentDate}} 28 | 29 | 30 | 31 | 32 | 33 | 预约时间 34 | 35 | 36 | {{appointmentTime}} 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 预约理发师 46 | 47 | 48 | 49 | 50 | {{barber.name}} 51 | 52 | 53 | ¥{{barber.price}} 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |