Compare commits
2 Commits
964e4f9c33
...
dac2ae956d
| Author | SHA1 | Date | |
|---|---|---|---|
| dac2ae956d | |||
| d5953d219f |
@@ -1,17 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<view
|
<view
|
||||||
class="custom-navbar"
|
class="custom-navbar"
|
||||||
:style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
|
:class="{ 'transparent': isTransparent, 'opaque': !isTransparent }"
|
||||||
|
:style="{
|
||||||
|
paddingTop: statusBarHeight + 'px',
|
||||||
|
height: navHeight + 'px',
|
||||||
|
// 使用rgba颜色值控制背景透明度，而不是整个元素的opacity
|
||||||
|
backgroundColor: `rgba(${hexToRgb(bgColor)}, ${opacity})`
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<view class="nav-content">
|
<view class="nav-content">
|
||||||
<!-- 左侧返回 -->
|
<!-- 左侧返回 -->
|
||||||
<view class="nav-left">
|
<view class="nav-left">
|
||||||
<u-icon name="arrow-left" size="44" color="#333" @click="onBack" v-if="showBack"></u-icon>
|
<u-icon
|
||||||
<u-icon name="home" size="44" color="#333" @click="goHome" v-if="showHome"></u-icon>
|
name="arrow-left"
|
||||||
|
size="44"
|
||||||
|
:color="textColor"
|
||||||
|
@click="onBack"
|
||||||
|
v-if="showBack"
|
||||||
|
></u-icon>
|
||||||
|
<u-icon
|
||||||
|
name="home"
|
||||||
|
size="44"
|
||||||
|
:color="textColor"
|
||||||
|
@click="goHome"
|
||||||
|
v-if="showHome"
|
||||||
|
></u-icon>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 中间标题 -->
|
<!-- 中间标题 -->
|
||||||
<view class="nav-title">{{ title }}</view>
|
<view class="nav-title" :style="{ color: textColor }">{{ title }}</view>
|
||||||
|
|
||||||
<!-- 右侧按钮（位于胶囊左侧） -->
|
<!-- 右侧按钮（位于胶囊左侧） -->
|
||||||
<view
|
<view
|
||||||
@@ -26,10 +44,18 @@
|
|||||||
>
|
>
|
||||||
<u-icon
|
<u-icon
|
||||||
:name="btn.icon"
|
:name="btn.icon"
|
||||||
:color="btn.color || '#333'"
|
:color="btn.color || textColor"
|
||||||
:size="btn.size || 40"
|
:size="btn.size || 40"
|
||||||
></u-icon>
|
></u-icon>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 额外的右侧图标 -->
|
||||||
|
<view class="nav-btn" v-for="(icon, index) in extraIcons" :key="index" @click="onExtraIconClick(index)">
|
||||||
|
<u-icon
|
||||||
|
:name="icon"
|
||||||
|
:color="textColor"
|
||||||
|
size="40"
|
||||||
|
></u-icon>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -51,13 +77,36 @@ export default {
|
|||||||
type: Function,
|
type: Function,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
// 导航栏样式控制
|
||||||
|
isTransparent: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#ffffff'
|
||||||
|
},
|
||||||
|
textColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
opacity: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
extraIcons: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
|
||||||
|
// 按钮显示控制
|
||||||
showBack: {
|
showBack: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true // 左侧返回按钮默认显示
|
default: true // 左侧返回按钮默认显示
|
||||||
},
|
},
|
||||||
showHome: {
|
showHome: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true // 回首页按钮默认显示
|
default: false // 回首页按钮默认不显示
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -87,6 +136,24 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 十六进制颜色转RGB
|
||||||
|
hexToRgb(hex) {
|
||||||
|
// 移除#号
|
||||||
|
hex = hex.replace(/^#/, '');
|
||||||
|
|
||||||
|
// 处理缩写形式（如#RGB）
|
||||||
|
if (hex.length === 3) {
|
||||||
|
hex = hex.split('').map(char => char + char).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析RGB值
|
||||||
|
const r = parseInt(hex.substring(0, 2), 16);
|
||||||
|
const g = parseInt(hex.substring(2, 4), 16);
|
||||||
|
const b = parseInt(hex.substring(4, 6), 16);
|
||||||
|
|
||||||
|
return `${r}, ${g}, ${b}`;
|
||||||
|
},
|
||||||
|
|
||||||
onBack() {
|
onBack() {
|
||||||
if (this.back) {
|
if (this.back) {
|
||||||
this.back();
|
this.back();
|
||||||
@@ -98,6 +165,10 @@ export default {
|
|||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url:'../index/index'
|
url:'../index/index'
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
onExtraIconClick(index) {
|
||||||
|
// 额外图标点击事件，可通过事件冒泡传递给父组件
|
||||||
|
this.$emit('extra-icon-click', index);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -109,9 +180,8 @@ export default {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
.nav-content {
|
.nav-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -131,8 +201,6 @@ export default {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-right {
|
.nav-right {
|
||||||
@@ -142,5 +210,15 @@ export default {
|
|||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 透明状态样式
|
||||||
|
&.transparent {
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 不透明状态样式
|
||||||
|
&.opaque {
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,17 +2,20 @@
|
|||||||
<view class="asset-detail">
|
<view class="asset-detail">
|
||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<customNavbar
|
<customNavbar
|
||||||
title="不动资产详情" ref="navbar"/>
|
title="资产详情"
|
||||||
<!-- 顶部信息块 -->
|
ref="navbar"
|
||||||
<view :style="{ paddingTop: navTotalHeight + 'px' }">
|
:is-transparent="navbarStyle.isTransparent"
|
||||||
<!-- <u-swiper
|
:bg-color="navbarStyle.bgColor"
|
||||||
:list="asset.images"
|
:text-color="navbarStyle.textColor"
|
||||||
height="220"
|
:opacity="navbarStyle.opacity"
|
||||||
border-radius="12"
|
:extra-icons="navbarStyle.extraIcons"
|
||||||
autoplay
|
:show-home="false"
|
||||||
interval="3000"
|
/>
|
||||||
></u-swiper> -->
|
|
||||||
<AssetGallery
|
<!-- 图片展示区 -->
|
||||||
|
<view class="image-section" :style="{ paddingTop: navTotalHeight + 'px' }">
|
||||||
|
<image src="/static/30091712.jpg"></image>
|
||||||
|
<!-- <AssetGallery
|
||||||
:insideImages="asset.images"
|
:insideImages="asset.images"
|
||||||
:vrImage="asset.vrImage"
|
:vrImage="asset.vrImage"
|
||||||
:vrSrc="asset.vr"
|
:vrSrc="asset.vr"
|
||||||
@@ -22,47 +25,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">
|
||||||
@@ -89,6 +113,31 @@ export default {
|
|||||||
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,28 +146,37 @@ 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: [],
|
|
||||||
|
// 导航栏样式控制
|
||||||
|
navbarStyle: {
|
||||||
|
isTransparent: true,
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
textColor: '#000000',
|
||||||
|
opacity: 0,
|
||||||
|
extraIcons: ['ellipsis', 'eye'] // 右侧额外图标
|
||||||
|
},
|
||||||
|
|
||||||
|
// 滚动距离
|
||||||
|
scrollTop: 0
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.assetId = options.id || 'A001';
|
this.assetId = options.id || 'A001';
|
||||||
|
// 静态数据初始化
|
||||||
this.loadAssetDetail();
|
this.loadAssetDetail();
|
||||||
// this.recordView();
|
// this.recordView();
|
||||||
},
|
},
|
||||||
@@ -126,9 +184,33 @@ export default {
|
|||||||
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; // 加上额外间距
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.scrollTop = e.scrollTop;
|
||||||
|
// 计算导航栏透明度和样式
|
||||||
|
this.updateNavbarStyle(e.scrollTop);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 根据滚动距离更新导航栏样式
|
||||||
|
updateNavbarStyle(scrollTop) {
|
||||||
|
// 定义滚动阈值，超过此值导航栏变为不透明
|
||||||
|
const threshold = 200;
|
||||||
|
|
||||||
|
// 计算透明度
|
||||||
|
let opacity = scrollTop / threshold;
|
||||||
|
opacity = Math.min(opacity, 1);
|
||||||
|
opacity = Math.max(opacity, 0);
|
||||||
|
|
||||||
|
// 更新导航栏样式
|
||||||
|
this.navbarStyle.opacity = opacity;
|
||||||
|
|
||||||
|
if (opacity > 0.5) {
|
||||||
|
this.navbarStyle.isTransparent = false;
|
||||||
|
} else {
|
||||||
|
this.navbarStyle.isTransparent = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// 模拟接口请求
|
// 模拟接口请求
|
||||||
loadAssetDetail() {
|
loadAssetDetail() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -150,7 +232,6 @@ export default {
|
|||||||
image:'/static/img/index/swiper/swiper3.jpg'
|
image:'/static/img/index/swiper/swiper3.jpg'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
],
|
],
|
||||||
remark: '该资产目前用于办公出租，维护状态良好。',
|
remark: '该资产目前用于办公出租，维护状态良好。',
|
||||||
isFavorite: false,
|
isFavorite: false,
|
||||||
@@ -196,10 +277,12 @@ 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 => {
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -209,94 +292,146 @@ export default {
|
|||||||
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;
|
||||||
|
|||||||
@@ -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,7 +137,10 @@
|
|||||||
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,
|
||||||
@@ -135,8 +152,7 @@
|
|||||||
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,14 +239,14 @@
|
|||||||
// 自动定位到所在的城市
|
// 自动定位到所在的城市
|
||||||
// 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() {
|
||||||
@@ -205,17 +276,46 @@
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
authLabel() {
|
authLabel() {
|
||||||
return this.loginType === 'person'
|
return this.loginType === 'person' ?
|
||||||
? '身份证号'
|
'身份证号' :
|
||||||
: '企业社会信用代码'
|
'企业社会信用代码'
|
||||||
},
|
},
|
||||||
authPlaceholder() {
|
authPlaceholder() {
|
||||||
return this.loginType === 'person'
|
return this.loginType === 'person' ?
|
||||||
? '请输入身份证号'
|
'请输入身份证号' :
|
||||||
: '请输入企业社会信用代码'
|
'请输入企业社会信用代码'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 顶部推荐标签点击事件
|
||||||
|
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() {
|
checkCity() {
|
||||||
// 检查是否已选择城市，如果未选择，跳转到选择城市页面
|
// 检查是否已选择城市，如果未选择，跳转到选择城市页面
|
||||||
let lifeData = uni.getStorageSync('lifeData');
|
let lifeData = uni.getStorageSync('lifeData');
|
||||||
@@ -236,8 +336,7 @@
|
|||||||
// 统一社会信用代码校验（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',
|
||||||
@@ -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
|
||||||
@@ -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,14 +531,17 @@
|
|||||||
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;
|
||||||
@@ -448,23 +554,25 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
@@ -477,8 +585,13 @@
|
|||||||
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;
|
||||||
@@ -491,12 +604,15 @@
|
|||||||
.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;
|
||||||
}
|
}
|
||||||
@@ -504,6 +620,7 @@
|
|||||||
.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;
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -56,6 +89,13 @@
|
|||||||
houseList: [],
|
houseList: [],
|
||||||
loadStatus: 'loadmore',
|
loadStatus: 'loadmore',
|
||||||
flowList: [],
|
flowList: [],
|
||||||
|
// 标签组数据和选中状态
|
||||||
|
tagGroupList: ['全套家具', '配套齐全', '优选好房', '生活便利'],
|
||||||
|
selectedTags: [],
|
||||||
|
background: {
|
||||||
|
// 渐变色
|
||||||
|
backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(option) {
|
onLoad(option) {
|
||||||
@@ -92,22 +132,106 @@
|
|||||||
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 => {
|
||||||
|
// 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) {
|
if (this.pageNum > 1 && data.length < this.pageSize) {
|
||||||
// return this.loadStatus = 'nomore';
|
// return this.loadStatus = 'nomore';
|
||||||
}
|
}
|
||||||
@@ -115,37 +239,60 @@
|
|||||||
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({
|
||||||
@@ -198,10 +345,99 @@
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.search-list-page {
|
.search-list-page {
|
||||||
padding-top: 175rpx;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
.waterfall {
|
||||||
// padding-top: 85rpx;
|
padding-top: 20rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nomore {
|
.nomore {
|
||||||
@@ -234,10 +470,13 @@
|
|||||||
|
|
||||||
.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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user