378 lines
8.1 KiB
Vue
378 lines
8.1 KiB
Vue
|
<template>
|
|||
|
|
<view class="functionroom">
|
|||
|
|
<view class="pic">
|
|||
|
|
<image src="../../static/functionpic.png" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="condition">
|
|||
|
|
<text class="title">活动室</text>
|
|||
|
|
<view class="sum">
|
|||
|
|
<view>
|
|||
|
|
<text>40</text>
|
|||
|
|
<text> /人</text>
|
|||
|
|
</view>
|
|||
|
|
<text>未使用</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn">
|
|||
|
|
<text>使用事项</text>
|
|||
|
|
<view class="item">
|
|||
|
|
<text>1、遵守社区功能房使用规则</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text>2、不恶意破坏功能房设备</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text>3、使用完要打扫好环境</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom-container">
|
|||
|
|
<button @click="showPopup">立即预约</button>
|
|||
|
|
</view>
|
|||
|
|
<zwy-popup :ishide="popupVisible">
|
|||
|
|
<view class="count">
|
|||
|
|
<!-- 主题 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text>主题</text>
|
|||
|
|
<input type="text" placeholder="请输入" v-model="theme" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 参与人员 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text>参与人员</text>
|
|||
|
|
<input type="text" placeholder="请输入" v-model="participants" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 人员类型 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text>人员类型</text>
|
|||
|
|
<view class="type">
|
|||
|
|
<uni-data-select class="type" v-model="selectedType" :localdata="range" @change="change"
|
|||
|
|
placeholder="请选择参与人员类型"></uni-data-select>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 预约用途 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text>预约用途</text>
|
|||
|
|
<view class="type">
|
|||
|
|
<uni-data-select class="type" v-model="selectedPurpose" :localdata="purpose" @change="change"
|
|||
|
|
placeholder="请选择用途"></uni-data-select>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 预约时间段 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text>预约时间段</text>
|
|||
|
|
<view class="times">
|
|||
|
|
<view class="">
|
|||
|
|
开始时间
|
|||
|
|
</view>
|
|||
|
|
<view class="top">
|
|||
|
|
<picker mode="date" :range="startDate" @change="bindDateChange">
|
|||
|
|
<view>{{startDate}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
结束时间
|
|||
|
|
</view>
|
|||
|
|
<view class="botton">
|
|||
|
|
<picker mode="date" :range="endDate" @change="bindEndDateChange">
|
|||
|
|
<view>{{endDate}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom-container">
|
|||
|
|
<button>提交</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="xclose" :style="closeButtonStyle" @click="closeModal">
|
|||
|
|
<image src="../../static/取消.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</zwy-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
popupVisible: false, // 控制弹窗显示隐藏的变量
|
|||
|
|
value: 0,
|
|||
|
|
Type: "", //一开始为空
|
|||
|
|
purposeType: "", //一开始为空
|
|||
|
|
theme: '', // 主题
|
|||
|
|
participants: '', // 参与人员
|
|||
|
|
selectedType: '', // 人员类型
|
|||
|
|
selectedPurpose: '', // 预约用途
|
|||
|
|
selectedStartTime: '', // 开始时间
|
|||
|
|
selectedEndTime: '' ,// 结束时间
|
|||
|
|
startDate: this.getDate(),
|
|||
|
|
endDate: this.getDate(),
|
|||
|
|
range: [{
|
|||
|
|
value: 0,
|
|||
|
|
text: "学生"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 1,
|
|||
|
|
text: "教师"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
text: "领导"
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
purpose: [{
|
|||
|
|
value: 0,
|
|||
|
|
text: "会议"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 1,
|
|||
|
|
text: "健身"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
text: "游泳"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 关闭按钮样式
|
|||
|
|
closeButtonStyle() {
|
|||
|
|
return `position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); z-index:${this.zindex + 1};`
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
closeModal() {
|
|||
|
|
// 触发关闭弹窗事件
|
|||
|
|
this.popupVisible = !this.popupVisible
|
|||
|
|
},
|
|||
|
|
// 控制弹窗显示
|
|||
|
|
showPopup() {
|
|||
|
|
this.popupVisible = true;
|
|||
|
|
},
|
|||
|
|
change(e) {
|
|||
|
|
console.log("e:", e);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getDate() {
|
|||
|
|
const date = new Date();
|
|||
|
|
let year = date.getFullYear();
|
|||
|
|
let month = date.getMonth() + 1;
|
|||
|
|
let day = date.getDate();
|
|||
|
|
month = month > 9 ? month : '0' + month;
|
|||
|
|
day = day > 9 ? day : '0' + day;
|
|||
|
|
return `${year}-${month}-${day}`;
|
|||
|
|
},
|
|||
|
|
bindDateChange: function(e) {
|
|||
|
|
this.startDate = e.detail.value;
|
|||
|
|
},
|
|||
|
|
bindEndDateChange: function(e) {
|
|||
|
|
this.endDate = e.detail.value;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.functionroom {
|
|||
|
|
background-color: #e2e2e2;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.pic {
|
|||
|
|
background-color: #F8F8F8;
|
|||
|
|
height: 600rpx;
|
|||
|
|
border: 1px solid #d7d7d7;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
// margin-top: 20rpx;
|
|||
|
|
// background-color: red;
|
|||
|
|
width: 300px;
|
|||
|
|
height: 500rpx;
|
|||
|
|
border: 1px solid #d5d5d5;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.condition {
|
|||
|
|
margin: 25rpx 0;
|
|||
|
|
background-color: #F8F8F8;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
// font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sum {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
text:first-child {
|
|||
|
|
color: red;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
// margin-top: 25rpx;
|
|||
|
|
background-color: #F8F8F8;
|
|||
|
|
height: 600rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
padding: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-container {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 100%;
|
|||
|
|
bottom: 0;
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 120rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 45rpx;
|
|||
|
|
background-color: #2893d9;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 9999;
|
|||
|
|
|
|||
|
|
.popup-box {
|
|||
|
|
background-color: #fff;
|
|||
|
|
width: 80%;
|
|||
|
|
height: 40%;
|
|||
|
|
margin: 60% auto 0rpx; // 居中显示弹窗内容
|
|||
|
|
padding: 20rpx; // 添加一些内边距，使内容不会紧贴边缘
|
|||
|
|
border-radius: 10rpx; // 添加一些圆角，使内容更美观
|
|||
|
|
box-sizing: border-box; // 确保内边距不会影响内容宽度和高度
|
|||
|
|
overflow: auto; // 添加滚动条，如果内容超出弹窗框的高度
|
|||
|
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5); // 添加一些阴影，使内容更突出
|
|||
|
|
|
|||
|
|
.btn-box {
|
|||
|
|
display: flex; // 使用flex布局，使按钮水平排列
|
|||
|
|
justify-content: space-between; // 使按钮平均分布，两端对齐
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
margin-top: 80rpx;
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel {
|
|||
|
|
background-color: #fff;
|
|||
|
|
color: #000;
|
|||
|
|
border-radius: 10rpx; // 添加一些圆角，使内容更美观
|
|||
|
|
border: 1rpx solid #ccc; // 添加一些边框，使内容更突出
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.confirm {
|
|||
|
|
background-color: #1BA035;
|
|||
|
|
color: #fff; // 添加一些内边距，使内容不会紧贴边缘
|
|||
|
|
border-radius: 10rpx; // 添加一些边框，使内容更突出
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.count {
|
|||
|
|
width: 86.5vw;
|
|||
|
|
position: absolute;
|
|||
|
|
padding: 60rpx;
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
// border-bottom: 1px solid #ededee;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
border: 1px solid #b1b1b1;
|
|||
|
|
|
|||
|
|
padding: 10rpx 10px 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type {
|
|||
|
|
width: 392rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.times {
|
|||
|
|
margin-top: 220rpx;
|
|||
|
|
width: 360rpx;
|
|||
|
|
// height: 200rpx;
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// background-color: #ffffff;
|
|||
|
|
// text-align: center;
|
|||
|
|
// justify-content: space-between;
|
|||
|
|
margin-bottom: 100rpx;
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
border: 1px solid #b1b1b1;
|
|||
|
|
margin: 10rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.botton {
|
|||
|
|
margin: 10rpx 0;
|
|||
|
|
border: 1px solid #b1b1b1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-container {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 95%;
|
|||
|
|
bottom: 100rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
padding: 15rpx;
|
|||
|
|
color: #000;
|
|||
|
|
height: 40px;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
width: 90%;
|
|||
|
|
// height: 100rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0);
|
|||
|
|
border: 1px solid #b1b1b1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.xclose {
|
|||
|
|
image {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|