Compare commits

...

2 Commits
xiao ... main

Author SHA1 Message Date
0642114ef9 Merge branch 'xiao' of https://x--mo.com:9003/gter.net/HKRentingMiniprogram 2023-06-29 14:50:59 +08:00
0ab027734f no message 2023-06-26 19:05:54 +08:00
6 changed files with 1421 additions and 2 deletions

View File

@ -23,8 +23,8 @@
"pages/circularize/circularize", "pages/circularize/circularize",
"pages/askHousing/askHousing", "pages/askHousing/askHousing",
"pages/transfer/transfer", "pages/transfer/transfer",
"pages/findingMap/findingMap" "pages/findingMap/findingMap",
"pages/placeMap/index"
], ],
"subpackages": [{ "subpackages": [{

634
pages/placeMap/index.js Normal file
View File

@ -0,0 +1,634 @@
// pages/Map/Map.js
let app = getApp()
var miucms = require('../../utils/miucms.js');
Page({
data: {
headerObj: {
person: "个人",
intermediary: "中介",
apartment: "公寓",
},
headerObjTab: "person",
windowHeight: 0, //屏幕高度
mapEnableScroll: true, //设置地图是否拖动
tabValue: "area", // area school
longitude: 113.36110, //默认定位经度
latitude: 23.12463, //默认定位纬度
coordinateObj: {}, //储存经纬度
mapScale: 11, //地图大小
showPlace: false, //显示地方详情
//公寓地区id
areaMarkerIds: [],
//公寓地区内容
areaMarkerIdsObj: {},
//公寓数据
areaMarkerList: [],
customCalloutMarkerIds: [1, 20], //按学校数据
customCalloutMarkerIdsObj: {
1: {
title: "香港中文大学",
num: 1
},
20: {
title: "香港中文",
num: 18
}
},
//按学校数据
markersList: [{
id: 20,
iconPath: "/img/lucency.png",
latitude: 23.12463,
longitude: 113.36110,
width: 0,
height: 0,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS',
},
},
{
id: 1,
latitude: 23.12893,
longitude: 113.30290,
iconPath: "/img/lucency.png",
width: "0rpx",
height: "0rpx",
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS',
},
},
],
//地区房价数据
priceList: [],
//地区房价ID
priceIdList: [15, 16, 17, 18],
//地区房价
placePriceList: {
15: {
title: "HK$ 6900"
},
16: {
title: "HK$ 7500"
},
17: {
title: "HK$ 8500"
},
18: {
title: "HK$ 9500"
},
},
//用户所选地区
selectPlace: {},
//用户所选地区价格
selectPlacePrice: {},
//地区房源详情
placeInfoList: [],
//地区弹窗
placePopBox: false,
//公寓弹窗
apartmentPopBox: false,
//用户所选公寓
apartmentObj: {},
apartmentListId: '', //公寓列表id
allPlaceListBoxWidth: 0, //当前页面地区房源宽度
scrollTopNum: 0, //记录滚动条
personListId: '', //个人地区房价id
selectGroupIndex: null,
cloneInfo: '', //复制字段
pages: 1, //页数
count: 0, //品牌数量
types: { //筛选组件-出租
data: null,
value: ''
},
money: { //金额
rent_min: 0,
rent_max: ''
},
moreCondition: { //更多
show: false,
data: {
gender: "0",
leaseterm: "0",
publish: "twomonth",
}
},
brands: { //品牌
list: [],
value: '',
obj: {}
},
roomlistings: { //楼型
list: [],
value: '',
obj: {}
},
roomtype: { //房型
list: [],
value: '',
obj: {}
},
},
touchStart() {
},
touchEnd(e) {
// console.log(e)
},
get_config() {
var that = this;
if (app.globalData.config && app.globalData.config.lists) {
this.setData({
screen_data: app.globalData.screen_data,
})
} else {
setTimeout(function () {
that.get_config()
}, 10)
}
},
// 切换学校/区域
switchTab(e) {
this.setData({
tabValue: e.currentTarget.dataset.type
})
},
showPlacePopBox() {
this.setData({
placePopBox: !this.data.placePopBox
})
},
//查看详情
publicJumps(e) {
let uniqid = e.currentTarget.dataset.uniqid
let url = e.currentTarget.dataset.url
if (url) {
wx.navigateTo({
url,
})
} else {
wx.navigateTo({
url: `/pages/irentDetail/irentDetail?uniqid=${uniqid}`,
})
}
},
//监听滚动条
scrollChange() {
this._observer = wx.createIntersectionObserver(this, {
thresholds: [1, 1],
observeAll: true
})
this._observer
.relativeTo('#apartmentView')
.observe('.pos-id', (res) => {
let num = res.intersectionRatio == 1 && res.intersectionRatio % 1 == 0 ? res.dataset.num : null
if (!num && num != 0) return
if (this.data.apartmentObj.id === this.data.areaMarkerList[num].id) return
this.setNowMarker(num)
})
},
// scrollChange(e) {
// let top = Math.floor(e.detail.scrollLeft * 100) / 100
// let scrollNum = top / this.data.allPlaceListBoxWidth
// if (e.detail.scrollLeft > this.data.scrollTopNum) { //左右滑动判断
// if (scrollNum % 1 > 0.95 || scrollNum % 1 === 0) {
// this.setNowMarker(scrollNum.toFixed(0))
// }
// } else {
// if (scrollNum % 1 <= 0.01 || scrollNum % 1 === 0) {
// this.setNowMarker(scrollNum.toFixed(0))
// }
// }
// this.setData({
// scrollTopNum: e.detail.scrollLeft
// })
// },
//设置当前房间列表id
setNowMarker(num) {
if (this.data.headerObjTab === 'person') {
this.setData({
selectPlacePrice: this.data.priceList[num],
longitude: this.data.priceList[num].longitude,
latitude: this.data.priceList[num].latitude,
})
} else if (this.data.headerObjTab === 'apartment') {
// console.log(this.data.areaMarkerIdsObj[this.data.areaMarkerList[num].id])
let obj=this.data.areaMarkerIdsObj[this.data.areaMarkerList[num].id]
obj.association.map(res=>{
this.data.areaMarkerIdsObj[res].coordinateDisplay=false
})
this.data.areaMarkerIdsObj[this.data.areaMarkerList[num].id].coordinateDisplay=true
this.setData({
areaMarkerIdsObj:this.data.areaMarkerIdsObj,
apartmentObj: this.data.areaMarkerList[num],
longitude: this.data.areaMarkerList[num].longitude,
latitude: this.data.areaMarkerList[num].latitude,
})
}
},
//聚合点
getMapContxt() {
this.mapCtx.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
})
// enableDefaultStyle 为 true 时不会触发改事件
this.mapCtx.on('markerClusterCreate', res => {
console.log('clusterCreate', res)
// const clusters = res.clusters
// const markers = clusters.map(cluster => {
// const {
// center,
// clusterId,
// markerIds
// } = cluster
// return {
// ...center,
// width: 0,
// height: 0,
// clusterId, // 必须
// label: {
// content: markerIds.length + '',
// fontSize: 20,
// width: 60,
// height: 60,
// bgColor: '#00ff00',
// borderRadius: 30,
// textAlign: 'center',
// anchorX: 0,
// anchorY: -30,
// }
// }
// })
// this.mapCtx.addMarkers({
// markers,
// clear: false,
// complete(res) {
// console.log('clusterCreate addMarkers', res)
// }
// })
})
},
callouttap(e) {
let id = e.detail.markerId;
let object = null;
if (this.data.headerObjTab === 'apartment') {
this.data.areaMarkerList.find((obj) => {
if (obj.id === id) object = obj
})
this.setData({
apartmentListId: 'Marker' + object.id,
apartmentObj: object,
})
} else if (this.data.showPlace && this.data.headerObjTab === 'person') {
this.data.priceList.find((obj) => {
if (obj.id === id) object = obj
})
this.setData({
selectPlacePrice: object,
personListId: 'Marker' + object.id
})
} else if (this.data.headerObjTab === 'person') {
this.data.markersList.find((obj) => {
if (obj.id === id) object = obj
})
this.setData({
selectPlace: object,
selectPlacePrice: this.data.selectPlacePrice.id ? this.data.selectPlacePrice : this.data.priceList[0],
coordinateObj: {
latitude: this.data.latitude,
longitude: this.data.longitude
},
showPlace: true,
latitude: object.latitude,
longitude: object.longitude
})
this.setData({
mapScale: 20,
})
//获取房价元素宽度
this.getPlaceWidth()
}
// console.log(this.data)
},
cloneBtn() {
wx.setClipboardData({
data: this.data.cloneInfo.wechat,
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data) // data
}
})
}
})
},
//筛选选中标签
submitOperations(e) {
let {
type
} = e.detail
if (type == "rent") this.submitMoney(e)
if (type == "types") this.submittype(e)
if (type == "moreCondition") this.myEventSelectSubmit(e)
if (type == 'brand') this.submitBrands(e)
if (type == 'house') this.submitRoomtype(e)
if (type == 'floor') this.submitRoomlistings(e)
},
//清空选项标签
clearSubmitOption() {
this.setData({
pages: 1
})
if (this.data.headerObjTab === 'apartment') { //公寓页面
this.getApartmentList()
} else {
}
},
// 选择房型
submitRoomtype(e) {
this.data.roomtype.value = e.detail.value || e.currentTarget.dataset.value;
this.setData({
roomtype: this.data.roomtype
})
this.clearSubmitOption()
},
// 选择楼型
submitRoomlistings(e) {
this.data.roomlistings.value = e.detail.value || e.currentTarget.dataset.value
this.setData({
roomlistings: this.data.roomlistings
})
this.clearSubmitOption()
},
// 选择品牌
submitBrands(e) {
this.data.brands.value = e.detail.value || e.currentTarget.dataset.value;
this.setData({
brands: this.data.brands
})
this.clearSubmitOption()
},
// 提交出租方式
submittype(e) {
this.data.types.value = e.detail.types || e.detail.data;
this.setData({
types: this.data.types,
selectGroupIndex: null
})
this.clearSubmitOption()
},
// 租金条件筛选提交
submitMoney(e) {
this.data.money = Object.assign({}, e.detail);
this.setData({
selectGroupIndex: null,
money: this.data.money
})
this.clearSubmitOption()
},
// 提交更多
myEventSelectSubmit(e) {
this.setData({
moreCondition: {
show: false,
data: e.detail
},
selectGroupIndex: null
})
this.clearSubmitOption()
},
//获取宽度
getPlaceWidth() {
let query = wx.createSelectorQuery();
let that = this
let type = '.pos-id'
query.select(type).boundingClientRect(function (res) {
if (!res) return
that.setData({
allPlaceListBoxWidth: res.width
})
}).exec()
// console.log(123,this.data.allPlaceListBoxWidth)
},
//数组查重
checkCoordinate(areaMarkerIdsObj,list){
// console.log(areaMarkerIdsObj,list)
let obj={}
//去重 整合相同坐标的id
list.map((res,index)=>{
if(obj[res.coordinate]){
obj[res.coordinate].push(res.id)
areaMarkerIdsObj[index+1].coordinateDisplay=false
areaMarkerIdsObj[index+1].association=obj[res.coordinate]
}else{
obj[res.coordinate]=[]
obj[res.coordinate].push(res.id)
}
})
//去掉自身id
for(let data in obj){
if(obj[data].length>1){
obj[data].map(res=>{
let dataArr=JSON.parse(JSON.stringify(obj[data]))
dataArr.splice(dataArr.indexOf(res),1)
areaMarkerIdsObj[res].association=dataArr
})
}
}
return areaMarkerIdsObj
// console.log(obj)
},
//获取房源筛选
getSelectList() {
miucms.request(`${app.globalData.baseURL}/tenement/v2/api/map/region`).then(res => {
if (res.code === 200) {
let data = res.data
//获取品牌
data.brand.forEach(item => {
item.value = item.id;
this.data.brands.obj[item.id] = item.name;
})
this.data.brands.list = [{
value: '',
name: '全部品牌'
}, ...data.brand];
//获取房型
data.roomtype.forEach(item => {
item.value = item.id;
this.data.roomtype.obj[item.id] = item.name;
})
this.data.roomtype.list = [{
value: '',
name: '全部房型'
}, ...data.roomtype];
//获取楼型
data.roomlistings.forEach(item => {
item.value = item.id;
this.data.roomlistings.obj[item.id] = item.name;
})
this.data.roomlistings.list = [{
value: '',
name: '全部楼型'
}, ...data.roomlistings];
this.setData({
types: {
data: data.type
},
brands: this.data.brands,
roomtype: this.data.roomtype,
roomlistings: this.data.roomlistings
})
}
})
},
setValue(e) {
let {
key,
value
} = e.currentTarget.dataset
if (value === 'apartment') {
this.getApartmentList()
// if (this.setData.apartmentObj) {
// this.setData({
// })
// }
}
this.setData({
[key]: value,
mapScale: 20
})
this.getPlaceWidth()
},
//地图视野变化
mapViewChange(type, causedBy) {
if (type.type === 'end' && type.causedBy === "drag") {
console.log(type.detail.centerLocation, type)
}
},
//返回选择学校/区域页面
backPerson() {
this.setData({
latitude: this.data.coordinateObj.latitude,
longitude: this.data.coordinateObj.longitude,
showPlace: false,
mapScale: 11,
})
},
//个人/中介房源列表
getHouseList() {
let data = {}
miucms.request(`${app.globalData.baseURL}/tenement/v2/api/lists`).then(res => {
console.log(res)
})
},
//获取公寓数据
getApartmentList() {
let data = {
page: this.data.pages, //当前页数
companyid: this.data.brands.value, //品牌
roomtype: this.data.roomtype.value, //房型
roomlistings: this.data.roomlistings.value,
rent_min: this.data.money.rent_min,
rent_max: this.data.money.rent_max,
limit: 100
}
miucms.request(`${app.globalData.baseURL}/tenement/v2/api/apartment`, data).then(res => {
if (res.code === 200) {
let data = res.data.data
let List = []
let arr = []
let obj = {}
if (data.length) {
let dataObj = {
iconPath: "/img/lucency.png",
width: 10,
height: 10,
// joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS',
},
}
data.map((res, index) => { //latitude longitude
List.push({
latitude: res.coordinate.split(',')[0],
longitude: res.coordinate.split(',')[1],
imageurl: res.image,
brand: res.company,
id: index + 1,
...dataObj,
...res
})
res.id = index + 1
arr.push(List[index].id)
obj[List[index].id] = {
title: 'HK$ ' + res.rentprice,
coordinateDisplay:true,//判断是否显示坐标
association:[],//相同坐标
}
})
}
obj=this.checkCoordinate(obj,List)
this.setData({
cloneInfo: res.data.contact,
count: res.data.count,
areaMarkerList: List,
areaMarkerIds: arr,
areaMarkerIdsObj: obj,
latitude: List[0] ? List[0].latitude : '',
longitude: List[0] ? List[0].longitude : '',
apartmentObj: List[0],
})
this.scrollChange()
}
})
},
onReady() {
wx.getSystemInfo({
success: (res) => {
console.log(res)
this.setData({
windowHeight: res.windowHeight
})
}
})
this.getSelectList()
this.getHouseList()
},
onLoad(options) {
// this.mapCtx = wx.createMapContext('map')
// this.mapCtx.on('markerClusterClick', res => {
// console.log('markerClusterClick', res)
// })
var that = this;
// this.getMapContxt()
this.get_config()
},
onShow() {},
onHide() {},
onUnload() {
this._observer.disconnect()
},
onReachBottom() {
},
onShareAppMessage() {
}
})

