262 lines
6.3 KiB
Vue
262 lines
6.3 KiB
Vue
|
<template>
|
|||
|
<view class="detail">
|
|||
|
<!-- 轮播图区域 -->
|
|||
|
<view style="margin: 40rpx;">
|
|||
|
<uni-swiper-dot :info="swiperlist" :current="current" :dots-styles="dotStyles" field="content" mode="round">
|
|||
|
<swiper interval="2000" autoplay class="swiper-box" @change="change">
|
|||
|
<swiper-item v-for="(item, index) in list.roomImgs" :key="index">
|
|||
|
<view class="swiper-item">
|
|||
|
<image mode="aspectFill" :src="basePath+item"></image>
|
|||
|
</view>
|
|||
|
</swiper-item>
|
|||
|
</swiper>
|
|||
|
</uni-swiper-dot>
|
|||
|
</view>
|
|||
|
|
|||
|
<!-- 房间信息区域 -->
|
|||
|
<view class="content">
|
|||
|
<view class="title">
|
|||
|
<view class="title-a">
|
|||
|
<text>{{list.roomName}}</text>
|
|||
|
<view v-for="(tab,index) in rolelist" :key="index" v-if="list.status==tab.dictValue"
|
|||
|
:class="[list.status==0?'open-up':'',list.status==1?'shutdown':'',list.status==2?'maintenance':'']">
|
|||
|
{{tab.dictLabel}}
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="title-b">
|
|||
|
<uni-icons color="#FFBB12" type="staff-filled" size="24"></uni-icons>
|
|||
|
<text>{{list.roomCapacity}}/人</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
<view class="introduction">
|
|||
|
<text>{{list.roomInfo}}</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
<!-- 时间选择区域 -->
|
|||
|
<view class="time-zone">
|
|||
|
<view class="time-header">
|
|||
|
<text>开放时间</text>
|
|||
|
<text><text style="color: red;">*</text>请选择日期进行预约</text>
|
|||
|
</view>
|
|||
|
|
|||
|
<!-- 日历组件 -->
|
|||
|
<uni-calendar
|
|||
|
:insert="true"
|
|||
|
:lunar="true"
|
|||
|
:start-date="startDate"
|
|||
|
:end-date="endDate"
|
|||
|
:selected="selectedDates"
|
|||
|
@change="onCalendarChange"
|
|||
|
/>
|
|||
|
|
|||
|
<view class="usage-matters">
|
|||
|
<text>使用事项:</text>
|
|||
|
<text>{{list.roomMatter}}</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import { getRoom } from '@/api/OneStopCommunity/room.js';
|
|||
|
import { getDicts } from '@/api/system/dict/data.js';
|
|||
|
import { baseUrl } from "@/config.js";
|
|||
|
|
|||
|
export default {
|
|||
|
data() {
|
|||
|
return {
|
|||
|
basePath: baseUrl,
|
|||
|
swiperlist: [],
|
|||
|
list: [],
|
|||
|
current: 0,
|
|||
|
dotStyles: {
|
|||
|
width: 12,
|
|||
|
backgroundColor: 'rgba(255, 255, 255, 0.4)',
|
|||
|
border: '1px rgba(255, 255, 255, 0.4) solid',
|
|||
|
color: '#fff',
|
|||
|
selectedBackgroundColor: '#1890FF',
|
|||
|
selectedBorder: '1px #1890FF solid'
|
|||
|
},
|
|||
|
id: "",
|
|||
|
rolelist: [],
|
|||
|
startDate: this.getTodayDate(),
|
|||
|
endDate: this.getFourteenDaysLaterDate(),
|
|||
|
selectedDates: []
|
|||
|
};
|
|||
|
},
|
|||
|
onLoad(option) {
|
|||
|
this.id = option.id;
|
|||
|
Promise.all([
|
|||
|
this.getRoomdetail(),
|
|||
|
this.getstate()
|
|||
|
]).catch(error => {
|
|||
|
console.error('初始化失败:', error);
|
|||
|
uni.showToast({ title: '数据加载失败', icon: 'none' });
|
|||
|
});
|
|||
|
},
|
|||
|
methods: {
|
|||
|
change(e) {
|
|||
|
this.current = e.detail.current;
|
|||
|
},
|
|||
|
async getRoomdetail() {
|
|||
|
try {
|
|||
|
const res = await getRoom(this.id);
|
|||
|
if (res.code === 200) {
|
|||
|
this.list = res.data;
|
|||
|
this.list.roomImgs = this.list.roomImgs ? this.list.roomImgs.split(",") : [];
|
|||
|
this.swiperlist = this.list.roomImgs.map(img => this.basePath + img);
|
|||
|
}
|
|||
|
} catch (error) {
|
|||
|
throw error;
|
|||
|
}
|
|||
|
},
|
|||
|
async getstate() {
|
|||
|
try {
|
|||
|
const res = await getDicts('rt_fu_room_status');
|
|||
|
this.rolelist = res.data;
|
|||
|
} catch (error) {
|
|||
|
throw error;
|
|||
|
}
|
|||
|
},
|
|||
|
getTodayDate() {
|
|||
|
const today = new Date();
|
|||
|
return `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
|
|||
|
},
|
|||
|
getFourteenDaysLaterDate() {
|
|||
|
const date = new Date();
|
|||
|
date.setDate(date.getDate() + 14);
|
|||
|
return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
|
|||
|
},
|
|||
|
onCalendarChange(e) {
|
|||
|
uni.navigateTo({
|
|||
|
url: `./reservation?rtTime=${e.fulldate}&list=${JSON.stringify(this.list)}`
|
|||
|
});
|
|||
|
}
|
|||
|
}
|
|||
|
};
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss" scoped>
|
|||
|
.detail {
|
|||
|
background-color: rgba(244, 244, 244, 0.6);
|
|||
|
padding-bottom: 40rpx;
|
|||
|
|
|||
|
.swiper-box {
|
|||
|
width: 100%;
|
|||
|
height: 600rpx;
|
|||
|
border-radius: 16rpx;
|
|||
|
overflow: hidden;
|
|||
|
|
|||
|
.swiper-item {
|
|||
|
height: 600rpx;
|
|||
|
|
|||
|
image {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
border-radius: 16rpx;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.content {
|
|||
|
margin: 0 40rpx;
|
|||
|
|
|||
|
.title {
|
|||
|
display: flex;
|
|||
|
justify-content: space-between;
|
|||
|
align-items: center;
|
|||
|
margin-bottom: 20rpx;
|
|||
|
|
|||
|
.title-a {
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
|
|||
|
text {
|
|||
|
font-size: 40rpx;
|
|||
|
font-weight: 600;
|
|||
|
font-family: PingFang SC;
|
|||
|
}
|
|||
|
|
|||
|
.open-up, .shutdown, .maintenance {
|
|||
|
margin-left: 20rpx;
|
|||
|
font-size: 20rpx;
|
|||
|
padding: 4rpx 12rpx;
|
|||
|
border-radius: 8rpx;
|
|||
|
}
|
|||
|
|
|||
|
.open-up {
|
|||
|
background-color: #E7FAF0;
|
|||
|
border: 1px solid #D0F5E0;
|
|||
|
color: #71E2A3;
|
|||
|
}
|
|||
|
|
|||
|
.shutdown {
|
|||
|
background-color: #FFEDED;
|
|||
|
border: 1px solid #FF9292;
|
|||
|
color: #FF9292;
|
|||
|
}
|
|||
|
|
|||
|
.maintenance {
|
|||
|
background-color: #eeeeee;
|
|||
|
border: 1px solid #cfcfcf;
|
|||
|
color: #818181;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.title-b {
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
font-size: 28rpx;
|
|||
|
color: #666;
|
|||
|
|
|||
|
uni-icons {
|
|||
|
margin-right: 8rpx;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.introduction {
|
|||
|
font-size: 28rpx;
|
|||
|
color: #555;
|
|||
|
line-height: 1.6;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.time-zone {
|
|||
|
background-color: #fff;
|
|||
|
border-radius: 40rpx 40rpx 0 0;
|
|||
|
padding: 40rpx;
|
|||
|
margin-top: 40rpx;
|
|||
|
|
|||
|
.time-header {
|
|||
|
display: flex;
|
|||
|
justify-content: space-between;
|
|||
|
align-items: center;
|
|||
|
margin-bottom: 30rpx;
|
|||
|
|
|||
|
text:first-child {
|
|||
|
font-size: 36rpx;
|
|||
|
font-weight: 550;
|
|||
|
}
|
|||
|
|
|||
|
text:last-child {
|
|||
|
font-size: 24rpx;
|
|||
|
color: #999;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.usage-matters {
|
|||
|
margin-top: 40rpx;
|
|||
|
font-size: 28rpx;
|
|||
|
color: #666;
|
|||
|
|
|||
|
text:first-child {
|
|||
|
font-weight: bold;
|
|||
|
margin-right: 10rpx;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</style>
|