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:
RuicyWu
2026-01-15 17:18:24 +08:00
parent 036eb3a206
commit 44a4b33502
211 changed files with 5480 additions and 7826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
pages-biz/search/search.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<view class="u-margin-left-20 u-margin-right-20">
<u-navbar :is-back="true" title="搜索" :border-bottom="false"></u-navbar>
<u-search placeholder="请输入资产名称/街道/位置等信息" v-model="keyword" @search="clickSearch(value)"
:focus="true" action-text="取消" @custom="cancelSearch"></u-search>
<!-- 搜索记录 -->
<template v-if="historyList.length > 0">
<view style="position: relative;">
<u-card title="搜索记录" :border="false" :head-border-bottom="false" padding="0" title-size="28">
<view slot="body">
<u-cell-group :border="false">
<u-cell-item v-for="(item,index) in historyList" :key="index" :title="item" @click="clickSearchTag(item)" :border-bottom="false" :arrow="false">
<!-- <u-icon slot="icon" size="32" name="search"></u-icon> -->
</u-cell-item>
</u-cell-group>
</view>
</u-card>
<view class="arrow-right" @click="clearHistory">
<u-icon name="trash"></u-icon>
清除
</view>
</view>
</template>
</view>
</template>
<script>
export default {
data() {
return {
historyList:[],
keyword:"",
}
},
onLoad() {
// 加载历史记录
let history = uni.getStorageSync('searchHistory')
this.historyList = history ? JSON.parse(history) : []
},
onReady() {
},
methods: {
clickSearch(){
if(this.keyword === ''){
return uni.showToast({
title: '关键词不能为空',
icon: 'none'
});
}else{
uni.hideKeyboard()
this.addHistory()
this.$u.route({
url: '/pages-biz/search/searchList',
params: {
keyword: this.keyword
}
})
}
},
// 自定义取消搜索事件
cancelSearch(){
uni.navigateBack({
delta: 1
})
},
clickSearchTag(item){
this.keyword = item
this.clickSearch()
},
// 加入搜索记录
addHistory(){
let index = this.historyList.indexOf(this.keyword)
let history = this.historyList;
if(index === -1){
history.unshift(this.keyword)
}else{
history.unshift(history.splice(index,1)[0])
}
uni.setStorageSync('searchHistory',JSON.stringify(history))
},
clearHistory(){
// 清除搜索记录
uni.showModal({
title: '提示',
content: '是否清除搜索历史？',
cancelText: '取消',
confirmText: '确认',
success: res => {
if(res.confirm){
uni.removeStorageSync('searchHistory');
this.historyList = []
this.keyword = ''
this.$mytip.toast('清除成功')
}
}
});
}
}
}
</script>
<style>
page {
background: #FFFFFF;
}
</style>
<style lang="scss" scoped>
.item-title {
font-size: 28rpx;
color: $u-main-color;
font-weight: bold;
}
.item-price {
font-weight: normal;
font-size: 35rpx;
color: $u-type-warning;
margin-top: 3px;
}
.item-desc {
font-weight: normal;
font-size: 26rpx;
color: $u-tips-color;
}
.item-tag {
font-size: 24rpx;
color: $u-tips-color;
margin-top: 3px;
}
.arrow-right{
position: absolute;
top: 0rpx;
right: 28rpx;
font-weight: normal;
font-size: 28rpx;
color: $u-tips-color;
}
</style>

509
pages-biz/search/searchList.vue Normal file
View File

