|
@@ -0,0 +1,233 @@
|
|
|
+<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>
|