Commit eb8be16aa8dd17f4cbda8a96f156f79cb333fa7f

Authored by vking
1 parent e3bbb8e6

blue ui other

... ... @@ -126,6 +126,9 @@
.white-font{
color:#fff;
}
.blue-font{
color:#42A5FF;
}
.green-font{
color:#199095;
}
... ...
... ... @@ -3636,6 +3636,10 @@ scroll-view.cu-steps .cu-item {
background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
color: var(--white);
}
.bg-cccccc{
color: var(--white);
background-color: #cccccc;
}
.shadow[class*="-red"] {
box-shadow: var(--ShadowSize) var(--redShadow);
... ... @@ -4048,4 +4052,12 @@ scroll-view.cu-steps .cu-item {
}
.Medium{
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;
}
\ No newline at end of file
... ...
@import "../../../app.wxss";
.room-list{
width:100%;
padding-left:30rpx;
width: 100%;
padding-left:40rpx;
box-sizing: border-box;
}
.room-item{
width:330rpx;
width:320rpx;
height:140rpx;
padding:0 30rpx;
box-sizing: border-box;
... ...
<view class="section flex-lr">
<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="{{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>
</block>
</view>
\ No newline at end of file
... ...
@import "../../../app.wxss";
.section{
width:690rpx;
width:100%;
height:90rpx;
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;
border: 2rpx solid #CCCCCC;
box-sizing: border-box;
}
.section-single{
height:100%;
height:calc(100% + 4rpx);
border-radius:10rpx;
box-sizing: border-box;
}
.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;
}
\ No newline at end of file
... ...
@import "../../../app.wxss";
.select-rooms{
width:100%;
padding:70rpx 0 4rpx 30rpx;
padding:70rpx 0 4rpx 40rpx;
box-sizing: border-box;
}
.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
})
}
}
})
\ No newline at end of file
... ...
{
"component": true,
"usingComponents": {
"online-calendar":"../online-calendar/online-calendar"
}
}
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...
@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;
}
\ No newline at end of file
... ...
... ... @@ -7,7 +7,7 @@
"getpos":"/components/userinfo/getpos",
"people":"/components/reserve/people/people",
"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",
"select-room":"/components/reserve/select-room/select-room"
}
... ...
... ... @@ -2,21 +2,21 @@
<page loading="{{loading}}">
<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>
<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>
<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>
<!--
<view wx:if="{{seller.id}}">
... ... @@ -32,7 +32,7 @@
</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>
</page>
\ No newline at end of file
... ...
... ... @@ -7,18 +7,11 @@
padding: 40rpx 0 30rpx 30rpx;
font-size: 32rpx;
}
.reserve-button{
width:680rpx;
height:80rpx;
margin:0 auto;
background: #242320;
}
.reserve-button-cover{
width:100%;
height:130rpx;
width:calc(100% - 80rpx);
height:84rpx;
position: fixed;
left:0;
right:0;
bottom:0;
background: #fff;
left:40rpx;
bottom:40rpx;
}
\ No newline at end of file
... ...