houserent-front/pages_subpack/category/index.vue

<template>
	<view class="uv-page">
		<searchVue @onSearch="onSearch($event)" @onParent="onDropDown($event)" />
		<view class="se-pb-200">
			<view v-if="list.length>0">
				<view @click="onDetail(item)" class="se-my-10 se-mx-20 se-px-20 se-py-20 se-br-20 se-bgc-white se-flex" v-for="(item,index) in list" :key="index">
					<view class="se-pos se-w-260 se-h-180">
						<image v-if="item.iconImage" class="se-a-80 se-pos-lt" :src="item.iconImage" mode=""></image>
						<image class="se-w-260 se-h-180 se-br-10" :src="item.images[0]" mode=""></image>
					</view>
					<view class="se-pl-10 se-w-p-100">
						<view class="se-c-black se-fs-28">
							{{item.title}}
						</view>
						<view class="se-flex se-flex-h-sb se-flex-ai-c se-fs-24 se-mt-10 se-c-66">
							<text>{{item.homeType}}</text>
							<text>{{item.timeGo}}年</text>
						</view>
						<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
							<template v-if="item.iconTitles.length>0">
								<view class="se-flex">
									<view class="se-display-ib se-c-white se-bgc-orange se-fs-22 se-br-8 se-px-10 se-py-5 se-mr-10" v-for="(items,indexs) in item.iconTitles" :key="indexs">
										{{items}}
									</view>
								</view>
							</template>
							<template v-else><view></view></template>
							<view class="se-c-66 se-flex se-flex-ai-c">
								<uv-icon name="eye"></uv-icon>
								<text class="se-ml-5 se-fs-18">{{item.num}}</text>
							</view>
						</view>
						<view class="se-flex  se-flex-h-sb se-flex-ai-c se-mt-10">
							<text class="se-c-red se-fs-24 se-fw-6 se-toe-1">￥{{item.price}}元/{{item.unit}}</text>
							<text class="se-c-66 se-fs-22 se-toe-1">{{item.address}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<uv-empty mode="list" ></uv-empty>
			</view>
		</view>
		<!-- <view class="se-my-10 se-mx-20 se-px-20 se-py-20 se-br-20 se-bgc-white se-flex" v-for="(item,index) in 20" :key="index">
			<view class="se-pos se-w-260 se-h-180">
				<image class="se-a-80 se-pos-lt" src="../../static/image/2x.png" mode=""></image>
				<image class="se-w-260 se-h-180 se-br-10" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
			</view>
			<view class="se-pl-10 se-w-p-100">
				<view class="se-c-black se-fs-28">
					整租·四季峰景四期 2室2厅1卫
				</view>
				<view class="se-flex se-flex-h-sb se-flex-ai-c se-fs-24 se-mt-10 se-c-66">
					<text>精装修</text>
					<text>1年</text>
				</view>
				<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
					<view class="se-display-ib se-c-white se-bgc-orange se-fs-22 se-br-8 se-px-10 se-py-5">
						全新首租
					</view>
					<view class="se-c-66 se-flex se-flex-ai-c">
						<uv-icon name="eye"></uv-icon>
						<text class="se-ml-5 se-fs-18">999+</text>
					</view>
				</view>
				<view class="se-flex  se-flex-h-sb se-flex-ai-c se-mt-10">
					<text class="se-c-red se-fs-28 se-fw-6">￥1500元/月</text>
					<text class="se-c-66 se-fs-22">四季峰景四期</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import searchVue from './component/search.vue'
	import { housePageList } from "@/common/api.js"
	export default{
		components:{
			searchVue
		},
		data(){
			return{
				keyword:"",
				id:null,
				pageNo:1,
				pageSize:10,
				areaId:null,
				priceId:null,
				typeId:null,
				yearId:null,
				list:[]
			}
		},
		onLoad(options) {
			this.id = options.id
			uni.setNavigationBarTitle({
			  title: options.title ? options.title :"分类"
			})
			this.onHousePageList()
		},
		onPullDownRefresh() {
			let that = this
			that.pageNo =  1
			that.list = []
			that.onHousePageList()
		},
		onReachBottom() {
			let that = this
			that.pageNo = that.pageNo + 1
			that.onHousePageList()
		},
		methods:{
			onHousePageList(){
				let that = this
				let params={
					iconClass:that.id,
					pageNo:that.pageNo,
					pageSize:that.pageSize,
					title:that.keyword,
					areaId:that.areaId,
					priceId:that.priceId,
					typeId:that.typeId,
					yearId:that.yearId
				}
				housePageList(params).then((response) => {
					console.info("responseindexsindexsindexs",response.result.records)
					response.result.records.forEach((items,indexs)=>{
						if(items.image){
							items.images = items.image.split(',')
						}else{
							items.images = []
						}
						if(items.homeImage){
							items.homeImages = items.homeImage.split(',')
						}else{
							items.homeImages = []
						}
						if(items.iconTitle){
							items.iconTitles = items.iconTitle.split(',')
						}else{
							items.iconTitles = []
						}
						
					})
					console.info('response.resultindexsindexsindexs',response.result.records)
					that.list = that.list.concat(response.result.records) 
				}).catch((error) =>{
					
				})
			},
			onSearch(event){
				console.info('onSearch',event)
				// console.info(event)
				let that = this
				that.keyword = event
				that.list=[]
				that.onHousePageList()
			},
			onDropDown(event){
				console.info('onDropDown',event)
				let that = this
				that.areaId = null;
				that.priceId = null;
				that.typeId = null;
				that.yearId = null
				event.forEach(items=>{
					if(items.name=='region'){
						that.areaId = items.value
					}else if(items.name=='rent'){
						that.priceId = items.value
					}else if(items.name=='type'){
						that.typeId = items.value
					}else if(items.name=='duration'){
						that.yearId = items.value
					}
				})
				console.info('that.areaId',that.areaId)
				that.list=[]
				that.onHousePageList()
			},
			onDetail(event){
				uni.navigateTo({
					url:"/pages_subpack/detail/index?id="+event.id
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>