wxd / MShopWeApp

Commit bf795fd7fcc76596a73b902edbb18723978964f7

Authored by taiyuan
1 parent 776e03ed

预约服务

Inline Side-by-side
Showing 3 changed files with 209 additions and 34 deletions
packageA/pages/my_service/appment_main.js
  View file @bf795fd
@@ -44,6 +44,14 @@ Page({ @@ -44,6 +44,14 @@ Page({
44 validay: "", //服务项目有效期 44 validay: "", //服务项目有效期
45 is_sub: 0, //判断是否重复提交 45 is_sub: 0, //判断是否重复提交
46 is_textea: 1, //备注是否是可输入 46 is_textea: 1, //备注是否是可输入
  47 +
  48 +
  49 + // 拖拽参数
  50 + writePosition: [80, 90], //默认定位参数
  51 + writesize: [0, 0],// X Y 定位
  52 + window: [0, 0], //屏幕尺寸
  53 + write: [0, 0], //定位参数
  54 + scrolltop: 0,//据顶部距离
47 }, 55 },
48 //控制备注输入 56 //控制备注输入
49 check_text: function() { 57 check_text: function() {
@@ -533,6 +541,10 @@ Page({ @@ -533,6 +541,10 @@ Page({
533 * 生命周期函数--监听页面加载 541 * 生命周期函数--监听页面加载
534 */ 542 */
535 onLoad: function(options) { 543 onLoad: function(options) {
  544 +
  545 +
  546 +
  547 +
536 var th = this; 548 var th = this;
537 th.setData({ 549 th.setData({
538 options, 550 options,
@@ -743,8 +755,66 @@ Page({ @@ -743,8 +755,66 @@ Page({
743 755
744 } 756 }
745 }) 757 })
746 - }  
747 - 758 + },
  759 +
  760 +
  761 +
  762 + //计算默认定位值
  763 + getSysdata: function () {
  764 + var that = this;
  765 + wx.getSystemInfo({
  766 + success: function (e) {
  767 + that.data.window = [e.windowWidth, e.windowHeight];
  768 + var write = [];
  769 + write[0] = that.data.window[0] * that.data.writePosition[0] / 100;
  770 + write[1] = that.data.window[1] * that.data.writePosition[1] / 100;
  771 + console.log(write,45)
  772 + that.setData({
  773 + write: write
  774 + }, function () {
  775 + // 获取元素宽高
  776 + wx.createSelectorQuery().select('.td').boundingClientRect(function (res) {
  777 + // console.log('0x0x',res.width)
  778 + that.data.writesize = [res.width, res.height];
  779 + }).exec();
  780 + })
  781 + },
  782 + fail: function (e) {
  783 + console.log(e)
  784 + }
  785 + });
  786 + },
  787 + //开始拖拽
  788 + touchmove: function (e) {
  789 + // console.log(123);
  790 + var that = this;
  791 + var position = [e.touches[0].pageX - that.data.writesize[0] / 2, e.touches[0].pageY - that.data.writesize[1] / 2 - this.data.scrolltop];
  792 + that.setData({
  793 + write: position
  794 + });
  795 + this.getSysdata();
  796 + },
  797 + onPageScroll(e) {
  798 + this.data.scrolltop = e.scrollTop;
  799 + },
748 800
  801 + scroll(e) {
  802 + // console.log('scroll', e);
  803 + },
  804 +
  805 + rect() {
  806 + // console.log('click');
  807 + // wx.createSelectorQuery().select('.td').boundingClientRect(function (res) {
  808 + // console.log('0x0x',res);
  809 + // }).exec();
  810 + },
  811 +
  812 + print(e) {
  813 + console.log('e', e);
  814 + wx.createSelectorQuery().select('.td').boundingClientRect(function (res) {
  815 + console.log('0x0x',res);
  816 + // that.data.writesize = [res.width, res.height];
  817 + }).exec();
  818 + },
749 819
750 }) 820 })
751 \ No newline at end of file 821 \ No newline at end of file
packageA/pages/my_service/appment_main.wxml
  View file @bf795fd
1 <wxs module="filters" src="../../../utils/filter.wxs"></wxs> 1 <wxs module="filters" src="../../../utils/filter.wxs"></wxs>
2 <view class="container" catchtap="close"> 2 <view class="container" catchtap="close">
3 <image class="main" src="{{iurl}}/miniapp/images/yyservice/main.png"></image> 3 <image class="main" src="{{iurl}}/miniapp/images/yyservice/main.png"></image>
4 -  
5 - <view class="Fram"> 4 + <!-- Fram -->
  5 + <view class="">
6 <!-- 选择门店 --> 6 <!-- 选择门店 -->
7 - <view class="flex-vertical mabot"> 7 + <view class="flex-vertical pdv20 jc-center">
8 <!-- 门店 --> 8 <!-- 门店 -->
9 <view class="flex-vertical-between head fs30"> 9 <view class="flex-vertical-between head fs30">
10 <view>门</view> 10 <view>门</view>
@@ -17,54 +17,120 @@ @@ -17,54 +17,120 @@
17 <view class="angle">∟</view> 17 <view class="angle">∟</view>
18 </view> 18 </view>
19 </view> 19 </view>
  20 +
  21 +
  22 + <view class="table flex">
  23 + <view class="left t-c">
  24 + <view class="td">时间</view>
  25 + <view class="td">8:00</view>
  26 + <view class="td">9:00</view>
  27 + </view>
  28 + <scroll-view scroll-x class="right" bindscroll="scroll">
  29 + <view class="flex t-c" bindtap="rect">
  30 + <view bindtap="rect">
  31 + <view class="td blue">张三</view>
  32 + <view class="td" bindtap="print">100</view>
  33 + <view class="td">200</view>
  34 + </view>
  35 + <view>
  36 + <view class="td blue">张三</view>
  37 + <view class="td">100</view>
  38 + <view class="td">200</view>
  39 + </view>
  40 + <view>
  41 + <view class="td blue">张三</view>
  42 + <view class="td" bindtap="print">100</view>
  43 + <view class="td">200</view>
  44 + </view>
  45 + <view>
  46 + <view class="td blue">张三</view>
  47 + <view class="td">100</view>
  48 + <view class="td">200</view>
  49 + </view>
  50 + <view>
  51 + <view class="td blue">张三</view>
  52 + <view class="td">100</view>
  53 + <view class="td">200</view>
  54 + </view>
  55 + <view>
  56 + <view class="td blue">张三</view>
  57 + <view class="td">100</view>
  58 + <view class="td">200</view>
  59 + </view>
  60 + <view>
  61 + <view class="td blue">张三</view>
  62 + <view class="td">100</view>
  63 + <view class="td">200</view>
  64 + </view>
  65 + <view>
  66 + <view class="td blue">1张三</view>
  67 + <view class="td">300</view>
  68 + <view class="td">300</view>
  69 + </view>
  70 + </view>
  71 + </scroll-view>
  72 + <view class="card">
  73 + <view class="t-c pd20">
  74 + <text class="iconfont icon-meirong fs40"></text>
  75 + <view class="fs24">项目1</view>
  76 + </view>
  77 + <view class="t-c pd20">
  78 + <text class="iconfont icon-meirong fs40"></text>
  79 + <view class="fs24">项目1</view>
  80 + </view>
  81 + </view>
  82 + </view>
  83 +
  84 +
  85 +
20 <!-- 选择美容师 --> 86 <!-- 选择美容师 -->
21 - <view class="flex-vertical mabot"> 87 + <!-- <view class="flex-vertical mabot"> -->
22 <!-- 门店 --> 88 <!-- 门店 -->
23 - <view class="flex-vertical-between head fs30"> 89 + <!-- <view class="flex-vertical-between head fs30">
24 <view>美</view> 90 <view>美</view>
25 <view>容</view> 91 <view>容</view>
26 <view>师</view> 92 <view>师</view>
27 - </view> 93 + </view> -->
28 94
29 <!-- 选择美容师 --> 95 <!-- 选择美容师 -->
30 - <view class="rel fs26">  
31 - <view class="flex-vertical-between Cosmetology" bindtap="query_beautician"> 96 + <!-- <view class="rel fs26"> -->
  97 + <!-- <view class="flex-vertical-between Cosmetology" bindtap="query_beautician">
32 <view class="{{beautician_name==''?'color':''}} value ellipsis-1">{{beautician_name==''?'选择美容师':beautician_name}}</view> 98 <view class="{{beautician_name==''?'color':''}} value ellipsis-1">{{beautician_name==''?'选择美容师':beautician_name}}</view>
33 <view class="angle">∟</view> 99 <view class="angle">∟</view>
34 - </view> 100 + </view> -->
35 <!-- 美容师下拉列表 --> 101 <!-- 美容师下拉列表 -->
36 - <view class="beauticians abs" wx:if="{{beautician}}"> 102 + <!-- <view class="beauticians abs" wx:if="{{beautician}}"> -->
37 <!-- 到时候要做判断如果是index==循环的最后一个则把下边线去掉:(beaclone去掉的css) --> 103 <!-- 到时候要做判断如果是index==循环的最后一个则把下边线去掉:(beaclone去掉的css) -->
38 - <view class="beautician flex-vertical fs26" wx:for="{{beautician_list}}" bindtap="choice_beautician" data-baaindex="{{key}}" wx:for-index="key"> 104 + <!-- <view class="beautician flex-vertical fs26" wx:for="{{beautician_list}}" bindtap="choice_beautician" data-baaindex="{{key}}" wx:for-index="key">
39 <view class="StaffName ellipsis-1">{{item.StaffName}}</view> 105 <view class="StaffName ellipsis-1">{{item.StaffName}}</view>
40 </view> 106 </view>
41 <view> 107 <view>
42 </view> 108 </view>
43 - </view>  
44 - </view>  
45 - <view class="flex-center users" bindtap="nav_bea"> 109 + </view> -->
  110 + <!-- </view> -->
  111 + <!-- <view class="flex-center users" bindtap="nav_bea">
46 <image class="user" src="{{iurl}}/miniapp/images/yyservice/user.png"></image> 112 <image class="user" src="{{iurl}}/miniapp/images/yyservice/user.png"></image>
47 - </view>  
48 - </view> 113 + </view> -->
  114 + <!-- </view> -->
49 115
50 <!-- 选择时间 --> 116 <!-- 选择时间 -->
51 - <view class="flex-vertical mabot"> 117 + <!-- <view class="flex-vertical mabot"> -->
52 <!-- 门店 --> 118 <!-- 门店 -->
53 - <view class="head fs30"> 119 + <!-- <view class="head fs30">
54 <view>预约时间</view> 120 <view>预约时间</view>
55 - </view> 121 + </view> -->
56 122
57 <!-- 选择时间 --> 123 <!-- 选择时间 -->
58 - <view class="flex-vertical-between fs26 select" data-url="/packageA/pages/my_service/beauty_deta?url={{url}}&StorageId={{StorageId}}&BeauticianID={{beauticianID}}&itemId={{itemId}}&modify=0&projectId={{project_id}}" bindtap="goto"> 124 + <!-- <view class="flex-vertical-between fs26 select" data-url="/packageA/pages/my_service/beauty_deta?url={{url}}&StorageId={{StorageId}}&BeauticianID={{beauticianID}}&itemId={{itemId}}&modify=0&projectId={{project_id}}" bindtap="goto">
59 <view class="{{time==''?'color':''}}">{{time==""?'选择时间':time}}</view> 125 <view class="{{time==''?'color':''}}">{{time==""?'选择时间':time}}</view>
60 <view class="angle angler">∟</view> 126 <view class="angle angler">∟</view>
61 - </view>  
62 - </view> 127 + </view> -->
  128 + <!-- </view> -->
63 129
64 <!-- 备注 --> 130 <!-- 备注 -->
65 - <view class="flex Remarks"> 131 + <!-- <view class="flex Remarks"> -->
66 <!-- 门店 --> 132 <!-- 门店 -->
67 - <view class="flex-space-between head fs30"> 133 + <!-- <view class="flex-space-between head fs30">
68 <view>备</view> 134 <view>备</view>
69 <view>注</view> 135 <view>注</view>
70 </view> 136 </view>
@@ -77,20 +143,20 @@ @@ -77,20 +143,20 @@
77 <view class="textarea {{remarks==''?'color':''}}" bindtap="check_text">{{remarks==''?'填写备注':remarks}} 143 <view class="textarea {{remarks==''?'color':''}}" bindtap="check_text">{{remarks==''?'填写备注':remarks}}
78 </view> 144 </view>
79 </block> 145 </block>
80 - </view>  
81 - </view> 146 + </view> -->
  147 + <!-- </view>
82 <view wx:if="{{tment_count!=''}}" class="notes flex-level-right fs24 color"> 148 <view wx:if="{{tment_count!=''}}" class="notes flex-level-right fs24 color">
83 <view>注：剩余可预约人数{{tment_count}}人</view> 149 <view>注：剩余可预约人数{{tment_count}}人</view>
84 - </view> 150 + </view> -->
85 151
86 - <view class="submitMax flex-space-center fs32"> 152 + <!-- <view class="submitMax flex-space-center fs32"> -->
87 <!-- <navigator class="appment flex-center" url="/pages/user/my_service/tment_order_list"> 153 <!-- <navigator class="appment flex-center" url="/pages/user/my_service/tment_order_list">
88 <view>我的预约</view> 154 <view>我的预约</view>
89 </navigator> --> 155 </navigator> -->
90 - <form report-submit='true' bindtap="sub_success"> 156 + <!-- <form report-submit='true' bindtap="sub_success">
91 <button form-type="submit" class="sub_appment flex-center">帮你预约</button> 157 <button form-type="submit" class="sub_appment flex-center">帮你预约</button>
92 - </form>  
93 - </view> 158 + </form> -->
  159 + <!-- </view> -->
94 </view> 160 </view>
95 161
96 </view> 162 </view>
@@ -147,4 +213,6 @@ @@ -147,4 +213,6 @@
147 <view wx:if="{{store}}" class="disgraceful" bindtap="onclickstore"></view> 213 <view wx:if="{{store}}" class="disgraceful" bindtap="onclickstore"></view>
148 <warn id="warn"></warn> 214 <warn id="warn"></warn>
149 <!-- 制作一个圆球导航 --> 215 <!-- 制作一个圆球导航 -->
150 -<!-- <nav_b id="nav_b"></nav_b> -->  
151 \ No newline at end of file 216 \ No newline at end of file
  217 +<!-- <nav_b id="nav_b"></nav_b> -->
  218 +
  219 +<view bindtouchmove="touchmove" catch:touchmove style="position:absolute;left:{{write[0]}}px;top:{{write[1]}}px;">我可以移动</view>
152 \ No newline at end of file 220 \ No newline at end of file
packageA/pages/my_service/appment_main.wxss
  View file @bf795fd
@@ -286,3 +286,40 @@ button { @@ -286,3 +286,40 @@ button {
286 height: 80rpx; 286 height: 80rpx;
287 color: rgb(159, 159, 159); 287 color: rgb(159, 159, 159);
288 } 288 }
  289 +
  290 +
  291 +.table {
  292 + background-color: white;
  293 + border-top: 2rpx solid rgba(218, 217, 217, 1);
  294 + border-left: 2rpx solid rgba(218, 217, 217, 1);
  295 +}
  296 +.blue {
  297 + background: rgba(241, 252, 255, 1);
  298 +}
  299 +.td {
  300 + width: 100rpx;
  301 + height: 100rpx;
  302 + display: flex;
  303 + align-items: center;
  304 + justify-content: center;
  305 + border-right: 2rpx solid rgba(218, 217, 217, 1);
  306 + border-bottom: 2rpx solid rgba(218, 217, 217, 1);
  307 +}
  308 +
  309 +.left {
  310 + box-shadow: 4px 0px 6px #e7e9eb;
  311 +}
  312 +
  313 +.right {
  314 + width: calc(100% - 102rpx);
  315 + padding-right: 102rpx;
  316 + box-sizing: border-box;
  317 +}
  318 +
  319 +.card {
  320 + position: fixed;
  321 + right: 0;
  322 + background-color: white;
  323 + box-shadow: 4px 0px 12px #e7e9eb;
  324 + border-radius: 8rpx;
  325 +}