xt / xcx-book · Commits

Go to a project

Commit 623b524f5be66a80fbfe34c534d2926c95396b16

Authored by liuxuqinfhp1220
1 parent cfed92e9

人数、时间段、一键获取手机号组件

Inline Side-by-side
Showing 16 changed files with 381 additions and 182 deletions
Component({
properties:{
timedur:Object
},
attached(){
this.getdurlist();
},
ready(){
},
methods:{
selecttime(e){
const target=e.currentTarget.dataset;
},
//获得可订时间段
getdurlist(){
//获取当前时间
const date=new Date();
let currenttimemark=date.getHours()+new Date().getMinutes()/60;
let timedur=this.data.timedur;
let durlist=[];
for(let key in timedur){
let arr=timedur[key].split('-');
//每个时段的开始时间、结束时间
let starttime=Number(arr[0].split(':')[0]);
let endtime=Number(arr[1].split(':')[0]);
if(currenttimemark<endtime){
if(currenttimemark>starttime){
starttime=Math.round(currenttimemark)
}
for(let i=starttime;i<=endtime;i+=0.5){
let obj={
timemark:i
}
if(i%1==0){
obj.showdur=i<10 ? '0'+i+':00' : i+':00'
}else{
obj.showdur=i<10 ? '0'+Math.floor(i)+':30' : Math.floor(i)+':30'
}
durlist.push(obj)
}
}
}
this.setData({
durlist:durlist
})
}
}
})
\ No newline at end of file
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<swiper class="dur-list" display-multiple-items="5">
<block wx:for="{{durlist}}" wx:key="{{index}}">
<swiper-item>
<view class="white-font font30r font-bold flex-cc dur-timer" data-time="{{item.timemark}}" catchtap="selecttime">{{item.showdur}}</view>
</swiper-item>
</block>
</swiper>
\ No newline at end of file
... ...
@import "../../../app.wxss";
.dur-list{
width:100%;
height:100rpx;
}
.dur-timer{
width:120rpx;
height:100%;
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);
margin-left:30rpx;
}
\ No newline at end of file
... ...
Component({
data:{
},
attached(){
let peoplelist=[]
for(let i=4;i<=30;i++){
peoplelist.push({
count:i,
isactive:false
})
}
peoplelist[0].isactive=true
this.setData({
peoplelist:peoplelist
})
},
methods:{
selectpeople(e){
console.log(e)
const target=e.currentTarget.dataset;
console.log(target)
let peoplelist=this.data.peoplelist,setdata={};
peoplelist.forEach((v,i)=>{
if(v.isactive){
v.isactive=false;
let setprevkey='peoplelist['+i+'].isactive';
setdata[setprevkey]=false
}
if(i==target.index && !v.isactive){
let setcurrentkey='peoplelist['+i+'].isactive';
setdata[setcurrentkey]=true
}
})
this.setData(setdata)
console.log(this.data.peoplelist)
}
}
})
\ No newline at end of file
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<swiper class="people-list" display-multiple-items="5" next-margin="46rpx">
<block wx:for="{{peoplelist}}" wx:key="{{index}}">
<swiper-item>
<view class="people {{item.isactive ? 'white-font active' : 'black-font'}} font30r font-bold flex-cc" catchtap="selectpeople" data-index="{{index}}" data-count="{{item.count}}">{{item.count}}位</view>
</swiper-item>
</block>
</swiper>
\ No newline at end of file
... ...
@import "../../../app.wxss";
.people-list{
width:100%;
height:176rpx;
padding:38rpx 0 38rpx 30rpx;
box-sizing: border-box;
}
.people{
width:120rpx;
height:100%;
}
.people.active{
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);
}
\ No newline at end of file
... ...
Component({
methods:{
getphone(e){
console.log(e)
}
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<button class="button-none white-font font28r smooth phone-button flex-cc" open-type="getPhoneNumber" bindgetphonenumber="getphone">一键获取</button>
\ No newline at end of file
... ...
@import "../../app.wxss";
.phone-button{
width:160rpx;
height:50rpx;
background: #C0A369;
color:#ffffff;
font-size:28rpx;
display:flex;
display:-webkit-flex;
}
\ No newline at end of file
... ...
... ... @@ -11,6 +11,8 @@
"nav":"/components/nav/nav",
"getpos":"/components/userinfo/getpos",
"discount":"/components/reserve/discount",
"share":"/components/reserve/share/share"
"share":"/components/reserve/share/share",
"people":"/components/reserve/people/people",
"dur":"/components/reserve/dur/dur"
}
}
\ No newline at end of file
... ...
<!--pages/reserve/detail.wxml-->
<nav>{{seller.sellername}}</nav>
<view class="seller-banner">
<swiper
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{0}}px" next-margin="{{0}}px"
current="{{current}}" bindchange="bindtransition" bindtap="reviweBanner">
<block wx:for="{{seller.envi_image}}" wx:key="sellers.key">
<swiper-item>
<image class="image" mode="aspectFill"
src="{{item}}?imageView2/2/w/860/interlace/0/q/100" ></image>
</swiper-item>
</block>
</swiper>
<view class="slogan" wx:if="{{seller.slogan}}">
<view class="slogan-view flex-ll">
<view class="dot"></view>
<view>{{seller.slogan}}</view>
</view>
</view>
<view class="swiper-num" wx:if="{{seller.envi_image.length>0}}">{{currentView}} / {{seller.envi_image.length}}</view>
</view>
<view class="pages" style="height: {{pagesHeight}};overflow:{{pagesHeight=='auto'?'visible':'hidden'}}">
<view class="seller">
<view class="base">
<view class="name Semibold flex-lr">
<view class="name-info">{{seller.sellername}}
<view class="broad" wx:if="{{seller.brand}}">
<view class="broad-1"></view>
<view class="broad-2">{{seller.brand.name}}</view>
<view class="broad-3"></view>
</view>
</view>
<view class="average" wx:if="{{seller.average>0}}">¥{{seller.average}}/人</view>
</view>
<view class="ping flex-ll">
<view class="item" wx:if="{{seller.cate.length>0}}">{{seller.cate[0]}}</view>
<view class="item" wx:if="{{seller.is_belt_wine!=0}}">{{seller.is_belt_wine==1?'不可带酒水':'可自带酒水'}}</view>
<view class="item" wx:if="{{seller.is_parking==1}}">停车场</view>
<view class="item" wx:if="{{seller.room_num>0}}">{{seller.room_num}}个包间</view>
</view>
<view class="label_c" wx:if="{{seller.label_cstr}}">
<text class="label_text" >{{seller.label_cstr}}</text>
</view>
</view>
<view class="addr flex-lr" bindtap="lookLocation">
<view class="addr-view">
<view class="addr-text flex-ll">
<image src="http://qn.colorcun.com/custom/lite-online/image/%E5%AE%9A%E4%BD%8D.png"></image>
<view class="text">{{seller.real_address||seller.map_address}}</view>
</view>
<view class="addr-long">{{seller.distanceStr?'距您'+seller.distanceStr:''}}</view>
</view>
<view class="more more-addr"></view>
</view>
</view>
<view class="black20line"></view>
<view class="seller">
<formids wx:if="{{seller.activity.length>0}}" bindclick="showDiscount">
<view class="activity-view-easy flex-lr" >
<view class="activity-left flex-ll">
<view class="icon"></view>
<block wx:for="{{seller.activity}}"
wx:key="seller.activity.key"
wx:if="{{index<2}}">
<view class="discount" >{{item.title}}</view>
</block>
</view>
<view class="flex-rr activity-right">
<view class="more-text">更多</view>
<view class="more"></view>
</view>
</view>
</formids>
<!--
<formids wx:if="{{seller.activity.length>0}}" bindclick="showDiscount">
<view class="activity-view" >
<view class="activity" >
<view class="flex-lr">
<view class="activity-left">
<view class="activity-first flex-ll" style="align-items: flex-start">
<image src="http://qn.colorcun.com/custom/lite-online/image%E5%96%87%E5%8F%AD.png"></image>
<view class="flex-cc discount" wx:for="{{seller.activity}}"
wx:key="seller.activity.key"
wx:if="{{index<2}}">
<view class="discount-left"></view>
<view class="discount-text">{{item.title}}</view>
<view class="discount-right"></view>
</view>
</view>
</view>
<view class="activity-right flex-rr Semibold">
<view></view>
<view class="more"></view>
</view>
</view>
<view class="activity-text">
该优惠仅适用于一键订平台预订客户
</view>
</view>
</view>
</formids>
-->
</view>
<view class="black20line"></view>
<view class="block" wx:if="{{seller.room_image.length>0}}">
<view class="header flex-ll">
<view class="line"></view>
<view class="name">包间环境</view>
</view>
<scroll-view
scroll-x
class="baos"
scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}"
>
<view class="detail" hidden="true">
<view class="seller-banner">
<swiper
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{0}}px" next-margin="{{0}}px"
current="{{current}}" bindchange="bindtransition" bindtap="reviweBanner">
<block wx:for="{{seller.envi_image}}" wx:key="sellers.key">
<swiper-item>
<image class="image" mode="aspectFill"
src="{{item}}?imageView2/2/w/860/interlace/0/q/100" ></image>
</swiper-item>
</block>
</swiper>
<view class="slogan" wx:if="{{seller.slogan}}">
<view class="slogan-view flex-ll">
<view class="dot"></view>
<view>{{seller.slogan}}</view>
</view>
</view>
<view class="swiper-num" wx:if="{{seller.envi_image.length>0}}">{{currentView}} / {{seller.envi_image.length}}</view>
</view>
<view class="pages" style="height: {{pagesHeight}};overflow:{{pagesHeight=='auto'?'visible':'hidden'}}">
<view class="seller">
<view class="base">
<view class="name Semibold flex-lr">
<view class="name-info">{{seller.sellername}}
<view class="broad" wx:if="{{seller.brand}}">
<view class="broad-1"></view>
<view class="broad-2">{{seller.brand.name}}</view>
<view class="broad-3"></view>
</view>
</view>
<view class="average" wx:if="{{seller.average>0}}">¥{{seller.average}}/人</view>
</view>
<view class="ping flex-ll">
<view class="item" wx:if="{{seller.cate.length>0}}">{{seller.cate[0]}}</view>
<view class="item" wx:if="{{seller.is_belt_wine!=0}}">{{seller.is_belt_wine==1?'不可带酒水':'可自带酒水'}}</view>
<view class="item" wx:if="{{seller.is_parking==1}}">停车场</view>
<view class="item" wx:if="{{seller.room_num>0}}">{{seller.room_num}}个包间</view>
</view>
<view class="label_c" wx:if="{{seller.label_cstr}}">
<text class="label_text" >{{seller.label_cstr}}</text>
</view>
</view>
<view class="addr flex-lr" bindtap="lookLocation">
<view class="addr-view">
<view class="addr-text flex-ll">
<image src="http://qn.colorcun.com/custom/lite-online/image/%E5%AE%9A%E4%BD%8D.png"></image>
<view class="text">{{seller.real_address||seller.map_address}}</view>
</view>
<view class="addr-long">{{seller.distanceStr?'距您'+seller.distanceStr:''}}</view>
</view>
<view class="more more-addr"></view>
</view>
</view>
<view class="black20line"></view>
<view class="seller">
<formids wx:if="{{seller.activity.length>0}}" bindclick="showDiscount">
<view class="activity-view-easy flex-lr" >
<view class="activity-left flex-ll">
<view class="icon"></view>
<block wx:for="{{seller.activity}}"
wx:key="seller.activity.key"
wx:if="{{index<2}}">
<view class="discount" >{{item.title}}</view>
</block>
</view>
<view class="flex-rr activity-right">
<view class="more-text">更多</view>
<view class="more"></view>
</view>
</view>
</formids>
<!--
<formids wx:if="{{seller.activity.length>0}}" bindclick="showDiscount">
<view class="activity-view" >
<view class="activity" >
<view class="flex-lr">
<view class="activity-left">
<view class="activity-first flex-ll" style="align-items: flex-start">
<image src="http://qn.colorcun.com/custom/lite-online/image%E5%96%87%E5%8F%AD.png"></image>
<view class="flex-cc discount" wx:for="{{seller.activity}}"
wx:key="seller.activity.key"
wx:if="{{index<2}}">
<view class="discount-left"></view>
<view class="discount-text">{{item.title}}</view>
<view class="discount-right"></view>
</view>
</view>
</view>
<view class="activity-right flex-rr Semibold">
<view></view>
<view class="more"></view>
</view>
</view>
<view class="activity-text">
该优惠仅适用于一键订平台预订客户
</view>
</view>
</view>
</formids>
-->
</view>
<view class="black20line"></view>
<view class="block" wx:if="{{seller.room_image.length>0}}">
<view class="header flex-ll">
<view class="line"></view>
<view class="name">包间环境</view>
</view>
<scroll-view
scroll-x
class="baos"
scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}"
>
<block wx:for="{{seller.room_image}}" wx:key="sellers.key">
<view class="image">
<image mode="aspectFill" bindtap="reviweRoomImage" data-current="{{item}}"
src="{{item}}?imageView2/2/w/640/interlace/0/q/100"></image>
</view>
</block>
<block wx:for="{{seller.room_image}}" wx:key="sellers.key">
<view class="image">
<image mode="aspectFill" bindtap="reviweRoomImage" data-current="{{item}}"
src="{{item}}?imageView2/2/w/640/interlace/0/q/100"></image>
</view>
</block>
</scroll-view>
</view>
<view class="block" wx:if="{{seller.dishes.length>0}}">
<view class="header flex-ll">
<view class="line"></view>
<view class="name">推荐菜品</view>
</view>
<scroll-view
scroll-x
class="cais"
scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}"
>
<block wx:for="{{seller.dishes}}" wx:key="sellers.key">
<view class="cais-views" wx:if="{{item.image}}">
<view class="image-view" >
<view class="image">
<image mode="aspectFill" bindtap="reviweDishesImage" data-current="{{item.image}}"
src="{{item.image}}?imageView2/2/w/640/interlace/0/q/100"></image>
</view>
<view class="text Semibold">{{item.name}}</view>
</view>
</view>
</block>
</scroll-view>
<view class="cais-text">
<block wx:for="{{seller.dishes}}" wx:key="sellers.key">
<view wx:if="{{!item.image}}">{{item.name}}</view>
</block>
</view>
</view>
</view>
<view class="footer flex-lr">
<view class="left flex-cc">
<formids class="flex-tb" url="/pages/customer/index">
<image src="http://qn.colorcun.com/custom/lite-online/image/%E9%A6%96%E9%A1%B5.png"></image>
<view class="text">首页</view>
</formids>
<userinfo class="follow flex-tb" binduserinfo="follow">
<image src="http://qn.colorcun.com/custom/lite-online/image/%E6%94%B6%E8%97%8F.png" wx:if="{{!IsCollectionSeller}}"></image>
<image src="http://qn.colorcun.com/custom/lite-online/image/%E5%B7%B2%E6%94%B6%E8%97%8F.png" wx:else=""></image>
<view class="text">收藏</view>
</userinfo>
</view>
<view class="reserve share flex-vc">
<userinfo class="flex-vc" style="width: 100%" binduserinfo="shareUserinfo">
<view class="text">分享</view>
</userinfo>
</view>
<view class="reserve">
<formids class="flex-vc" bindclick="reserve" id="reserve-button">
<view class="text">电话预订</view>
</formids>
</view>
</scroll-view>
</view>
<view class="block" wx:if="{{seller.dishes.length>0}}">
<view class="header flex-ll">
<view class="line"></view>
<view class="name">推荐菜品</view>
</view>
<scroll-view
scroll-x
class="cais"
scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}"
>
<block wx:for="{{seller.dishes}}" wx:key="sellers.key">
<view class="cais-views" wx:if="{{item.image}}">
<view class="image-view" >
<view class="image">
<image mode="aspectFill" bindtap="reviweDishesImage" data-current="{{item.image}}"
src="{{item.image}}?imageView2/2/w/640/interlace/0/q/100"></image>
</view>
<view class="text Semibold">{{item.name}}</view>
</view>
</view>
</block>
</scroll-view>
<view class="cais-text">
<block wx:for="{{seller.dishes}}" wx:key="sellers.key">
<view wx:if="{{!item.image}}">{{item.name}}</view>
</block>
</view>
</view>
</view>
<view class="footer flex-lr">
<view class="left flex-cc">
<formids class="flex-tb" url="/pages/customer/index">
<image src="http://qn.colorcun.com/custom/lite-online/image/%E9%A6%96%E9%A1%B5.png"></image>
<view class="text">首页</view>
</formids>
<userinfo class="follow flex-tb" binduserinfo="follow">
<image src="http://qn.colorcun.com/custom/lite-online/image/%E6%94%B6%E8%97%8F.png" wx:if="{{!IsCollectionSeller}}"></image>
<image src="http://qn.colorcun.com/custom/lite-online/image/%E5%B7%B2%E6%94%B6%E8%97%8F.png" wx:else=""></image>
<view class="text">收藏</view>
</userinfo>
</view>
<view class="reserve share flex-vc">
<userinfo class="flex-vc" style="width: 100%" binduserinfo="shareUserinfo">
<view class="text">分享</view>
</userinfo>
</view>
<view class="reserve">
<formids class="flex-vc" bindclick="reserve" id="reserve-button">
<view class="text">电话预订</view>
</formids>
</view>
</view>
<as id="as" items="{{seller.seller_tel}}" bindclick="reservePhone">拨打电话预订</as>
<getpos bindpos="onpos" id="getpos"></getpos>
<discount id="discount" seller="{{seller}}" bindhide="discountHide" bindshow="discountShow"></discount>
<share id="share" seller_id="{{seller.id}}"></share>
</view>
<as id="as" items="{{seller.seller_tel}}" bindclick="reservePhone">拨打电话预订</as>
<getpos bindpos="onpos" id="getpos"></getpos>
<discount id="discount" seller="{{seller}}" bindhide="discountHide" bindshow="discountShow"></discount>
<share id="share" seller_id="{{seller.id}}"></share>
\ No newline at end of file
<!-- 包间预定 -->
<block wx:if="{{seller.daily}}">
<view class="room-booking bg_white">
<people></people>
<view class="dur">
<view class="dur-title black-font font-bold">可订时间</view>
<dur timedur="{{seller.daily}}"></dur>
</view>
</view>
</block>
\ No newline at end of file
... ...
... ... @@ -467,4 +467,17 @@
}
.activity-view-easy .discount:last-child{
border-right-width: 0;
}
/* 包间预定 */
.room-booking {
width:100%;
}
.dur{
width:100%;
padding-top:42rpx;
}
.dur-title{
width:100%;
padding:0 30rpx 40rpx;
box-sizing: border-box;
}
\ No newline at end of file
... ...
... ... @@ -23,7 +23,7 @@
"compileType": "miniprogram",
"libVersion": "2.7.0",
"appid": "wxd3dc4206c76f14fc",
"projectname": "xcx-book",
"projectname": "c%E7%AB%AF%E9%A2%84%E5%AE%9A",
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
... ... @@ -45,7 +45,7 @@
"list": []
},
"miniprogram": {
"current": 39,
"current": 55,
"list": [
{
"id": 0,
... ... @@ -455,6 +455,13 @@
"pathName": "pages/reserve/share",
"query": "id=1&act=quanzi",
"scene": null
},
{
"id": -1,
"name": "包间预定",
"pathName": "pages/reserve/detail",
"query": "id=154",
"scene": null
}
]
}
... ...