You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
311 lines
8.4 KiB
311 lines
8.4 KiB
<template>
|
|
<view class="scarchList">
|
|
<u-navbar back-text="返回" :is-back="false" :title-bold="true">
|
|
<view class="slot-wrap">
|
|
<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 :show-action="showAction" -->
|
|
<u-search v-model="searchText" bg-color="#f5f7fa" :show-action="false" height="72"
|
|
:action-style="{color: '#fff'}" @search="confirm">
|
|
</u-search>
|
|
<text class="clear" @click="back">取消</text>
|
|
</view>
|
|
</u-navbar>
|
|
|
|
<!-- <view class="title">
|
|
<u-icon name="search" size="30" class="icon" color="#737373"></u-icon>
|
|
<u-input class="input" :clearable='false' v-model="searchText"
|
|
style="background-color: #f5f7fa;width: 594rpx;" confirm-type="search" @confirm="search()" />
|
|
<text class="clear" @click="back">取消</text>
|
|
</view> -->
|
|
<view class="screen">
|
|
<u-tabs-swiper ref="uTabs" :list="rentOrbuy" :current="current" @change="tabsChange" :is-scroll="false">
|
|
</u-tabs-swiper>
|
|
</view>
|
|
|
|
<view class="list" :style="{height: newsPanelHeight + 'px'}">
|
|
<swiper class="swiper-box" @change="swiperChange" :current="swiperCurrent" @transition="transition"
|
|
@animationfinish="animationfinish">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
|
|
<scroll-view scroll-y style="height: 100%;width: 100%;" :lower-threshold="150" @scrolltolower="onreachBottom">
|
|
<view class="" v-for="(info, __index) in item">
|
|
<ListItem :info="info" width="240rpx" height="180rpx" @click.native="toInfo(info)">
|
|
</ListItem>
|
|
<view class="" v-if="index === 0 && __index === swiperList[0].length - 1">
|
|
<view class="loading" style="height: 40px;" v-if="reselling.istotale">
|
|
我们是有底线的
|
|
</view>
|
|
</view>
|
|
<view class="" v-if="index === 1 && __index === swiperList[1].length - 1">
|
|
<view class="loading" style="height: 40px;" v-if="renting.istotale">
|
|
我们是有底线的
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="loading" v-if="index === 0 && reselling.loding && !reselling.istotale ">
|
|
<u-loading mode="flower"></u-loading>
|
|
</view>
|
|
<view class="loading" v-if="index === 1 && renting.loding && !renting.istotale ">
|
|
<u-loading mode="flower"></u-loading>
|
|
</view>
|
|
<view class="" v-if="index === 0 && item.length === 0 && reselling.istotale">
|
|
<view class="loading" style="height: 40px;">
|
|
没有相关信息
|
|
</view>
|
|
</view>
|
|
<view class="" v-if="index === 1 && item.length === 0 && renting.istotale">
|
|
<view class="loading" style="height: 40px;">
|
|
没有相关信息
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ListItem from '@/components/listItem.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
swiperList: [
|
|
[],
|
|
[]
|
|
],
|
|
resellingList: [],
|
|
rentingList: [],
|
|
current: 0,
|
|
searchText: '',
|
|
pagodaStatus: 'reselling', // 当前显示出租 | 出售
|
|
reselling: {
|
|
// 出售数据对象
|
|
loding: false,
|
|
totale: 0,
|
|
istotale: false,
|
|
queryData: {
|
|
pageNum: 0,
|
|
pageSize: 10,
|
|
pagodaName: '',
|
|
pagodaStatus: 'reselling', //
|
|
isRecommend: false
|
|
},
|
|
},
|
|
renting: {
|
|
// 出租数据对象
|
|
loding: false,
|
|
totale: 0,
|
|
istotale: false,
|
|
queryData: {
|
|
pageNum: 0,
|
|
pageSize: 10,
|
|
pagodaName: '',
|
|
pagodaStatus: 'renting', //
|
|
isRecommend: false
|
|
},
|
|
},
|
|
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
|
newsPanelHeight: 0,
|
|
rentOrbuy: [{
|
|
name: '购买'
|
|
}, {
|
|
name: '租赁'
|
|
}],
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 详情页
|
|
toInfo(info) {
|
|
console.log('-00--', info)
|
|
uni.navigateTo({
|
|
url: '../cemeteryInfo/cemeteryInfo?id=' + info.pagodaId + '&type=' + this.pagodaStatus
|
|
})
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
reset() {
|
|
this.reselling.queryData.pageNum = 0
|
|
this.reselling.istotale = false
|
|
this.swiperList[0] = []
|
|
|
|
this.renting.queryData.pageNum = 0
|
|
this.renting.istotale = false
|
|
this.swiperList[1] = []
|
|
|
|
console.log('swiperList', '-----------0-----------------------0-----------------------')
|
|
|
|
},
|
|
confirm() {
|
|
// this.list = []
|
|
this.reselling.queryData.pagodaName = this.searchText
|
|
this.renting.queryData.pagodaName = this.searchText
|
|
this.reset()
|
|
if (this.pagodaStatus === 'reselling') {
|
|
this.getList()
|
|
} else {
|
|
this.getList()
|
|
}
|
|
},
|
|
swiperChange(event) {
|
|
if (this.isTbarClick) {
|
|
this.isTbarClick = false
|
|
return
|
|
}
|
|
this.tabsChange(event.detail.current)
|
|
},
|
|
// tabs通知swiper切换
|
|
tabsChange(index) {
|
|
this.isTbarClick = true
|
|
this.swiperCurrent = index;
|
|
console.log(index, 999)
|
|
if (index === 0) {
|
|
this.pagodaStatus = 'reselling'
|
|
if (this.swiperList[0].length === 0) {
|
|
setTimeout(() => {
|
|
this.getList()
|
|
}, 300)
|
|
}
|
|
|
|
} else {
|
|
this.pagodaStatus = 'renting'
|
|
if (this.swiperList[1].length === 0) {
|
|
setTimeout(() => {
|
|
this.getList()
|
|
}, 300)
|
|
}
|
|
|
|
}
|
|
},
|
|
// swiper-item左右移动，通知tabs的滑块跟随移动
|
|
transition(e) {
|
|
let dx = e.detail.dx;
|
|
this.$refs.uTabs.setDx(dx);
|
|
},
|
|
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
|
|
// swiper滑动结束，分别设置tabs和swiper的状态
|
|
animationfinish(e) {
|
|
let current = e.detail.current;
|
|
this.$refs.uTabs.setFinishCurrent(current);
|
|
this.swiperCurrent = current;
|
|
this.current = current;
|
|
},
|
|
// scroll-view到底部加载更多
|
|
onreachBottom() {
|
|
console.log('-000-',this.pagodaStatus )
|
|
this.getList()
|
|
},
|
|
async getList() {
|
|
console.log('009900------')
|
|
if (this.pagodaStatus === 'reselling') {
|
|
if (this.reselling.istotale) {
|
|
return
|
|
}
|
|
this.reselling.loding = true
|
|
this.reselling.queryData.pageNum = this.reselling.queryData.pageNum + 1
|
|
let res = await this.$u.api.pagoda.getPagodaList(this.reselling.queryData)
|
|
console.log(res, 9999)
|
|
this.swiperList[0].push(...res.data.rows)
|
|
this.reselling.total = res.data.total
|
|
setTimeout(() => {
|
|
this.reselling.loding = false
|
|
// 如果请求响应和当前数组都为空 则提示无数据
|
|
if (res.data.rows.length === 0 && this.resellingList.length === 0 || this.reselling
|
|
.total === this.swiperList[0].length) {
|
|
this.reselling.istotale = true
|
|
}
|
|
}, 400)
|
|
} else {
|
|
// 出租
|
|
console.log('009900------', this.renting.totale, this.swiperList[1].length)
|
|
if (this.renting.istotale) {
|
|
return
|
|
}
|
|
console.log('009900------')
|
|
this.renting.loding = true
|
|
this.renting.queryData.pageNum = this.renting.queryData.pageNum + 1
|
|
let res = await this.$u.api.pagoda.getPagodaList(this.renting.queryData)
|
|
this.swiperList[1].push(...res.data.rows)
|
|
console.log(this.swiperList, 9999)
|
|
this.renting.totale = res.data.total
|
|
setTimeout(() => {
|
|
this.renting.loding = false
|
|
// 如果请求响应和当前数组都为空 则提示无数据
|
|
if (res.data.rows.length === 0 && this.rentingList.length === 0 || this.renting
|
|
.total === this.swiperList[1].length) {
|
|
this.renting.istotale = true
|
|
}
|
|
}, 400)
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
ListItem,
|
|
},
|
|
onLoad(data) {
|
|
console.log(data['text'])
|
|
this.searchText = data['text']
|
|
this.reselling.queryData.pagodaName = data['text']
|
|
this.renting.queryData.pagodaName = data['text']
|
|
this.getList()
|
|
},
|
|
onReachBottom() {
|
|
console.log('-----')
|
|
this.getList()
|
|
},
|
|
onReady() {
|
|
var _this = this;
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
uni.createSelectorQuery().select(".list")
|
|
.boundingClientRect(function(boundRect) {
|
|
_this.newsPanelHeight = res.windowHeight - boundRect.top;
|
|
}).exec();
|
|
}
|
|
});
|
|
console.log(this.newsPanelHeight, 999999)
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
uni-page-body,
|
|
.scarchList {
|
|
// height: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.slot-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
padding: 0 36rpx;
|
|
|
|
.clear {
|
|
margin-left: 36rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.list {
|
|
padding: 0 36rpx;
|
|
height: 100%;
|
|
|
|
.swiper-box {
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.cart {
|
|
// margin: 24rpx 0;
|
|
// background-color: #FFFFFF;
|
|
height: 228rpx;
|
|
border-bottom: 2rpx solid #F7F9FCFF;
|
|
}
|
|
}
|
|
</style>
|
|
|