View File

@ -0,0 +1,6 @@
{
"enablePullDownRefresh": false,
"usingComponents": {
"list-operations": "/template/listOperations/listOperations"
}
}

197
pages/placeMap/index.wxml Normal file
View File

@ -0,0 +1,197 @@
<import src="../common/common" />
<view class="container" style="position:fixed;top:0;left:0;">
<view class="top-tool-box">
<view class="header-box" style="height: {{ screen_data['totalTopHeight'] }}px;">
<view class="top-tab-box" style="padding-top: {{ screen_data['statusBarHeight'] }}px;height: {{ screen_data['titleBarHeight'] }}px;box-sizing: content-box;">
<view class="back flexcenter">
<image class="back-icon" mode="heightFix" src="/img/back.png" bindtap="backPerson"></image>
</view>
<view class="header-tab top-tab-box" style="margin-top:14rpx;">
<view class="header-tab-item {{ index == headerObjTab ? 'pitch' : '' }}" wx:for="{{ headerObj }}" wx:key="index" bindtap="setValue" data-key="headerObjTab" data-value="{{ index }}">{{ item }}</view>
</view>
</view>
</view>
<view style="position: fixed;top:0;left:0;z-index: 666;width:100vw;background:#fff;" wx:if="{{headerObjTab==='apartment'&&placePopBox}}">
<view class="header-box" style="height: {{ screen_data['totalTopHeight'] }}px;">
<view class="top-tab-box" style="padding-top: {{ screen_data['statusBarHeight'] }}px;height: {{ screen_data['titleBarHeight'] }}px;box-sizing: content-box;position: relative;">
<view class="back flexcenter" style="position: absolute;">
<image class="back-icon" mode="heightFix" style="transform:rotate(270deg);" src="/img/back.png" bindtap="showPlacePopBox"></image>
</view>
<view class="place-pop-box-title">
公寓
</view>
</view>
</view>
</view>
<view class="tab-box" style="display: flex;top:{{screen_data['totalTopHeight']+100 }}rpx" wx:if="{{headerObjTab==='person'&&!showPlace}}">
<view class="tab-item flex1 flexcenter {{ tabValue == 'area' ? 'pitch' : '' }}" bindtap="switchTab" data-type='area'>
按区域
</view>
<view class="tab-item flex1 flexcenter {{ tabValue == 'school' ? 'pitch' : '' }}" bindtap="switchTab" data-type='school'>
按学校
</view>
</view>
<view wx:elif="{{headerObjTab==='person'&&showPlace}}" style="top:{{screen_data['totalTopHeight']+60}}rpx" class="tool-btn-box dis-f">
<list-operations style="width:100%;" property="{{ property }}" school="{{ school }}" types="{{ types }}" location="{{ location }}" operationstype="placeSelect" money="{{ money }}" brands="{{ brands }}" screen_data="{{ screen_data }}" roomtype="{{ roomtype }}" roomlistings="{{ roomlistings }}" bindsubmit="submitOperations"></list-operations>
</view>
<view wx:if="{{headerObjTab==='apartment'}}" class="tool-btn-box pos-r dis-f" style="z-index:999;">
<view style="position:fixed;left:0;top:{{screen_data['titleBarHeight']+screen_data['statusBarHeight']}}px;width:100vw;z-index:230;background:#fff;">
<list-operations style="width:100%;" operationstype="student" money="{{ money }}" brands="{{ brands }}" screen_data="{{ screen_data }}" roomtype="{{ roomtype }}" roomlistings="{{ roomlistings }}" bindsubmit="submitOperations"></list-operations>
</view>
<view class="place-pop-box" wx:if="{{placePopBox}}" style="height:{{windowHeight-screen_data['totalTopHeight']}}px">
<view style="height:{{screen_data['titleBarHeight']}}px">
</view>
<view style="padding:0 30rpx;">
<view class="place-information dis-f al-item">
<view style="font-weight: 650;margin:0 10rpx 0 10rpx">
{{count}}
</view>
套房源
</view>
<view wx:if="{{headerObjTab==='person'}}">
<common-list wx:for="{{ placeInfoList }}" wx:key="index" item="{{ item }}">{{ index }}</common-list>
</view>
<view class="inEnd flexcenter" wx:if="{{headerObjTab==='person'}}">到底了</view>
<template is='apartment-item' wx:if="{{headerObjTab==='apartment'&&areaMarkerList.length>0}}" wx:for="{{areaMarkerList}}" data="{{item}}" wx:key="index" data-uniqid='{{item.uniqid}}'>
</template>
<template is="empty-icon" wx:if="{{headerObjTab==='apartment'&&areaMarkerList.length===0}}">
</template>
<view wx:if="{{headerObjTab==='apartment'&&areaMarkerList.length>0}}">
<view class="dis-f jus-x al-item btm-tps-text" wx:if="{{headerObjTab==='apartment'}}">
有疑问? 来找
<image src="../../img/smiling-face.png" class="btm-tps-img" mode="" />
{{cloneInfo.nickname}}
</view>
<view class="dis-f jus-x al-item" wx:if="{{headerObjTab==='apartment'}}">
<view class="btm-tps-btn" bindtap="cloneBtn">
复制微信号
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="map">
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{headerObjTab==='apartment'?areaMarkerList:showPlace?priceList:markersList}}" scale="{{mapScale}}" style="width: 100%; height: 100%;" bindcallouttap="callouttap" enable-scroll="{{mapEnableScroll}}">
<cover-view slot="callout" style="position: relative;">
<block wx:for="{{headerObjTab==='apartment'?areaMarkerIds:showPlace?priceIdList:customCalloutMarkerIds}}" wx:key="index">
<cover-view
class="customCallout {{headerObjTab==='apartment'||showPlace?'price-box':tabValue==='school'?'':'circles'}} {{headerObjTab==='apartment'&&!areaMarkerIdsObj[item].coordinateDisplay?'dis-n':''}}"
marker-id="{{item}}">
<cover-view class="{{(showPlace&&selectPlacePrice.id===item)||apartmentObj.id===item?'check-place-box':'place-price-box'}} {{headerObjTab==='apartment'&&apartmentObj.id!=item?'apartment-text':''}}">
{{headerObjTab==='apartment'?areaMarkerIdsObj[item].title:showPlace?placePriceList[item].title :customCalloutMarkerIdsObj[item].title }}
</cover-view>
<cover-image src="../../img/downIcon.png" class="check-place-box-triangle" wx:if="{{headerObjTab==='apartment'&&apartmentObj.id===item?true:showPlace&&selectPlacePrice.id===item?true :false}}" mode="" />
<!-- <cover-view class="{{showPlace&&selectPlacePrice.id===item||apartmentObj.id===item?'check-place-box-triangle':''}}">
</cover-view> -->
<cover-view class="{{tabValue==='school'?'name':''}}" wx:if="{{headerObjTab==='apartment'?false:true}}" hidden='{{showPlace?true:false}}'>{{ customCalloutMarkerIdsObj[item].num }}套</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
<!-- bindscroll='scrollChange' -->
<view class="place-info-box">
<scroll-view scroll-x="true" style="height:380rpx" enhanced="true" id='apartmentView' paging-enabled="true" enable-flex='true' scroll-into-view="{{personListId}}" scroll-with-animation class="place-list dis-f al-item" wx:if="{{headerObjTab==='person'&&showPlace&&selectPlacePrice.id}}">
<view wx:for="{{priceList}}" wx:key="index" class="pos-id" id="{{'Marker'+item.id}}"
data-num='{{index}}' data-uniqid='{{item.uniqid}}' bindtap="publicJumps">
<view class="place-list-box">
<image src="../../img/20230609113522.png" mode="aspectFit" class="place-list-confirm-img" alt="" />
<view class="dis-f al-item">
<view class="title-tab">
整租
</view>
<view class="title">
尖沙咀地铁口旁交通生活便利靓装1房放1111111111
</view>
</view>
<view class="dis-f place-list-info-box">
<view class="dis-f place-info">
<view class="tab-text">
{{1}} · {{2}} · {{3}} · {{4}}
<view class="dis-f" style="margin-top:14rpx;">
<view class="currency">
HK$
</view>
<view class="price">
9500
</view>
<view class="interval-time">
/月
</view>
</view>
</view>
<view class="dis-f al-item" style="margin-top:16rpx;">
<img src="" alt="" class="release-info-img" />
<view class="release-info-text">
123
</view>
<view class="release-info-btn dis-f jus-x al-item">
招室友
</view>
<image src="../../img/intermediary.png" class="confirm-intermediary-img" mode="aspectFit" />
</view>
</view>
<view class="place-img">
</view>
</view>
</view>
</view>
</scroll-view>
<!-- bindscroll='scrollChange' wx:elif="{{headerObjTab==='apartment'}}" -->
<scroll-view scroll-x="true" style="height:350rpx" enhanced="true" id='apartmentView' paging-enabled="true" hidden="{{headerObjTab!=='apartment'}}" enable-flex='true' class="place-list dis-f al-item" scroll-into-view="{{apartmentListId}}" scroll-with-animation>
<view wx:for="{{areaMarkerList}}" wx:key="index" class="pos-id" id="{{'Marker'+item.id}}" data-num='{{index}}'
data-uniqid='{{item.uniqid}}' bindtap="publicJumps">
<view class="place-list-box dis-f al-item" style="padding:0;background:#000;" data-id="{{item.id}}">
<view class="apartment-img-box">
<view class="apartment-img">
<image src="{{item.image}}" class="img" mode="aspectFill" />
</view>
<view style="width:260rpx;height:186rpx;">
</view>
<view class="apartment-title-text">
{{item.brand}}
</view>
</view>
<view class="apartment-info-box">
<view class="title">
{{item.title}}
</view>
<view class="introduce">
{{item.propaganda}}
</view>
<view class="house-type">
共{{item.roomnum}}个房型
</view>
<view class="dis-f" style="margin-top:20rpx;">
<view class="currency">
HK$
</view>
<view class="price">
{{item.rentprice}}
</view>
<view class="interval-time">
/月起
</view>
</view>
</view>
</view>
</view>
<!-- -->
</scroll-view>
<!-- -->
<view class="info-box" bindtap="showPlacePopBox" wx:if="{{headerObjTab==='apartment'||headerObjTab==='person'&&showPlace}}">
<view class="dis-f jus-x al-item">
<image src="../../img/placeLogo.svg" class="img" mode="aspectFit" />
</view>
<view class="title">
共 {{count}} 个品牌公寓
</view>
</view>
</view>
<!-- 弹窗 -->
</view>

