763 lines
19 KiB
Vue
763 lines
19 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 日期导航 -->
|
||
<view class="date-nav">
|
||
<scroll-view scroll-x class="date-scroll">
|
||
<view
|
||
v-for="(item, index) in dateList"
|
||
:key="index"
|
||
class="date-item"
|
||
: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="today-text" v-else>今天</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 选择时段 -->
|
||
<text class="section-title">选择时段</text>
|
||
<view class="time-tabs">
|
||
<view class="time-tab" :class="timeTab === 'morning' ? 'active' : 'inactive'" @click="changeTimeTab('morning')">
|
||
<image src="/static/ic_meet_02.png" class="time-icon"/>
|
||
上午
|
||
</view>
|
||
<view class="time-tab" :class="timeTab === 'afternoon' ? 'active' : 'inactive'"
|
||
@click="changeTimeTab('afternoon')">
|
||
<image src="/static/ic_meet_03.png" class="time-icon"/>
|
||
下午
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 会议人数 -->
|
||
<text class="section-title">会议人数</text>
|
||
<input type="number" v-model="formData.peopleNum" placeholder="请输入会议人数" class="input-field"/>
|
||
|
||
<!-- 会议主题 -->
|
||
<text class="section-title">会议主题</text>
|
||
<input type="text" v-model="formData.theme" placeholder="请输入会议名称" class="input-field"/>
|
||
|
||
<!-- 会议时间 -->
|
||
<text class="section-title">会议时间</text>
|
||
<view class="custom-picker-wrapper">
|
||
<uni-datetime-picker type="datetime" :hide-second="true" v-model="formData.time"/>
|
||
</view>
|
||
|
||
<!-- 选择会议室 -->
|
||
<text class="section-title">选择会议室</text>
|
||
<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>
|
||
</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'"/>
|
||
</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>
|
||
<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>
|
||
</view>
|
||
<view class="quantity-control">
|
||
<view class="quantity-btn minus" @tap="adjustQuantity(catIndex, itemIndex, -1)">-</view>
|
||
<input type="number" v-model="item.quantity" disabled class="quantity-input"/>
|
||
<view class="quantity-btn plus" @tap="adjustQuantity(catIndex, itemIndex, 1)">+</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新增增值服务备注栏 -->
|
||
<view class="service-remark">
|
||
<textarea v-model="formData.remark" placeholder="请输入增值服务备注信息（选填）" style="width: 100%"
|
||
maxlength="120"> </textarea>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="footer">
|
||
<view class="price-display">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-amount">{{ totalPrice }}</text>
|
||
</view>
|
||
<button class="submit-btn" @tap="submitForm">发起会议</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentDate: '',
|
||
dateList: [],
|
||
timeTab: 'afternoon',
|
||
formData: {
|
||
time: '',
|
||
peopleNum: '',
|
||
meetingRoom: '',
|
||
theme: '',
|
||
checkIn: false,
|
||
remark: ''
|
||
},
|
||
// 新增服务展开状态
|
||
serviceExpanded: false,
|
||
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: '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}
|
||
]
|
||
},
|
||
{
|
||
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}
|
||
]
|
||
},
|
||
{
|
||
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}
|
||
]
|
||
}
|
||
],
|
||
totalPrice: 0
|
||
};
|
||
},
|
||
created() {
|
||
this.initDateList();
|
||
this.calculateTotalPrice();
|
||
},
|
||
methods: {
|
||
// 新增切换服务展开状态方法
|
||
toggleServiceExpand() {
|
||
this.serviceExpanded = !this.serviceExpanded;
|
||
},
|
||
initDateList() {
|
||
const today = new Date();
|
||
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
|
||
for (let i = 0; i < 14; i++) {
|
||
const date = new Date();
|
||
date.setDate(today.getDate() + i);
|
||
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||
const day = date.getDate().toString().padStart(2, '0');
|
||
const weekDay = weekDays[date.getDay()];
|
||
const dateStr = `${month}-${day}`;
|
||
|
||
this.dateList.push({
|
||
date: dateStr,
|
||
weekDay: weekDay,
|
||
isToday: i === 0
|
||
});
|
||
}
|
||
|
||
this.currentDate = this.dateList[0].date;
|
||
},
|
||
|
||
selectDate(date) {
|
||
this.currentDate = date;
|
||
},
|
||
|
||
changeTimeTab(tab) {
|
||
this.timeTab = tab;
|
||
},
|
||
|
||
|
||
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;
|
||
if (newQuantity >= 0) {
|
||
item.quantity = newQuantity;
|
||
this.calculateTotalPrice();
|
||
}
|
||
},
|
||
|
||
calculateTotalPrice() {
|
||
let total = 0;
|
||
|
||
// 会议室费用
|
||
if (this.meetingRoomIndex >= 0) {
|
||
total += this.meetingRooms[this.meetingRoomIndex].price;
|
||
}
|
||
|
||
// 增值服务费用
|
||
this.services.forEach(category => {
|
||
category.items.forEach(item => {
|
||
total += item.price * item.quantity;
|
||
});
|
||
});
|
||
|
||
this.totalPrice = total;
|
||
},
|
||
|
||
submitForm() {
|
||
if (!this.formData.peopleNum || !this.formData.meetingRoom) {
|
||
uni.showToast({
|
||
title: '请完善必填信息',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.showLoading({title: '提交中...'});
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '预约成功',
|
||
success: () => {
|
||
// 跳转支付页面
|
||
}
|
||
});
|
||
}, 1000);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
padding: 20rpx 30rpx 120rpx;
|
||
}
|
||
|
||
/* 日期导航 */
|
||
.date-nav {
|
||
background: #fff;
|
||
padding: 20rpx 0;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
.date-scroll {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.date-item {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 10rpx 20rpx;
|
||
margin: 0 10rpx;
|
||
border-radius: 8rpx;
|
||
|
||
&.active {
|
||
background: #e8f4ff;
|
||
|
||
.week-day, .today-text, .date-text {
|
||
color: #4a90e2;
|
||
}
|
||
}
|
||
|
||
.week-day {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.date-text, .today-text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.today-text {
|
||
color: #4a90e2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section-title {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
color: #000;
|
||
font-weight: 500;
|
||
margin: 30rpx 0 20rpx;
|
||
}
|
||
|
||
.time-tabs {
|
||
display: flex;
|
||
margin-bottom: 30rpx;
|
||
|
||
.time-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 160rpx;
|
||
height: 70rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 30rpx;
|
||
font-size: 28rpx;
|
||
|
||
&.active {
|
||
background: #2E93FF;
|
||
color: #fff;
|
||
}
|
||
|
||
&.inactive {
|
||
background: #EBF5FF;
|
||
color: #808080;
|
||
}
|
||
|
||
.time-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.input-field, .select-field {
|
||
height: 80rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
|
||
.arrow-icon {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
|
||
.service-section {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.category-title {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.service-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.service-info {
|
||
flex: 1;
|
||
|
||
.service-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.service-price {
|
||
font-size: 24rpx;
|
||
color: #2E93FF;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.quantity-control {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.quantity-btn {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36rpx;
|
||
color: #666;
|
||
|
||
&.minus {
|
||
border: 1rpx solid #ddd;
|
||
}
|
||
|
||
&.plus {
|
||
background: #2E93FF;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.quantity-input {
|
||
width: 80rpx;
|
||
height: 50rpx;
|
||
text-align: center;
|
||
margin: 0 10rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.remark-input {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 120rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.price-display {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.price-symbol {
|
||
font-size: 28rpx;
|
||
color: #ff6b00;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.price-amount {
|
||
font-size: 36rpx;
|
||
color: #ff6b00;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 400rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #2E93FF;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
}
|
||
|
||
/* 服务内容区域样式 */
|
||
.service-content {
|
||
background: #F7F7F7;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.service-category {
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.category-title {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.service-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.service-info {
|
||
flex: 1;
|
||
|
||
.service-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.service-price {
|
||
font-size: 24rpx;
|
||
color: #2E93FF;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.quantity-control {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.quantity-btn {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36rpx;
|
||
color: #666;
|
||
|
||
&.minus {
|
||
border: 1rpx solid #ddd;
|
||
}
|
||
|
||
&.plus {
|
||
background: #2E93FF;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.quantity-input {
|
||
width: 80rpx;
|
||
height: 50rpx;
|
||
text-align: center;
|
||
margin: 0 10rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 新增增值服务备注样式 */
|
||
.service-remark {
|
||
margin-top: 30rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
height: 180rpx;
|
||
}
|
||
|
||
|
||
/* 时间选择器修改样式 */
|
||
.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;
|
||
}
|
||
|
||
|
||
.custom-checkbox {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
position: relative;
|
||
margin-left: 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> |