zhxg_app_v1.0/pages/OneStopCommunity/functionHouse/detail.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>