fangtanhua/pages/index/index.vue

<template>
	<view class="index-index">
		<view class="index-bg"></view>
		<u-navbar :title="config.store_title" title-color="#fff" :isFixed="false" :background="{background:'rgba(0,0,0,0)'}" :border-bottom="false" :isBack="false">
			<view class="u-flex nav-left" slot="left">
				<u-icon name="map-fill" size="34" color="#fff"></u-icon>
				<text class="text">{{city || '定位中'}}</text>
			</view>
		</u-navbar>
		<view class="renqi-box u-flex">
			<u-icon name="heart-fill" color="#fff" size="26"></u-icon>
			<text class="text">累计人气值 {{popularity}}</text>
		</view>
		<view class="search-box u-flex u-row-between" @click="tosearch">
			<u-icon name="search" color="#CCCCCC" size="36"></u-icon>
			<input type="text" placeholder="搜索楼盘" class="input" :disabled="true">
			<text class="text">搜索</text>
		</view>
		<view class="swiper-box">
			<u-swiper :list="swiperlisi" name="logo" height="280" border-radius="20" @click="tobanner"></u-swiper>
		</view>
		<view class="tabs-list" v-if="tabslist.length > 0">
			<gf-scroll :list="tabslist" @click="tourl"></gf-scroll>
		</view>
		<view class="list-box" v-if="dijialist.length > 0">
			<view class="list-title u-flex u-row-between">
				<view class="u-flex title-left">
					<text>底价人气热盘</text>
					<image src="../../static/images/hot.png" mode=""></image>
				</view>
				<view class="more" @click="toall(1)">
					查看更多
				</view>
			</view>
			<view class="u-flex u-row-between u-flex-wrap">
				<view class="list-item" v-for="(item,index) in dijialist" :key="index" @click="toinfo(item)">
					<image class="item-img" :src="item.logo" mode=""></image>
					<view class="item-name u-line-1">
						{{item.name}}
					</view>
					<view class="u-flex price">
						<text>参考均价</text>
						<text v-if="Number(item.avg_price)">{{item.avg_price}}/㎡</text>
						<text v-else>{{item.avg_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list-box" v-if="tuijianlist.length > 0">
			<view class="list-title u-flex u-row-between">
				<view class="u-flex title-left">
					<text>推荐楼盘</text>
				</view>
				<view class="more" @click="toall(5)">
					查看更多
				</view>
			</view>
			<view class="u-flex u-row-between u-flex-wrap">
				<view class="list-item" v-for="(item,index) in tuijianlist" :key="index" @click="toinfo(item)">
					<image class="item-img" :src="item.logo" mode=""></image>
					<view class="item-name u-line-1">
						{{item.name}}
					</view>
					<view class="u-flex price">
						<text>参考均价</text>
						<text v-if="Number(item.avg_price)">{{item.avg_price}}/㎡</text>
						<text v-else>{{item.avg_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-if="guanggaolist.length >0" v-model="showguanggao" mode="center" border-radius="20" background="rgba(0,0,0,0)">
			<view class="guanggao-box">
				<u-swiper :list="guanggaolist" bgColor="rgba(0,0,0,0)" name="logo" height="974" border-radius="20" :autoplay="false"></u-swiper>
				<view class="close-box u-flex">
					<text style="border-right: 1rpx solid #fff;">{{s}}s</text>
					<text @click="closeguanggao">关闭</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showgzh" mode="center" border-radius="20">
			<view style="font-size: 0;">
				<image style="width: 650rpx;height: 650rpx;" :src="config.service_code" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				swiperlisi: [],
				tabslist: [],
				showguanggao: false,
				guanggaolist: [],
				s: 5,
				time: null,
				showgzh: false,
				popularity: 0,
				dijialist: [],
				tuijianlist: []
			}
		},
		onLoad() {
			this.getbanner()
			this.gettabs()
			this.getguanggao()
			this.getlist()
		},
		onShow() {
			this.getpopularity()
		},
		computed: {
			...mapGetters(['config']),
			...mapState(['city'])
		},
		methods: {
			getlist() {
				this.$u.post('/api/Index/property_list', {
					page: 1,
					page_num: 10,
					type: 1,
				}).then(res => {
					this.dijialist = res.data
				})
				this.$u.post('/api/Index/property_list', {
					page: 1,
					page_num: 10,
					type: 5,
				}).then(res => {
					this.tuijianlist = res.data
				})
			},
			daojishi() {
				this.s = 5
				this.time = setInterval(() => {
					if (this.s == 0) {
						this.showguanggao = false
						clearInterval(this.time)
					} else {
						this.s--
					}
				}, 1000)
			},
			getguanggao() {
				this.$u.post('/api/Index/adv_list').then(res => {
					this.guanggaolist = res.data
					this.showguanggao = true
					this.daojishi()
				})
			},
			gettabs() {
				this.$u.post("/api/Index/diamond_list").then(res => {
					this.tabslist = []
					res.data.forEach(val => {
						if (val.id == 11 && this.config.intermediary_show == 1) {
							this.tabslist.push(val)
						} else if (val.id == 12 && this.config.people_show == 1) {
							this.tabslist.push(val)
						} else {
							this.tabslist.push(val)
						}
					})
				})
			},
			tobanner(e) {
				if (this.swiperlisi[e].url) {
					uni.navigateTo({
						url: this.swiperlisi[e].url
					})
				}
			},
			getbanner() {
				this.$u.post('/api/Index/banner').then(res => {
					this.swiperlisi = res.data
				})
			},
			getpopularity() {
				this.$u.post('/api/Index/add_popularity').then(res => {
					this.$store.commit('setpopularity', res.data)
					this.popularity = res.data
				})
			},
			tosearch() {
				uni.navigateTo({
					url: "./search"
				})
			},
			toinfo(item) {
				uni.navigateTo({
					url: "./houses-info?id=" + item.id
				})
			},
			tourl(item) {
				console.log(item);
				if (item.id == 1) {
					uni.navigateTo({
						url: "/pagesA/index/newHouses?title="+item.title
					})
				}
				if (item.id == 2) {
					uni.navigateTo({
						url: "/pagesA/index/allHouses?type=3"
					})
				}
				if (item.id == 3) {
					uni.navigateTo({
						url: "/pagesA/index/allHouses?type=4"+'&title='+item.title
					})
				}
				if (item.id == 4) {
					uni.navigateTo({
						url: "/pagesA/index/dataCenter?title="+item.title
					})
				}
				if (item.id == 5) {
					this.showgzh = true
				}
				if (item.id == 6) {
					uni.navigateTo({
						url: "./fuli"
					})
				}
				if (item.id == 7) {
					uni.navigateTo({
						url: "./news?title="+item.title
					})
				}
				if (item.id == 8) {
					uni.navigateTo({
						url: "/pagesA/index/counter"
					})
				}
				if (item.id == 9) {
					uni.navigateTo({
						url: "/pagesA/index/allHouses?title="+item.title
					})
				}
				if (item.id == 10) {
					uni.navigateTo({
						url: "./pk-list"
					})
				}
				if (item.id == 11) {
					if (this.$islogin()) return
					uni.navigateTo({
						url: "./broker?type=1"
					})
				}
				if (item.id == 12) {
					if (this.$islogin()) return
					uni.navigateTo({
						url: "./broker?type=2"
					})
				}
			},
			toall(type) {
				uni.navigateTo({
					url: "/pagesA/index/allHouses?type=" + type
				})
			},
			closeguanggao() {
				this.showguanggao = false
			}
		}
	}

</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.index-index {
		position: relative;
		z-index: 1;

		.guanggao-box {
			width: 650rpx;
			height: 974rpx;
			position: relative;

			.close-box {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				z-index: 1;
				width: 150rpx;
				height: 50rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 8rpx;
				border: 2rpx solid #FFFFFF;

				text {
					flex: 1;
					line-height: 30rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.list-box {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx;

			.list-item {
				width: 320rpx;
				margin-bottom: 24rpx;

				.price {
					text:first-child {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-right: 10rpx;
					}

					text:last-child {
						font-size: 32rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FF3B30;
					}
				}

				.item-name {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #131415;
					margin: 10rpx 0;
				}

				.item-img {
					width: 320rpx;
					height: 240rpx;
					border-radius: 20rpx;
				}
			}

			.list-title {
				padding: 24rpx 0;

				.more {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.title-left {
					text {
						font-size: 34rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #131415;
						margin-right: 14rpx;
					}

					image {
						width: 26rpx;
						height: 32rpx;
					}
				}
			}
		}

		.tabs-list {
			padding: 0 24rpx;
			margin-bottom: 20rpx;
		}

		.swiper-box {
			padding: 0 24rpx;
			margin-bottom: 20rpx;
		}

		.search-box {
			width: 702rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto 20rpx auto;
			padding-left: 24rpx;

			.input {
				flex: 1;
				margin: 0 10rpx;
			}

			.text {
				padding: 0 24rpx;
				border-left: 1rpx solid #E5E7ED;
				line-height: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1E7DFF;
			}
		}

		.renqi-box {
			width: 750rpx;
			height: 56rpx;
			background: rgba(256, 256, 256, 0.1);
			padding: 0 24rpx;
			margin-bottom: 24rpx;

			.text {
				font-size: 24rpx;
				font-family: Helvetica;
				color: #FFFFFF;
				margin-left: 10rpx;
			}
		}

		.nav-left {
			padding: 0 20rpx;

			.text {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 5rpx;
			}
		}

		.index-bg {
			width: 750rpx;
			height: 732rpx;
			background: linear-gradient(180deg, #1E7DFF 0%, #F6F6F6 100%);
			position: absolute;
			top: 1;
			left: 0;
			z-index: -1;
		}
	}

</style>