字典
This commit is contained in:
Leo_Ding
parent
984194ff7e
commit
0f7a7d4770
170
components/instruction.vue
Normal file
170
components/instruction.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<!-- pages/meeting-room/guide.wxml -->
|
||||
<!-- pages/meeting-room/notice.wxml -->
|
||||
<view class="notice-container">
|
||||
<view class="notice-title" style="font-size: 16px;font-weight: bold;text-align: center;margin-bottom: 10px;">
|
||||
近山社区城市青年会客厅使用说明</view>
|
||||
|
||||
<view class="notice-section-title">一、城市青年会客厅</view><br>
|
||||
<view class="notice-content">
|
||||
为了能进一步创新社区服务模式，更好地利用社区公共资源为民服务、为企解忧、为共建强基，2025年起，近山社区将社区党群服务中心二楼"共享空间"升级为社区"城市青年会客厅"（以下简称"会客厅"）用途使用。会客厅位于紫琅人才公寓33号楼二楼，面积为368.3㎡，功能布局为：文化展示区、妇女儿童之家、党建会议室、中心会客厅、共享会议室、自习室。
|
||||
</view><br>
|
||||
|
||||
<view class="notice-section-title">二、使用须知</view><br>
|
||||
<view class="notice-content">
|
||||
第一条：会客厅仍实行园区共享机制。即会客厅除了平时用于社区日常的功能使用需要之外，根据驻辖区单位、业主以及社区共建单位的申请需求还可以作为社区共享资源场地免费使用。主要用于召开园区单位会议、接待来宾、培训活动以及举办其他合法活动。会客厅由近山社区统一管理，负责使用登记与调度、设备维护等相关内容。
|
||||
</view><br>
|
||||
|
||||
<view class="notice-content">
|
||||
第二条：会客厅实行提前预约制度。申请使用会客厅时，需填写《近山社区城市青年会客厅使用申请表》，说明申请用途和目的等相关情况。如有需要社区协助办理的事项需提前注明，以便根据情况做好相关协调安排。为避免使用时间段冲突，要求各申请人/单位至少提前1天预约，重要活动需提前一周预约。特殊情况下，需要紧急申请使用的，应及时向社区提出申请并在使用后进行补办相关手续。
|
||||
</view><br>
|
||||
|
||||
<view class="notice-content">
|
||||
第三条：申请单位在使用期间应严格遵守国家法律法规，并有完善的安全应急预案。严禁使用会客厅开展任何违反法律法规，违背社会公序良俗的活动，产生的社会负面影响及法律责任由申请使用方负责；因申请使用方的安全应急预案不严谨、不完善以及现场活动组织不严密等问题造成的安全事故责任由申请使用方负责。出现以上问题的，取消该预约单位（借用人）后续使用会客厅的权利，并列入社区征信名单。
|
||||
</view><br>
|
||||
|
||||
<view class="notice-section-title">三、注意事项</view><br>
|
||||
<view class="notice-content">
|
||||
第一条：应在所预约时间内，按流程规定使用会客厅，申请方应主动与社区联系，并重新调整申请使用时间；逾期未使用则由社区另作调剂会客厅的使用权。
|
||||
</view><br>
|
||||
|
||||
<view class="notice-content">
|
||||
第二条：如预约单位有逾期使用的需求，需重新按程序申请；若申请逾期的使用时间段内已有其他单位预约使用，逾期使用的预约单位不得继续占用会客厅的使用权。
|
||||
</view><br>
|
||||
|
||||
<view class="notice-content">
|
||||
第三条：会客厅内的设施设备属于社区的固定资产，在作为会客厅使用时，由社区专人转交给申请单位临时使用，社区专人对接和临时移交申请使用单位，申请单位须安排专人负责。申请使用期间，会客厅内的物资财产的保管与使用由申请使用方负责。使用者要爱护会客厅内的公共设施，损坏照价赔偿，未经社区允许不得擅自将会客厅内的多媒体设备、桌椅等物资财产置于会客厅以外范围使用。
|
||||
</view><br>
|
||||
|
||||
<view class="notice-content">
|
||||
第四条：会客厅在使用期间，应不影响社区正常办公、居民正常生活，同时保持内部的整洁有序；使用者应在使用完毕后对会议室进行复位整理（如：复位桌椅，关闭窗户及电器设备等）。使用单位应安排专人进行检查，提醒宾客（与会人员）带走自己的随身物品，若因遗落而丢失或被清理，社区概不承责。如发现设备故障或公物损坏应及时报至社区，由使用方负责维修或照价赔偿。
|
||||
</view><br>
|
||||
<view class="notice-content">
|
||||
第五条：以上内容的最终解释权归近山社区所有。
|
||||
</view>
|
||||
<view style="display: flex; align-items: flex-start; color: black; margin-top: 20px;">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label>
|
||||
<checkbox :value="isreaded" style="transform:scale(0.7)"/><text style="font-size: 16px;">{{name}}</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'instruction',
|
||||
data() {
|
||||
return {
|
||||
checkboxValue1: [],
|
||||
isreaded: false,
|
||||
name: '我（单位）已阅读并清楚近山社区城市青年会客厅使用说明中的使用须知和注意事项'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange(n) {
|
||||
console.log('change', n);
|
||||
if(n.detail.value.length>0){
|
||||
this.$emit('change',false)
|
||||
}else{
|
||||
this.$emit('change',true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notice-container {
|
||||
height: 600rpx;
|
||||
width: 600rpx;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
overflow-y: scroll;
|
||||
margin: 20px;
|
||||
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
/* pages/meeting-room/guide.wxss */
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
border-left: 8rpx solid #07c160;
|
||||
padding-left: 20rpx;
|
||||
margin: 30rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background-color: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.rule,
|
||||
.note {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.rule-title,
|
||||
.note-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #07c160;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 60rpx;
|
||||
padding-top: 30rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
color: #7f8c8d;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.footer view {
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
</style>
|
||||
@ -24,8 +24,6 @@
|
||||
</view>
|
||||
<image v-if="msg.sender === 'me'" :src="myAvatar" class="avatar"></image>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
|
||||
@ -63,15 +63,8 @@
|
||||
<u-icon name="edit-pen" size="34" color="#2979ff"></u-icon>
|
||||
<text class="section-title">备注信息</text>
|
||||
</view>
|
||||
<u--textarea
|
||||
v-model="remark"
|
||||
placeholder="请输入备注信息(选填)"
|
||||
count
|
||||
maxlength="200"
|
||||
height="120"
|
||||
border="none"
|
||||
:customStyle="{background: '#f8f9fa', borderRadius: '12rpx', padding: '20rpx'}"
|
||||
></u--textarea>
|
||||
<u--textarea v-model="remark" placeholder="请输入备注信息(选填)" count maxlength="200" height="120" border="none"
|
||||
:customStyle="{background: '#f8f9fa', borderRadius: '12rpx', padding: '20rpx'}"></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -120,6 +113,11 @@
|
||||
formatTime,
|
||||
formatRelativeTime
|
||||
} from '@/utils/timeFormat';
|
||||
import {
|
||||
applyType,
|
||||
usage,
|
||||
thingTheme
|
||||
} from '@/utils/dict.js'
|
||||
export default {
|
||||
data() {
|
||||
const now = new Date();
|
||||
@ -167,7 +165,7 @@
|
||||
|
||||
// 新增备注字段
|
||||
remark: '',
|
||||
|
||||
|
||||
noticeList: [
|
||||
'每次预订时间单位为小时，最少0.5小时起预订。',
|
||||
'使用优惠券支付，取消预订后优惠券会自动退还。',
|
||||
@ -181,6 +179,7 @@
|
||||
onLoad(options) {
|
||||
if (options && options.Id) {
|
||||
this.Id = options.Id;
|
||||
console.log(applyType.getAll())
|
||||
console.log("====", this.Id)
|
||||
}
|
||||
},
|
||||
@ -292,7 +291,7 @@
|
||||
|
||||
handleBook() {
|
||||
this.validateTime();
|
||||
|
||||
|
||||
// 构建预订信息对象
|
||||
const bookingInfo = {
|
||||
startAt: new Date(`${this.selectedDate} ${this.selectedStartTime}`),
|
||||
@ -300,47 +299,47 @@
|
||||
remark: this.remark,
|
||||
roomId: this.Id
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
console.log('提交的预订信息:', bookingInfo);
|
||||
|
||||
|
||||
uni.showToast({
|
||||
title: `已预订 ${this.formattedSelectedDate} ${this.selectedStartTime}-${this.selectedEndTime}`,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
|
||||
// 这里可以添加实际的API调用
|
||||
post('/api/v1/app_auth/metting-room/order/register',bookingInfo).then((res)=>{
|
||||
console.log("===res",res)
|
||||
post('/api/v1/app_auth/metting-room/order/register', bookingInfo).then((res) => {
|
||||
console.log("===res", res)
|
||||
if (!res || !res.success) {
|
||||
throw new Error('会议室预定失败');
|
||||
}
|
||||
uni.showToast({
|
||||
title: '会议室预定成功!',
|
||||
icon: 'success'
|
||||
title: '会议室预定成功!',
|
||||
icon: 'success'
|
||||
});
|
||||
this.remark = null;
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/meetingList/index`,
|
||||
success: () => {
|
||||
console.log('导航成功，ID:', id);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('导航失败:', err);
|
||||
uni.showToast({
|
||||
title: '打开详情页失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
url: `/pages/meetingList/index`,
|
||||
success: () => {
|
||||
console.log('导航成功，ID:', id);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('导航失败:', err);
|
||||
uni.showToast({
|
||||
title: '打开详情页失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},4000)
|
||||
|
||||
|
||||
}, 4000)
|
||||
|
||||
|
||||
})
|
||||
// this.submitBooking(bookingInfo);
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -348,7 +347,8 @@
|
||||
<style lang="scss" scoped>
|
||||
.meeting-room-detail {
|
||||
padding: 20rpx;
|
||||
padding-bottom: 140rpx; /* 增大底部空间 */
|
||||
padding-bottom: 140rpx;
|
||||
/* 增大底部空间 */
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
@ -450,7 +450,7 @@
|
||||
/* 时间选择区域 */
|
||||
.time-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
|
||||
.time-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -487,13 +487,13 @@
|
||||
/* 新增备注区域 */
|
||||
.remark-section {
|
||||
margin-top: 24rpx;
|
||||
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
@ -535,7 +535,8 @@
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.u-button {
|
||||
height: 88rpx; /* 增大高度 */
|
||||
height: 88rpx;
|
||||
/* 增大高度 */
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -1,88 +1,94 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="tabsReady">
|
||||
<u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" border="false"
|
||||
active-color="#1989fa" bg-color="#f8f8f8"></u-tabs>
|
||||
|
||||
<!-- 会议室列表 -->
|
||||
<view class="room-list" v-if="currentTab === 0">
|
||||
<view v-if="meetingRoomList.length === 0" class="empty-container">
|
||||
<text>暂无会议室数据 ({{ meetingRoomList }})</text>
|
||||
</view>
|
||||
<view class="room-item" v-for="(item, index) in meetingRoomList" :key="index" @click="goDetail(item.roomInfo || item)">
|
||||
<image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]">
|
||||
</image>
|
||||
<view class="room-info">
|
||||
<view class="room-header">
|
||||
<view class="room-name">{{ item.title}}</view>
|
||||
<view class="room-status" :class="item.status == 2 ? 'available':''">可预约</view>
|
||||
</view>
|
||||
<view class="room-meta">
|
||||
<view class="meta-item">
|
||||
<u-icon name="account" size="30" color="#666"></u-icon>
|
||||
<text>可容纳人数：{{ item.maxNum }}人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预约记录列表 -->
|
||||
<view class="order-list" v-else>
|
||||
<view v-if="orderList.length === 0" class="empty-container">
|
||||
<u-icon name="list" class="empty-icon" size="48"></u-icon>
|
||||
<text class="empty-text">暂无预约记录</text>
|
||||
</view>
|
||||
<view class="order-item" v-for="(item, index) in orderList" :key="index">
|
||||
<view class="order-header" @click="goDetail(item.roomInfo || item)">
|
||||
<view class="order-name">{{ item.roomInfo ? item.roomInfo.title : '会议室' }}</view>
|
||||
<view class="order-status" :class="item.status == 0 ? 'available':''">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-content">
|
||||
<!-- <image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]"></image> -->
|
||||
|
||||
<view class="order-details">
|
||||
<view class="detail-item">
|
||||
<u-icon name="account" size="36" color="#666" class="detail-icon"></u-icon>
|
||||
<text>联系人: {{ item.concatName }} ({{ item.concatPhone }})</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-item">
|
||||
<u-icon name="calendar" size="36" color="#666" class="detail-icon"></u-icon>
|
||||
<text>预约日期: {{ formatDate(item.startAt) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-item">
|
||||
<u-icon name="clock" size="30" color="#666" class="detail-icon"></u-icon>
|
||||
<text>时间段: {{ formatTimeRange(item.startAt, item.endAt) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-item" v-if="item.remark">
|
||||
<u-icon name="edit-pen" size="36" color="#666" class="detail-icon"></u-icon>
|
||||
<text>备注: {{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-actions">
|
||||
<u-button type="primary" plain
|
||||
@click="goDetail(item.roomInfo || item)">查看详情</u-button>
|
||||
<u-button type="error" plain v-if="item.status === 0" @click="cancelOrder(item.id)">
|
||||
取消预约
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="loading-container">
|
||||
<u-loading-icon mode="circle" size="36"></u-loading-icon>
|
||||
<text class="loading-text">加载会议室信息中...</text>
|
||||
</view>
|
||||
</view>
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="tabsReady">
|
||||
<u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" border="false"
|
||||
active-color="#1989fa" bg-color="#f8f8f8"></u-tabs>
|
||||
|
||||
<!-- 会议室列表 -->
|
||||
<view class="room-list" v-if="currentTab === 0">
|
||||
<view v-if="meetingRoomList.length === 0" class="empty-container">
|
||||
<text>暂无会议室数据 ({{ meetingRoomList }})</text>
|
||||
</view>
|
||||
<view class="room-item" v-for="(item, index) in meetingRoomList" :key="index"
|
||||
@click="goDetail(item.roomInfo || item)">
|
||||
<image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]">
|
||||
</image>
|
||||
<view class="room-info">
|
||||
<view class="room-header">
|
||||
<view class="room-name">{{ item.title}}</view>
|
||||
<view class="room-status" :class="item.status == 2 ? 'available':''">可预约</view>
|
||||
</view>
|
||||
<view class="room-meta">
|
||||
<view class="meta-item">
|
||||
<u-icon name="account" size="30" color="#666"></u-icon>
|
||||
<text>可容纳人数：{{ item.maxNum }}人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预约记录列表 -->
|
||||
<view class="order-list" v-else>
|
||||
<view v-if="orderList.length === 0" class="empty-container">
|
||||
<u-icon name="list" class="empty-icon" size="48"></u-icon>
|
||||
<text class="empty-text">暂无预约记录</text>
|
||||
</view>
|
||||
<view class="order-item" v-for="(item, index) in orderList" :key="index">
|
||||
<view class="order-header" @click="goDetail(item.roomInfo || item)">
|
||||
<view class="order-name">{{ item.roomInfo ? item.roomInfo.title : '会议室' }}</view>
|
||||
<view class="order-status" :class="item.status == 0 ? 'available':''">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-content">
|
||||
<!-- <image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]"></image> -->
|
||||
|
||||
<view class="order-details">
|
||||
<view class="detail-item">
|
||||
<u-icon name="account" size="36" color="#666" class="detail-icon"></u-icon>
|
||||
<text>联系人: {{ item.concatName }} ({{ item.concatPhone }})</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-item">
|
||||
<u-icon name="calendar" size="36" color="#666" class="detail-icon"></u-icon>
|
||||
<text>预约日期: {{ formatDate(item.startAt) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-item">
|
||||
<u-icon name="clock" size="30" color="#666" class="detail-icon"></u-icon>
|
||||
<text>时间段: {{ formatTimeRange(item.startAt, item.endAt) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-item" v-if="item.remark">
|
||||
<u-icon name="edit-pen" size="36" color="#666" class="detail-icon"></u-icon>
|
||||
<text>备注: {{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-actions">
|
||||
<u-button type="primary" plain @click="goDetail(item.roomInfo || item)">查看详情</u-button>
|
||||
<u-button type="error" plain v-if="item.status === 0" @click="cancelOrder(item.id)">
|
||||
取消预约
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view v-else class="loading-container">
|
||||
<u-loading-icon mode="circle" size="36"></u-loading-icon>
|
||||
<text class="loading-text">加载会议室信息中...</text>
|
||||
</view>
|
||||
<u-popup :show="show" mode="center" :round="10">
|
||||
<instructionVue @change='readChange'/>
|
||||
<u-button type="primary" text="我已知晓" :disabled="hasReaded" @click="show=false"></u-button>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -98,11 +104,34 @@
|
||||
formatTime,
|
||||
formatRelativeTime
|
||||
} from '@/utils/timeFormat';
|
||||
import instructionVue from '../../components/instruction.vue';
|
||||
export default {
|
||||
components: {
|
||||
instructionVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasReaded:true,
|
||||
checkboxValue1: [],
|
||||
// 基本案列数据
|
||||
checkboxList1: [{
|
||||
name: '苹果',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '香蕉',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '橙子',
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
IMAGE_BASE_URL,
|
||||
tabsReady: false,
|
||||
show: true,
|
||||
title: '使用说明',
|
||||
content: '',
|
||||
tabList: [{
|
||||
name: '共享空间'
|
||||
},
|
||||
@ -115,8 +144,8 @@
|
||||
orderList: [] // 新增单独订单列表
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getList();
|
||||
onLoad() {
|
||||
this.getList();
|
||||
// this.fetchMeetingRooms().then(() => {
|
||||
// this.$nextTick(() => {
|
||||
// this.tabsReady = true;
|
||||
@ -125,20 +154,22 @@
|
||||
},
|
||||
// mounted() {
|
||||
// this.getList();
|
||||
// },
|
||||
computed: {
|
||||
formattedOrderList() {
|
||||
return this.orderList.map(item => ({
|
||||
...item,
|
||||
roomTitle: item.roomInfo ? item.roomInfo.title : '会议室',
|
||||
hasImages: item.roomInfo && item.roomInfo.imgs && item.roomInfo.imgs.length > 0,
|
||||
firstImage: item.roomInfo && item.roomInfo.imgs && item.roomInfo.imgs[0] ?
|
||||
`${IMAGE_BASE_URL}${item.roomInfo.imgs[0]}` : ''
|
||||
}))
|
||||
}
|
||||
// },
|
||||
computed: {
|
||||
formattedOrderList() {
|
||||
return this.orderList.map(item => ({
|
||||
...item,
|
||||
roomTitle: item.roomInfo ? item.roomInfo.title : '会议室',
|
||||
hasImages: item.roomInfo && item.roomInfo.imgs && item.roomInfo.imgs.length > 0,
|
||||
firstImage: item.roomInfo && item.roomInfo.imgs && item.roomInfo.imgs[0] ?
|
||||
`${IMAGE_BASE_URL}${item.roomInfo.imgs[0]}` : ''
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
readChange(flag){
|
||||
this.hasReaded=flag
|
||||
},
|
||||
handleTabChange(index) {
|
||||
this.currentTab = index.index;
|
||||
if (index.index == 1) {
|
||||
@ -219,7 +250,7 @@
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
|
||||
|
||||
// 安全获取ID（兼容各种可能的字段名）
|
||||
const id = item.id;
|
||||
|
||||
@ -276,7 +307,7 @@
|
||||
});
|
||||
|
||||
if (res?.success) {
|
||||
this.orderList = [...res.data];
|
||||
this.orderList = [...res.data];
|
||||
this.tabsReady = true;
|
||||
}
|
||||
|
||||
@ -295,323 +326,325 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 定义变量
|
||||
$primary-color: #1989fa;
|
||||
$success-color: #07c160;
|
||||
$warning-color: #ff976a;
|
||||
$error-color: #ee0a24;
|
||||
$text-color: #333;
|
||||
$sub-text-color: #666;
|
||||
$light-text-color: #999;
|
||||
$border-color: #f0f0f0;
|
||||
$bg-color: #f8f8f8;
|
||||
$card-radius: 24rpx;
|
||||
$tag-radius: 8rpx;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background-color: $bg-color;
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70vh;
|
||||
|
||||
.loading-text {
|
||||
margin-top: 32rpx;
|
||||
font-size: 30rpx;
|
||||
color: $sub-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.room-list {
|
||||
padding: 30rpx;
|
||||
|
||||
.room-item {
|
||||
display: flex;
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.room-img {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
flex: 1;
|
||||
padding: 24rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.room-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.room-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.room-status {
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&.available {
|
||||
background-color: rgba($success-color, 0.1);
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background-color: rgba($warning-color, 0.1);
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-meta {
|
||||
display: flex;
|
||||
margin: 16rpx 0 24rpx;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: $sub-text-color;
|
||||
|
||||
u-icon {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-facilities {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
|
||||
.facility-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: $tag-radius;
|
||||
background-color: #f0f7ff;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 30rpx;
|
||||
|
||||
.order-item {
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
|
||||
.order-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
|
||||
&.available {
|
||||
background-color: rgba($success-color, 0.1);
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-details {
|
||||
padding: 30rpx 0;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: $sub-text-color;
|
||||
text{
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
text-align: center !important;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 2rpx solid #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态提示
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 0;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 96rpx;
|
||||
color: #ccc;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 30rpx;
|
||||
color: $sub-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.order-content {
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 240rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
/* 状态样式补充 */
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&.pending {
|
||||
background-color: rgba(#ff976a, 0.1);
|
||||
color: #ff976a;
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
background-color: rgba(#07c160, 0.1);
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
&.cancelled, &.rejected {
|
||||
background-color: rgba(#ee0a24, 0.1);
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
background-color: rgba(#1989fa, 0.1);
|
||||
color: #1989fa;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
|
||||
.empty-icon {
|
||||
color: #ccc;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
// 定义变量
|
||||
$primary-color: #1989fa;
|
||||
$success-color: #07c160;
|
||||
$warning-color: #ff976a;
|
||||
$error-color: #ee0a24;
|
||||
$text-color: #333;
|
||||
$sub-text-color: #666;
|
||||
$light-text-color: #999;
|
||||
$border-color: #f0f0f0;
|
||||
$bg-color: #f8f8f8;
|
||||
$card-radius: 24rpx;
|
||||
$tag-radius: 8rpx;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background-color: $bg-color;
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70vh;
|
||||
|
||||
.loading-text {
|
||||
margin-top: 32rpx;
|
||||
font-size: 30rpx;
|
||||
color: $sub-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.room-list {
|
||||
padding: 30rpx;
|
||||
|
||||
.room-item {
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.room-img {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
flex: 1;
|
||||
padding: 24rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.room-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.room-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.room-status {
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&.available {
|
||||
background-color: rgba($success-color, 0.1);
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background-color: rgba($warning-color, 0.1);
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-meta {
|
||||
display: flex;
|
||||
margin: 16rpx 0 24rpx;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: $sub-text-color;
|
||||
|
||||
u-icon {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-facilities {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
|
||||
.facility-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: $tag-radius;
|
||||
background-color: #f0f7ff;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 30rpx;
|
||||
|
||||
.order-item {
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
|
||||
.order-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
|
||||
&.available {
|
||||
background-color: rgba($success-color, 0.1);
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-details {
|
||||
padding: 30rpx 0;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: $sub-text-color;
|
||||
|
||||
text {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
text-align: center !important;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 2rpx solid #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态提示
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 0;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 96rpx;
|
||||
color: #ccc;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 30rpx;
|
||||
color: $sub-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.order-content {
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 240rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
/* 状态样式补充 */
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&.pending {
|
||||
background-color: rgba(#ff976a, 0.1);
|
||||
color: #ff976a;
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
background-color: rgba(#07c160, 0.1);
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
&.cancelled,
|
||||
&.rejected {
|
||||
background-color: rgba(#ee0a24, 0.1);
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
background-color: rgba(#1989fa, 0.1);
|
||||
color: #1989fa;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
|
||||
.empty-icon {
|
||||
color: #ccc;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
19
utils/dict.js
Normal file
19
utils/dict.js
Normal file
@ -0,0 +1,19 @@
|
||||
import { dictManage } from "./dictClass"
|
||||
//申请类型
|
||||
export const applyType=new dictManage([
|
||||
{value:1,name:'单位申请'},
|
||||
{value:2,name:'个人申请'},
|
||||
])
|
||||
//使用情况
|
||||
export const usage=new dictManage([
|
||||
{value:1,name:'已复位'},
|
||||
{value:2,name:'设置设备需维修'},
|
||||
{value:1,name:'设施设备需照价赔偿'}
|
||||
])
|
||||
//事由主题
|
||||
export const thingTheme=new dictManage([
|
||||
{value:1,name:'开会'},
|
||||
{value:2,name:'学术报告'},
|
||||
{value:3,name:'活动'},
|
||||
{value:4,name:'其他'}
|
||||
])
|
||||
26
utils/dictClass.js
Normal file
26
utils/dictClass.js
Normal file
@ -0,0 +1,26 @@
|
||||
export class dictManage {
|
||||
constructor(data) {
|
||||
this.data = data
|
||||
this.valueMap = new Map(data.map(item => [item.value, item.name]))
|
||||
this.nameMap = new Map(data.map(item => [item.name, item.value]))
|
||||
}
|
||||
getAll() {
|
||||
return this.data
|
||||
}
|
||||
getValue(name) {
|
||||
return this.nameMap.get(name) || ''
|
||||
}
|
||||
getName(value) {
|
||||
return this.valueMap.get(value) || ''
|
||||
}
|
||||
|
||||
// 获取所有value的数组
|
||||
getValues() {
|
||||
return Array.from(this.valueMap.keys());
|
||||
}
|
||||
|
||||
// 获取所有name的数组
|
||||
getNames() {
|
||||
return Array.from(this.valueMap.values());
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user