移动端V1.0
This commit is contained in:
378
pages/functionRoom/functionRoom.vue
Normal file
378
pages/functionRoom/functionRoom.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user