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

<template>
	<view class="project-detail">
		<swiper class="swiper" circular :indicator-dots="true">
			<swiper-item>
				<image class="image"
					src="https://assets.api.uizard.io/api/cdn/stream/0ba939e8-082b-42f9-a314-be3e195b3b25.png"
					mode="aspectFill">
				</image>
			</swiper-item>
			<swiper-item>
				<image class="image"
					src="https://assets.api.uizard.io/api/cdn/stream/0ba939e8-082b-42f9-a314-be3e195b3b25.png"
					mode="aspectFill">
				</image>
			</swiper-item>
			<swiper-item>
				<image class="image"
					src="https://assets.api.uizard.io/api/cdn/stream/0ba939e8-082b-42f9-a314-be3e195b3b25.png"
					mode="aspectFill">
				</image>
			</swiper-item>
		</swiper>
		<view class="project-title">
			<view class="project-name">维绿大厦项目</view>
			<view class="project-label">距离您2km</view>
			<uni-icons class="wx-icon" type="weixin" size="38" color="#43b156"></uni-icons>
		</view>
		<view class="project-label project-article">
			维绿大厦位于武进区，交通便利，环境优美，周围公园便于锻炼。
		</view>
		<view class="project-content">
			<view class="content-title">地理位置</view>
			<view class="content-map">
				<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
			</view>
			<view class="content-title">配套设施</view>
			<view class="content-device">
				<view class="device-item">
					<uni-icons class="device-icon" custom-prefix="iconfont" type="icon-gongyuan" size="16"></uni-icons>
					<text class="device-label">公园环境</text>
				</view>
				<view class="device-item">
					<uni-icons class="device-icon" custom-prefix="iconfont" type="icon-jiaotong" size="18"></uni-icons>
					<text class="device-label">交通便利</text>
				</view>
				<view class="device-item">
					<uni-icons class="device-icon" custom-prefix="iconfont" type="icon-tubiao_-" size="18"></uni-icons>
					<text class="device-label">医疗完善</text>
				</view>
				<view class="device-item">
					<uni-icons class="device-icon" custom-prefix="iconfont" type="icon-wifi" size="16"></uni-icons>
					<text class="device-label">免费wifi</text>
				</view>
				<view class="device-item">
					<uni-icons class="device-icon" custom-prefix="iconfont" type="icon-zhishiku" size="16"></uni-icons>
					<text class="device-label">幼儿教育</text>
				</view>
				<view class="device-item">
					<uni-icons class="device-icon" custom-prefix="iconfont" type="icon-gouwu" size="18"></uni-icons>
					<text class="device-label">便捷购物</text>
				</view>
			</view>
			<view class="content-title">房源列表</view>
			<view class="house-list">
				<house-items v-for="(item,index) in list" :house="item" :key="item.id"></house-items>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOpenHouseListByPage
	} from '@/request/api/house.js'
	import houseItems from "@/components/house/houseItems.vue";
	export default {
		data() {
			return {
				latitude: 27.973361,
				longitude: 120.658992,
				list: []
			}
		},
		onLoad(body) {
			console.log(body);
			this.init();
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);
			this.addMarkers();
		},
		components: {
			houseItems
		},
		methods: {
			init() {
				getOpenHouseListByPage({
					currPage: 1,
					pageSize: 10
				}).then(res => {
					if (res.code === 200) {
						this.list = this.list.concat(res.data.dataList); //追加新数据
					}
				})
			},
			addMarkers() {
				const positions = [{
					latitude: 23.099994,
					longitude: 113.324520,
				}]

				const markers = []

				positions.forEach((p, i) => {
					console.log(i)
					markers.push(
						Object.assign({}, {
							id: i + 1,
							width: 50,
							height: 50,
							joinCluster: true, // 指定了该参数才会参与聚合
						}, p)
					)
				})
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.project-detail {
		background: #fff;
		padding-bottom: 60rpx;

		.swiper {
			height: 400rpx;

			.image {
				width: 100%;
				height: 100%;
			}
		}

		.project-label {
			font-size: 24rpx;
			color: $uni-secondary-color;
			font-weight: 300;

		}

		.project-article {
			font-size: 28rpx;
			padding: 0 30rpx;
		}

		.project-title {
			padding: 40rpx 130rpx 30rpx 30rpx;
			position: relative;

			.project-name {
				font-size: 36rpx;
				font-weight: 500;
			}

			.project-label {
				margin-top: 6rpx;
			}

			.wx-icon {
				position: absolute;
				top: 0;
				right: 30rpx;
				transform: translateY(50%);
			}
		}

		.content-map {
			width: 100%;
			height: 360rpx;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;

			.map {
				flex: 1;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.project-content {
			padding: 0 30rpx;
			box-sizing: border-box;

			.content-title {
				font-size: 32rpx;
				font-weight: 500;
				margin: 30rpx 0;
			}

			.content-device {
				display: flex;
				flex-wrap: wrap;

				.device-item {
					width: 50%;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.device-label {
						flex: 1;
						width: 0;
						color: $uni-secondary-color;
						font-weight: 200;
						margin-left: 10rpx;
					}

					.device-icon {
						color: $uni-base-color;
					}
				}
			}
		}
	}
</style>