houserent-front/pages/home/index.vue

<template>
	<view>
		<view class="se-px-40 se-py-20">
			<view class="se-bgc-white se-br-50 se-c-black se-px-20 se-py-5 se-flex se-flex-h-sb se-fs-26">
				<view class="se-b-r se-pl-10 se-pr-20 se-flex se-flex-h se-h-40 se-lh-40 " @click="handleAreaChange()">
					<text class="se-pr-20 nobreak">{{city?city:'未知'}}</text>
					<uv-icon name="arrow-down-fill"></uv-icon>
				</view>
				<view class="se-ml-20"  @click="onLogin()">
					<uv-search :showAction="false" bgColor="transparent" placeholder="请输入租房信息" v-model="keyword"></uv-search>
				</view>
				
			</view>
		</view>
		<view class="backdrop se-mb-20">
			<image class="se-w-vw-100 se-h-400" src="@/static/image/banner.png" mode=""></image>
		</view>
		<view class="se-grid se-bgc-white se-py-30 se-mt-300">
			<!-- <navigator url="/pages_subpack/category/index" v-for="(item, index) in nav" :key="index" class="se-flex-v-c se-mb-20">
				<image class="se-a-100 se-br-20" :src="item.img" mode=""></image>
				<text class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.name}}</text>
			</navigator> -->
			<navigator :url="item.url+`?id=`+item.id+`&title=`+item.title" v-for="(item, index) in nav" :key="index" class="se-flex-v-c se-mb-20">
				<image class="se-a-100 se-br-20" :src="item.image" mode=""></image>
				<text class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.title}}</text>
			</navigator>
		</view>
		<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-orange se-flex se-flex-ai-c se-fs-24" @click="toNotice">
			<image class="se-a-80" src="@/static/image/aed60x.png" mode=""></image>
			<text class="se-ml-10">{{noticeObj.title}}</text>
		</view>
		<view class="se-bgc-white se-my-20">
			<uv-tabs @click="onClickHouseType" :list="houseTypeList" keyName="title" :activeStyle="{color:'#000000'}" :inactiveStyle="{color:'#666666'}" :lineColor="`url(${lineBg}) 100% 100%`"></uv-tabs>
		</view>
		<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>
		<!-- 地址 -->
		<citySelect ref="citySelectRef" :zIndex="0" @city-change="handleCityChange"></citySelect>
	</view>
</template>

