服务时间表
This commit is contained in:
闫晓茹
parent
3178b8931b
commit
ead56785c7
321
pages/ServiceSchedule/ServiceSchedule.vue
Normal file
321
pages/ServiceSchedule/ServiceSchedule.vue
Normal file
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="content">
|
||||
<span>2020-01-01今天</span>
|
||||
<tabs :list="tabslist" :current="timecurrent" @change="timechange" active-color="#18CBB3"
|
||||
background="#18CBB3">
|
||||
</tabs>
|
||||
<view class="imageitem">
|
||||
<image src="../../static/jiantou.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">
|
||||
<view class="morningbutton">
|
||||
上午
|
||||
</view>
|
||||
<view class="afternoonbutton">
|
||||
下午
|
||||
</view>
|
||||
<view class="morningbutton">
|
||||
全天
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="morning">
|
||||
<view class="morningtime">
|
||||
上午
|
||||
</view>
|
||||
<view class="bodyitem">
|
||||
<view class="body">
|
||||
<span class="spanitem">9:00~9:30</span>
|
||||
<view class="spanitem">不可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="bodytwo">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="bodytwo">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="bodytwo">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="morning">
|
||||
<view class="morningtime">
|
||||
下午
|
||||
</view>
|
||||
<view class="bodyitem">
|
||||
<view class="body">
|
||||
<span class="spanitem">9:00~9:30</span>
|
||||
<view class="spanitem">不可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="bodytwo">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="bodytwo">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
<view class="bodytwo">
|
||||
<span class="spanitem">9:30~10:00</span>
|
||||
<view class="spanitem">可预约
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabs from '@/components/utabs/u-tabs.vue'
|
||||
export default {
|
||||
components: {
|
||||
tabs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timecurrent: 0,
|
||||
tabslist: [{
|
||||
name: '周日 01-01',
|
||||
orderStatus: '',
|
||||
}, {
|
||||
name: '周一 01-01',
|
||||
orderStatus: 'WAIT_PAY',
|
||||
}, {
|
||||
name: '周二 01-01',
|
||||
orderStatus: 'WAIT_RECEIVED_GOODS',
|
||||
}, {
|
||||
name: '周三 01-01',
|
||||
orderStatus: 'RECEIVED_GOODS',
|
||||
}, {
|
||||
name: '周四 01-01',
|
||||
orderStatus: 'EVALUATED',
|
||||
},
|
||||
{
|
||||
name: '周五 01-01',
|
||||
orderStatus: 'EVALUATED',
|
||||
}, {
|
||||
name: '周六 01-01',
|
||||
orderStatus: 'EVALUATED',
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
timechange(index) {
|
||||
// this.orderlist.serviceDate = this.orderlist.appointmentTimeList[index].date
|
||||
this.timecurrent = index
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
height: 100%;
|
||||
background: #F1F1F1;
|
||||
position: relative;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
right: 2%;
|
||||
top: 20%;
|
||||
flex-wrap: wrap;
|
||||
width: 400rpx;
|
||||
|
||||
.morningbutton {
|
||||
width: 128rpx;
|
||||
margin: 0 1px 1px 2px;
|
||||
font-size: 32rpx;
|
||||
border-radius: 30rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background-color: #18CBB3;
|
||||
}
|
||||
|
||||
.afternoonbutton {
|
||||
margin: 0 1px 1px 2px;
|
||||
width: 128rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 30rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
color: #18CBB3;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.afternoon {
|
||||
width: 100%;
|
||||
height: 361px;
|
||||
background: #fff;
|
||||
border-radius: 0rpx 5rpx 5rpx 0rpx;
|
||||
}
|
||||
|
||||
.morning {
|
||||
width: 100%;
|
||||
height: 261px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx 5rpx 5rpx 0rpx;
|
||||
margin: 20rpx auto;
|
||||
background-color: #fff;
|
||||
|
||||
.morningtime {
|
||||
padding: 15px 27px 62rpx 20rpx;
|
||||
width: 150rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
|
||||
.bodyitem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
height: 50rpx;
|
||||
color: #000000;
|
||||
line-height: 27rpx;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bodytwo {
|
||||
background-color: #18CBB3;
|
||||
// font-size: 36rpx;
|
||||
// color: #26A888;
|
||||
margin-bottom: 30rpx;
|
||||
width: 200rpx;
|
||||
height: 109rpx;
|
||||
// background: #fff;
|
||||
margin: 10rpx 30rpx 10rpx 22rpx;
|
||||
|
||||
.spanitem {
|
||||
// width: 121px;
|
||||
// height: 22px;
|
||||
display: inline-block;
|
||||
padding: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
font-size: 36rpx;
|
||||
color: #18CBB3;
|
||||
margin-bottom: 30rpx;
|
||||
width: 200rpx;
|
||||
height: 109rpx;
|
||||
background: #fff;
|
||||
margin: 10rpx 30rpx 10rpx 22rpx;
|
||||
// border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
// opacity: 1;
|
||||
// margin: 30rpx;
|
||||
border: 1rpx solid #E6E6E6;
|
||||
|
||||
|
||||
|
||||
.spanitem {
|
||||
// width: 121px;
|
||||
// height: 22px;
|
||||
display: inline-block;
|
||||
padding: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 30rpx auto;
|
||||
// top: 2%;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 214rpx;
|
||||
// background: cyan;
|
||||
border-radius: 5rpx 5rpx 5rpx 0rpx;
|
||||
// opacity: 1;
|
||||
|
||||
::v-deep .u-tabs[data-v-59a86fad] {
|
||||
padding: 72rpx 0;
|
||||
}
|
||||
|
||||
::v-deep .uni-scroll-view,
|
||||
.uni-scroll-view-content {
|
||||
width: 96%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
::v-deep.tabs {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
||||
// word-break: break-all;
|
||||
// top: 50%;
|
||||
// z-index: 999;
|
||||
// background-color: #F7F5F5;
|
||||
// }
|
||||
}
|
||||
|
||||
.imageitem {
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
right: 1%;
|
||||
|
||||
|
||||
// padding-top: 100rpx;
|
||||
float: right;
|
||||
|
||||
image {
|
||||
width: 18rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/jiantou.png
Normal file
BIN
static/jiantou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
Loading…
Reference in New Issue
Block a user