goufangtong3/pages/index/index.vue

<template>
	<view class="index-index">
		<view class="index-bg"></view>
		<u-navbar 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" @click="tochangecity">
				<u-icon name="map-fill" size="34" color="#fff"></u-icon>
				<text class="text">{{defaultcity.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" :userinfo="userinfo" @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)">
					<view class="item-img">
						<image :src="item.logo" class="logo" mode="aspectFill"></image>
						<view class="logo-look u-flex">
							<u-icon name="eye-fill" size="28" color="#fff"></u-icon>
							<text class="text">{{getview(item.page_view)}}</text>
						</view>
					</view>
					<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)">
					<view class="item-img">
						<image :src="item.logo" class="logo" mode="aspectFill"></image>
						<view class="logo-look u-flex">
							<u-icon name="eye-fill" size="28" color="#fff"></u-icon>
							<text class="text">{{getview(item.page_view)}}</text>
						</view>
					</view>
					<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-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>
		<u-popup v-model="showcity" mode="center" border-radius="20" :maskCloseAble="false">
			<view class="changecity-popup u-flex-col u-col-center u-row-center">
				<view class="city-bg"></view>
				<image src="../../static/images/index-img2.png" class="city-img" mode=""></image>
				<view class="city-tips u-flex-col u-col-center">
					<text>您当前所在定位城市为:</text>
					<text>【{{citydata.city}}】</text>
					<text>是否切换至当前定位城市？</text>
				</view>
				<view class="city-btn u-flex u-row-between">
					<text @click="notchangecity">否</text>
					<text @click="changecity">是</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showcitynot" mode="center" border-radius="20" :maskCloseAble="false" :closeable="true">
			<view class="changecity-popup u-flex-col u-col-center u-row-center">
				<view class="city-bg"></view>
				<image src="../../static/images/index-img2.png" class="city-img" mode=""></image>
				<view class="city-tips u-flex-col u-col-center" style="width: 352rpx;">
					<text>此城市末开放数据</text>
					<text>己为你自动切换</text>
					<text>【{{notcityname}}】</text>
				</view>
			</view>
		</u-popup>
		<gf-tabbar></gf-tabbar>
	</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: [],
				showcity: false,
				showcitynot: false,
				notcityname: '',
				userinfo: {
					certification_type: 0
				}
			}
		},
		onLoad() {
			this.getbanner()
			this.getguanggao()
			if (this.defaultcity.city_id) {
				this.getlist()
			}
		},
		onShow() {
			this.getpopularity()
			if ([0, 1, '0', '1'].includes(this.config.intermediary_show)) {
				if (uni.getStorageSync("token")) {
					this.getuser()
				} else {
					this.userinfo = {
						certification_type: 0
					}
					this.gettabs()
				}
			}
		},
		computed: {
			...mapGetters(['config']),
			...mapState(['defaultcity', 'citydata'])
		},
		watch: {
			citydata: {
				deep: true,
				handler(val) {
					if (uni.getStorageSync("city") && uni.getStorageSync("city").city_id) {

					} else {
						if (val.city != this.defaultcity.city) {
							this.showcity = true
						}
					}
				}
			},
			defaultcity: {
				deep: true,
				handler(val) {
					if (val.city_id) {
						this.getlist()
					}
				}
			},
			config: {
				deep: true,
				handler(val) {
					if (uni.getStorageSync("token")) {
						this.getuser()
					} else {
						this.userinfo = {
							certification_type: 0
						}
						this.gettabs()
					}
				}
			}
		},
		methods: {
			getview(count) {
				if (count > 10000) {
					return Number((count / 10000).toFixed(2)) + 'w'
				}
				if (count > 1000) {
					return Number((count / 1000).toFixed(2)) + 'k'
				}
				return count
			},
			getuser() {
				this.$u.post('/api/Member/member_info').then(res => {
					this.userinfo = res.data
					this.gettabs()
				})
			},
			tochangecity() {
				uni.navigateTo({
					url: "/pages/index/change-city",
					events: {
						changecity: (res) => {
							this.$store.commit('setdefaultcity', {
								city: res.shi.name,
								userLocation: `${res.shi.lng},${res.shi.lat}`,
								city_id: res.shi.id,
								province_id: res.sheng.id
							})
							this.setcity()
						}
					}
				})
			},
			notchangecity() {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				this.$u.post('/api/Index/location', {
					longitude: '120.699279',
					latitude: '27.993849',
					city_name: '温州市'
				}).then(res => {
					if (res.code == 1) {
						this.showcity = false
						this.$store.commit('setdefaultcity', {
							city: '温州市',
							userLocation: '120.699279,27.993849',
							city_id: res.data.city_id,
							province_id: res.data.province_id
						})
					} else {
						this.showcity = false
						this.showcitynot = true
						this.notcityname = res.data.city_name
						this.$store.commit('setdefaultcity', {
							city: res.data.city_name,
							userLocation: `${res.data.longitude},${res.data.latitude}`,
							city_id: res.data.city_id,
							province_id: res.data.province_id
						})
						this.setcity()
					}
				})
			},
			changecity() {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				this.$u.post('/api/Index/location', {
					longitude: this.citydata.userLocation.split(',')[0],
					latitude: this.citydata.userLocation.split(',')[1],
					city_name: this.citydata.city
				}).then(res => {
					if (res.code == 1) {
						this.showcity = false
						this.$store.commit('setdefaultcity', {
							city: this.citydata.city,
							userLocation: this.citydata.userLocation,
							city_id: res.data.city_id,
							province_id: res.data.province_id
						})
					} else {
						this.showcity = false
						this.showcitynot = true
						this.notcityname = res.data.city_name
						this.$store.commit('setdefaultcity', {
							city: res.data.city_name,
							userLocation: `${res.data.longitude},${res.data.latitude}`,
							city_id: res.data.city_id,
							province_id: res.data.province_id
						})
						this.setcity()
					}
				})
			},
			setcity() {
				this.$u.post('/api/Index/location', {
					longitude: this.defaultcity.userLocation.split(',')[0],
					latitude: this.defaultcity.userLocation.split(',')[1],
					city_name: this.defaultcity.city
				})
			},
			getlist() {
				this.$u.get('/api/Index/property_list', {
					page: 1,
					page_num: 10,
					type: 1,
					city_id: this.defaultcity.city_id
				}).then(res => {
					this.dijialist = res.data
				})
				this.$u.get('/api/Index/property_list', {
					page: 1,
					page_num: 10,
					type: 5,
					city_id: this.defaultcity.city_id
				}).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 => {
					if(res.data.length > 0){
						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.userinfo.certification_type == 1 || this.userinfo.certification_type == 0)) {
							this.tabslist.push(val)
						} else if (val.id == 12 && this.config.people_show == 1 && (this.userinfo.certification_type == 2 || this.userinfo.certification_type == 0)) {
							this.tabslist.push(val)
						} else if (val.id != 11 && val.id != 12) {
							this.tabslist.push(val)
						}
					})
					console.log(this.tabslist);
					// console.log(this.userinfo.certification_type);
					// console.log(JSON.parse(JSON.stringify(this.tabslist)));
				})
			},
			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+ '&name=' + item.name
				})
			},
			tourl(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&title=" + item.title
					})
				}
				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?title=" + item.title
					})
				}
				if (item.id == 7) {
					uni.navigateTo({
						url: "./news?title=" + item.title
					})
				}
				if (item.id == 8) {
					uni.navigateTo({
						url: "/pagesA/index/counter?title=" + item.title
					})
				}
				if (item.id == 9) {
					uni.navigateTo({
						url: "/pagesA/index/allHouses?title=" + item.title
					})
				}
				if (item.id == 10) {
					uni.navigateTo({
						url: "./pk-list?title=" + item.title
					})
				}
				if (item.id == 11) {
					if (this.$islogin()) return
					uni.navigateTo({
						url: "./broker?type=1&title=" + item.title
					})
				}
				if (item.id == 12) {
					if (this.$islogin()) return
					uni.navigateTo({
						url: "./broker?type=2&title=" + item.title
					})
				}
			},
			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;

		.changecity-popup {
			width: 602rpx;
			height: 590rpx;
			position: relative;

			.city-btn {
				width: 100%;
				padding: 0 40rpx;

				text:first-child {
					width: 250rpx;
					line-height: 88rpx;
					background: #CCCCCC;
					border-radius: 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 250rpx;
					line-height: 88rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.city-tips {
				width: 480rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-bottom: 56rpx;
				text-align: center;
			}

			.city-img {
				width: 198rpx;
				height: 198rpx;
				margin-bottom: 26rpx;
			}

			.city-bg {
				width: 602rpx;
				height: 442rpx;
				background: linear-gradient(180deg, #1EFF7B 0%, rgba(255, 255, 255, 0) 100%);
				opacity: 0.2;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.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;
					position: relative;
					overflow: hidden;
					.logo-look {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 320rpx;
						height: 52rpx;
						background: rgba(0, 0, 0, 0.3);
						padding: 0 20rpx;

						.text {
							font-size: 20rpx;
							font-family: SourceHanSansSC-Heavy, SourceHanSansSC;
							font-weight: 800;
							color: rgba(256, 256, 256, 0.7);
							margin-left: 12rpx;
						}
					}
					.logo {
						width: 320rpx;
						height: 240rpx;
					}
				}
			}

			.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>