realty/virgo.wzfrontend/yui_wx/pages/highseas/highseas.vue

<template>
	<view class="high-seas-container">
		<view class="highseas-container" v-if="!project.id">
			<navbar>
				<view class="nav">
					<view class="nav-city"
						@click="$navigateTo('/pages/city/city?activeCity='+JSON.stringify(activeCity))">
						<uni-icons class="city-icon" type="location-filled" size="16"></uni-icons>
						<text class="city-name">{{activeCity.cityName}}</text>
					</view>
					<view class="nav-search" @click="$navigateTo('/pages/search/search')"
						:style="'height:' + boundingClientRect.height + 'px;border-radius:' + boundingClientRect.height + 'px;line-height:'+(boundingClientRect.height-2)+'px'">
						搜索房源或项目
					</view>
					<view class="wx-operation"
						:style="'width:' + boundingClientRect.width + 'px;height:'+ boundingClientRect.height+'px;'">
					</view>
				</view>
			</navbar>
			<mescroll-body :top="getNavBarHeight()" bottom="20" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :down="{
				auto:false
			}">
				<view class="house-list">
					<house-item v-for="(item,index) in list" :house="item" :key="item.id"></house-item>
				</view>
			</mescroll-body>
		</view>
		<view class="project-container" v-else :style="'padding-top: ' + getNavBarHeight() + 'rpx;'">
			<view class="project-box">
				<view class="project-item">
					<view class="project-title">
						<view class="title-line"></view>
						<view class="title-label">房源分析</view>
					</view>
					<view class="project-content">
						<view class="air-item">
							<view class="test-item">
								<view class="name">总面积(㎡)</view>
								<view class="number">120</view>
							</view>
							<view class="line"></view>
							<view class="test-item">
								<view class="name">已租面积(㎡)</view>
								<view class="number">120</view>
							</view>
							<view class="line"></view>
							<view class="test-item">
								<view class="name">剩余面积(㎡)</view>
								<view class="number">120</view>
							</view>
						</view>
						<view class="air-item">
							<view class="test-item">
								<view class="name">总房源(个)</view>
								<view class="number">64</view>
							</view>
							<view class="line"></view>
							<view class="test-item">
								<view class="name">已租房源(个)</view>
								<view class="number">63</view>
							</view>
							<view class="line"></view>
							<view class="test-item">
								<view class="name">剩余房源(个)</view>
								<view class="number">1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/common/navbar.vue";
	import houseItem from "@/components/house/houseItem.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getOpenHouseListByPage
	} from '@/request/api/house.js'
	import city from '@/components/city-select/citys.js';
	const systemInfo = uni.getSystemInfoSync();
	const fontSize = systemInfo.platform === 'ios' ? 26 : 28; // 根据不同平台设置
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				boundingClientRect: {},
				list: [],
				activeCity: {
					cityName: '',
					cityCode: ''
				},
				coordinates: '',
				project: {},
				fontSize: fontSize
			}
		},
		onShow() {
			this.project = this.$store.getters.project;
			// #ifdef MP-WEIXIN
			this.boundingClientRect = wx.getMenuButtonBoundingClientRect();
			// #endif
		},
		onLoad() {
			if (!this.$store.getters.project.id) {
				uni.$on('changeCity', data => {
					this.activeCity = data;
					this.$store.dispatch('app/changeActiveCity', this.activeCity);
					uni.setStorageSync('vuex_state', this.$store.state);
					this.mescroll.resetUpScroll();
				})
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						this.coordinates = res.longitude + ',' + res.latitude;
						this.$store.dispatch('app/changeCoordinates', this.coordinates);
						uni.setStorageSync('vuex_state', this.$store.state);
						this.getLocation();
					},
					fail: () => {
						this.coordinates = this.$store.getters.coordinates;
						this.getLocation();
					}
				});
			}
		},
		methods: {
			getLocation() {
				let coordinates = this.coordinates.split(',');
				uni.request({
					url: "https://api.tianditu.gov.cn/geocoder?postStr={'lon':" + coordinates[0] + ",'lat':" +
						coordinates[1] + ",'ver':1}&type=geocode&tk=72632adad893994a0450b55949c8a8fc", // 服务器url
					method: 'GET', // 请求方法，默认为GET
					success: (res) => {
						if (res.statusCode === 200) {
							let data = res.data;
							if (data.msg == 'ok') {
								if (!data.result || !data.result.addressComponent || !data.result
									.addressComponent.city) {
									this.activeCity = this.$store.getters.activeCity;
									this.mescroll.resetUpScroll();
									return;
								}
								let nowCity = data.result.addressComponent.city.replace('市', '');
								let arr = city.filter(node => node.cityName.replace('市', '') == nowCity);
								this.activeCity = arr[0]
								this.$store.dispatch('app/changeActiveCity', this.activeCity);
								uni.setStorageSync('vuex_state', this.$store.state);
								this.mescroll.resetUpScroll();
							} else {
								this.activeCity = this.$store.getters.activeCity;
								this.mescroll.resetUpScroll();
							}
						} else {
							this.activeCity = this.$store.getters.activeCity;
							this.mescroll.resetUpScroll();
						}
					},
					fail: () => {
						this.activeCity = this.$store.getters.activeCity;
						this.mescroll.resetUpScroll();
					}
				});
			},
			// 获取状态栏高度
			geStatusBarHeight() {
				return uni.getSystemInfoSync()['statusBarHeight']
			},
			// 获取导航栏高度
			getNavBarHeight() {
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
				let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()[
					'statusBarHeight']) * 2 + 4
				// #endif
				// #ifdef APP-PLUS || H5
				let navbarHeight = 44
				// #endif
				return (navbarHeight + this.geStatusBarHeight()) * 2;
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				if (!this.coordinates) return this.mescroll.endErr();
				getOpenHouseListByPage({
					currPage: page.num,
					pageSize: 10,
					coordinates: this.coordinates,
					addressCode: this.activeCity.cityCode
				}).then(res => {
					if (res.code === 200) {
						this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.data.dataList); //追加新数据
					} else {
						this.mescroll.endErr();
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}
		},
		components: {
			navbar,
			houseItem
		}
	}
