移动端V1.0
This commit is contained in:
262
pages/OneStopCommunity/functionHouse/detail.vue
Normal file
262
pages/OneStopCommunity/functionHouse/detail.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user