接口联调

src/apis/index.ts

@@ -6,9 +6,19 @@ export type LoginApiParams = {
   password: string,
 };
 
+export type pageInfoApiParams = {
+  pageNum: number,
+  pageSize: number,
+};
+
 // Api函数类型
 export type LoginApi = (data: LoginApiParams) => Promise<any>;
 export type LogoutApi = () => Promise<any>;
+export type SwiperImageApi = () => Promise<any>;
+export type HouseListApi = () => Promise<any>;
+export type HouseDetailApi = (id: string) => Promise<any>;
+export type FacilitiesListApi = (data: pageInfoApiParams) => Promise<any>;
+export type FacilitiesDetailApi = (id: string) => Promise<any>;
 
 // 登录
 const loginApi: LoginApi = async (data) => {
@@ -20,7 +30,38 @@ const logoutApi: LogoutApi = async () => {
   return api.post('/auth/appLogout');
 };
 
+// 首页轮播图
+const swiperImageApi: SwiperImageApi = async () => {
+  return api.get('/system/img/wximg');
+};
+
+// 房型列表
+const houseListApi: HouseListApi = async () => {
+  return api.get('/system/room/wxlist?pageNum=1&pageSize=10');
+};
+
+// 房型详情
+const houseDetailApi: HouseDetailApi = async (id) => {
+  return api.get(`/system/room/${id}`);
+};
+
+// 设施列表
+const facilitiesListApi: FacilitiesListApi = async (data) => {
+  return api.get('/system/facilities/list', data);
+};
+
+//设施详情
+const facilitiesDetailApi: FacilitiesDetailApi = async (id) => {
+  return api.get(`/system/facilities/${id}`);
+};
+
 export const apis = {
   login: loginApi,
   logout: logoutApi,
+  swiperImage: swiperImageApi,
+  houseList: houseListApi,
+  houseDetail: houseDetailApi,
+  facilitiesList: facilitiesListApi,
+  facilityDetail: facilitiesDetailApi,
+
 };

src/pages/facility/houseDetail/index.vue

@@ -6,20 +6,29 @@
       <view class="facility-houseDetail-content-title">
         三亚太保养老族库
       </view>
-      <view class="facility-houseDetail-content-chunk">
-        装修实例 丨 90㎡ 丨 两居
+      <!-- 房型详情 -->
+      <view >
+        <view class="facility-houseDetail-content-title">
+          {{ state.detail.title }}
+        </view>
+        <view class="facility-houseDetail-content-text">
+          {{ state.detail.content }}
+        </view>
       </view>
+      <!-- 区域list -->
       <view v-for="(item, index) in state.areaList" :key="index">
         <view class="facility-houseDetail-content-title">
           {{ item.title }}
         </view>
         <view style="margin-bottom: 10rpx;">
-          <wd-img width="100%" mode="widthFix" :src="item.url" @click="onClickLookImage(item.url)" />
+          <wd-swiper :autoplay="false" :list="item.sysimg" :indicator="{ type: 'fraction' }"
+          indicatorPosition="bottom-right" v-model:current="state.swiperCurrentIndex" @click="onClickSwiper" />
         </view>
         <view class="facility-houseDetail-content-text">
           {{ item.content }}
         </view>
       </view>
+
     </view>
   </view>
 </template>
@@ -27,21 +36,48 @@
 <script lang="ts" setup>
 import { reactive, computed } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
+import { apis } from '@/apis';
 
 interface State {
   swiperCurrentIndex: number,
-  photoList: string[],
-  areaList: {
+  photoList: string[], // 房型图片
+  detail: {   // 房型详情
     url: string,
     title: string,
     content: string,
-  }[];
+    size: string,     //面积
+    direction: string,//朝向
+    floorNum: string, //楼层
+  },
+  areaList: [{  // 区域list
+    title: string,
+    content: string,
+    sysimg: string []
+  }];
+  areaPhotoList: string[], // 区域图片
+  id: string,
+  type: string,
 };
 
 const state: State = reactive({
   swiperCurrentIndex: 0,
   photoList: [],
-  areaList: [],
+  areaList: [{
+    title: '',
+    content: '',
+    sysimg: []
+  }],
+  areaPhotoList: [],
+  detail : {
+    url: '',
+    title: '',
+    content: '',
+    size: '',
+    direction: '',
+    floorNum: '',
+  },
+  id: '',
+  type: '',
 });
 
 const coverUrl = computed(() => {
@@ -49,45 +85,69 @@ const coverUrl = computed(() => {
 })
 
 const api = {
-  // 获取列表
-  fetchList: async () => {
+  // 获取房型详情
+  fetchHouseDetail: async () => {
+    uni.showLoading({
+      title: '加载中',
+    });
+    try {
+      console.log('1');
+      const res = await apis.houseDetail(state.id);
+      if(res.code === 200){
+        const data = res.data;
+        state.detail = {  // 房型详情
+          url: data.sysimg[0].url,
+          title: data.roomTitle,
+          content: data.roomDesc,
+          size: data.roomSize,
+          direction: data.direction,
+          floorNum: data.floorNum,
+        }
+        data.sysimg.forEach((item: any) => {  // 房型图片
+          state.photoList.push(item.url);
+        });
+
+        const regionData = data.region;  // 区域list
+        console.log(regionData, 'regionData');
+        regionData.forEach((item1: any) => {
+          console.log(item1.sysimg, 'item1');
+          state.areaList.push({
+            title: item1.regionTitle,
+            content: item1.regionDesc,
+            sysimg: item1.sysimg.map((item2: any) => {
+              return item2.url;
+            })
+          });
+        });
+      }
+    } catch (error: any) {
+      console.error(error);
+    } finally {
+      uni.hideLoading();
+    }
+  },
+
+  facilityDetail: async () => {
     uni.showLoading({
       title: '加载中',
     });
     try {
-      const photoList = [
-        'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-        'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-      ];
-      state.photoList = photoList;
-      const list = [
-        {
-          url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-          title: '户型图',
-          content: '99㎡两室一厅的户型，整屋以白色和原木色为主基调，用鲜艳的颜色点缀空间，清新淡雅，不杂乱，简单纯粹。',
-        },
-        {
-          url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-          title: '客厅',
-          content: '沙发墙特意选择了跟电视墙同色的卡其色护墙板铺贴，看上去就不会觉得单调。背景墙两侧都有卧室门，特意选择跟背景墙相近色的木门，达到隐形门的效果。 整屋以实用精致的搭配为主，吊顶也没有过多设计，在平面吊顶的基础上，安装吸顶灯和灯带做主要照明，不压层高。',
-        },
-        {
-          url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-          title: '卧室',
-          content: '主卧把飘窗拆除后也做了落地窗封窗，充足的采光融入，让空间看上去更显宽敞大气。原飘窗的位置也没有浪费，而是安装了梳妆台，有效利用空间。 卧室整体墙面留白，也没有做过多的处理，避免因为太复杂的设计让空间显得更局促。将床靠墙摆放，尽可能节省空间，留出充足的活动空间来。',
-        },
-        {
-          url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-          title: '厨房',
-          content: '厨房的面积较小，将生活阳台打通后做了双一字型的布局，将空间都有效利用起来。拥有充足的收纳空间，满足一家人对收纳的高需求。 空间虽然小，但是操作区布局也都做到了合理规划。而且还做了高低台的设计，符合人体工学，做饭洗菜时不易累腰。',
-        },
-        {
-          url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-          title: '卫生间',
-          content: '卫生间的介绍',
-        },
-      ];
-      state.areaList = list;
+      const res = await apis.facilityDetail(state.id);
+      console.log(res, 'res');
+      if(res.code === 200){
+        const data = res.data;
+        state.detail = {  // 设施详情
+          url: data.sysimg[0].url,
+          title: data.facilitiesTitle,
+          content: data.facilitiesDesc,
+          size: '',
+          direction: '',
+          floorNum: '',
+        }
+        data.sysimg.forEach((item: any) => {  // 设施图片
+          state.photoList.push(item.url);
+        });
+      }
     } catch (error: any) {
       console.error(error);
     } finally {
@@ -100,12 +160,21 @@ const init = async () => {
   uni.showLoading({
     title: '加载中',
   });
-  // 获取列表
-  await api.fetchList();
+  
+  if(state.type === '2'){
+    // 获取设施详情
+    await api.facilityDetail();
+  }else{
+    // 获取房型详情
+    await api.fetchHouseDetail();
+  }
   uni.hideLoading();
 };
 
-onLoad(() => {
+onLoad((option) => {
+  console.log(option, 'option');
+  state.id = option?.id ?? '';
+  state.type = option?.type ?? '';
   init();
 });
 

src/pages/facility/index/index.vue

@@ -47,7 +47,8 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue';
-import { onShow, onReachBottom } from '@dcloudio/uni-app';
+import { onShow, onReachBottom, onLoad } from '@dcloudio/uni-app';
+import { apis } from '@/apis';
 
 interface State {
   tab: number,
@@ -62,6 +63,7 @@ interface State {
     sign: string,
     title: string,
     content: string,
+    date: string,
   }[],
   page: {
     pageNumber: number,
@@ -126,64 +128,28 @@ const api = {
     });
     try {
       const data = {
-        page_number: state.page.pageNumber,
-        page_size: state.page.pageSize,
+        pageNum: state.page.pageNumber,
+        pageSize: state.page.pageSize,
       };
-      const res = {
-        data: {
-          list: [
-            {
-              id: '1',
-              url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-              sign: 'ST-02 | 深色大理石深色大理石',
-              title: '门槛石/D户型客厅地面收 边、卫生间地面边、卫生间地面边、卫生间地面边、卫生间地面边、卫生间地面',
-              content: '参数要求：时静摩擦系数Aw Ad级 （COF≥0.7, BPN≥80)纹理清 晰，色差小，无裂痕，需做结晶防护处理，放射性指标的测试方法应符合现行国家标准 GB6566',
-            },
-            {
-              id: '2',
-              url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-              sign: 'ST-02 | 深色大理石',
-              title: '门槛石/D户型客厅地面收 边、卫生间地面',
-              content: '参数要求：时静摩擦系数Aw Ad级 （COF≥0.7, BPN≥80)纹理清 晰，色差小，无裂痕，需做结晶防护处理，放射性指标的测试方法应符合现行国家标准 GB6566',
-            },
-            {
-              id: '3',
-              url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-              sign: 'ST-02 | 深色大理石',
-              title: '门槛石/D户型客厅地面收 边、卫生间地面',
-              content: '参数要求：时静摩擦系数Aw Ad级 （COF≥0.7, BPN≥80)纹理清 晰，色差小，无裂痕，需做结晶防护处理，放射性指标的测试方法应符合现行国家标准 GB6566',
-            },
-            {
-              id: '4',
-              url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-              sign: 'ST-02 | 深色大理石',
-              title: '门槛石/D户型客厅地面收 边、卫生间地面',
-              content: '参数要求：时静摩擦系数Aw Ad级 （COF≥0.7, BPN≥80)纹理清 晰，色差小，无裂痕，需做结晶防护处理，放射性指标的测试方法应符合现行国家标准 GB6566',
-            },
-            {
-              id: '5',
-              url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-              sign: 'ST-02 | 深色大理石',
-              title: '门槛石/D户型客厅地面收 边、卫生间地面',
-              content: '参数要求：时静摩擦系数Aw Ad级 （COF≥0.7, BPN≥80)纹理清 晰，色差小，无裂痕，需做结晶防护处理，放射性指标的测试方法应符合现行国家标准 GB6566',
-            },
-            {
-              id: '6',
-              url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-              sign: 'ST-02 | 深色大理石',
-              title: '门槛石/D户型客厅地面收 边、卫生间地面',
-              content: '参数要求：时静摩擦系数Aw Ad级 （COF≥0.7, BPN≥80)纹理清 晰，色差小，无裂痕，需做结晶防护处理，放射性指标的测试方法应符合现行国家标准 GB6566',
-            }
-          ],
-          total: 10,
-        }
-      };
-      const list = res.data.list;
-      state.list = concat ? state.list.concat(list) : list;
+      const res = await apis.facilitiesList(data);
+      res.rows.forEach((item: any) => {
+        state.list.push({
+          id: item.facilitiesId,
+          url: item.sysimg[0].url,
+          sign: '9 | 深色大理石',
+          title: item.facilitiesTitle,
+          content: item.facilitiesDesc,
+          date: item.createTime,
+        });
+      });
+      // const list = res.rows;
+      // state.list = concat ? state.list.concat(list) : list;
+      console.log(state.list, 'item.sysimg[0].url');
       state.page = {
         ...state.page,
-        total: res.data.total,
+        total: res.total,
       };
+      uni.hideLoading();
     } catch (error: any) {
       console.error(error);
     } finally {
@@ -213,7 +179,7 @@ const onChangePagination = async () => {
   }
 }
 
-onShow(() => {
+onLoad(() => {
   state.page = {
     ...state.page,
     pageNumber: 1,
@@ -221,14 +187,18 @@ onShow(() => {
   init();
 });
 
+onShow(() => {
+  
+});
+
 onReachBottom(() => {
   onChangePagination();
 });
 
 // 点击跳转
-const onClickNavigate = (id: string) => {
+const onClickNavigate = (id: string, type: string) => {
   uni.navigateTo({
-    url: `/pages/facility/houseDetail/index?id=${id}`,
+    url: `/pages/facility/houseDetail/index?id=${id}&type=${2}`,
   });
 }
 </script>

src/pages/home/index/index.vue

@@ -6,7 +6,8 @@
       </wd-drop-menu>
     </view>
     <view>
-      <wd-swiper :autoplay="true" :list="state.swiperList" @click="onClickSwiper" />
+      <!-- @click="onClickSwiper" -->
+      <wd-swiper :autoplay="true" :list="state.swiperList"  />
     </view>
     <view class="home-menu">
       <view class="home-menu-item" v-for="(item, index) in menuList" :key="index">
@@ -49,7 +50,9 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue';
-import { onShow } from '@dcloudio/uni-app';
+import { onShow, onLoad } from '@dcloudio/uni-app';
+import iconCitySrc from '@/static/home/icon_city.svg';
+import { apis } from '@/apis';
 
 interface State {
   address: string,
@@ -83,26 +86,8 @@ const state: State = reactive({
       value: '3',
     }
   ],
-  swiperList: [
-    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-  ],
-  houseList: [
-    {
-      id: '1',
-      url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-      title: '户型1户型1户型1户型1户型1户型1户型1户型1户型1户型1户型1',
-      content: '老年人照料设施建筑基地应选择在工程地质条件稳定老年人照料设施建筑基地应选择在工程地质条件稳定老年人照料设施建筑基地应选择在工程地质条件稳定',
-      date: '2025-02-15',
-    },
-    {
-      id: '2',
-      url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-      title: '户型2',
-      content: '老年人照料设施建筑基地应选择在工程地质条件稳定',
-      date: '2025-02-16',
-    }
-  ],
+  swiperList: [],
+  houseList: [],
 });
 
 const menuList = [
@@ -138,10 +123,43 @@ const menuList = [
   }
 ];
 
-onShow(() => {
+const api = {
+  fetchImgsList: async () => {
+    state.swiperList = [];
+    const res = await apis.swiperImage();
+    res.rows.forEach((item: any) => {
+      state.swiperList.push(item.url);
+    });
+    
+  },
 
+  fetchHouseList: async () => {
+    const res = await apis.houseList();
+    res.rows.forEach((item: any) => {
+      state.houseList.push({
+        id: item.roomId,
+        url: item.sysimg[0].url,
+        title: item.roomTitle,
+        content: item.roomDesc,
+        date: item.createTime,
+      });
+    });
+  }
+}
+
+const init = () => {
+  api.fetchImgsList(); //轮播图集合
+  api.fetchHouseList();//房型集合
+};
+
+onShow(() => {
+  
 });
 
+onLoad(() => {
+  init();
+})
+
 // 点击轮播
 const onClickSwiper = () => {
   uni.navigateTo({