blue ui other

@@ -126,6 +126,9 @@
 .white-font{
 .white-font{
     color:#fff;
     color:#fff;
 }
 }
+.blue-font{
+    color:#42A5FF;
+}
 .green-font{
 .green-font{
     color:#199095;
     color:#199095;
 }
 }

@@ -3636,6 +3636,10 @@ scroll-view.cu-steps .cu-item {
 	background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
 	background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
 	color: var(--white);
 	color: var(--white);
 }
 }
+.bg-cccccc{
+	color: var(--white);
+	background-color: #cccccc;
+}
 
 
 .shadow[class*="-red"] {
 .shadow[class*="-red"] {
 	box-shadow: var(--ShadowSize) var(--redShadow);
 	box-shadow: var(--ShadowSize) var(--redShadow);
@@ -4048,4 +4052,12 @@ scroll-view.cu-steps .cu-item {
 }
 }
 .Medium{
 .Medium{
 	font-weight: 500;
 	font-weight: 500;
+}
+.more{
+	width: 12rpx;
+	height: 22rpx;
+	background-image: url("http://nosqn.colorcun.com/custom/lite-yd/image/click.png");
+	background-size: 100% 100%;
+	min-width: 12rpx;
+	background-repeat: no-repeat;
 }
 }

 @import "../../../app.wxss";
 @import "../../../app.wxss";
 .room-list{
 .room-list{
-	width:100%;
-	padding-left:30rpx;
+	width: 100%;
+	padding-left:40rpx;
 	box-sizing: border-box;
 	box-sizing: border-box;
 }
 }
 .room-item{
 .room-item{
-	width:330rpx;
+	width:320rpx;
 	height:140rpx;
 	height:140rpx;
 	padding:0 30rpx;
 	padding:0 30rpx;
 	box-sizing: border-box;
 	box-sizing: border-box;

 <view class="section flex-lr">
 <view class="section flex-lr">
 	<block wx:for="{{sectionlist}}" wx:key="{{index}}">
 	<block wx:for="{{sectionlist}}" wx:key="{{index}}">
 		<view class="flex-vc section-single {{item.isselected ? 'bg-yellow' : ''}}" style="width:{{690/sectionlist.length}}rpx;" data-section="{{item.section}}" data-index="{{index}}" catchtap="{{item.overdate ? '' : 'selectsection'}}">
 		<view class="flex-vc section-single {{item.isselected ? 'bg-yellow' : ''}}" style="width:{{690/sectionlist.length}}rpx;" data-section="{{item.section}}" data-index="{{index}}" catchtap="{{item.overdate ? '' : 'selectsection'}}">
-			<view class="{{item.overdate ? 'gray-font' : (item.isselected ? 'white-font' : '')}} font30r Semibold">{{item.showmark}}</view>
-			<view class="{{item.overdate ? 'gray-font' : (item.isselected ? 'white-font' : '')}} font24r" style="line-height:34rpx;">{{item.sectiondur}}</view>
+			<view class="{{item.overdate ? 'gray-font' : (item.isselected ? 'blue-font' : '')}} font30r Semibold">{{item.showmark}}</view>
+			<view class="{{item.overdate ? 'gray-font' : (item.isselected ? 'blue-font' : '')}} font24r" style="line-height:34rpx;">{{item.sectiondur}}</view>
 		</view>
 		</view>
 	</block>
 	</block>
 </view>
 </view>

 @import "../../../app.wxss";
 @import "../../../app.wxss";
 .section{
 .section{
-	width:690rpx;
+	width:100%;
 	height:90rpx;
 	height:90rpx;
 	border-radius:10rpx;
 	border-radius:10rpx;
-	box-shadow: 0 0 8rpx rgba(166,166,166,.5);
-	overflow: hidden;
+	/*box-shadow: 0 0 8rpx rgba(166,166,166,.5);*/
 	margin:0 auto;
 	margin:0 auto;
+	border: 2rpx solid #CCCCCC;
+	box-sizing: border-box;
 }
 }
 .section-single{
 .section-single{
-	height:100%;
+	height:calc(100% + 4rpx);
 	border-radius:10rpx;
 	border-radius:10rpx;
+	box-sizing: border-box;
 }
 }
 .section-single.bg-yellow{
 .section-single.bg-yellow{
-	background: -webkit-linear-gradient(top, #F2D190, #C0A369); /* Safari 5.1 - 6.0 */
-	background: -o-linear-gradient(-45deg, #F2D190, #C0A369); /* Opera 11.1 - 12.0 */
-	background: -moz-linear-gradient(top, #F2D190, #C0A369); /* Firefox 3.6 - 15 */
-	background: linear-gradient(to bottom, #F2D190, #C0A369);
-	border-width:0;
+	background: #F4FAFF;
+	border: 2rpx solid #42A5FF;
 }
 }

 @import "../../../app.wxss";
 @import "../../../app.wxss";
 .select-rooms{
 .select-rooms{
 	width:100%;
 	width:100%;
-	padding:70rpx 0 4rpx 30rpx;
+	padding:70rpx 0 4rpx 40rpx;
 	box-sizing: border-box;
 	box-sizing: border-box;
 }
 }
 .select-rooms-title{
 .select-rooms-title{

+import util from '../../../utils/util';
+import App from '../../../utils/api';
+Component({
+	properties:{
+		seller:Object,
+		//选中日期
+		date:{
+			type:String,
+			value:util.unixtoTime(new Date()/1000,'YYYY-MM-DD'),
+		}
+	},
+	data:{
+		hidecalendar:true
+	},
+	attached(){
+    this.today=util.unixtoTime(new Date()/1000,'YYYY-MM-DD');
+		this.setData({
+			showYearMonth:this.getshowmonth(this.data.date)
+		})
+		this.hasNowInToday();
+		this.getweeklist();
+		this.getdaylist();
+		this.getFullDate();
+	},
+	ready(){
+		
+	},
+	methods:{
+		//判断是否过了今天时段，并设置date
+		hasNowInToday(){
+			let daily=this.data.seller.daily
+			let maxDur='';
+			Object.keys(daily).forEach(k=>{
+				let dur=daily[k].split('-')
+				if(dur[1]>maxDur){
+          maxDur=dur[1]
+				}
+			})
+      let nowDur=util.unixtoTime(new Date()/1000,'HH:II')
+			let nowDate=this.data.date
+			if(nowDur>maxDur){
+        nowDate=util.unixtoTime(new Date()/1000+86400,'YYYY-MM-DD')
+				this.setData({
+					date:nowDate
+				})
+			}
+			//console.log('hasNowInToday',maxDur)
+      this.triggerEvent('selectdate',{date:nowDate,action:'defalut'})
+    },
+		//获取当前选中日期年月
+		getshowmonth(selecteddate){
+			let datearr=selecteddate.split('-');
+			return{
+				showyear:Number(datearr[0]),
+				showmonth:Number(datearr[1]),
+			}
+		},
+		//获得周列表
+		getweeklist(){
+			let week=['日','一','二','三','四','五','六'];
+			let weeklist=[];
+			for(let i=0;i<week.length;i++){
+				weeklist.push({
+					weekfont:week[i],
+					weeknum:i
+				})
+			}
+			this.setData({
+				weeklist:weeklist,
+			})
+		},
+		//获取日期列表
+		getdaylist(){
+			//选中时间时间戳
+			let selectedtime=Number(util.timetouUnix(this.data.date+' 00:00:00'));
+			//选中日期星期几
+			let selectedweek=new Date(this.data.date).getDay();
+			console.log('selectedweek',selectedweek)
+			let daylist=[],current=0;
+			//用于月历点击的时候判断是否改变周历列表
+			this.datelist={}
+			if(this.data.date==this.today){
+        selectedweek=0;
+			}
+			for(let i=0;i<14;i++){
+				let thistimestamp=selectedtime+(i-selectedweek)*86400;
+				let thisdate=new Date(thistimestamp*1000);
+				let thisdayobj={
+					year:thisdate.getFullYear(),
+					month:thisdate.getMonth()+1,
+					day:thisdate.getDate(),
+					week:thisdate.getDay(),
+					date:util.unixtoTime(thistimestamp,'YYYY-MM-DD'),
+					overdate:thistimestamp<=(new Date()/1000)-86400 ? true : false,         //日期是否过期
+					istoday:false,
+          timestamp:thistimestamp,
+				}
+				//是否是今天
+				if(this.today==thisdayobj.date){
+					thisdayobj.istoday=true;
+					thisdayobj.mark='今'
+				}
+				if(util.unixtoTime(new Date()/1000+86400,'YYYY-MM-DD')==thisdayobj.date){
+					thisdayobj.mark='明'
+				}
+        thisdayobj.isselected=false
+				if(this.data.date==thisdayobj.date){
+          thisdayobj.isselected=true
+          current=i
+				}
+				thisdayobj.isselected=this.data.date==thisdayobj.date ? true : false;
+				//日期是否选中
+				daylist.push(thisdayobj);
+				this.datelist[thisdayobj.date]=Math.floor(i/7)+'-'+(i-Math.floor(i/7)*7)
+			}
+			this.setData({
+        current:this.getCurrentMax(current),
+				daylist:daylist
+			})
+      console.log('getdaylist.daylist',daylist,this.datelist)
+		},
+		//获取满房日期
+		getFullDate(){
+			let parmdata={
+				sid:this.data.seller.id,
+				type:'week',
+				date:this.data.daylist[0].date
+			}
+			App.Customer.GetHouseFullDate(parmdata).then((json)=>{
+				console.log(json)
+				if(json.ret==200){
+					if(json.data && json.data.length>0){
+						this.markFullHouse(json.data);
+					}
+				}
+			})
+		},
+		//标记满房
+		markFullHouse(fullHouseDate){
+			let daylist=this.data.daylist;
+			daylist.forEach((r,i)=>{
+        fullHouseDate.forEach((r1,n1)=>{
+          if(r1==r.date){
+            r.mark='满'
+          }
+        })
+			})
+			console.log('markFullHouse.daylist',daylist)
+			this.setData({
+				daylist:daylist
+			})
+		},
+		//选择日期
+		selectdate(e){
+			let _target=e.currentTarget.dataset;
+			this.changedatestyle(_target.date);
+			this.triggerEvent('selectdate',{date:_target.date,action:'click'});
+			this.setData({
+				date:_target.date,
+				showYearMonth:this.getshowmonth(_target.date),
+				current:this.getCurrentMax(_target.index-(_target.date==this.today?0:1)),
+			})
+		},
+		//日历组件---通知事件
+		tellselectdate(e){
+			console.log(e)
+			let _target=e.detail;
+			this.triggerEvent('selectdate',{date:_target.date,action:'click'});
+			this.setData({
+				date:_target.date,
+				showYearMonth:this.getshowmonth(_target.date),
+				hidecalendar:true
+			})
+      console.log('tellselectdate',_target.date , this.datelist,_target.date in this.datelist)
+			if(_target.date in this.datelist){
+				this.changedatestyle(_target.date)
+			}else{
+				this.getdaylist();
+				this.getFullDate();
+			}
+		},
+		//修改日期列表
+		changedatestyle(selecteddate){
+			let daylist=this.data.daylist;
+			let prevsingle,previndex,cursingle,curindex;
+			daylist.forEach((r,i)=>{
+        if(r.isselected){
+          prevsingle=i;
+          let prevkey='daylist['+prevsingle+'].isselected';
+          this.setData({
+            [prevkey]:false,
+          })
+        }
+        if(r.date==selecteddate){
+          cursingle=i;
+        }
+			})
+			let currentkey='daylist['+cursingle+'].isselected';
+			this.setData({
+				[currentkey]:true,
+				current:this.getCurrentMax(cursingle-(selecteddate==this.today?0:1)),
+			})
+		},
+		clickmore(){
+			this.setData({
+				hidecalendar:false
+			})
+		},
+    getCurrentMax(current){
+			return current>10?10:current;
+		},
+		closecalendar(){
+			this.setData({
+				hidecalendar:true
+			})
+		}
+	}
+})

+{
+  "component": true,
+  "usingComponents": {
+	  "online-calendar":"../online-calendar/online-calendar"
+  }
+}

+<wxs src="../../../utils/util.wxs" module="util" />
+<view class="padding-lr-lg padding-top-lg">
+	<view class="flex justify-between align-center margin-bottom" catchtap="clickmore">
+		<view class="txt-36-h text-bold">预订日期</view>
+		<view class="flex align-center txt-24-h">
+			更多
+			<view class="more margin-left-xs"></view>
+		</view>
+	</view>
+</view>
+<swiper previous-margin="35rpx" next-margin="45rpx"
+		class="tabs date" current="{{current}}"
+		display-multiple-items="4">
+	<swiper-item wx:for="{{daylist}}" wx:key="daylist">
+		<view class="item {{item.isselected?'active':''}} flex flex-direction justify-center"
+			  catchtap="{{item.overdate ? '' : 'selectdate'}}"
+			  data-index="{{index}}" data-date="{{item.date}}" data-type="date">
+			<view class="name">{{util.unixtoTime(item.timestamp,'DAY')||util.unixtoTime(item.timestamp,'周WW')}}</view>
+			<view class="mmdd">{{util.unixtoTime(item.timestamp,'MM月DD日')}}</view>
+		</view>
+	</swiper-item>
+</swiper>
+<!--
+<view class="week-calendar">
+	<view class="week-calendar-content">
+		<block wx:for="{{daylist}}" wx:for-item="itemlist" wx:for-index="indexlist" wx:key="{{indexlist}}">
+			<view class="week-calendar-day-list flex flex-wrap">
+				<block wx:for="{{itemlist.list}}" wx:key="{{index}}">
+					<view class="{{item.overdate ? 'gray-font' : 'font-font'}} font30r Semibold week-calendar-day flex-cc {{item.istoday ? 'today' : ''}} {{item.isselected ? 'bg-yellow white-font' : ''}}" data-date="{{item.date}}" catchtap="{{item.overdate ? '' : 'selectdate'}}">{{item.mark ? item.mark : item.day}}</view>
+				</block>
+			</view>
+		</block>
+	</view>
+</view>
+-->
+<view class="calendar-mask" hidden="{{hidecalendar}}" catchtap="closecalendar"></view>
+<view class="calendar-cover" hidden="{{hidecalendar}}">
+	<online-calendar seller="{{seller}}" date="{{date}}" hidecalendar="{{hidecalendar}}" bindtellselectdate="tellselectdate"></online-calendar>
+</view>

+@import "../../../colorui/main.wxss";
+.tabs {
+	height: 100rpx;
+}
+.tabs .item{
+	width:120rpx;
+	height:100rpx;
+	line-height: 100rpx;
+	border-radius:10rpx;
+	border:2rpx solid #fffff;
+	font-size:28rpx;
+	font-weight:400;
+	color:#353535;
+	text-align: center;
+	box-sizing: border-box;
+}
+.tabs .item.active{
+	background: #F4FAFF;
+	border-radius: 10rpx;
+	border: 2rpx solid #42A5FF;
+	color:#42A5FF;
+	font-weight: bold;
+}
+.date .item{
+	width: 140rpx;
+	height: 100rpx;
+}
+.item .name{
+	height: 36rpx;
+	font-size: 26rpx;
+	line-height: 36rpx;
+}
+.item .mmdd{
+	height: 40rpx;
+	font-size: 28rpx;
+	line-height: 40rpx;
+}
+
+.calendar-mask{
+	position: fixed;
+	left:0;
+	right:0;
+	top:0;
+	bottom:0;
+	z-index:10;
+	background:rgba(21,20,20,.5);
+}
+.calendar-cover{
+	position: fixed;
+	left:0;
+	right:0;
+	bottom:0;
+	background: #FFFBF2;
+	border-top-left-radius:20rpx;
+	border-top-right-radius:20rpx;
+	overflow: hidden;
+	z-index:11;
+}

@@ -7,7 +7,7 @@
     "getpos":"/components/userinfo/getpos",
     "getpos":"/components/userinfo/getpos",
     "people":"/components/reserve/people/people",
     "people":"/components/reserve/people/people",
     "dur":"/components/reserve/dur/dur",
     "dur":"/components/reserve/dur/dur",
-    "calendar":"/components/reserve/week-calendar/week-calendar",
+    "calendar":"/components/reserve/week-calendar/week-calendar-day",
     "section":"/components/reserve/section/section",
     "section":"/components/reserve/section/section",
     "select-room":"/components/reserve/select-room/select-room"
     "select-room":"/components/reserve/select-room/select-room"
   }
   }

@@ -2,21 +2,21 @@
 <page loading="{{loading}}">
 <page loading="{{loading}}">
     <nav hasHome>{{seller.sellername}}</nav>
     <nav hasHome>{{seller.sellername}}</nav>
     <!-- 包间预定 -->
     <!-- 包间预定 -->
-    <view class="padding-lr-lg padding-top-lg"  wx:if="{{seller.id}}">
-        <view class="flex justify-between align-center">
-            <view class="txt-36-h text-bold">预订日期</view>
-            <view class="more"></view>
-        </view>
-        <view>...</view>
-        <view class="flex justify-between align-center">
-            <view class="txt-36-h text-bold">预订时段</view>
+    <block wx:if="{{seller.id}}">
+        <view class="margin-bottom-xl">
+            <calendar seller="{{seller}}" bindselectdate="selectdate" date="{{reserveDate}}"></calendar>
         </view>
         </view>
-        <view>
-            <section seller="{{seller}}" date="{{reserveDate}}" bind:selectsection="selectsection" section="{{reserveSection}}"></section>
+        <view class="padding-lr-lg padding-top-lg" >
+            <view class="flex justify-between align-center margin-bottom margin-top">
+                <view class="txt-36-h text-bold">预订时段</view>
+            </view>
+            <view>
+                <section seller="{{seller}}" date="{{reserveDate}}" bind:selectsection="selectsection" section="{{reserveSection}}"></section>
+            </view>
         </view>
         </view>
-    </view>
-    <block wx:if="{{reserveSection}}">
-        <select-room seller="{{seller}}" date="{{reserveDate}}" section="{{reserveSection}}" seletroomlist="{{seletroomlist}}" bindchangeroom="selectroom"></select-room>
+        <block wx:if="{{reserveSection}}">
+            <select-room seller="{{seller}}" date="{{reserveDate}}" section="{{reserveSection}}" seletroomlist="{{seletroomlist}}" bindchangeroom="selectroom"></select-room>
+        </block>
     </block>
     </block>
     <!--
     <!--
     <view wx:if="{{seller.id}}">
     <view wx:if="{{seller.id}}">
@@ -32,7 +32,7 @@
         </view>
         </view>
     </view>
     </view>
     -->
     -->
-    <view class="reserve-button-cover flex-cc">
-        <view class="white-font font32r reserve-button flex-cc" catchtap="complete">选好了</view>
+    <view class="reserve-button-cover {{seletroomlist.length>0?'bg-blue-blue':'bg-cccccc'}} flex justify-center align-center round" catchtap="complete">
+        <view class="reserve-button txt-36-h">选好了</view>
     </view>
     </view>
 </page>
 </page>

@@ -7,18 +7,11 @@
     padding: 40rpx 0 30rpx 30rpx;
     padding: 40rpx 0 30rpx 30rpx;
     font-size: 32rpx;
     font-size: 32rpx;
 }
 }
-.reserve-button{
-    width:680rpx;
-    height:80rpx;
-    margin:0 auto;
-    background: #242320;
-}
+
 .reserve-button-cover{
 .reserve-button-cover{
-    width:100%;
-    height:130rpx;
+    width:calc(100% - 80rpx);
+    height:84rpx;
     position: fixed;
     position: fixed;
-    left:0;
-    right:0;
-    bottom:0;
-    background: #fff;
+    left:40rpx;
+    bottom:40rpx;
 }
 }