修改
This commit is contained in:
qiuyuan
parent
e3239de36c
commit
5e32aea993
@ -6,16 +6,11 @@
|
||||
|
||||
<!-- 会议室列表 -->
|
||||
<view class="room-list" v-if="currentTab === 0">
|
||||
11111111111111
|
||||
<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">
|
||||
<image class="room-img"
|
||||
:src="item.imgs && item.imgs.length > 0 ? `${IMAGE_BASE_URL}${item.imgs[0]}` : '/static/default-room.jpg'"
|
||||
mode="aspectFill"
|
||||
@error="handleImageError"
|
||||
@click="goDetail(item)">
|
||||
<image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]">
|
||||
</image>
|
||||
<view class="room-info">
|
||||
<view class="room-header">
|
||||
@ -41,46 +36,41 @@
|
||||
<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="getStatusClass(item.status)">
|
||||
<view class="order-status" :class="item.status == 0 ? 'available':''">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-content">
|
||||
<image class="room-img"
|
||||
:src="item.imgs && item.imgs.length > 0 ? `${IMAGE_BASE_URL}${item.imgs[0]}` : '/static/default-room.jpg'"
|
||||
mode="aspectFill"
|
||||
@error="handleImageError"
|
||||
@click="goDetail(item)">
|
||||
</image>
|
||||
<!-- <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="16" color="#666" class="detail-icon"></u-icon>
|
||||
<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="16" color="#666" class="detail-icon"></u-icon>
|
||||
<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="16" color="#666" class="detail-icon"></u-icon>
|
||||
<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="16" color="#666" class="detail-icon"></u-icon>
|
||||
<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" size="mini" plain
|
||||
<u-button type="primary" plain
|
||||
@click="goDetail(item.roomInfo || item)">查看详情</u-button>
|
||||
<u-button type="error" size="mini" plain v-if="item.status === 0" @click="cancelOrder(item.id)">
|
||||
<u-button type="error" plain v-if="item.status === 0" @click="cancelOrder(item.id)">
|
||||
取消预约
|
||||
</u-button>
|
||||
</view>
|
||||
@ -319,315 +309,323 @@
|
||||
};
|
||||
</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: 12px;
|
||||
$tag-radius: 4px;
|
||||
|
||||
.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: 16px;
|
||||
font-size: 15px;
|
||||
color: $sub-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.room-list {
|
||||
padding: 15px;
|
||||
|
||||
.room-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.room-img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
flex: 1;
|
||||
padding: 12px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.room-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.room-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.room-status {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.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: 8px 0 12px;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
font-size: 13px;
|
||||
color: $sub-text-color;
|
||||
|
||||
u-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-facilities {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
|
||||
.facility-tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: $tag-radius;
|
||||
background-color: #f0f7ff;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 15px;
|
||||
|
||||
.order-item {
|
||||
margin-bottom: 20px;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.order-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 13px;
|
||||
|
||||
&.pending {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-details {
|
||||
padding: 15px 0;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: $sub-text-color;
|
||||
|
||||
.item-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
text-align: center !important;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态提示
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
color: #ccc;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 15px;
|
||||
color: $sub-text-color;
|
||||
}
|
||||
<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: 15px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
.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;
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
border-radius: 6px;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
&.confirmed {
|
||||
background-color: rgba(#07c160, 0.1);
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
&.cancelled, &.rejected {
|
||||
background-color: rgba(#ee0a24, 0.1);
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
margin-right: 8px;
|
||||
.empty-text {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 状态样式补充 */
|
||||
.order-status {
|
||||
font-size: 13px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.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: 60px 0;
|
||||
|
||||
.empty-icon {
|
||||
color: #ccc;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 15px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user