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 44 validay: "", //服务项目有效期
45 45 is_sub: 0, //判断是否重复提交
46 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 57 check_text: function() {
... ... @@ -533,6 +541,10 @@ Page({
533 541 * 生命周期函数--监听页面加载
534 542 */
535 543 onLoad: function(options) {
  544 +
  545 +
  546 +
  547 +
536 548 var th = this;
537 549 th.setData({
538 550 options,
... ... @@ -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 821 \ No newline at end of file
... ...
packageA/pages/my_service/appment_main.wxml
  View file @bf795fd
1 1 <wxs module="filters" src="../../../utils/filter.wxs"></wxs>
2 2 <view class="container" catchtap="close">
3 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 9 <view class="flex-vertical-between head fs30">
10 10 <view>门</view>
... ... @@ -17,54 +17,120 @@
17 17 <view class="angle">∟</view>
18 18 </view>
19 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 90 <view>美</view>
25 91 <view>容</view>
26 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 98 <view class="{{beautician_name==''?'color':''}} value ellipsis-1">{{beautician_name==''?'选择美容师':beautician_name}}</view>
33 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 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 105 <view class="StaffName ellipsis-1">{{item.StaffName}}</view>
40 106 </view>
41 107 <view>
42 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 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 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 125 <view class="{{time==''?'color':''}}">{{time==""?'选择时间':time}}</view>
60 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 134 <view>备</view>
69 135 <view>注</view>
70 136 </view>
... ... @@ -77,20 +143,20 @@
77 143 <view class="textarea {{remarks==''?'color':''}}" bindtap="check_text">{{remarks==''?'填写备注':remarks}}
78 144 </view>
79 145 </block>
80   - </view>
81   - </view>
  146 + </view> -->
  147 + <!-- </view>
82 148 <view wx:if="{{tment_count!=''}}" class="notes flex-level-right fs24 color">
83 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 153 <!-- <navigator class="appment flex-center" url="/pages/user/my_service/tment_order_list">
88 154 <view>我的预约</view>
89 155 </navigator> -->
90   - <form report-submit='true' bindtap="sub_success">
  156 + <!-- <form report-submit='true' bindtap="sub_success">
91 157 <button form-type="submit" class="sub_appment flex-center">帮你预约</button>
92   - </form>
93   - </view>
  158 + </form> -->
  159 + <!-- </view> -->
94 160 </view>
95 161  
96 162 </view>
... ... @@ -147,4 +213,6 @@
147 213 <view wx:if="{{store}}" class="disgraceful" bindtap="onclickstore"></view>
148 214 <warn id="warn"></warn>
149 215 <!-- 制作一个圆球导航 -->
150   -<!-- <nav_b id="nav_b"></nav_b> -->
151 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 220 \ No newline at end of file
... ...
packageA/pages/my_service/appment_main.wxss
  View file @bf795fd
... ... @@ -286,3 +286,40 @@ button {
286 286 height: 80rpx;
287 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 +}
... ...