Files
zhxg_app_v1.0/pages/OneStopCommunity/functionHouse/detail.vue

262 lines
6.3 KiB
Vue
Raw Normal View History

2025-07-16 15:34:34 +08:00
<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>