kaifabu/RentWeAppFront
2
0
Fork 0
mirror of http://36.133.248.69:3088/admin/RentWeAppFront.git synced 2026-03-07 17:32:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页/资产列表/资产详情页面样式修改

Browse Source
This commit is contained in:
wenqi.peng
2025-12-25 17:14:51 +08:00
parent 964e4f9c33
commit d5953d219f
4 changed files with 1446 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/zy/filterDropdown.vue
View File

@@ -544,23 +544,23 @@
height: 44px; height: 44px;
border-bottom: solid 1rpx #eee; border-bottom: solid 1rpx #eee;
z-index: 12; z-index: 12;
background-color: #ffffff; background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
flex-direction: row; flex-direction: row;
.first-menu { .first-menu {
width: 100%; width: 100%;
font-size: 15px; font-size: 15px;
color: #757575; color: #000000;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: color .2s linear; transition: color .2s linear;
&.on { &.on {
color: #2979ff; color: #f44336;
.iconfont { .iconfont {
color: #2979ff; color: #f44336;
} }
} }
@@ -585,6 +585,7 @@
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
margin-top: -2px;
transform: translate3d(0, - 100%, 0); transform: translate3d(0, - 100%, 0);
max-height: 345px; max-height: 345px;
background-color: #ffffff; background-color: #ffffff;
@@ -624,7 +625,7 @@
> .iconfont { > .iconfont {
display: none; display: none;
font-size: 18px; font-size: 18px;
color: #2979ff; color: #f44336;
} }
} }
} }
@@ -654,7 +655,7 @@
border-bottom: solid 1rpx #e5e5e5; border-bottom: solid 1rpx #e5e5e5;
&.on { &.on {
color: #2979ff; color: #f44336;
> .menu-name { > .menu-name {
> .iconfont { > .iconfont {
@@ -677,12 +678,12 @@
> .iconfont { > .iconfont {
display: none; display: none;
font-size: 18px; font-size: 18px;
color: #2979ff; color: #f44336;
} }
} }
&.on { &.on {
color: #2979ff; color: #f44336;
> .menu-name { > .menu-name {
> .iconfont { > .iconfont {
@@ -716,7 +717,7 @@
&.on { &.on {
border-color: #f6c8ac; border-color: #f6c8ac;
color: #2979ff; color: #f44336;
} }
.iconfont { .iconfont {
@@ -757,8 +758,8 @@
flex-wrap: wrap; flex-wrap: wrap;
.on { .on {
border-color: #2979ff; border-color: #f44336;
background-color: #2979ff; background-color: #f44336;
color: #fff; color: #fff;
} }
@@ -794,18 +795,18 @@
width: 320rpx; width: 320rpx;
height: 42px; height: 42px;
border-radius: 42px; border-radius: 42px;
border: 2rpx solid #2979ff; border: 2rpx solid #f44336;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.reset { .reset {
color:#2979ff; color:#f44336;
} }
.submit { .submit {
color: #fff; color: #fff;
background-color: #2979ff; background-color: #f44336;
} }
} }
} }

429
pages/detail/assetsDetail.vue
View File

@@ -1,18 +1,17 @@
<template> <template>
<view class="asset-detail"> <view class="asset-detail">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<customNavbar <!-- <customNavbar
title="不动资产详情" ref="navbar"/> title="资产详情" ref="navbar"/> -->
<!-- 顶部信息块 -->
<view :style="{ paddingTop: navTotalHeight + 'px' }"> <!-- <u-navbar title="资产详情" :autoBack="true" :background="background" title-color="#2D2B2C"
<!-- <u-swiper back-icon-color="#2D2B2C">
:list="asset.images" </u-navbar> -->
height="220" <!-- 图片展示区 -->
border-radius="12" <view class="image-section" :style="{ paddingTop: navTotalHeight + 'px' }">
autoplay <u-icon name="arrow-left" color="#000000" size="24px" @click="back"></u-icon>
interval="3000" <image src="/static/30091712.jpg"></image>
></u-swiper> --> <!-- <AssetGallery
<AssetGallery
:insideImages="asset.images" :insideImages="asset.images"
:vrImage="asset.vrImage" :vrImage="asset.vrImage"
:vrSrc="asset.vr" :vrSrc="asset.vr"
@@ -22,47 +21,68 @@
@vr-click="viewVR" @vr-click="viewVR"
@video-play="playVideo" @video-play="playVideo"
@ad-click="onAdClick" @ad-click="onAdClick"
/> /> -->
</view> </view>
<view class="content"> <!-- 资产基本信息 -->
<!-- 基本信息 --> <view class="container">
<mycard title="资产信息"> <view class="basic-info">
<view class="info-list"> <view class="info-header">
<u-cell-group> <view class="category-tag">{{ asset.category }}</view>
<u-cell-item title="资产编号" :value="asset.code" :arrow="false"/> <view class="asset-name">{{ asset.name }}</view>
<u-cell-item title="资产类别" :value="asset.category" :arrow="false"/> </view>
<u-cell-item title="资产面积" :value="asset.area + '㎡'" :arrow="false"/> <view class="rent-price">¥1500/月</view>
<u-cell-item title="资产价值" :value="'¥' + formatMoney(asset.value)" :arrow="false"/> <view class="community-info">
<u-cell-item title="权属单位" :value="asset.owner" :arrow="false"/> <text class="label">所属小区：</text>
</u-cell-group> <text>{{ asset.community }}</text>
</view>
<view class="address-info">
<text class="label">地址：</text>
<text>{{ asset.address }}</text>
</view>
<button class="vr-btn" @click="viewVR">查看VR图</button>
</view> </view>
</mycard>
<!-- 位置信息 --> <!-- 地图位置 -->
<mycard title="位置信息" > <view class="map-container">
<view class="map-section"> <map :latitude="asset.lat" :longitude="asset.lng" :markers="markers"
<u-cell-group> style="width: 92%; height: 300rpx;"></map>
<u-cell-item title="地址" :value="asset.address" :arrow="false"/> </view>
</u-cell-group>
<map <!-- 资产信息表格 -->
:latitude="asset.lat" <view class="asset-info-table">
:longitude="asset.lng" <view class="table-title">资产信息</view>
:markers="markers" <view class="table-content">
style="width: 100%; height: 300rpx; border-radius: 12rpx; margin-top: 20rpx;" <view class="table-row">
></map> <view class="row-item">
<view class="item-label">编号</view>
<view class="item-value">{{ asset.code }}</view>
</view>
<view class="row-item">
<view class="item-label">面积</view>
<view class="item-value">105㎡</view>
</view>
</view>
<view class="table-row">
<view class="row-item">
<view class="item-label">类别</view>
<view class="item-value">{{ asset.category }}</view>
</view>
<view class="row-item">
<view class="item-label">价值</view>
<view class="item-value">¥{{ formatMoney(asset.value) }}</view>
</view>
</view>
<view class="table-row">
<view class="row-item full-width">
<view class="item-label">权属</view>
<view class="item-value">{{ asset.owner }}</view>
</view>
</view>
</view>
</view>
</view> </view>
</mycard>
<!-- 备注信息 -->
<mycard title="备注信息">
<view class="remark">
{{ asset.remark || '暂无备注信息' }}
</view>
</mycard>
</view>
<!-- 预约弹窗 --> <!-- 预约弹窗 -->
<u-popup v-model="showReserve" mode="bottom" border-radius="20"> <u-popup v-model="showReserve" mode="bottom" border-radius="20">
<view class="popup-content"> <view class="popup-content">
@@ -74,21 +94,46 @@
</u-popup> </u-popup>
<!-- 底部导航栏 --> <!-- 底部导航栏 -->
<assetBottomBar v-if ="asset.status === 0" :phone="asset.contact" @reserve="showReserve = true" /> <assetBottomBar v-if="asset.status === 0" :phone="asset.contact" @reserve="showReserve = true" />
</view> </view>
</template> </template>
<script> <script>
import mycard from '../../components/card/mycard.vue'; import mycard from '../../components/card/mycard.vue';
import assetBottomBar from '../../components/bottom/assetBottomBar.vue'; import assetBottomBar from '../../components/bottom/assetBottomBar.vue';
import AssetGallery from '../../components/gallery/AssetGallery.vue' import AssetGallery from '../../components/gallery/AssetGallery.vue'
export default { export default {
components:{ components: {
mycard, mycard,
assetBottomBar, assetBottomBar,
AssetGallery AssetGallery
}, },
data() { data() {
// 静态资产数据
const staticAsset = {
name: '',
community: '',
code: '',
category: '',
area: 0,
value: 0,
rent: 0,
owner: '',
address: '',
lat: 0,
lng: 0,
images: [],
vrImage: '',
vr: '',
videos: [],
plans: [],
adImage: '',
remark: '',
isFavorite: false,
status: 0,
contact: ''
};
return { return {
// 控制预约弹窗显示 // 控制预约弹窗显示
showReserve: false, showReserve: false,
@@ -97,35 +142,32 @@ export default {
reserveName: '', reserveName: '',
reservePhone: '', reservePhone: '',
assetId: null, assetId: null,
asset: { // 直接使用静态数据
name: '', asset: staticAsset,
community: '', // 根据静态数据初始化标记
code: '', markers: [{
category: '', id: 1,
area: '', latitude: staticAsset.lat,
value: '', longitude: staticAsset.lng,
rent: '', title: staticAsset.name,
owner: '', }, ],
address: '', background: {
lat: 0, backgroundColor: '#ffffff',
lng: 0, // 渐变色
images: [], // backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
remark: '',
isFavorite: false,
status: 0
}, },
markers: [],
}; };
}, },
onLoad(options) { onLoad(options) {
this.assetId = options.id || 'A001'; this.assetId = options.id || 'A001';
// 静态数据初始化
this.loadAssetDetail(); this.loadAssetDetail();
// this.recordView(); // this.recordView();
}, },
mounted() { mounted() {
const navbar = this.$refs.navbar; // const navbar = this.$refs.navbar;
const navHeight = navbar.navContentHeight; // 直接拿子组件 data // const navHeight = navbar.navContentHeight; // 直接拿子组件 data
this.navTotalHeight = navHeight; // 加上额外间距 // this.navTotalHeight = navHeight; // 加上额外间距
}, },
methods: { methods: {
@@ -145,25 +187,19 @@ export default {
address: '广州市天河区体育西路88号', address: '广州市天河区体育西路88号',
lat: 23.135, lat: 23.135,
lng: 113.327, lng: 113.327,
images: [ images: [{
{ image: '/static/img/index/swiper/swiper3.jpg'
image:'/static/img/index/swiper/swiper3.jpg' }],
}
],
remark: '该资产目前用于办公出租，维护状态良好。', remark: '该资产目前用于办公出租，维护状态良好。',
isFavorite: false, isFavorite: false,
status: 0 status: 0
}; };
this.markers = [ this.markers = [{
{
id: 1, id: 1,
latitude: this.asset.lat, latitude: this.asset.lat,
longitude: this.asset.lng, longitude: this.asset.lng,
title: this.asset.name, title: this.asset.name,
}, }, ];
];
}, 300); }, 300);
}, },
formatMoney(num) { formatMoney(num) {
@@ -188,7 +224,7 @@ export default {
}); });
// 可扩展：跳转到 VR 页面或调用地图 API // 可扩展：跳转到 VR 页面或调用地图 API
}, },
submitReserve (){ submitReserve() {
console.log('提交预约看房申请') console.log('提交预约看房申请')
this.showReserve = false; this.showReserve = false;
}, },
@@ -196,128 +232,203 @@ export default {
let lifeData = uni.getStorageSync('lifeData'); let lifeData = uni.getStorageSync('lifeData');
let token = lifeData.vuex_token let token = lifeData.vuex_token
let url = "/assets/viewRecord"; let url = "/assets/viewRecord";
this.$u.get(url, {}, {'WT': token}).then(obj => { this.$u.get(url, {}, {
'WT': token
}).then(obj => {
}); });
}
}, },
}; back(){
// let pages = getCurrentPages();
// let beforePage = pages[pages.length - 2];
uni.navigateBack({
// delta: 1,
success: function() {
// beforePage.onLoad(beforePage
// .options); // 执行前一个页面的onLoad方法
}
})
},
},
};
</script> </script>
<style scoped>
.image-section >>> .u-icon{
position: absolute;
z-index: 99;
top: 80rpx;
left: 36rpx;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.asset-detail { .asset-detail {
background-color: #f7f8fa; background-color: #f7f8fa;
min-height: 100vh; min-height: 100vh;
padding-bottom: 120rpx; padding-bottom: 120rpx;
padding-top: 175rpx; /* 给导航栏留空间 */ padding-top: 0;
.top-block { /* 不再需要固定的顶部内边距，由动态计算的 navTotalHeight 控制 */
background-color: #fff;
border-radius: 16rpx;
margin: 20rpx;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
.left-swiper {
width: 45%;
} }
.right-info { /* 图片展示区 */
width: 50%; .image-section {
padding-left: 20rpx; width: 100%;
background-color: #000;
}
.image-section image {
width: 100%;
height: 740rpx;
}
/* 基本信息区 */
.container {
width: 100%;
border-radius: 40rpx 40rpx 0rpx 0rpx;
background-color: #ffffff;
margin-top: -50rpx;
position: relative;
}
.basic-info {
padding: 20rpx 30rpx;
padding-top: 50rpx;
}
.info-header {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.category-tag {
background-color: #FCF2F3;
color: #E9353C;
font-size: 24rpx;
padding: 5rpx 15rpx;
border-radius: 4rpx;
margin-right: 15rpx;
}
.asset-name { .asset-name {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
margin-bottom: 10rpx; flex: 1;
} }
.asset-community { .rent-price {
font-size: 36rpx;
color: #FF2F31;
margin: 15rpx 0;
}
.community-info,
.address-info {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
margin-bottom: 10rpx; margin-bottom: 10rpx;
display: flex;
align-items: center;
} }
.asset-rent { .label {
font-size: 26rpx; color: #999;
color: #444; margin-right: 10rpx;
}
.price { .vr-btn {
color: #e54d42; background-color: #F34038;
color: #fff;
border: none;
padding: 0 14rpx;
border-radius: 6rpx;
font-size: 24rpx;
margin-top: -90rpx;
float: right;
}
/* 地图容器 */
.map-container {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
}
/* 资产信息表格 */
.asset-info-table {
padding: 20rpx 30rpx;
margin-bottom: 20rpx;
padding-bottom: 100rpx;
}
.table-title {
font-size: 30rpx;
font-weight: bold; font-weight: bold;
margin-left: 4rpx; color: #333;
} margin-bottom: 20rpx;
} }
.btn-group { .table-content {
margin-top: 20rpx;
align-self: flex-start;
}
}
}
.content {
padding: 20rpx;
background-color: #f5f6fa;
min-height: 100vh;
padding-bottom: 140rpx; /* 避免内容被遮住 */
.info-list {
padding: 10rpx 20rpx;
background-color: #ffffff;
border-radius: 12rpx;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}
.map-section {
padding: 10rpx 20rpx 20rpx;
background-color: #ffffff;
border-radius: 12rpx;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20rpx;
map {
width: 100%;
height: 320rpx;
border-radius: 12rpx;
margin-top: 20rpx;
overflow: hidden;
}
} }
.remark { .table-row {
padding: 20rpx; display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.row-item {
flex: 1;
min-width: 45%;
display: flex;
flex-direction: column;
gap: 5rpx;
}
.row-item.full-width {
min-width: 100%;
}
.item-label {
font-size: 24rpx;
color: #999;
}
.item-value {
font-size: 28rpx; font-size: 28rpx;
color: #555; color: #333;
line-height: 1.6; font-weight: 500;
background-color: #ffffff;
border-radius: 12rpx;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
} }
}
} /* 预约弹窗 */
.popup-content { .popup-content {
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
} }
.popup-title { .popup-title {
display: block; display: block;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
text-align: center; text-align: center;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.u-input { .u-input {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.u-button { .u-button {
margin-top: 20rpx; margin-top: 20rpx;
border-radius: 50rpx; border-radius: 50rpx;
} }
</style> </style>

448
pages/index/index.vue
View File

@@ -8,12 +8,8 @@
<view class="content-wrapper"> <view class="content-wrapper">
<view class="search-wrapper"> <view class="search-wrapper">
<search-bar <search-bar :city="vuex_city==''?'选择':vuex_city" placeholder="你想住在哪儿" @chooseCity="location"
:city="vuex_city==''?'选择':vuex_city" @search="search" />
placeholder="你想住在哪儿"
@chooseCity="location"
@search="search"
/>
</view> </view>
<!-- 房源信息导航栏 --> <!-- 房源信息导航栏 -->
<view class="nav-area"> <view class="nav-area">
@@ -42,51 +38,75 @@
<u-gap height="10"></u-gap> <u-gap height="10"></u-gap>
<!-- 公告栏 --> <!-- 公告栏 -->
<view @click="notice" class="noticeStyle"> <view @click="notice" class="noticeStyle">
<image src="/static/index/公告.png" style="width: 38rpx;height: 37rpx;"></image> <image src="/static/index/公告.png" style="width: 38rpx;height: 37rpx;margin-left: 22rpx;"></image>
<u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon <view class="notice-content">
bg-color="none" :duration="5000" :fontSize = "30" color="#2D2B2C" :volumeIcon="false"></u-notice-bar> <u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon bg-color="none"
:duration="5000" :fontSize="30" color="#2D2B2C" :volumeIcon="false"></u-notice-bar>
</view>
</view> </view>
<u-gap height="5"></u-gap> <u-gap height="5"></u-gap>
<scroll-view
scroll-y <view class="tab-content">
style="height: 100vh;" <!-- 顶部标签栏 -->
:scroll-top="scrollTop" <view class="recommend-tabs">
@scrolltolower="findHouseList" <view
lower-threshold="50" class="tab-item"
:class="{ active: activeRecommendTab === index }"
v-for="(tab, index) in recommendTabs"
:key="index"
@click="onRecommendTabClick(index)"
> >
{{ tab }}
</view>
</view>
<!-- 筛选标签 -->
<view class="filter-tabs">
<view
class="filter-item"
:class="{ active: activeFilterTabs.includes(index) }"
v-for="(tab, index) in filterTabs"
:key="index"
@click="onFilterTabClick(index)"
>
{{ tab }}
</view>
</view>
<scroll-view scroll-y style="height: calc(100vh - 200rpx);" :scroll-top="scrollTop" @scrolltolower="findHouseList"
lower-threshold="50">
<u-waterfall v-model="flowList" ref="uWaterfall"> <u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}"> <template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index" style="margin-right: 10rpx;"> <view class="demo-warter" v-for="(item, index) in leftList" :key="index"
<u-lazy-load threshold="750" border-radius="12" image="/static/img/index/swiper/swiper3.jpg" :index="index" mode="widthFix" style="margin-right: 10rpx;">
@click="clickImage(item.id)"></u-lazy-load> <u-lazy-load threshold="750" border-radius="8" :image="item.image"
:index="index" mode="aspectFill" @click="clickImage(item.id)"></u-lazy-load>
<view class="item-title">{{ item.assetsName}}</view> <view class="item-title">{{ item.assetsName}}</view>
<view class="item-desc">{{ item.footPrint}}㎡</view> <view class="item-desc">{{ item.footPrint}}㎡ {{ item.propertyType || '商业用房' }}</view>
<view class="item-price">¥{{item.rentFee}}</view> <view class="item-price">¥{{item.rentFee}}/<text>月</text></view>
</view> </view>
</template> </template>
<template v-slot:right="{rightList}"> <template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index" style="margin-left: 10rpx;"> <view class="demo-warter" v-for="(item, index) in rightList" :key="index"
<u-lazy-load threshold="750" border-radius="10" image="/static/img/index/swiper/swiper3.jpg" :index="index" mode="widthFix" style="margin-left: 10rpx;">
@click="clickImage(item.id)"></u-lazy-load> <u-lazy-load threshold="750" border-radius="8" :image="item.image"
:index="index" mode="aspectFill" @click="clickImage(item.id)"></u-lazy-load>
<view class="item-title">{{ item.assetsName}}</view> <view class="item-title">{{ item.assetsName}}</view>
<view class="item-desc">{{ item.footPrint}}㎡</view> <view class="item-desc">{{ item.footPrint}}㎡ {{ item.propertyType || '商业用房' }}</view>
<view class="item-price">¥{{item.rentFee}}</view> <view class="item-price">¥{{item.rentFee}}/<text>月</text></view>
</view> </view>
</template> </template>
</u-waterfall> </u-waterfall>
</scroll-view> </scroll-view>
</view>
<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top> <u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
<u-no-network></u-no-network> <u-no-network></u-no-network>
</view> </view>
<u-popup <u-popup v-model="showFillAuthInfo" mode="center" :mask-close-able="false" border-radius="24">
v-model="showFillAuthInfo"
mode="center"
:mask-close-able="false"
border-radius="24"
>
<view class="auth-popup"> <view class="auth-popup">
<!-- 标题 --> <!-- 标题 -->
<view class="auth-title"> <view class="auth-title">
@@ -100,14 +120,8 @@
<!-- 输入区域 --> <!-- 输入区域 -->
<view class="auth-input"> <view class="auth-input">
<u-input <u-input v-model="authCode" :placeholder="authPlaceholder" clearable border="bottom" font-size="30"
v-model="authCode" placeholder-style="color:#bbb" />
:placeholder="authPlaceholder"
clearable
border="bottom"
font-size="30"
placeholder-style="color:#bbb"
/>
</view> </view>
<!-- 按钮 --> <!-- 按钮 -->
@@ -123,20 +137,22 @@
import SearchBar from '../../components/searchBar/SearchBar.vue'; import SearchBar from '../../components/searchBar/SearchBar.vue';
import indexNavbarVue from '../../components/navbar/indexNavbar.vue'; import indexNavbarVue from '../../components/navbar/indexNavbar.vue';
export default { export default {
components: { SearchBar,indexNavbarVue}, components: {
SearchBar,
indexNavbarVue
},
data() { data() {
return { return {
loginType: null, loginType: null,
authCode: '', // 身份证号 / 社会信用代码 authCode: '', // 身份证号 / 社会信用代码
showFillAuthInfo: false, showFillAuthInfo: false,
keyword:'', keyword: '',
pageNum: 1, pageNum: 1,
pageSize: 20, pageSize: 20,
scrollTop: 0, scrollTop: 0,
houseList: [], houseList: [],
activeIndex: 0, // 当前选中的索引 activeIndex: 0, // 当前选中的索引
swiperList: [ swiperList: [{
{
image: '/static/img/index/swiper/swiper3.jpg', image: '/static/img/index/swiper/swiper3.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通' title: '身无彩凤双飞翼，心有灵犀一点通'
}, },
@@ -145,21 +161,76 @@
title: '身无彩凤双飞翼，心有灵犀一点通' title: '身无彩凤双飞翼，心有灵犀一点通'
}, },
], ],
noticeList: [], noticeList: [
navList:[ '景秀天成新上优质房源，欢迎咨询',
{name:"住房",src:"/static/index/住房.png",type:"0",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"}, '限时优惠活动，租房立减500元',
{name:"商铺",src:"/static/index/商铺.png",type:"1",underline_color:"linear-gradient(to right, #89CFF0, #5AA4D1)"}, '新用户注册即送200元租房券',
{name:"厂房",src:"/static/index/厂房.png",url:"/pages/center/tips",underline_color:"linear-gradient(to right, #0000FF, #800080)"}, '寒雨连江夜入吴'
{name:"停车场",src:"/static/index/停车场.png",type:"2",underline_color:"linear-gradient(to bottom, #000080, #00008080)"}
], ],
gridList:[ navList: [{
{name:"看房预约",src:"/static/index/看房预约.png",url:"pages/reserve/reserveRecords"}, name: "住房",
{name:"合同签约",src:"/static/index/合同签约.png",url:"pages/center/contract"}, src: "/static/index/住房.png",
{name:"退租申请",src:"/static/index/退租申请.png",url:"pages/form/leaseCancel"}, type: "0",
{name:"留言板",src:"/static/index/留言板.png",url:"pages/form/leaseCancel"} underline_color: "linear-gradient(to right, #ff8c00, #ffcc33)"
},
{
name: "商铺",
src: "/static/index/商铺.png",
type: "1",
underline_color: "linear-gradient(to right, #89CFF0, #5AA4D1)"
},
{
name: "厂房",
src: "/static/index/厂房.png",
url: "/pages/center/tips",
underline_color: "linear-gradient(to right, #0000FF, #800080)"
},
{
name: "停车场",
src: "/static/index/停车场.png",
type: "2",
underline_color: "linear-gradient(to bottom, #000080, #00008080)"
}
],
gridList: [{
name: "看房预约",
src: "/static/index/看房预约.png",
url: "pages/reserve/reserveRecords"
},
{
name: "合同签约",
src: "/static/index/合同签约.png",
url: "pages/center/contract"
},
{
name: "退租申请",
src: "/static/index/退租申请.png",
url: "pages/form/leaseCancel"
},
{
name: "留言板",
src: "/static/index/留言板.png",
url: "pages/form/leaseCancel"
}
], ],
loadStatus: 'loadmore', loadStatus: 'loadmore',
// 顶部标签栏状态
activeRecommendTab: 0,
recommendTabs: ['为您推荐', '附近', '上新'],
// 筛选标签状态
activeFilterTabs: [0], // 支持多选
filterTabs: ['上新', '整租', '一室一厅'],
flowList: [ flowList: [
{ id: 1, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 2, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 3, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 4, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 5, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 6, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 7, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 8, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 9, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 10, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' }
], ],
uvCode: uni.getStorageSync('uvCode') uvCode: uni.getStorageSync('uvCode')
} }
@@ -168,17 +239,17 @@
// 自动定位到所在的城市 // 自动定位到所在的城市
// this.checkCity(); // this.checkCity();
// 获取数据 // 获取数据
this.findHouseList(); // this.findHouseList();
this.getNoticecList(); // this.getNoticecList();
// 流量统计 // 流量统计
// this.appSysFlowInfo(); // this.appSysFlowInfo();
uni.$on('findIndexHouseList', (obj) => { // uni.$on('findIndexHouseList', (obj) => {
// 获取数据 // // 获取数据
this.findHouseList(1); // this.findHouseList(1);
}) // })
}, },
onShow(){ onShow() {
this.needFillAuthInfo(); this.needFillAuthInfo();
}, },
onUnload() { onUnload() {
@@ -200,28 +271,57 @@
// 关闭刷新 // 关闭刷新
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}, },
mounted(){ mounted() {
}, },
computed: { computed: {
authLabel() { authLabel() {
return this.loginType === 'person' return this.loginType === 'person' ?
? '身份证号' '身份证号' :
: '企业社会信用代码' '企业社会信用代码'
}, },
authPlaceholder() { authPlaceholder() {
return this.loginType === 'person' return this.loginType === 'person' ?
? '请输入身份证号' '请输入身份证号' :
: '请输入企业社会信用代码' '请输入企业社会信用代码'
} }
}, },
methods: { methods: {
checkCity(){ // 顶部推荐标签点击事件
onRecommendTabClick(index) {
this.activeRecommendTab = index;
// 这里可以添加根据标签筛选数据的逻辑
console.log('推荐标签点击:', this.recommendTabs[index]);
// 重置筛选条件
this.activeFilterTabs = [0];
// 重新加载数据
this.pageNum = 1;
this.flowList = [];
this.findHouseList(1);
},
// 筛选标签点击事件
onFilterTabClick(index) {
// 检查是否已选中
const isActive = this.activeFilterTabs.includes(index);
if (isActive) {
// 如果已选中，则移除
this.activeFilterTabs = this.activeFilterTabs.filter(item => item !== index);
} else {
// 如果未选中，则添加
this.activeFilterTabs.push(index);
}
// 这里可以添加根据筛选标签筛选数据的逻辑
console.log('筛选标签点击:', this.filterTabs[index]);
console.log('当前选中的筛选标签:', this.activeFilterTabs.map(i => this.filterTabs[i]));
},
checkCity() {
// 检查是否已选择城市，如果未选择，跳转到选择城市页面 // 检查是否已选择城市，如果未选择，跳转到选择城市页面
let lifeData = uni.getStorageSync('lifeData'); let lifeData = uni.getStorageSync('lifeData');
let vuex_city = lifeData.vuex_city let vuex_city = lifeData.vuex_city
// console.log(vuex_city.length); // console.log(vuex_city.length);
if(!vuex_city || vuex_city.length == 0){ if (!vuex_city || vuex_city.length == 0) {
// 没有token 则跳转到登录 // 没有token 则跳转到登录
return this.$u.route('/pages/location/location'); return this.$u.route('/pages/location/location');
} }
@@ -236,41 +336,40 @@
// 统一社会信用代码校验（18 位） // 统一社会信用代码校验（18 位）
checkCreditCode(code) { checkCreditCode(code) {
return /^[0-9A-Z]{18}$/.test(code); return /^[0-9A-Z]{18}$/.test(code);
} },
, location() {
location(){
this.$u.route({ this.$u.route({
url: 'pages/location/location', url: 'pages/location/location',
}) })
}, },
search(){ search() {
this.$u.route({ this.$u.route({
url: 'pages/search/search', url: 'pages/search/search',
}) })
}, },
notice(){ notice() {
this.$u.route({ this.$u.route({
url: 'pages/notice/notice' url: 'pages/notice/notice'
}) })
}, },
//查找房源信息 //查找房源信息
findHouseList(type = 0) { findHouseList(type = 0) {
if(type == 1){ if (type == 1) {
this.pageNum = 1 this.pageNum = 1
this.flowList = [] this.flowList = []
this.$refs.uWaterfall.clear(); this.$refs.uWaterfall.clear();
} }
let url = "/assets/findAssetList"; let url = "/assets/findAssetList";
this.$u.post(url, { this.$u.post(url, {
state:1, state: 1,
villageCity:uni.getStorageSync('lifeData').vuex_city, villageCity: uni.getStorageSync('lifeData').vuex_city,
pageNum: this.pageNum, pageNum: this.pageNum,
pageSize: this.pageSize, pageSize: this.pageSize,
orderByColumn: 'update_time,create_time', orderByColumn: 'update_time,create_time',
isAsc: 'desc' isAsc: 'desc'
}).then(result => { }).then(result => {
const data = result.data.result; const data = result.data.result;
if(this.pageNum>1 && data.length < this.pageSize){ if (this.pageNum > 1 && data.length < this.pageSize) {
// return this.loadStatus = 'nomore'; // return this.loadStatus = 'nomore';
} }
this.houseList = data; this.houseList = data;
@@ -284,7 +383,7 @@
// } // }
this.flowList.push(item); this.flowList.push(item);
} }
++ this.pageNum ++this.pageNum
this.loadStatus = 'loadmore'; this.loadStatus = 'loadmore';
}).catch(err => { }).catch(err => {
console.log("失败：", err) console.log("失败：", err)
@@ -305,21 +404,21 @@
// } // }
// }) // })
}, },
clickNav(item,index){ clickNav(item, index) {
this.activeIndex = index; this.activeIndex = index;
this.findHouseList(item.type); this.findHouseList(item.type);
}, },
clickGrid(item){ clickGrid(item) {
console.log('跳转我的预约,url:' + item.url) console.log('跳转我的预约,url:' + item.url)
this.$u.route({ this.$u.route({
url: item.url url: item.url
}) })
}, },
code(){ code() {
this.$mytip.toast('请咨询作者') this.$mytip.toast('请咨询作者')
}, },
appSysFlowInfo(){ appSysFlowInfo() {
// 流量统计 // 流量统计
let uvCode = uni.getStorageSync("uvCode"); let uvCode = uni.getStorageSync("uvCode");
let url = "https://sourcebyte.cn/api/flow/upFlow?type=MINI&uvCode=" + uvCode; let url = "https://sourcebyte.cn/api/flow/upFlow?type=MINI&uvCode=" + uvCode;
@@ -331,27 +430,27 @@
}, },
}); });
}, },
server(){ server() {
// window.open ('https://sourcebyte.cn') // window.open ('https://sourcebyte.cn')
uni.makePhoneCall({ uni.makePhoneCall({
phoneNumber: "18720989281", phoneNumber: "18720989281",
}); });
}, },
getNoticecList(){ getNoticecList() {
let url = "/notice/findNoticeList"; let url = "/notice/findNoticeList";
this.$u.get(url,{ this.$u.get(url, {
pageNum:1, pageNum: 1,
pageSize:50, pageSize: 50,
orderByColumn:'create_time', orderByColumn: 'create_time',
isAsc:'desc' isAsc: 'desc'
}).then(obj => { }).then(obj => {
let data = obj.data.result let data = obj.data.result
data.filter(item=>{ data.filter(item => {
this.noticeList.push(item.noticeTitle) this.noticeList.push(item.noticeTitle)
}) })
}); });
}, },
needFillAuthInfo(){ needFillAuthInfo() {
let lifeData = uni.getStorageSync('lifeData'); let lifeData = uni.getStorageSync('lifeData');
let token = lifeData.vuex_token let token = lifeData.vuex_token
if (!token || token === null || token === undefined || if (!token || token === null || token === undefined ||
@@ -359,7 +458,9 @@
return; return;
} }
let url = "/login/needFillAuthInfo"; let url = "/login/needFillAuthInfo";
this.$u.get(url, {}, {'WT': token}).then(obj => { this.$u.get(url, {}, {
'WT': token
}).then(obj => {
console.log(obj.data) console.log(obj.data)
if (obj.data) { if (obj.data) {
this.showFillAuthInfo = obj.data this.showFillAuthInfo = obj.data
@@ -368,11 +469,11 @@
} }
}); });
}, },
moreInfo(){ moreInfo() {
uni.navigateToMiniProgram({ uni.navigateToMiniProgram({
appId:'wxbca64173e772915e',// 此为开源字节appid appId: 'wxbca64173e772915e', // 此为开源字节appid
path:'/pages/index/index',// 此为开源字节首页路径 path: '/pages/index/index', // 此为开源字节首页路径
envVersion:"release", envVersion: "release",
success: res => { success: res => {
// 打开成功 // 打开成功
console.log("打开成功", res); console.log("打开成功", res);
@@ -410,7 +511,9 @@
this.$u.post(url, { this.$u.post(url, {
code: this.authCode, code: this.authCode,
userType: this.loginType, userType: this.loginType,
},{'WT': token}).then(obj => { }, {
'WT': token
}).then(obj => {
if (obj.flag) { if (obj.flag) {
this.showFillAuthInfo = false; this.showFillAuthInfo = false;
this.authCode = ''; this.authCode = '';
@@ -428,15 +531,18 @@
position: relative; position: relative;
} }
.bg{
.bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 550rpx; /* ✅ 用固定高度更稳，你可改 320/400 */ height: 550rpx;
/* ✅ 用固定高度更稳，你可改 320/400 */
z-index: 0; z-index: 0;
} }
.index-title{
.index-title {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 5%; top: 5%;
@@ -448,62 +554,73 @@
font-size: 34rpx; font-size: 34rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.content-wrapper{
.content-wrapper {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.search-wrapper {
} .search-wrapper {}
.content-wrapper { .content-wrapper {
padding: 197rpx 30rpx 22rpx 30rpx; // 统一左右内边距 padding: 197rpx 30rpx 22rpx 30rpx; // 统一左右内边距
} }
.navbox2 { .navbox2 {
height: 170rpx; height: 170rpx;
padding-top: 2%; padding-top: 2%;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
} }
.nomore { .nomore {
background-color: $u-bg-color; background-color: $u-bg-color;
} }
.noticeStyle{ .noticeStyle {
display: flex; display: flex;
margin-top: 22rpx; margin-top: 22rpx;
height: 86rpx; height: 86rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
align-items: center;
}
} .notice-content {
/* 下划线 */ flex: 1;
.underline { }
/* 下划线 */
.underline {
margin-top: 5rpx; margin-top: 5rpx;
width: 130rpx; width: 130rpx;
height: 6rpx; height: 6rpx;
border-radius: 5rpx; border-radius: 5rpx;
transition: all 0.25s ease; transition: all 0.25s ease;
} }
.rowClass{ .rowClass {
margin-top: 20rpx; margin-top: 20rpx;
} }
.rowBgColor{
.rowBgColor {
background-color: rgb(248, 248, 248); background-color: rgb(248, 248, 248);
} }
.leftOffSetRow{
.leftOffSetRow {
margin-left: 20%; margin-left: 20%;
} }
.hoverClass{
.hoverClass {
background-color: #E4E7ED; background-color: #E4E7ED;
} }
.tabName{ .tabName {
font-size: 28rpx; font-size: 28rpx;
} }
.u-close { .u-close {
position: absolute; position: absolute;
top: 20rpx; top: 20rpx;
@@ -520,15 +637,75 @@
color: $u-tips-color; color: $u-tips-color;
margin-top: 3px; margin-top: 3px;
} }
.tab-content {
padding: 0 20rpx;
margin-top: 22rpx;
background: #fff;
}
/* 顶部标签栏样式 */
.recommend-tabs {
display: flex;
justify-content: flex-start;
padding: 20rpx 0;
background: #fff;
font-size: 32rpx;
font-weight: 600;
}
.tab-item {
margin-right: 40rpx;
padding: 10rpx 0;
color: #333;
}
.tab-item.active {
color: #FF2F31;
border-bottom: 4rpx solid #FF2F31;
}
/* 筛选标签样式 */
.filter-tabs {
display: flex;
justify-content: flex-start;
padding: 0 0 20rpx 0;
background: #fff;
flex-wrap: wrap;
}
.filter-item {
margin-right: 20rpx;
margin-bottom: 10rpx;
padding: 12rpx 24rpx;
background: #f5f5f5;
border-radius: 20rpx;
font-size: 26rpx;
color: #666;
}
.filter-item.active {
background: #FFECEC;
color: #FF2F31;
}
.demo-warter { .demo-warter {
margin-bottom: 20rpx; margin-bottom: 20rpx;
background: #fff; // background: #fff;
border-radius: 16rpx; // border-radius: 8rpx;
overflow: hidden; overflow: hidden;
// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} }
.u-waterfall { .u-waterfall {
padding: 0 20rpx; /* 左右留白一致 */ padding: 0 20rpx;
/* 左右留白一致 */
}
/* 图片样式 */
.u-lazy-load {
width: 100%;
height: 300rpx;
} }
.item-title { .item-title {
@@ -536,23 +713,37 @@
font-weight: 600; font-weight: 600;
margin-top: 14rpx; margin-top: 14rpx;
padding: 0 10rpx; padding: 0 10rpx;
color: #333;
line-height: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.item-price { .item-price {
font-weight: normal;
font-size: 32rpx; font-size: 32rpx;
color: $u-type-warning; color: #FF2F31;
} margin-bottom: 10rpx;
.item-desc {
font-weight: normal;
font-size: 26rpx;
color: $u-tips-color;
} }
.item-desc, .item-price { .item-price text {
font-size: 24rpx;
}
.item-desc {
font-weight: normal;
font-size: 24rpx;
color: #999;
}
.item-desc,
.item-price {
padding: 0 10rpx; padding: 0 10rpx;
margin-top: 8rpx; margin-top: 8rpx;
} }
.auth-popup { .auth-popup {
width: 600rpx; width: 600rpx;
padding: 48rpx 40rpx 40rpx; padding: 48rpx 40rpx 40rpx;
@@ -606,6 +797,7 @@
.auth-btn:active { .auth-btn:active {
opacity: 0.85; opacity: 0.85;
} }
.buttom { .buttom {
.loginType { .loginType {
font-size: 14px; font-size: 14px;
@@ -620,8 +812,8 @@
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;
border-radius: 100%; border-radius: 100%;
-webkit-box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1); box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
} }
} }
</style> </style>

435
pages/search/searchList.vue
View File

@@ -1,34 +1,67 @@
<template> <template>
<view class="search-list-page"> <view class="search-list-page">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<customNavbar title="资产列表" /> <!-- <customNavbar title="搜索资产" /> -->
<u-navbar title="搜索资产" :autoBack="true" :background="background" title-color="#2D2B2C" back-icon-color="#2D2B2C">
</u-navbar>
<view class="search-list-content">
<!-- 筛选标签栏 -->
<view class="filter-dropdown-wrapper">
<u-sticky offset-top="0"> <u-sticky offset-top="0">
<view class="sticky"> <view class="sticky" style="width: 100vw;">
<filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown> <filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected"
:updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown>
</view> </view>
</u-sticky> </u-sticky>
</view>
<!-- 搜索栏 -->
<view class="search-bar-wrapper">
<view class="search-bar">
<view class="city-select">杭州 <text class="icon-down"></text></view>
<view class="search-input">
<text class="icon-search"></text>
<input type="text" placeholder="请输入小区名称" />
</view>
</view>
</view>
<!-- 标签组 -->
<view class="tag-group">
<view class="tag-item" :class="{ active: selectedTags.includes(tag) }"
v-for="(tag, index) in tagGroupList" :key="index" @click="onTagClick(tag)">
{{ tag }}
</view>
</view>
</view>
<view class="u-p-l-10 u-p-r-10 waterfall"> <view class="u-p-l-10 u-p-r-10 waterfall">
<u-waterfall v-model="flowList" ref="uWaterfall"> <u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}"> <template v-slot:left="{ leftList }">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index"> <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="750" border-radius="12" :image="item.coverImgUrl" :index="index" <u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl" :index="index"
@click="clickImage(item.id)"></u-lazy-load> @click="clickImage(item.id)" mode="aspectFill"></u-lazy-load>
<view class="item-title">{{item.name}}</view> <view class="item-title">{{ item.name }}</view>
<view class="item-desc">{{ item.footPrint}}㎡</view> <view class="item-desc">{{ item.houseType }} {{ item.footPrint }}㎡ {{ item.orientation }}</view>
<view class="item-price">¥{{item.rentFee}}</view> <view class="item-tags">
<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
</view>
<view class="item-price">¥{{ item.rentFee }}/<text>月</text></view>
</view> </view>
</template> </template>
<template v-slot:right="{rightList}"> <template v-slot:right="{ rightList }">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index"> <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="750" border-radius="10" :image="item.coverImgUrl" :index="index" <u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl" :index="index"
@click="clickImage(item.id)"></u-lazy-load> @click="clickImage(item.id)" mode="aspectFill"></u-lazy-load>
<view class="item-title">{{item.name}}</view> <view class="item-title">{{ item.name }}</view>
<view class="item-desc">{{ item.footPrint}}㎡</view> <view class="item-desc">{{ item.houseType }} {{ item.footPrint }}㎡ {{ item.orientation }}</view>
<view class="item-price">¥{{item.rentFee}}</view> <view class="item-tags">
<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
</view>
<view class="item-price">¥{{ item.rentFee }}/<text>月</text></view>
</view> </view>
</template> </template>
</u-waterfall> </u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList" style="height: 80rpx;line-height: 80rpx;"></u-loadmore> <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList"
style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top> <u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
<u-no-network></u-no-network> <u-no-network></u-no-network>
</view> </view>
@@ -37,7 +70,7 @@
<script> <script>
import config from "@/common/config.js" // 全局配置文件 import config from "@/common/config.js" // 全局配置文件
import searchData from '@/common/utils/searchData.js';//筛选菜单数据 import searchData from '@/common/utils/searchData.js'; //筛选菜单数据
import filterDropdown from '@/components/zy/filterDropdown.vue'; import filterDropdown from '@/components/zy/filterDropdown.vue';
export default { export default {
components: { components: {
@@ -49,23 +82,30 @@
valueArr: [], valueArr: [],
defaultSelected: [], defaultSelected: [],
filterData: [], filterData: [],
searchData:{}, searchData: {},
pageNum: 1, pageNum: 1,
pageSize: 20, pageSize: 20,
scrollTop: 0, scrollTop: 0,
houseList: [], houseList: [],
loadStatus: 'loadmore', loadStatus: 'loadmore',
flowList: [], flowList: [],
// 标签组数据和选中状态
tagGroupList: ['全套家具', '配套齐全', '优选好房', '生活便利'],
selectedTags: [],
background: {
// 渐变色
backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
},
} }
}, },
onLoad(option) { onLoad(option) {
let type = option.type let type = option.type
let villageName = option.villageName let villageName = option.villageName
this.searchData = {} this.searchData = {}
if(type){ if (type) {
this.searchData.type = type this.searchData.type = type
} }
if(villageName){ if (villageName) {
this.searchData.villageName = villageName this.searchData.villageName = villageName
} }
// 获取房源数据 // 获取房源数据
@@ -92,60 +132,167 @@
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}, },
methods: { methods: {
// 标签点击事件
onTagClick(tag) {
// 检查标签是否已选中
const isSelected = this.selectedTags.includes(tag);
if (isSelected) {
// 如果已选中，则移除
this.selectedTags = this.selectedTags.filter(item => item !== tag);
} else {
// 如果未选中，则添加
this.selectedTags.push(tag);
}
// 这里可以添加根据标签筛选数据的逻辑
console.log('标签点击:', tag);
console.log('当前选中的标签:', this.selectedTags);
// 可以调用findHouseList方法重新加载数据，根据选中的标签进行筛选
// this.pageNum = 1;
// this.flowList = [];
// this.findHouseList(1);
},
findHouseList(type = 0) { findHouseList(type = 0) {
if(type == 1){ if (type == 1) {
this.pageNum = 1 this.pageNum = 1
this.flowList = [] this.flowList = []
this.$refs.uWaterfall.clear(); this.$refs.uWaterfall.clear();
} }
let url = "/assets/findAssetList"; // 隐藏接口请求，使用前端写死的测试数据
this.$u.post(url, { // let url = "/assets/findAssetList";
state:1, // this.$u.post(url, {
villageCity:uni.getStorageSync('lifeData').vuex_city, // state:1,
pageNum: this.pageNum, // villageCity:uni.getStorageSync('lifeData').vuex_city,
pageSize: this.pageSize, // pageNum: this.pageNum,
orderByColumn: 'update_time,create_time', // pageSize: this.pageSize,
isAsc: 'desc' // orderByColumn: 'update_time,create_time',
}).then(result => { // isAsc: 'desc'
const data = result.data.result; // }).then(result => {
if(this.pageNum>1 && data.length < this.pageSize){ // const data = result.data.result;
// 前端写死的测试数据
const data = [{
id: 1,
name: '景秀天成保租房景秀天成保租房',
footPrint: 105,
rentFee: 1500,
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
houseType: '3室2厅',
orientation: '南',
tags: ['全套家具', '全套家电']
},
{
id: 2,
name: '景秀天成保租房景秀天成保租房',
footPrint: 105,
rentFee: 1500,
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
houseType: '3室2厅',
orientation: '南',
tags: ['全套家具', '全套家电']
},
{
id: 3,
name: '景秀天成保租房景秀天成保租房',
footPrint: 105,
rentFee: 1500,
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
houseType: '3室2厅',
orientation: '南',
tags: ['全套家具', '全套家电']
},
{
id: 4,
name: '景秀天成保租房景秀天成保租房',
footPrint: 105,
rentFee: 1500,
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
houseType: '3室2厅',
orientation: '南',
tags: ['全套家具', '全套家电']
},
{
id: 5,
name: '景秀天成保租房景秀天成保租房',
footPrint: 105,
rentFee: 1500,
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
houseType: '3室2厅',
orientation: '南',
tags: ['全套家具', '全套家电']
},
{
id: 6,
name: '景秀天成保租房景秀天成保租房',
footPrint: 105,
rentFee: 1500,
coverImgUrl: '/static/img/index/swiper/swiper3.jpg',
houseType: '3室2厅',
orientation: '南',
tags: ['全套家具', '全套家电']
}
];
if (this.pageNum > 1 && data.length < this.pageSize) {
// return this.loadStatus = 'nomore'; // return this.loadStatus = 'nomore';
} }
this.houseList = data; this.houseList = data;
for (let i = 0; i < this.houseList.length; i++) { for (let i = 0; i < this.houseList.length; i++) {
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱 // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = this.houseList[i] let item = this.houseList[i]
// if(!item.faceUrl.includes(config.staticUrl)){
// item.image = config.staticUrl+item.faceUrl
// }else{
// item.image = item.faceUrl
// }
this.flowList.push(item); this.flowList.push(item);
} }
++ this.pageNum ++this.pageNum
this.loadStatus = 'loadmore'; this.loadStatus = 'loadmore';
}).catch(err => { // }).catch(err => {
console.log("失败：", err) // console.log("失败：", err)
}) // })
}, },
findVillageList() { findVillageList() {
let url = "/api/houseApi/findVillageList"; // 隐藏接口请求，使用前端写死的测试数据
this.$u.get(url,{ // let url = "/api/houseApi/findVillageList";
city:uni.getStorageSync('lifeData').vuex_city, // this.$u.get(url,{
orderByColumn: 'name', // city:uni.getStorageSync('lifeData').vuex_city,
isAsc: 'desc' // orderByColumn: 'name',
}).then(result => { // isAsc: 'desc'
const data = result.rows // }).then(result => {
for (let i = 0; i < data.length; i++) { // const data = result.rows
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱 // for (let i = 0; i < data.length; i++) {
let item = data[i] // // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
// let item = data[i]
// searchData[0].submenu.push({
// name: item.name,
// value: item.name
// })
// }
// this.filterData = searchData;
// });
// 前端写死的测试小区数据
const villageData = [{
name: '景秀天成'
},
{
name: '锦绣花园'
},
{
name: '阳光小区'
},
{
name: '幸福家园'
},
{
name: '碧水湾'
}
];
// 添加测试小区数据到筛选菜单
for (let i = 0; i < villageData.length; i++) {
searchData[0].submenu.push({ searchData[0].submenu.push({
name: item.name, name: villageData[i].name,
value: item.name value: villageData[i].name
}) });
} }
this.filterData = searchData; this.filterData = searchData;
});
}, },
clickImage(houseId) { clickImage(houseId) {
this.$u.route({ this.$u.route({
@@ -165,22 +312,22 @@
let decoration = combo[1] let decoration = combo[1]
let feature = combo[2] let feature = combo[2]
this.searchData = {} this.searchData = {}
if(type){ if (type) {
this.searchData.type = type this.searchData.type = type
} }
if(villageName){ if (villageName) {
this.searchData.villageName = villageName this.searchData.villageName = villageName
} }
if(price){ if (price) {
this.searchData.price = price this.searchData.price = price
} }
if(houseNum && houseNum.length>0){ if (houseNum && houseNum.length > 0) {
this.searchData.houseNum = houseNum.toString() this.searchData.houseNum = houseNum.toString()
} }
if(decoration && decoration.length>0){ if (decoration && decoration.length > 0) {
this.searchData.decoration = decoration.toString() this.searchData.decoration = decoration.toString()
} }
if(feature && feature.length>0){ if (feature && feature.length > 0) {
this.searchData.feature = feature.toString() this.searchData.feature = feature.toString()
} }
this.pageNum = 1 this.pageNum = 1
@@ -189,7 +336,7 @@
this.$refs.uWaterfall.clear(); this.$refs.uWaterfall.clear();
this.findHouseList() this.findHouseList()
}, },
code(){ code() {
this.$mytip.toast('请咨询技术支持') this.$mytip.toast('请咨询技术支持')
} }
} }
@@ -197,47 +344,139 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-list-page{ .search-list-page {
padding-top: 175rpx; background-color: #f5f5f5;
} }
.waterfall{
// padding-top: 85rpx; .search-list-content {
// padding-top: 20rpx;
background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
border-radius: 0rpx;
padding-bottom: 20rpx;
}
// 搜索栏样式
.search-bar-wrapper {
padding: 10rpx 20rpx;
}
.search-bar {
display: flex;
background-color: #fff;
align-items: center;
border-radius: 10rpx;
padding: 20rpx 30rpx;
}
.city-select {
margin-right: 20rpx;
font-size: 28rpx;
color: #333;
}
.icon-down {
display: inline-block;
width: 0;
height: 0;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-top: 8rpx solid #666;
margin-left: 5rpx;
vertical-align: middle;
}
.search-input {
flex: 1;
display: flex;
align-items: center;
}
.icon-search {
margin-right: 10rpx;
color: #999;
font-size: 28rpx;
}
.search-input input {
flex: 1;
font-size: 28rpx;
border: none;
background: transparent;
outline: none;
}
.filter-dropdown-wrapper {
// padding: 0 20rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
// 标签组样式
.tag-group {
padding: 15rpx 20rpx;
display: flex;
flex-wrap: wrap;
gap: 15rpx;
border-bottom: 1rpx solid #eee;
margin-top: 20rpx;
}
.tag-item {
padding: 5rpx 10rpx;
border-radius: 6rpx;
font-size: 24rpx;
color: #723324;
transition: all 0.3s ease;
border: 1px solid #DBB39D;
}
.tag-item.active {
background-color: #FCF2F3;
border: 1px solid #ffffff;
}
.waterfall {
padding-top: 20rpx;
background-color: #ffffff;
} }
.nomore { .nomore {
background-color: $u-bg-color; background-color: $u-bg-color;
} }
.search{ .search {
width: 54px; width: 54px;
height: 44px; height: 44px;
&:active{ &:active {
background-color: $u-bg-color; background-color: $u-bg-color;
} }
} }
.rowClass{ .rowClass {
border-radius: 8px; border-radius: 8px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
margin-top: 10rpx; margin-top: 10rpx;
} }
.hoverClass{ .hoverClass {
background-color: #E4E7ED; background-color: #E4E7ED;
} }
.tabName{ .tabName {
font-size: 28rpx; font-size: 28rpx;
color: $u-main-color; color: $u-main-color;
} }
.demo-warter { .demo-warter {
border-radius: 8px; border-radius: 8px;
margin-top: 3px; margin-top: 15rpx;
margin-right: 10rpx;
margin-left: 10rpx;
background-color: #ffffff; background-color: #ffffff;
padding: 3px; padding: 0rpx;
position: relative; position: relative;
overflow: hidden;
} }
.u-close { .u-close {
@@ -246,6 +485,12 @@
right: 20rpx; right: 20rpx;
} }
// 图片样式
.u-lazy-load {
width: 100%;
height: 300rpx;
}
.item-cover { .item-cover {
font-size: 55rpx; font-size: 55rpx;
color: $u-type-warning; color: $u-type-warning;
@@ -253,24 +498,48 @@
.item-title { .item-title {
font-size: 28rpx; font-size: 28rpx;
color: $u-main-color; color: #333;
font-weight: bold; font-weight: 600;
padding-top: 5rpx; padding: 12rpx 15rpx 8rpx 15rpx;
padding-left: 10rpx; line-height: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.item-price { .item-price {
font-weight: normal;
font-size: 32rpx; font-size: 32rpx;
color: $u-type-warning; color: #FF2F31;
padding: 0 15rpx 15rpx 15rpx;
}
.item-price text {
font-size: 24rpx;
} }
.item-desc { .item-desc {
font-weight: normal; font-weight: normal;
font-size: 26rpx; font-size: 24rpx;
color: $u-tips-color; color: #999;
padding-bottom: 5rpx; padding: 0 15rpx 8rpx 15rpx;
padding-left: 10rpx; }
// 标签样式
.item-tags {
display: flex;
flex-wrap: wrap;
padding: 0 15rpx 12rpx 15rpx;
gap: 10rpx;
}
.tag {
padding: 4rpx 12rpx;
background-color: #f5f5f5;
border-radius: 12rpx;
font-size: 22rpx;
color: #666;
} }
.item-tag { .item-tag {