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> |