</script>

<style lang="scss">
	.project-container {
		.project-box {
			background: #fff;
		}

		.project-item {
			padding: 30rpx;

			.project-title {
				display: flex;
				align-items: center;
			}

			.title-line {
				width: 18rpx;
				height: 64rpx;
				background: $uni-primary;
				border-radius: 18rpx;
			}

			.title-label {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
			}

			.air-item {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.test-item {
					flex: 1;
					width: 0;
					overflow: hidden;
					text-align: center;
					position: relative;
				}

				.name {
					font-size: 24rpx;
					margin-bottom: 8rpx;
					line-height: 36rpx;
					color: $uni-secondary-color;
				}

				.number {
					font-size: 18px;
					color: $uni-primary;
				}

				.line {
					height: 32rpx;
					width: 2rpx;
					background: $uni-border-1;
				}
			}

		}
	}

	.high-seas-container {
		.nav {
			height: 100%;
			background: #fff;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.nav-city {
				height: 50rpx;
				max-width: 160rpx;
				min-width: 120rpx;
				border-radius: 50rpx;
				border: 1px solid $uni-primary;
				margin-left: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-bottom: 4rpx;

				.city-icon {
					margin-left: 10rpx;
					margin-top: 4rpx;

					.uni-icons {
						color: $uni-primary !important;
					}
				}

				.city-name {
					color: $uni-primary;
					font-size: 24rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding: 0 20rpx 0 6rpx;
				}
			}

			.nav-search {
				flex: 1;
				width: 0;
				border: 1px solid $uni-border-1;
				line-height: 1;
				padding-left: 30rpx;
				color: $uni-secondary-color;
				margin: 0 20rpx;
				box-sizing: border-box;
				margin-bottom: 4rpx;
				font-weight: 200;
				height: 64rpx;
				border-radius: 64rpx;
				line-height: 60rpx;
			}

			.wx-operation {
				margin-right: 8px;
				margin-bottom: 4rpx;
			}
		}

		.house-list {
			padding: 30rpx;
		}
	}
</style>