|
|
@@ -2,45 +2,39 @@
|
|
|
<view class="home">
|
|
|
<view>
|
|
|
<wd-drop-menu>
|
|
|
- <wd-drop-menu-item :options="state.addressList" v-model="state.address" />
|
|
|
+ <wd-drop-menu-item :options="state.productPositionList" v-model="state.positionId" />
|
|
|
</wd-drop-menu>
|
|
|
</view>
|
|
|
<view>
|
|
|
<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">
|
|
|
- <wd-img width="60rpx" height="60rpx" :src="item.icon" />
|
|
|
- <view class="home-menu-item-right">
|
|
|
- <view style="font-weight: 400;">
|
|
|
- {{ item.title }}
|
|
|
+ <view class="home-room">
|
|
|
+ <view class="home-room-item" v-for="(item, index) in state.roomList" :key="index"
|
|
|
+ @click="onClickNavigate(item.communityId, item.roomId)">
|
|
|
+ <wd-img width="60rpx" height="60rpx" :src="item.url" />
|
|
|
+ <view class="home-room-item-right">
|
|
|
+ <view class="home-room-item-right-title">
|
|
|
+ {{ item.roomTitle }}
|
|
|
</view>
|
|
|
- <view style="font-size: 24rpx;margin-top: 10rpx;">
|
|
|
- {{ item.text }}
|
|
|
+ <view class="home-room-item-right-text">
|
|
|
+ {{ item.roomDesc }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="home-house">
|
|
|
- <view class="home-house-title">
|
|
|
+ <view class="home-situation">
|
|
|
+ <view class="home-situation-title">
|
|
|
<view>
|
|
|
- 最新发布
|
|
|
+ 概况
|
|
|
</view>
|
|
|
- <wd-icon name="arrow-right" />
|
|
|
</view>
|
|
|
- <view class="home-house-item" v-for="(item, index) in state.houseList" :key="index"
|
|
|
- @click="onClickNavigate(item.id)">
|
|
|
- <wd-img width="220rpx" height="180rpx" radius="8rpx" mode="aspectFill" :src="item.url" />
|
|
|
- <view class="home-house-item-right">
|
|
|
- <view class="home-house-item-right-title">
|
|
|
- {{ item.title }}
|
|
|
- </view>
|
|
|
- <view class="home-house-item-right-text">
|
|
|
- {{ item.content }}
|
|
|
- </view>
|
|
|
- <view class="home-house-item-right-date">
|
|
|
- {{ item.date }}
|
|
|
- </view>
|
|
|
+ <view class="home-situation-content">
|
|
|
+ <image mode="widthFix" :src="state.productPositionInfo.url" />
|
|
|
+ <view class="home-situation-content-title">
|
|
|
+ {{ state.productPositionInfo.positionTitle }}
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ {{ state.productPositionInfo.positionDesc }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -48,109 +42,111 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { reactive } from 'vue';
|
|
|
+import { reactive, watch } from 'vue';
|
|
|
import { onShow } from '@dcloudio/uni-app';
|
|
|
+import iconTowelSrc from '@/static/home/icon_towel.svg';
|
|
|
+import iconCitySrc from '@/static/home/icon_city.svg';
|
|
|
import { apis } from '@/apis';
|
|
|
-import dayjs from 'dayjs';
|
|
|
|
|
|
interface State {
|
|
|
- address: string,
|
|
|
- addressList: {
|
|
|
+ positionId: string,
|
|
|
+ productPositionList: {
|
|
|
label: string,
|
|
|
value: string,
|
|
|
}[],
|
|
|
swiperList: string[],
|
|
|
- houseList: {
|
|
|
- id: string,
|
|
|
+ roomList: {
|
|
|
+ communityId: string,
|
|
|
+ roomId: string,
|
|
|
+ roomTitle: string,
|
|
|
+ roomDesc: string,
|
|
|
url: string,
|
|
|
- title: string,
|
|
|
- content: string,
|
|
|
- date: string,
|
|
|
}[],
|
|
|
+ productPositionInfo: {
|
|
|
+ positionId: string,
|
|
|
+ positionTitle: string,
|
|
|
+ positionDesc: string,
|
|
|
+ url: string,
|
|
|
+ },
|
|
|
};
|
|
|
|
|
|
const state = reactive<State>({
|
|
|
- address: '1',
|
|
|
- addressList: [
|
|
|
- {
|
|
|
- label: '太保家园·郑州国际颐养社区',
|
|
|
- value: '1',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '太保家园·郑州国际颐养社区2',
|
|
|
- value: '2',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '太保家园·郑州国际颐养社区3',
|
|
|
- value: '3',
|
|
|
- }
|
|
|
- ],
|
|
|
+ positionId: '',
|
|
|
+ productPositionList: [],
|
|
|
swiperList: [],
|
|
|
- houseList: [],
|
|
|
-});
|
|
|
-
|
|
|
-const menuList = [
|
|
|
- {
|
|
|
- icon: '/static/home/icon_towel.svg',
|
|
|
- title: '生活用房',
|
|
|
- text: '能力完好老年人',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/home/icon_badminton.svg',
|
|
|
- title: '文娱与健身用房',
|
|
|
- text: '',
|
|
|
+ roomList: [],
|
|
|
+ productPositionInfo: {
|
|
|
+ positionId: '',
|
|
|
+ positionTitle: '',
|
|
|
+ positionDesc: '',
|
|
|
+ url: '',
|
|
|
},
|
|
|
- {
|
|
|
- icon: '/static/home/icon_file.svg',
|
|
|
- title: '康复与医疗用房',
|
|
|
- text: '',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/home/icon_medical.svg',
|
|
|
- title: '服务管理用房',
|
|
|
- text: '',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/home/icon_sign.svg',
|
|
|
- title: '交通空间',
|
|
|
- text: '',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/static/home/icon_city.svg',
|
|
|
- title: '建筑细节',
|
|
|
- text: '',
|
|
|
- }
|
|
|
-];
|
|
|
+});
|
|
|
|
|
|
const api = {
|
|
|
+ // 获取产品定位列表
|
|
|
+ fetchProductPositionList: async () => {
|
|
|
+ try {
|
|
|
+ const res = await apis.fetchProductPositionList();
|
|
|
+ const list = res.data.map((item: any) => {
|
|
|
+ return {
|
|
|
+ label: item.positionName,
|
|
|
+ value: item.positionId,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ state.productPositionList = list;
|
|
|
+ if (list.length) {
|
|
|
+ state.positionId = list[0].value;
|
|
|
+ }
|
|
|
+ } catch (error: any) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
// 获取轮播图列表
|
|
|
fetchBannerList: async () => {
|
|
|
try {
|
|
|
- const res = await apis.fetchBannerList();
|
|
|
- const list = res.rows.map((item: any) => item.url);
|
|
|
+ const res = await apis.fetchBannerList(state.positionId);
|
|
|
+ const list = res.data.map((item: any) => item.url);
|
|
|
state.swiperList = list;
|
|
|
} catch (error: any) {
|
|
|
console.error(error);
|
|
|
}
|
|
|
},
|
|
|
- // 获取房型列表
|
|
|
- fetchHouseList: async () => {
|
|
|
+ // 获取房型信息
|
|
|
+ fetchRoomInfo: async () => {
|
|
|
try {
|
|
|
- const data = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 2,
|
|
|
- };
|
|
|
- const res = await apis.fetchHouseList(data);
|
|
|
- const list = res.rows.map((item: any) => {
|
|
|
- return {
|
|
|
- id: item.roomId,
|
|
|
- url: item.sysimg[0].url,
|
|
|
- title: item.roomTitle,
|
|
|
- content: item.roomDesc,
|
|
|
- date: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ const res = await apis.fetchRoomInfo(state.positionId);
|
|
|
+ const info = res.data;
|
|
|
+
|
|
|
+ const item = info.community.find((item: any) => item.isMaster === '1');
|
|
|
+ if (item) {
|
|
|
+ const list = item.room.map((record: any, index: number) => {
|
|
|
+ return {
|
|
|
+ communityId: item.communityId,
|
|
|
+ roomId: record.roomId,
|
|
|
+ roomTitle: record.roomTitle,
|
|
|
+ roomDesc: record.roomDesc,
|
|
|
+ url: (index + 1) % 2 === 0 ? iconCitySrc : iconTowelSrc,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.roomList = list;
|
|
|
+ }
|
|
|
+
|
|
|
+ const getUrl = () => {
|
|
|
+ const item = info.sysimg.find((item: any) => item.enumC === '0');
|
|
|
+ if (item) {
|
|
|
+ return item.url;
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
}
|
|
|
- });
|
|
|
- state.houseList = list.slice(0, 2);
|
|
|
+ }
|
|
|
+
|
|
|
+ state.productPositionInfo = {
|
|
|
+ positionId: info.positionId,
|
|
|
+ positionTitle: info.positionTitle,
|
|
|
+ positionDesc: info.positionDesc,
|
|
|
+ url: getUrl(),
|
|
|
+ }
|
|
|
} catch (error: any) {
|
|
|
console.error(error);
|
|
|
}
|
|
|
@@ -161,12 +157,8 @@ const init = async () => {
|
|
|
uni.showLoading({
|
|
|
title: '加载中',
|
|
|
});
|
|
|
- await Promise.all([
|
|
|
- // 获取轮播图列表
|
|
|
- api.fetchBannerList(),
|
|
|
- // 获取房型列表
|
|
|
- api.fetchHouseList(),
|
|
|
- ]);
|
|
|
+ // 获取产品定位列表
|
|
|
+ await api.fetchProductPositionList();
|
|
|
uni.hideLoading();
|
|
|
};
|
|
|
|
|
|
@@ -174,10 +166,19 @@ onShow(() => {
|
|
|
init();
|
|
|
});
|
|
|
|
|
|
+watch(() => state.positionId, async () => {
|
|
|
+ await Promise.all([
|
|
|
+ // 获取轮播图列表
|
|
|
+ api.fetchBannerList(),
|
|
|
+ // 获取房型信息
|
|
|
+ api.fetchRoomInfo(),
|
|
|
+ ]);
|
|
|
+});
|
|
|
+
|
|
|
// 点击跳转
|
|
|
-const onClickNavigate = (id: string) => {
|
|
|
+const onClickNavigate = (communityId: string, roomId: string) => {
|
|
|
uni.navigateTo({
|
|
|
- url: `/pages/home/houseDetail/index?id=${id}`,
|
|
|
+ url: `/pages/home/roomDetail/index?positionId=${state.positionId}&communityId=${communityId}&roomId=${roomId}`,
|
|
|
});
|
|
|
}
|
|
|
</script>
|
|
|
@@ -186,7 +187,7 @@ const onClickNavigate = (id: string) => {
|
|
|
.home {
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
- &-menu {
|
|
|
+ &-room {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
margin-top: 20rpx;
|
|
|
@@ -200,10 +201,28 @@ const onClickNavigate = (id: string) => {
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
&-right {
|
|
|
- margin-left: 20rpx;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-bottom: 1rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-text {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -218,7 +237,7 @@ const onClickNavigate = (id: string) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &-house {
|
|
|
+ &-situation {
|
|
|
padding: 20rpx;
|
|
|
background: #FFFFFF;
|
|
|
border: 2rpx solid $border-color;
|
|
|
@@ -226,8 +245,6 @@ const onClickNavigate = (id: string) => {
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
&-title {
|
|
|
- padding-bottom: 20rpx;
|
|
|
- border-bottom: 2rpx solid $border-color;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
@@ -235,48 +252,16 @@ const onClickNavigate = (id: string) => {
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
- &-item {
|
|
|
- display: flex;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- border-bottom: 2rpx solid $border-color;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- &-right {
|
|
|
- flex: 1;
|
|
|
- margin-left: 20rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- &-title {
|
|
|
- font-weight: bold;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- &-text {
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- &-date {
|
|
|
- font-size: $font-size-mini;
|
|
|
- color: $gray-color;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
+ &-content {
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &-item:last-child {
|
|
|
- padding-bottom: 0;
|
|
|
- border-bottom: none;
|
|
|
- margin-bottom: 0;
|
|
|
+ &-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|