582
pages/placeMap/index.wxss Normal file
View File

@ -0,0 +1,582 @@
/* pages/placeMap/placeMap.wxss */
@import "../common/common.wxss";
page {
height: 100%;
}
.pos-id{
position: relative;
}
.pos-r {
position: relative;
}
.map-box {
display: flex;
flex: 1;
width: 100vw;
position: relative;
}
.top-tool-box{
position: absolute;
z-index: 333;
top: 0;
left: 0;
width: 100vw;
}
.top-tab-box {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.customCallout {
box-sizing: border-box;
/* background-color: #fff; */
border: 1px solid #ccc;
border-radius: 30px;
/* width: 232.5rpx; */
width: max-content;
height: 72rpx;
color: #ffffff;
display: inline-flex;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
font-size: 22rpx;
border-radius: 24rpx;
position: relative;
background-color: rgba(51, 51, 51, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
}
.circles {
width: 130rpx;
height: 130rpx;
border-radius: 65rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx;
font-size: 22rpx;
line-height: 130rpx;
flex-wrap: wrap;
}
.name {
margin-left: 25rpx;
}
.header-box {
background-color: #ffffff;
}
.header-box .back {
padding: 0 32rpx;
height: 100%;
}
.header-box .back .back-icon {
width: 12px;
height: 18px;
}
.header-box .header-tab-item {
padding: 0 24rpx;
font-size: 30rpx;
color: #555555;
}
.header-box .header-tab-item.pitch {
color: #000000;
font-weight: 650;
position: relative;
}
.header-box .header-tab-item.pitch::after {
position: absolute;
bottom: -6rpx;
left: 50%;
transform: translateX(-50%) translateY(100%);
background-color: rgba(253, 218, 85, 1);
width: 58.5rpx;
height: 6rpx;
border-radius: 58.5rpx;
content: "";
}
.map {
width: 100vw;
height: 100vh;
/* flex: 1;
max-height:90vh; */
}
.tab-box {
z-index: 1000;
position: absolute;
top: 21rpx;
left: 50%;
transform: translateX(-50%);
width: 310rpx;
height: 56rpx;
border-radius: 157.5rpx;
background-color: rgba(246, 246, 246, 1);
font-size: 24rpx;
color: #555555;
box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.407843137254902);
justify-content: space-between;
}
.tab-box .tab-item {
height: 100%;
display: flex;
align-items: center;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 26rpx;
color: #555555;
padding: 0 10rpx;
width: 176rpx;
justify-content: center;
}
.tab-box .tab-item.pitch {
background-color: rgba(242, 82, 101, 1);
border-radius: 157.5rpx;
color: #ffffff;
font-weight: 650;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.al-item {
align-items: center;
}
.tool-btn-box {
align-items: center;
justify-content: space-around;
/* position: absolute; */
/* top: 0; */
/* left: 0; */
width: 100%;
display: flex;
align-items: center;
/* z-index: 666; */
background-color: #fff;
flex-wrap: wrap;
}
.tool-btn-box .line-box {
width: 4rpx;
height: 34rpx;
background: #f2f2f2;
}
.btn-box {
align-items: center;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 32rpx;
color: #7F7F7F;
height: 110rpx;
width: 33%;
justify-content: center;
}
.down-btn-box {
width: 32rpx;
height: 32rpx;
border-radius: 16rpx;
margin-left: 20rpx;
background: rgba(229, 232, 240, 1);
justify-content: center;
align-items: center;
}
.select-true-btn {
background: #000;
}
.down-btn-box .img {
width: 16rpx;
height: 16rpx;
}
.price-box {
background: transparent;
min-width: 160rpx;
font-size: 22rpx;
color: #7F7F7F;
text-align: center;
display: flex;
justify-content: center;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-weight: 400;
padding:0 10rpx;
border:0px solid;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0);
}
.place-info-box {
position: fixed;
bottom: 0;
z-index:200;
}
.place-info-box .info-box {
width: 100vw;
/* height: 200rpx; */
padding: 20rpx 0 50rpx 0;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
border-bottom: 0px;
border-radius: 80rpx;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
-moz-box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.156862745098039);
-webkit-box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.156862745098039);
box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.156862745098039);
}
.place-info-box .info-box .img {
width: 32rpx;
height: 32rpx;
}
.place-info-box .info-box .title {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 26rpx;
color: #555555;
text-align: center;
margin-top: 20rpx;
}
.place-price-box {
width: 140rpx;
border-radius: 50rpx;
padding:15rpx 0;
font-size: 22rpx;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
position: relative;
z-index:200;
/* line-height: 50rpx; */
}
.apartment-text{
background: #fff;
border:1px solid #ccc;
}
.check-place-box {
width: 140rpx;
border-radius: 50rpx;
padding:15rpx 10rpx;
background: #000;
font-size: 22rpx;
color: #FDDF6D;
font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
position:absolute;
z-index:260;
border:1px solid transparent;
/* line-height: 50rpx; */
}
.dis-n{
display: none;
}
.check-place-box-triangle{
width: 20rpx;
height:20rpx;
object-fit: contain;
/* border-style: solid; */
/* border-color: #000 transparent transparent transparent; */
/* border-width: 10rpx; */
position: absolute;
bottom:-5rpx;
}
.place-list {
overflow-x: scroll;
white-space: nowrap;
width:100vw;
}
.place-list-box {
width: 690rpx;
border-radius: 20rpx;
padding:30rpx 20rpx;
background: #fff;
margin-left: 20rpx;
box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.5);
position: relative;
}
.place-list-box .apartment-info-box{
border-radius:0 20rpx 20rpx 20rpx;
padding:25rpx 20rpx;
background:#fff;
height:246rpx;
width: 100%;
position: absolute;
z-index:555;
top:0;
left:254rpx;
width: 442rpx;
}
.place-list-box .apartment-info-box .title{
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 32rpx;
color: #000000;
margin-left:0;
}
.place-list-box .apartment-info-box .introduce{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 22rpx;
margin-top:20rpx;
}
.place-list-box .apartment-info-box .house-type{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
color: #AAAAAA;
font-size:22rpx;
margin-top:20rpx;
}
.place-list-box .apartment-img-box{
width: 270rpx;
border-radius: 20rpx 20rpx 0 20rpx;
background:#000;
}
.place-list-box .apartment-img-box .apartment-img{
width: 270rpx;
height: 187rpx;
border-radius:20rpx 20rpx 0 20rpx;
background:#fff;
position: absolute;
top:0;
left:0;
z-index:666;
}
.place-list-box .apartment-img-box .apartment-img .img{
width:254rpx;
height:188rpx;
border-radius:20rpx 20rpx 0 20rpx;
background:#ccc;
}
.place-list-box .apartment-img-box .apartment-title-text{
height:60rpx;
width: 240rpx;
text-align: center;
line-height:60rpx;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24rpx;
color: #FDDA55;
}
.place-list-box .place-list-confirm-img{
width:140rpx;
height:140rpx;
position: absolute;
top:-8rpx;
right:-10rpx;
z-index: 666;
object-fit: contain;
}
.place-list-box .title {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 30rpx;
color: #000000;
width: 400rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
margin-left:15rpx;
}
.place-list-box .title-tab {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 26rpx;
color: #FDDF6D;
background: #000;
border-radius: 8rpx;
text-align: center;
padding: 4rpx 15rpx;
}
.place-list-box .place-list-info-box{
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.place-list-box .place-img{
width: 140rpx;
height: 163rpx;
border-radius:14rpx;
object-fit: contain;
/* margin-top:20rpx; */
background:#555555;
}
.place-list-box .place-info{
flex-direction: column;
justify-content: space-between;
height:163rpx;
}
.place-list-box .tab-text{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24rpx;
color: #555555;
}
.place-list-box .currency{
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
font-size:24rpx;
line-height:46rpx;
}
.place-list-box .price{
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 32rpx;
color: #F95D5D;
line-height:38rpx;
margin-left:10rpx;
}
.place-list-box .interval-time{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 21rpx;
color: #555555;
line-height:43rpx;
margin-left:10rpx;
}
.place-list-box .place-info .release-info-img{
width:30rpx;
height:30rpx;
border-radius:15rpx;
}
.place-list-box .place-info .release-info-text{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 26rpx;
color: #555555;
margin-left:20rpx;
}
.place-list-box .place-info .release-info-btn{
padding:0 10rpx;
height: 40rpx;
background: inherit;
background-color: rgba(242, 242, 242, 0);
box-sizing: border-box;
border-width: 1rpx;
border-style: solid;
border-color: rgba(215, 215, 215, 1);
border-radius: 23rpx;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 22rpx;
color: #555555;
margin-left:20rpx;
line-height: 40rpx;
}
.place-list-box .place-info .confirm-intermediary-img{
width:120rpx;
height:30rpx;
margin-left:30rpx;
}
.place-pop-box{
width:100vw;
height:100vh;
z-index: 220;
overflow-y: scroll;
background:#f6f6f6;
}
.place-pop-box-title{
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 35rpx;
margin:0 auto;
}
.place-pop-box .place-information{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
color: #555555;
font-style: normal;
font-size: 24rpx;
height:86rpx;
margin-top:30rpx;
}
.btm-tps-text{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 23rpx;
color: #7F7F7F;
margin-top:60rpx;
}
.btm-tps-img{
width:28rpx;
height:28rpx;
margin:0 10rpx;
}
.btm-tps-btn{
width: 280rpx;
height: 67rpx;
background: inherit;
background-color: rgba(217, 236, 255, 1);
border: none;
border-radius: 82rpx;
-moz-box-shadow: 0px 0px 16rpx rgba(98, 177, 255, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 16rpx rgba(98, 177, 255, 0.0784313725490196);
box-shadow: 0px 0px 16rpx rgba(98, 177, 255, 0.0784313725490196);
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 28rpx;
color: #62B1FF;
text-align: center;
line-height:67rpx;
margin:30rpx 0 60rpx 0;
}
.inEnd {
color: #aaaaaa;
margin: 0 auto;
font-size: 21rpx;
}

Binary file not shown.