@@ -0,0 +1,509 @@
<template>
<view class="search-list-page">
<!-- 顶部导航栏 -->
<!-- <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">
<view class="sticky" style="width: 100vw;">
<filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected"
:updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown>
</view>
</u-sticky>
</view>
<!-- 搜索栏 -->
<view class="search-bar-wrapper">
<view class="search-bar">
<view class="city-select" @click="location()">{{ city ||'宜昌'}} <text class="icon-down"></text>
</view>
<view class="search-input" @click="search">
<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">
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{ leftList }">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl" :index="index"
@click="clickImage(item.assetsNo)" mode="aspectFill"></u-lazy-load>
<view class="item-title">{{ item.assetsName }}</view>
<view class="item-desc">{{ item.assetsType }} {{ item.footPrint }}㎡ {{ item.orientation }}
</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>
</template>
<template v-slot:right="{ rightList }">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl" :index="index"
@click="clickImage(item.assetsNo)" mode="aspectFill"></u-lazy-load>
<view class="item-title">{{ item.assetsName }}</view>
<view class="item-desc">{{ item.assetsType}} {{ item.footPrint }}㎡ {{ item.orientation }}</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>
</template>
</u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadMore"
style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
<u-no-network></u-no-network>
</view>
</view>
</template>
<script>
import config from "@/common/config.js" // 全局配置文件
import searchData from '@/common/utils/searchData.js'; //筛选菜单数据
import filterDropdown from '@/components/zy/filterDropdown.vue';
export default {
components: {
filterDropdown
},
data() {
return {
keyWord: null,
city: null,
streetList: [],
indexArr: [],
valueArr: [],
defaultSelected: [],
filterData: [],
searchData: {},
pageNum: 1,
pageSize: 20,
scrollTop: 0,
houseList: [],
loadStatus: 'loadmore',
flowList: [],
// 标签组数据和选中状态
tagGroupList: ['全套家具', '配套齐全', '优选好房', '生活便利'],
selectedTags: [],
background: {
// 渐变色
backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
},
}
},
onLoad(option) {
let type = option.type
let villageName = option.villageName
let lifeData = uni.getStorageSync('lifeData');
let vuex_city = lifeData.vuex_city
if (option.keyword) {
this.keyWord = option.keyword
}
this.city = vuex_city
this.searchData = {}
if (type) {
this.searchData.type = type
}
if (villageName) {
this.searchData.villageName = villageName
}
this.resetAndLoad()
// 获取小区数据
this.findVillageList()
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 下拉刷新
onPullDownRefresh() {
this.resetAndLoad();
// 关闭刷新
uni.stopPullDownRefresh();
},
computed: {
staticHost() {
return this.$config.staticUrl
}
},
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);
this.resetAndLoad()
},
location() {
this.$u.route({
url: '/pages-biz/location/location',
})
},
search() {
this.$u.route('/pages-biz/search/search');
},
resetAndLoad() {
this.pageNo = 1;
this.flowList = [];
this.loadStatus = 'loadmore';
this.$nextTick(() => {
this.$refs.uWaterfall && this.$refs.uWaterfall.clear();
this.findHouseList();
});
},
findHouseList(type = null) {
if (this.loadStatus !== 'loadmore') return;
this.loadStatus = 'loading';
this.$u.post('/assets/queryPage', {
assetsStatus:'闲置中',
assetsType: type,
pageNo: this.pageNo,
pageSize: this.pageSize,
keyWord: this.keyWord
}).then(result => {
const rows = result.data.result || [];
// 第一页无数据
if (this.pageNo === 1 && rows.length === 0) {
this.flowList = [];
this.loadStatus = 'nomore';
return;
}
rows.forEach(row => {
if (row.coverImgUrl) {
row.coverImgUrl = this.$config.staticUrl + row.coverImgUrl
} else {
row.coverImgUrl = this.$config.staticUrl + this.defaultImgUrl
}
})
// 追加数据
this.flowList = this.flowList.concat(rows);
// 判断是否还有下一页（核心）
if (rows.length < this.pageSize) {
this.loadStatus = 'nomore';
} else {
this.pageNo++; // ✅ 只有这里能 +1
this.loadStatus = 'loadmore';
}
}).catch(err => {
console.log("获取资产信息失败：", err);
this.loadStatus = 'loadmore';
}).finally(() => {
uni.stopPullDownRefresh();
});
},
loadMore() {
// 只有在 loadStatus 为 'loadmore' 时才触发
if (this.loadStatus !== 'loadmore') return;
// 调用接口获取下一页
this.findHouseList();
},
findStreet() {
},
findVillageList() {
// 前端写死的测试小区数据
// const villageData = [{
// name: '景秀天成'
// },
// {
// name: '锦绣花园'
// },
// {
// name: '阳光小区'
// },
// {
// name: '幸福家园'
// },
// {
// name: '碧水湾'
// }
// ];
// 添加测试小区数据到筛选菜单
// for (let i = 0; i < villageData.length; i++) {
// searchData[0].submenu.push({
// name: villageData[i].name,
// value: villageData[i].name
// });
// }
// this.filterData = searchData;
},
clickImage(houseId) {
this.$u.route({
url: '/pages-assets/assets/detail',
params: {
assetsNo: houseId
}
})
},
//接收菜单结果
confirm(e) {
let type = e.value[1][0]
let villageName = e.value[0][0]
let price = e.value[2][0]
let combo = e.value[3]
let houseNum = combo[0]
let decoration = combo[1]
let feature = combo[2]
this.searchData = {}
if (type) {
this.searchData.type = type
}
if (villageName) {
this.searchData.villageName = villageName
}
if (price) {
this.searchData.price = price
}
if (houseNum && houseNum.length > 0) {
this.searchData.houseNum = houseNum.toString()
}
if (decoration && decoration.length > 0) {
this.searchData.decoration = decoration.toString()
}
if (feature && feature.length > 0) {
this.searchData.feature = feature.toString()
}
this.resetAndLoad()
},
code() {
this.$mytip.toast('请咨询技术支持')
}
}
}
</script>
<style lang="scss" scoped>
.search-list-page {
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 {
padding-top: 20rpx;
background-color: #ffffff;
}
.nomore {
background-color: $u-bg-color;
}
.search {
width: 54px;
height: 44px;
&:active {
background-color: $u-bg-color;
}
}
.rowClass {
border-radius: 8px;
background-color: rgb(255, 255, 255);
margin-top: 10rpx;
}
.hoverClass {
background-color: #E4E7ED;
}
.tabName {
font-size: 28rpx;
color: $u-main-color;
}
.demo-warter {
border-radius: 8px;
margin-top: 15rpx;
margin-right: 10rpx;
margin-left: 10rpx;
background-color: #ffffff;
padding: 0rpx;
position: relative;
overflow: hidden;
}
.u-close {
position: absolute;
top: 20rpx;
right: 20rpx;
}
// 图片样式
.u-lazy-load {
width: 100%;
height: 300rpx;
}
.item-cover {
font-size: 55rpx;
color: $u-type-warning;
}
.item-title {
font-size: 28rpx;
color: #333;
font-weight: 600;
padding: 12rpx 15rpx 8rpx 15rpx;
line-height: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item-price {
font-size: 32rpx;
color: #FF2F31;
padding: 0 15rpx 15rpx 15rpx;
}
.item-price text {
font-size: 24rpx;
}
.item-desc {
font-weight: normal;
font-size: 24rpx;
color: #999;
padding: 0 15rpx 8rpx 15rpx;
}
// 标签样式
.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 {
font-size: 24rpx;
color: $u-tips-color;
margin-top: 3px;
}
</style>