xt / xcx-book · Commits

Go to a project

Commit b1cde49dcbe038b6d2985c7f333cd141c6f9e54e

Authored by vking
1 parent c38fe96b
build: skipped

blue ui other

Inline Side-by-side
Showing 12 changed files with 201 additions and 99 deletions
  1 +// components/2.0/reserve/card.js
  2 +import util from '../../../utils/util';
  3 +import RS from '../../../utils/reserveStatus'
  4 +Component({
  5 + /**
  6 + * 组件的属性列表
  7 + */
  8 + properties: {
  9 + detail:Object,
  10 + seller:Object,
  11 + },
  12 +
  13 + /**
  14 + * 组件的初始数据
  15 + */
  16 + data: {
  17 +
  18 + },
  19 + attached(){
  20 + //this.init()
  21 + },
  22 + observers: {
  23 + 'detail': function() {
  24 + this.init()
  25 + },
  26 + },
  27 +
  28 + /**
  29 + * 组件的方法列表
  30 + */
  31 + methods: {
  32 + init(){
  33 + let detail=this.data.detail
  34 + if(!detail) return;
  35 + detail.tables=[]
  36 + detail.room_demand.some(t=>{
  37 + detail.tables.push([t.name])
  38 + })
  39 + detail.ddateStr=util.unixtoTime(detail.ddate,'MM月DD日，`DAY/周WW`')
  40 + console.log('detail.init',detail)
  41 + this.setData({
  42 + reserve:detail,
  43 + })
  44 + }
  45 + }
  46 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {}
  4 +}
  1 +<!--components/2.0/reserve/card.wxml-->
  2 +<wxs src="../../../utils/util.wxs" module="util" />
  3 +<view class="view margin-lr margin-top-sm solid radius padding padding-bottom-lg bg-white text-black" style="box-shadow: 0px 0px 20rpx 0px #EEF0F2;">
  4 + <view class="view flex padding-bottom solid-bottom align-center">
  5 + <view class="view round margin-right-sm"
  6 + style="width: 60rpx;height: 60rpx; background-image: url('{{seller.seller_image}}');">
  7 + </view>
  8 + <view class="view text-cut flex-treble">
  9 + <view class="view text-lg text-cut Medium">{{seller.sellername}}</view>
  10 + </view>
  11 + <view class="view margin-left-sm text-blue text-lg Medium">
  12 + <image src="http://nosqn.colorcun.com/detail/x%20%2815%29.png" style="width:28rpx;height: 30rpx;"></image>
  13 + </view>
  14 + </view>
  15 + <view class="view margin-top">
  16 + <view class="view flex align-center" style="margin-bottom: 44rpx;">
  17 + <view class="view flex-sub bg-white Medium">预订时间</view>
  18 + <view class="view flex-treble text-bold" style="font-size: 36rpx;">
  19 + <view class="value">{{reserve.ddateStr}}，{{util.reserveTimeSpace(reserve.section)}}</view>
  20 + </view>
  21 + </view>
  22 + <view class="view flex align-center">
  23 + <view class="view flex-sub bg-white Medium" style="min-width: 140rpx;">包间类型</view>
  24 + <view class="view flex-treble text-bold text-cut" style="font-size: 36rpx;">
  25 + {{util.replace(reserve.tables,',','，')}}
  26 + </view>
  27 + </view>
  28 + </view>
  29 +</view>
  1 +/* components/2.0/reserve/card.wxss */
  2 +@import "../../../colorui/main.wxss";
@@ -3,7 +3,7 @@ import App from '../../utils/api'; @@ -3,7 +3,7 @@ import App from '../../utils/api';
3 Page({ 3 Page({
4 data:{ 4 data:{
5 remark:'', 5 remark:'',
6 - buttonbottom:60 6 + buttonbottom:20
7 }, 7 },
8 onLoad(opt){ 8 onLoad(opt){
9 this.setData({ 9 this.setData({
@@ -40,7 +40,7 @@ Page({ @@ -40,7 +40,7 @@ Page({
40 console.log(e,'blur') 40 console.log(e,'blur')
41 this.setData({ 41 this.setData({
42 remark:this.remark, 42 remark:this.remark,
43 - buttonbottom:60 43 + buttonbottom:20
44 }) 44 })
45 }, 45 },
46 getlabellist(){ 46 getlabellist(){
@@ -60,7 +60,7 @@ Page({ @@ -60,7 +60,7 @@ Page({
60 getboardheight(e){ 60 getboardheight(e){
61 if(e.detail.height==0){ 61 if(e.detail.height==0){
62 this.setData({ 62 this.setData({
63 - buttonbottom:30 63 + buttonbottom:20
64 }) 64 })
65 }else{ 65 }else{
66 this.setData({ 66 this.setData({
1 -<layout> 1 +<page loading="1">
2 <nav>备注</nav> 2 <nav>备注</nav>
3 <view class="contain" style="height: minheight+'px';overflow-y: scroll;"> 3 <view class="contain" style="height: minheight+'px';overflow-y: scroll;">
4 - <view class="bg-gray textarea-cover">  
5 - <textarea placeholder="请输入您的特殊要求，我们会尽量安排" placeholder-class="gray-font font28r" class="black-font font28r" value="{{remark}}" maxlength="25" show-confirm-bar="{{false}}" auto-focus bindinput="inputremark" bindblur="inputblur" adjust-position cursor-spacing="130" bindkeyboardheightchange="getboardheight"></textarea>  
6 - <view class="gray-font font24r flex-rr" style="padding-top: 20rpx;">最多输入25个字</view> 4 + <view class="bg_white textarea-cover">
  5 + <textarea placeholder="请输入您的要求，我们会尽量安排" placeholder-class="gray-font font28r" class="black-font font28r" value="{{remark}}" maxlength="25" show-confirm-bar="{{false}}" auto-focus bindinput="inputremark" bindblur="inputblur" adjust-position cursor-spacing="130" bindkeyboardheightchange="getboardheight"></textarea>
  6 + <view class="gray-font font28r flex-rr" style="padding-top: 20rpx;">{{remark.length}}/25</view>
7 </view> 7 </view>
8 <view class="label"> 8 <view class="label">
9 - <view class="gray-font font28r">快捷标签</view> 9 + <view class="gray-font font30r">快捷标签</view>
10 <view class="label-list flex-rs"> 10 <view class="label-list flex-rs">
11 <block wx:for="{{labellist}}"> 11 <block wx:for="{{labellist}}">
12 <view class="black-font font28r label-single bg-gray" data-name="{{item.remark}}" bindtap="selectlabel">{{item.remark}}</view> 12 <view class="black-font font28r label-single bg-gray" data-name="{{item.remark}}" bindtap="selectlabel">{{item.remark}}</view>
@@ -14,5 +14,5 @@ @@ -14,5 +14,5 @@
14 </view> 14 </view>
15 </view> 15 </view>
16 </view> 16 </view>
17 - <view class="save-button white-font flex-cc font32r" bindtap="save" style="bottom:{{buttonbottom}}px;">保存</view>  
18 -</layout> 17 + <view class="save-button white-font flex-cc font32r Semibold" bindtap="save" style="bottom:{{buttonbottom}}px;">保存</view>
  18 +</page>
  1 +page{
  2 + background: #F9F9F9;
  3 +}
1 .contain{ 4 .contain{
2 width:100%; 5 width:100%;
3 padding:10rpx 0 180rpx; 6 padding:10rpx 0 180rpx;
4 } 7 }
5 .textarea-cover{ 8 .textarea-cover{
6 - width: 690rpx; 9 + width: calc(100% - 80rpx);
7 padding: 20rpx 40rpx; 10 padding: 20rpx 40rpx;
8 box-sizing: border-box; 11 box-sizing: border-box;
9 border-radius: 16rpx; 12 border-radius: 16rpx;
10 overflow: hidden; 13 overflow: hidden;
11 - margin: 0 auto 40rpx; 14 + margin: 0 auto 60rpx;
12 } 15 }
13 textarea,input{ 16 textarea,input{
14 width: 100%; 17 width: 100%;
@@ -20,24 +23,30 @@ input{ @@ -20,24 +23,30 @@ input{
20 } 23 }
21 .label{ 24 .label{
22 width: 100%; 25 width: 100%;
23 - padding:0 10rpx 0 30rpx; 26 + padding:0 10rpx 0 40rpx;
24 box-sizing: border-box; 27 box-sizing: border-box;
25 } 28 }
  29 +.label-list{
  30 + margin-top: 40rpx;
  31 +}
26 .label-single{ 32 .label-single{
27 - padding:5rpx 20rpx;  
28 - line-height: 40rpx;  
29 - margin-right: 20rpx;  
30 - margin-top: 20rpx;  
31 - border-radius:4rpx; 33 + height: 64rpx;
  34 + background: #F1F1F1;
  35 + border-radius: 32rpx;
  36 + line-height: 64rpx;
  37 + margin-right: 30rpx;
  38 + margin-bottom: 20rpx;
  39 + padding: 0 30rpx;
32 } 40 }
33 .save-button{ 41 .save-button{
34 - width: 690rpx;  
35 - height: 80rpx;  
36 - background: #C0A369; 42 + width: calc(100% - 80rpx);
  43 + height: 84rpx;
  44 + background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
  45 + border-radius: 42rpx;
37 margin: 0 auto; 46 margin: 0 auto;
38 position: fixed; 47 position: fixed;
39 left:0; 48 left:0;
40 right:0; 49 right:0;
41 - bottom:60rpx; 50 + bottom:40rpx;
42 /* transition: bottom .05s ease; */ 51 /* transition: bottom .05s ease; */
43 } 52 }
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 "usingComponents": { 2 "usingComponents": {
3 "nav":"/components/nav/nav", 3 "nav":"/components/nav/nav",
4 "formids":"/components/formids/formids", 4 "formids":"/components/formids/formids",
5 - "card":"/components/seller-card/seller-card", 5 + "card":"/components/2.0/reserve/card-review",
6 "phone":"/components/userinfo/getphone", 6 "phone":"/components/userinfo/getphone",
7 "subscribe":"/components/userinfo/subscribe" 7 "subscribe":"/components/userinfo/subscribe"
8 } 8 }
1 <!--pages/reserve/submit.wxml--> 1 <!--pages/reserve/submit.wxml-->
2 -<layout>  
3 -<nav hasBack>预订详情</nav>  
4 -<view class="pages bg_white" style="padding-bottom: {{paddingBottom}}px;">  
5 - <card hasShowStatus hasAddress="{{false}}" bindevent="cardEvent"  
6 - hasOnlineReserve 2 +<page loading="1">
  3 + <nav hasBack>预订详情</nav>
  4 + <card bindclick="editorReserve"
7 seller="{{seller}}" detail="{{detail}}"> 5 seller="{{seller}}" detail="{{detail}}">
8 - <view slot="opt" class="back flex-rr">  
9 - <formids  
10 - id="userinfo-share-{{detail.id}}"  
11 - bindclick="editorReserve">  
12 - <view class="opt-button" wx:if="{{seller}}">修改</view>  
13 - </formids>  
14 - </view>  
15 </card> 6 </card>
16 - <view class="userinfo">  
17 - <view class="userinfo-title flex-lr" catchtap="selectconcat">  
18 - <view class="flex-ll">  
19 - <image src="../image/concat.jpg" class="concat-icon"></image>  
20 - <view class="black-font font36r" style="font-size:36rpx;">选择联系人</view>  
21 - </view>  
22 - <view class="click-cover">  
23 - <image src="../image/click-icon.png"></image>  
24 - </view>  
25 - </view>  
26 - <view class="item flex-lr">  
27 - <view class="item-label">姓名</view>  
28 - <view class="Medium flex-rr">  
29 - <input class="name input" placeholder="请填写用餐人姓名" 7 + <view class="view margin bg-white padding-lr text-df text-666666 userinfo">
  8 + <view class="view flex align-center justify-between solid-bottom" style="height: 100rpx;">
  9 + <view>填写信息</view>
  10 + <view class="text-blue" catchtap="selectconcat">选择预订人</view>
  11 + </view>
  12 + <view class="view flex align-center justify-between " style="height: 100rpx;">
  13 + <image src="http://nosqn.colorcun.com/detail/x%20%2816%29.png" style="width: 40rpx;height: 40rpx;"></image>
  14 + <view class="view flex-treble flex align-center margin-left-sm solid-bottom" style="height: 100rpx;">
  15 + <input class="name flex-treble" placeholder="请填写预订人姓名"
30 bindinput="changeInput" 16 bindinput="changeInput"
31 data-key="name" 17 data-key="name"
32 value="{{user.name}}" 18 value="{{user.name}}"
33 - bindkeyboardheightchange="keyboardheightchange"  
34 - adjust-position="{{false}}" 19 + bindkeyboardheightchange="keyboardheightchange"
  20 + adjust-position="{{false}}"
35 placeholder-class="input-pl" maxlength="10"/> 21 placeholder-class="input-pl" maxlength="10"/>
36 - <view class="flex-rr switch">  
37 - <view  
38 - bindtap="changeInput"  
39 - data-key="sex"  
40 - data-val="1"  
41 - class="switch-item {{user.sex==1?'checked':''}}">先生</view>  
42 - <view  
43 - bindtap="changeInput"  
44 - data-key="sex"  
45 - data-val="2"  
46 - class="switch-item {{user.sex==2?'checked':''}}">女士</view>  
47 - <view  
48 - bindtap="changeInput"  
49 - data-key="sex"  
50 - data-val="3"  
51 - class="switch-item {{user.sex==3?'checked':''}}">公司</view> 22 + <view class="flex text-30 sex">
  23 + <view bindtap="changeInput"
  24 + data-key="sex"
  25 + data-val="1"
  26 + class="switch-item text-bold {{user.sex==1?'checked':''}}">先生</view>
  27 + <view bindtap="changeInput"
  28 + data-key="sex"
  29 + data-val="2"
  30 + class="text-bold margin-left-sm {{user.sex==2?'checked':''}}">女士</view>
  31 + <view bindtap="changeInput"
  32 + data-key="sex"
  33 + data-val="3"
  34 + class="text-bold margin-left-sm {{user.sex==3?'checked':''}}">公司</view>
52 </view> 35 </view>
53 </view> 36 </view>
54 </view> 37 </view>
55 - <view class="item flex-lr">  
56 - <view class="item-label">手机</view>  
57 - <view class="Medium flex-lr">  
58 - <input class="phone input" placeholder="请填写联系方式" 38 + <view class="view flex align-center justify-between " style="height: 100rpx;">
  39 + <image src="http://nosqn.colorcun.com/detail/x%20%2817%29.png" style="width: 40rpx;height: 40rpx;"></image>
  40 + <view class="view flex-treble flex align-center margin-left-sm solid-bottom" style="height: 100rpx;">
  41 + <input class="phone flex-treble" placeholder="请填写联系方式"
59 bindinput="changeInput" 42 bindinput="changeInput"
60 data-key="phone" 43 data-key="phone"
61 type="number" 44 type="number"
62 value="{{user.phone}}" 45 value="{{user.phone}}"
63 - adjust-position="{{false}}" 46 + adjust-position="{{false}}"
64 placeholder-class="input-pl" maxlength="11"/> 47 placeholder-class="input-pl" maxlength="11"/>
65 - <view class="flex-rr">  
66 - <!-- 一键获取 -->  
67 - <phone bindgetphone="getphone">  
68 - <view class="smooth white-font get-phone flex-vc" style="font-size:28rpx;">一键录入</view>  
69 - </phone> 48 + <view class="flex text-30">
  49 + <!--
  50 + <phone bindgetphone="getphone">
  51 + <view class="smooth white-font get-phone flex-vc" style="font-size:28rpx;">一键录入</view>
  52 + </phone>
  53 + -->
70 </view> 54 </view>
71 </view> 55 </view>
72 </view> 56 </view>
  57 + <view class="view flex align-center justify-between" style="height: 100rpx;">
  58 + <image src="http://nosqn.colorcun.com/detail/x%20%2818%29.png" style="width: 40rpx;height: 40rpx;"></image>
  59 + <view bindtap="toremark" class="view flex-treble flex align-center margin-left-sm {{user.remark?'text-black':''}}">
  60 + {{user.remark && user.remark!='' ? user.remark : '您的备注，我们会尽量安排'}}
  61 + </view>
  62 + </view>
73 </view> 63 </view>
74 - <view class="item flex-lr">  
75 - <view class="item-label" style="margin-left:30rpx;">备注</view>  
76 - <view class="Medium flex-rr" bindtap="toremark">  
77 - <!-- <input class="cusdem input" placeholder="您的特殊要求，我们会尽量安排（20字）"  
78 - bindinput="changeInput"  
79 - bindblur="keyboardheightchange"  
80 - bindconfirm="keyboardheightchange"  
81 - adjust-position="{{false}}"  
82 - data-key="remark"  
83 - value="{{user.remark}}"  
84 - placeholder-class="input-pl" maxlength="25"/> -->  
85 - <view class="cusdem input {{user.remark && user.remark!='' ? 'black-font' : 'gray-font'}} font-more" data-key="remark" style="width: 496rpx;">{{user.remark && user.remark!='' ? user.remark : '您的特殊要求，我们会尽量安排'}}</view>  
86 - <view class="click-cover" style="padding-right:30rpx;">  
87 - <image src="../image/click-icon.png"></image>  
88 - </view>  
89 - </view>  
90 - </view>  
91 <subscribe ids="{{[0,1]}}" bindevent="saved"> 64 <subscribe ids="{{[0,1]}}" bindevent="saved">
92 - <view class="share-but">提交预订</view> 65 + <view class="view share-but bg-blue-blue round margin-lr-lg flex align-center justify-center">
  66 + <view class="txt-36-h text-bold">提交预订</view>
  67 + </view>
93 </subscribe> 68 </subscribe>
94 -</view>  
95 -</layout>  
  69 +</page>
1 /* pages/reserve/submit.wxss */ 1 /* pages/reserve/submit.wxss */
  2 +@import "../../colorui/main.wxss";
  3 +page{
  4 + background-color: #F9F9F9;
  5 +}
  6 +.userinfo{
  7 + background: #FFFFFF;
  8 + box-shadow: 0px 0px 30rpx 0px #E5E5E5;
  9 + border-radius: 20rpx;
  10 +}
  11 +.sex .checked{
  12 + position: relative;
  13 + color:var(--blue);
  14 +}
  15 +.sex .checked:after{
  16 + width: 24rpx;
  17 + height: 14rpx;
  18 + background-size: 100% 100%;
  19 + background-image: url("http://nosqn.colorcun.com/detail/x%20%281%29.png");
  20 + position: absolute;
  21 + content: "";
  22 + bottom:-18rpx;
  23 + left:calc(50% - 12rpx);
  24 +}
  25 +.share-but{
  26 + position: fixed;
  27 + bottom: 40rpx;
  28 + height: 84rpx;
  29 + width: calc(100% - 80rpx);
  30 +}
  31 +/*
2 .pages{ 32 .pages{
3 padding: 30rpx; 33 padding: 30rpx;
4 width: calc(100% - 60rpx); 34 width: calc(100% - 60rpx);
@@ -111,4 +141,5 @@ @@ -111,4 +141,5 @@
111 } 141 }
112 .cusdem{ 142 .cusdem{
113 width:100%; 143 width:100%;
114 -}  
  144 +}
  145 +*/
@@ -755,6 +755,12 @@ @@ -755,6 +755,12 @@
755 "pathName": "pages/reserve/reserve", 755 "pathName": "pages/reserve/reserve",
756 "query": "id=1&activeTab=reserve&_date=2020-02-16&_pnum=6", 756 "query": "id=1&activeTab=reserve&_date=2020-02-16&_pnum=6",
757 "scene": null 757 "scene": null
  758 + },
  759 + {
  760 + "name": "pages/reserve/remark",
  761 + "pathName": "pages/reserve/remark",
  762 + "query": "remark=远离卫生间,尽量安静,尽量靠窗",
  763 + "scene": null
758 } 764 }
759 ] 765 ]
760 } 766 }
@@ -103,6 +103,7 @@ module.exports = { @@ -103,6 +103,7 @@ module.exports = {
103 return ['','满减','满赠','折扣','代金券'][parseInt(typeId)]||'会员价'; 103 return ['','满减','满赠','折扣','代金券'][parseInt(typeId)]||'会员价';
104 }, 104 },
105 replace:function(str,find,rep=''){ 105 replace:function(str,find,rep=''){
106 - return str.toString().replace(find,rep); 106 + if(!str) return ""
  107 + return (str.toString()).replace(find,rep);
107 } 108 }
108 }; 109 };