by2025/SmartParks_uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善会议预约界面

Browse Source
This commit is contained in:
merak1237
2025-09-16 17:27:32 +08:00
parent 1384c92fab
commit ac355aaf6b
26 changed files with 2438 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
pages/sys/workbench/meet/createMeet.vue
View File

@@ -10,8 +10,8 @@
:class="currentDate === item.date ? 'active' : ''"
@click="selectDate(item.date)"
>
<text class="week-day">{{item.weekDay}}</text>
<text class="date-text" v-if="!item.isToday">{{item.date}}</text>
<text class="week-day">{{ item.weekDay }}</text>
<text class="date-text" v-if="!item.isToday">{{ item.date }}</text>
<text class="today-text" v-else>今天</text>
</view>
</scroll-view>
@@ -24,7 +24,8 @@
<image src="/static/ic_meet_02.png" class="time-icon"/>
上午
</view>
<view class="time-tab" :class="timeTab === 'afternoon' ? 'active' : 'inactive'" @click="changeTimeTab('afternoon')">
<view class="time-tab" :class="timeTab === 'afternoon' ? 'active' : 'inactive'"
@click="changeTimeTab('afternoon')">
<image src="/static/ic_meet_03.png" class="time-icon"/>
下午
</view>
@@ -40,35 +41,73 @@
<!-- 会议时间 -->
<text class="section-title">会议时间</text>
<view class="select-field">
<uni-datetime-picker class="datetime-picker" type="datetime" :hide-second="true" v-model="formData.time"/>
<view class="custom-picker-wrapper">
<uni-datetime-picker type="datetime" :hide-second="true" v-model="formData.time"/>
</view>
<!-- 选择会议室 -->
<text class="section-title">选择会议室</text>
<picker @change="onMeetingRoomChange" :value="meetingRoomIndex" :range="meetingRooms" range-key="name">
<view class="select-field">
<text>{{ formData.meetingRoom || '请选择会议室' }}</text>
<image class="arrow-icon" src="/static/ic_right_arrow_g.png"/>
<view class="select-field" @click="showMeetingRoomPicker">
<text>{{ formData.meetingRoom || '请选择会议室' }}</text>
<image class="arrow-icon" src="/static/ic_right_arrow_g.png"/>
</view>
<!-- 添加会议室选择弹窗 -->
<uni-popup ref="meetingRoomPopup" type="bottom" :mask-click="false">
<view class="meeting-room-popup">
<view class="popup-header">
<text class="popup-title">选择会议室</text>
<text class="popup-close" @click="hideMeetingRoomPicker">×</text>
</view>
<scroll-view class="room-list" scroll-y>
<view
v-for="(room, index) in meetingRooms"
:key="index"
class="room-item">
<view class="room-icon"></view>
<view class="room-info">
<text class="room-name">{{ room.name }}</text>
<text class="room-detail">{{ room.capacity }} {{ room.facility }}</text>
</view>
<text class="room-price">¥{{ room.price }}</text>
<!-- 使用两张图片组合的选择框 -->
<view class="custom-checkbox" @click="selectMeetingRoom(index)">
<!-- 深蓝色边框背景（对应第2张图） -->
<image
class="checkbox-border"
src="/static/ic_checkbox_border.png"
mode="aspectFill"
/>
<!-- 选中状态显示对勾（对应第1张图） -->
<image
v-if="meetingRoomIndex === index"
class="check-icon"
src="/static/ic_check_mark.png"
/>
</view>
</view>
</scroll-view>
<button class="confirm-btn" @click="confirmMeetingRoom">确认选择</button>
</view>
</picker>
</uni-popup>
<!-- 增值服务 -->
<text class="section-title">增值服务</text>
<view class="select-field" @click="toggleServiceExpand">
<text>会议物品</text>
<image class="arrow-icon" :src="serviceExpanded ? '/static/ic_down_arrow_g.png' : '/static/ic_right_arrow_g.png'"/>
<image class="arrow-icon"
:src="serviceExpanded ? '/static/ic_down_arrow_g.png' : '/static/ic_right_arrow_g.png'"/>
</view>
<!-- 展开的服务内容 -->
<view class="service-content" v-if="serviceExpanded">
<view class="service-category" v-for="(category, catIndex) in services" :key="catIndex">
<text class="category-title">{{category.name}}</text>
<text class="category-title">{{ category.name }}</text>
<view class="service-items">
<view class="service-item" v-for="(item, itemIndex) in category.items" :key="itemIndex">
<view class="service-info">
<text class="service-name">{{item.name}}</text>
<text class="service-price">¥{{item.price}}/{{item.unit}}</text>
<text class="service-name">{{ item.name }}</text>
<text class="service-price">¥{{ item.price }}/{{ item.unit }}</text>
</view>
<view class="quantity-control">
<view class="quantity-btn minus" @tap="adjustQuantity(catIndex, itemIndex, -1)">-</view>
@@ -81,7 +120,8 @@
<!-- 新增增值服务备注栏 -->
<view class="service-remark">
<textarea v-model="formData.remark" placeholder="请输入增值服务备注信息（选填）" style="width: 100%" maxlength="120"> </textarea>
<textarea v-model="formData.remark" placeholder="请输入增值服务备注信息（选填）" style="width: 100%"
maxlength="120"> </textarea>
</view>
</view>
@@ -89,9 +129,9 @@
<view class="footer">
<view class="price-display">
<text class="price-symbol">¥</text>
<text class="price-amount">{{totalPrice}}</text>
<text class="price-amount">{{ totalPrice }}</text>
</view>
<button class="submit-btn" @tap="submitForm">发起会议并支付</button>
<button class="submit-btn" @tap="submitForm">发起会议</button>
</view>
</view>
</template>
@@ -104,7 +144,7 @@ export default {
dateList: [],
timeTab: 'afternoon',
formData: {
time:'',
time: '',
peopleNum: '',
meetingRoom: '',
theme: '',
@@ -116,35 +156,41 @@ export default {
meetingRoomIndex: 0,
meetingTime: '2025-07-07 14:00-18:00',
meetingRooms: [
{ name: '3栋1号会议室 (3078)', capacity: '可容纳20人', facility: '带电视', price: 29 },
{ name: '3栋2号会议室 (5124)', capacity: '可容纳50人', facility: '带投影仪', price: 49 },
{ name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99 }
{name: '3栋1号会议室 (3078)', capacity: '可容纳20人', facility: '带电视', price: 29},
{name: '3栋2号会议室 (5124)', capacity: '可容纳50人', facility: '带投影仪', price: 49},
{name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
{name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
{name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
{name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
{name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
{name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
{name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99}
],
services: [
{
name: '茶水',
items: [
{ id: 1, name: '清茶', price: 5, unit: '杯', quantity: 0 },
{ id: 2, name: '碧螺春', price: 8, unit: '杯', quantity: 0 },
{ id: 3, name: '红茶', price: 10, unit: '杯', quantity: 0 },
{ id: 4, name: '怡宝矿泉水', price: 2, unit: '瓶', quantity: 0 }
{id: 1, name: '清茶', price: 5, unit: '杯', quantity: 0},
{id: 2, name: '碧螺春', price: 8, unit: '杯', quantity: 0},
{id: 3, name: '红茶', price: 10, unit: '杯', quantity: 0},
{id: 4, name: '怡宝矿泉水', price: 2, unit: '瓶', quantity: 0}
]
},
{
name: '会议物品',
items: [
{ id: 5, name: '纸巾', price: 1, unit: '包', quantity: 0 },
{ id: 6, name: '一次性毛巾', price: 3, unit: '个', quantity: 0 },
{ id: 7, name: '湿巾', price: 2, unit: '包', quantity: 0 },
{ id: 8, name: '文件袋', price: 5, unit: '个', quantity: 0 }
{id: 5, name: '纸巾', price: 1, unit: '包', quantity: 0},
{id: 6, name: '一次性毛巾', price: 3, unit: '个', quantity: 0},
{id: 7, name: '湿巾', price: 2, unit: '包', quantity: 0},
{id: 8, name: '文件袋', price: 5, unit: '个', quantity: 0}
]
},
{
name: '其他物品',
items: [
{ id: 9, name: '话筒', price: 10, unit: '个', quantity: 0 },
{ id: 10, name: '音乐', price: 20, unit: '场', quantity: 0 },
{ id: 11, name: '假花', price: 15, unit: '束', quantity: 0 }
{id: 9, name: '话筒', price: 10, unit: '个', quantity: 0},
{id: 10, name: '音乐', price: 20, unit: '场', quantity: 0},
{id: 11, name: '假花', price: 15, unit: '束', quantity: 0}
]
}
],
@@ -191,12 +237,22 @@ export default {
this.timeTab = tab;
},
onMeetingRoomChange(e) {
this.meetingRoomIndex = e.detail.value;
this.formData.meetingRoom = this.meetingRooms[this.meetingRoomIndex].name;
this.calculateTotalPrice();
},
showMeetingRoomPicker() {
this.$refs.meetingRoomPopup.open();
},
hideMeetingRoomPicker() {
this.$refs.meetingRoomPopup.close();
},
selectMeetingRoom(index) {
this.meetingRoomIndex = index;
},
confirmMeetingRoom() {
const selectedRoom = this.meetingRooms[this.meetingRoomIndex];
this.formData.meetingRoom = `${selectedRoom.name} (¥${selectedRoom.price})`;
this.calculateTotalPrice();
this.hideMeetingRoomPicker();
},
adjustQuantity(catIndex, itemIndex, delta) {
const item = this.services[catIndex].items[itemIndex];
const newQuantity = item.quantity + delta;
@@ -233,7 +289,7 @@ export default {
return;
}
uni.showLoading({ title: '提交中...' });
uni.showLoading({title: '提交中...'});
setTimeout(() => {
uni.hideLoading();
uni.showToast({
@@ -576,24 +632,132 @@ export default {
padding: 20rpx;
height: 180rpx;
}
.datetime-picker {
/* 时间选择器修改样式 */
.custom-picker-wrapper ::v-deep .uni-date-x {
background-color: #F7F7F7 !important; /* 修改背景色 */
}
.custom-picker-wrapper ::v-deep .uni-date-editor--x {
background-color: #F7F7F7 !important; /* 修改背景色 */
}
.meeting-room-popup {
background: #fff;
border-radius: 24rpx 24rpx 0 0;
padding: 30rpx;
max-height: 70vh;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.popup-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.popup-close {
font-size: 48rpx;
color: #999;
padding: 0 20rpx;
}
.room-list {
max-height: 50vh;
margin-bottom: 20rpx;
}
.room-item {
display: flex;
align-items: center;
padding: 30rpx 0;
border-bottom: 1rpx solid #eee;
position: relative;
}
.room-icon {
width: 40rpx;
height: 40rpx;
background: #8A2BE2;
border-radius: 8rpx;
margin-right: 20rpx;
}
.room-info {
flex: 1;
}
.room-name {
font-size: 32rpx;
color: #333;
display: block;
margin-bottom: 10rpx;
}
.room-detail {
font-size: 26rpx;
color: #999;
}
.room-price {
font-size: 32rpx;
color: #FF6B00;
margin: 0 40rpx 0 20rpx;
}
.room-selected {
width: 40rpx;
height: 40rpx;
position: absolute;
right: 0;
}
.confirm-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: #2E93FF;
color: #fff;
font-size: 32rpx;
border-radius: 45rpx;
margin-top: 20rpx;
}
:deep .uni-date-x uni-date-single {
background-color: #f31818 !important;
border: none !important;
height: 80rpx;
border-radius: 8rpx;
.uni-date__x-input {
height: 80rpx;
line-height: 80rpx;
padding-left: 20rpx;
}
.custom-checkbox {
width: 36rpx;
height: 36rpx;
position: relative;
margin-left: 20rpx;
}
.uni-date__x-icon {
right: 20rpx;
}
}
.checkbox-border {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.check-icon {
width: 36rpx;
height: 36rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* 会议室项悬停效果 */
.room-item:active {
background-color: #f5f5f5;
}
</style>