<script>
	import { housePageList,houseType,noticeObjApi,getConfig,commonIndexIndexIcon } from "@/common/api.js"
	import citySelect from "@/components/cityselect/index.vue"
	const lineBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAANCAYAAAC3mX7tAAAAAXNSR0IArs4c6QAAAbxJREFUOE+lk0FrE1EUhc+ZDOhMigjZdNcWdCPJqNCdlkZw4TKL2mVwkKLQ/gAFRcEu/AEKuumDrEopNEsXSlNoV+2iTYIbBdNdNwGpmRmFyVx5oQk6mYSpvt1799z7zTnvDQPlBAJcRGxZOLXotn7Gz8ftZePaROCZP+IaEh36a04LxFS8mMmgcKFcb54H9Kvi5LtdNIZ6BMf0lVMDMD88UJ7abuP1eUDeWuEZyVcJPZ/oKeclgRcJxRMrG17l4udOGthZbF8ATMb1IvKcXiU/y66xnziM2LQf1O+nAfnq+hYgpSStCeMmdcFXzi6AWyMGrlvZcGmUs54T31QQLIzo37Pd+u0eKFD5osDYHvPlJyLyNopYnbgUtrSuc2pOG4aUSC4nxTWYFXHOfni02wPp5anCO4KP0sSUViOQ91m38VjrByDZLprBt/ZHkAkvMO3oP3QiO9ZM7i7v1MK/QHoj6sblQLrV/4ZpCDMluoff++iBo/6Bdua32m/+NUYdlz2dW+k7GQnqF84eyOqY1xjPcw8Rn+iLTwp6yFFcpP8zhLxHsgjBFRrI9WKO0AbxVURqMOVDttw8GHeTvwFKoZ4cmcUYJAAAAABJRU5ErkJggg==";
	import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
	export default{
		components:{
			citySelect
		},
		data(){
			return{
				city:"",
				keyword:"",
				lineBg: lineBg,
				nav:[
					// {
					// 	img:"../../static/image/nav1.png",
					// 	name:"闲置散居农房"
					// },
					// {
					// 	img:"../../static/image/nav2.png",
					// 	name:"集体建设用地"
					// },
					// {
					// 	img:"../../static/image/nav3.png",
					// 	name:"鱼塘"
					// },
					// {
					// 	img:"../../static/image/nav4.png",
					// 	name:"林地"
					// },
					// {
					// 	img:"../../static/image/nav5.png",
					// 	name:"经营性建设用地"
					// },
					// {
					// 	img:"../../static/image/nav6.png",
					// 	name:"耕地"
					// },
					// {
					// 	img:"../../static/image/nav7.png",
					// 	name:"出租房"
					// },
					// {
					// 	img:"../../static/image/nav8.png",
					// 	name:"二手房"
					// }
				],
				noticeObj:{},
				houseTypeList:[],
				classId:null,
				pageNo:1,
				pageSize:10,
				list:[]
			}
		},
		mounted() {
			uni.chooseAddress({
				success(res) {
					console.info(res)
				}
			})
			this.getLocation()
			this.onCommonIndexIndexIcon()
			this.onNotice();
			this.onHousePageList();
			this.onHouseType();
			// this.onGetConfig()
			this.$store.commit('initConfig')
		},
		onPullDownRefresh() {
			let that = this
			that.pageNo =  1
			that.list = []
			that.onHousePageList()
		},
		onReachBottom() {
			let that = this
			that.pageNo = that.pageNo + 1
			that.onHousePageList()
		},
		methods:{
			getLocation(){
			    const that = this;
			    wx.getLocation({
			        type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						const qqmapsdk = new QQMapWX({
						    key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
						});
						qqmapsdk.reverseGeocoder({
						    location: {
						        latitude: res.latitude,
						        longitude: res.longitude
						    },
						    success: function(res) {
								that.city = res.result.ad_info.city
						        console.log('逆地理编码结果：', res);
						    },
						    fail: function(error) {
						        console.error('逆地理编码失败：', error);
						    }
						});
					}
				})
			},
			onCommonIndexIndexIcon(){
				let that = this
				commonIndexIndexIcon({}).then(response=>{
					console.info('onCommonIndexIndexIcon',response)
					that.nav = response.result
				}).catch(error=>{
					
				})
			},
			onLogin(){
				console.info("onLogin")
					uni.navigateTo({
						url:"/pages/auth/index"
					})
			},
			
			onNotice(){
				noticeObjApi({}).then(response=>{
					console.info('noticeObj',response)
					this.noticeObj = response.result
				}).catch(error=>{
					
				})
			},
			
			onHouseType(){
				houseType({}).then(response=>{
					console.info('houseType',response)
					this.houseTypeList = response.result
				}).catch(error=>{
					
				})
			},
			onClickHouseType(event){
				console.info(event)
				let that = this
				that.pageNo =  1
				that.classId = event.id
				that.list =[]
				that.onHousePageList()
			},
			onHousePageList(){
				let that = this
				let params={
					classId:that.classId,
					pageNo:that.pageNo,
					pageSize:that.pageSize
				}
				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) =>{
					
				})
			},
			
			handleAreaChange(){
				uni.chooseAddress({
					success(res) {
						console.info(res)
					}
				})
				// this.$refs.citySelectRef.open()
			},
			handleCityChange(e) {
				console.info(e)
				this.city = e.city.label
				// this.form.area = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			onDetail(event){
				uni.navigateTo({
					url:"/pages_subpack/detail/index?id="+event.id
				})
			},
			toNotice(){
				uni.navigateTo({
					url:"/pages_subpack/notice/index"
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
	.se-grid{
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
	}
	.backdrop{
		width: 750rpx;
		height: 350rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		/* border-radius: 0 0 14% 14%; */
	}
	.nobreak {
	  white-space: nowrap;
	}
</style>