<template>
|
<view class="main_app">
|
<view class="heade_title">
|
<image class="icon" src="../../static/staff/ar_left@2x.png" @click="changeDate(-1)" mode="widthFix"></image>
|
<text class="date">{{ activeDateCum }}</text>
|
<image class="icon" src="../../static/staff/ar_right@2x.png" @click="changeDate(1)" mode="widthFix"></image>
|
</view>
|
<!-- -->
|
<view class="meeting_list">
|
<view class="item" :class="{active: i === 0}" v-for="item,i in meetingList" :key="i">
|
<view class="name">{{ item.name }}</view>
|
<view class="line"></view>
|
</view>
|
</view>
|
<!-- -->
|
<view class="time_list">
|
<view class="item" v-for="item,i in timeList" :key="i">{{ item.time }}</view>
|
</view>
|
<!-- -->
|
<view class="main_footer">
|
<view class="df_ac">
|
<view>已选择：</view>
|
<view class="sel_time">xxxxxx</view>
|
</view>
|
<view class="btns">
|
<view class="left">
|
<view class="item" v-for="item in colorOptions" :key="item.name">
|
<view class="box" :style="{ background: item.color }"></view>
|
<view class="">{{ item.name }}</view>
|
</view>
|
</view>
|
<view class="sub" @click="$jump('/pages/staff/meetingSubOrder')">确认预约</view>
|
</view>
|
</view>
|
<!-- -->
|
<u-popup :show="isShowDetail" :round="12" mode="bottom" @close="isShowDetail = false">
|
<view class="detail_modal">
|
<view class="title">会议室预约情况</view>
|
<view class="h1">讨论xxxxx选型</view>
|
<view class="line">
|
<view class="label">会议时间</view>
|
<view class="value">00000</view>
|
</view>
|
<view class="line">
|
<view class="label">会议室</view>
|
<view class="value">00000</view>
|
</view>
|
<view class="line">
|
<view class="label">预约人</view>
|
<view class="value">00000</view>
|
</view>
|
<view class="btn" @click="isShowDetail = false">关闭</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
activeDate: '',
|
isShowDetail: false,
|
meetingList: [
|
{ name: '201会议室' },
|
{ name: '201会议室' },
|
{ name: '201会议室' },
|
{ name: '201会议室' },
|
],
|
timeList: [
|
{ time: '08:30-09:00' },
|
{ time: '08:30-09:00' },
|
{ time: '08:30-09:00' },
|
{ time: '08:30-09:00' },
|
],
|
|
colorOptions: [
|
{ color: '#279BAA', name: '已选择' },
|
{ color: '#F7F7F7', name: '可预约' },
|
{ color: '#cccccc', name: '不可预约' },
|
]
|
|
};
|
},
|
computed: {
|
activeDateCum(){
|
const { activeDate } = this
|
let weeks = ['周日', '周一','周二','周三','周四','周五','周六']
|
return dayjs(activeDate).format('YYYY年M月D日') + ' ' + weeks[dayjs(activeDate).day()]
|
}
|
},
|
created() {
|
this.activeDate = dayjs().format('YYYY-MM-DD')
|
},
|
methods: {
|
changeDate(num){
|
const { activeDate } = this
|
let fn = num > 0 ? 'add' : 'subtract'
|
this.activeDate = dayjs(activeDate)[fn](1, 'days').format('YYYY-MM-DD')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.detail_modal{
|
padding: 40rpx 30rpx;
|
.title{
|
text-align: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
margin-bottom: 40rpx;
|
}
|
.h1{
|
font-weight: 500;
|
font-size: 32rpx;
|
margin-bottom: 30rpx;
|
}
|
.line{
|
display: flex;
|
margin-bottom: 20rpx;
|
.label{
|
width: 140rpx;
|
color: #888888;
|
}
|
.value{
|
color: #333333;
|
}
|
}
|
.btn{
|
margin-top: 230rpx;
|
width: 690rpx;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #279BAA;
|
border-radius: 44rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
.main_footer{
|
position: absolute;
|
width: 100%;
|
left: 0;
|
bottom: 0;
|
padding: 20rpx 30rpx 84rpx;
|
box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
|
.sel_time{
|
color: #279BAA;
|
}
|
.btns{
|
margin-top: 10rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.left{
|
display: flex;
|
.item{
|
display: flex;
|
align-items: center;
|
margin-right: 20rpx;
|
.box{
|
margin-right: 10rpx;
|
width: 32rpx;
|
height: 32rpx;
|
}
|
}
|
}
|
.sub{
|
width: 184rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #279BAA;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
border-radius: 36rpx;
|
font-size: 30rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.time_list{
|
display: flex;
|
justify-content: space-between;
|
padding: 30rpx;
|
flex-wrap: wrap;
|
.item{
|
width: 220rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
background: #F7F7F7;
|
border-radius: 4rpx;
|
margin-bottom: 24rpx;
|
font-size: 30rpx;
|
}
|
.active{
|
background-color: #279BAA;
|
color: #fff;
|
}
|
.disable{
|
background-color: #cccccc;
|
color: #999999;
|
}
|
}
|
.meeting_list{
|
display: flex;
|
padding-left: 30rpx;
|
width: 720rpx;
|
overflow-x: auto;
|
border-bottom: 1rpx solid #E5E5E5;
|
.item{
|
flex-shrink: 0;
|
margin-right: 60rpx;
|
padding: 30rpx 0 0;
|
.line{
|
width: 60rpx;
|
height: 4rpx;
|
background-color: #fff;
|
margin: 26rpx auto 0;
|
}
|
}
|
.active{
|
color: #279BAA;
|
font-weight: 600;
|
font-size: 30rpx;
|
.line{
|
width: 60rpx;
|
height: 4rpx;
|
background-color: #279BAA;
|
margin: 26rpx auto 0;
|
}
|
}
|
}
|
.main_app{
|
padding: 0;
|
}
|
.heade_title{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.date{
|
margin: 0 24rpx;
|
font-weight: 600;
|
font-size: 32rpx;
|
}
|
.icon{
|
width: 30rpx;
|
}
|
}
|
</style>
|
