396316021
/
warm_man
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

地图打点

1.0
396316021 2 years ago
parent
89d0b5b2f1
commit
13f0e4a59e
3 changed files with 637 additions and 451 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      components/FooterNav/index.vue
  2. 268
      pages/Index/components/ShopPage/index.vue
  3. 45
      pages/Index/index.vue

53
components/FooterNav/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<view class="footer-nav row">
<view class="nav-item col-3 row" v-for="(item,index) in buttonGroup" @click="commitFootCheck(item)">
<view class="nav-item col-3 row" v-for="(item,index) in button" @click="commitFootCheck(item)">
<view class="nav-ico col-12">
<image mode="heightFix" class="img" :src="item.image+((item.name === footCheck)?'-active':'')+'.png'"/>
</view>
@ -16,63 +16,38 @@
import {
imghost
} from '@/config/host.js'
import api from "@/utils/functions";
export default {
props: {},
props: {
button:{
type:Object,
default:[],
}
},
data() {
return {
footCheck: 'home',
title: 'Hello',
loading: true,
buttonGroup: [{
image: imghost + "/static/image/foot-1",
name: 'home',
title: '暖新人',
},
{
image: imghost + "/static/image/foot-2",
name: 'order',
title: '暖新活动',
},
{
image: imghost + "/static/image/foot-3",
name: 'shop',
title: '暖新商城',
},
{
image: imghost + "/static/image/foot-4",
name: 'user',
title: '我的',
},
],
marginTop:0,
}
},
onLoad() {
},
methods: {
commitFootCheck(item) {
let that = this;
if (item.name === 'order' || item.name === 'chat') {
this.$refs.uToast.show({
type: 'default',
message: "暂未开放，敬请期待",
})
return false;
if(item.name !== 'disabled'){
that.footCheck = item.name;
}
this.$store.commit('footCheck', item.name);
this.$store.commit('title', item.title);
that.$emit('change',item)
},
isFootCheck() {
// return this.;
}
},
watch: {
"$store.state.footCheck": {
handler(newVal, oldVal) {
this.footCheck = newVal;
}
}
}
}
</script>

268
pages/Index/components/ShopPage/index.vue
Unescape View File

@ -16,13 +16,18 @@
@change="tabsChange"
></u-tabs>
</u-col>
<u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:((tabCheck === 'item')?'0 0':'0 26rpx'),boxSizing:'border-box'}">
<u-col
:custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:((tabCheck === 'item')?'0 0':'0 26rpx'),boxSizing:'border-box'}">
<view class="screen-container row">
<view class="screen-search col-12" :style="{width:'100%',display:(tabCheck === 'room'?'flex':'none')}">
<u-input @blur="getRoomList(true)" v-model="pages.keyword" shape="circle" placeholder="小区/商圈/地铁站" prefixIcon="search" prefix-icon-style="font-size:32rpx;" custom-style="background-color:#F5F5F6;"></u-input>
<u-input @blur="getRoomList(true)" v-model="pages.keyword" shape="circle" placeholder="小区/商圈/地铁站"
prefixIcon="search" prefix-icon-style="font-size:32rpx;"
custom-style="background-color:#F5F5F6;"></u-input>
</view>
<view class="screen-search col-12" :style="{width:'100%',display:(tabCheck === 'item'?'flex':'none')}">
<u-input @blur="getItemList(true)" v-model="pagesItem.keyword" shape="circle" placeholder="面膜" prefixIcon="search" prefix-icon-style="font-size:32rpx;" custom-style="background-color:#F5F5F6;"></u-input>
<u-input @blur="getItemList(true)" v-model="pagesItem.keyword" shape="circle" placeholder="面膜"
prefixIcon="search" prefix-icon-style="font-size:32rpx;"
custom-style="background-color:#F5F5F6;"></u-input>
</view>
<view :style="{width:'100%',display:(tabCheck === 'room'?'flex':'none')}">
<view class="row" style="justify-content: space-between;margin-top:10rpx;">
@ -49,7 +54,8 @@
<view class="screen-type">
<view class="screen-type-button row " @click="houseShow = true">
<view class="button-text">
<u-text :bold="(pages.hall_number!==''||pages.bedroom_number!=='')" text="户型" size="28" color="#020B18"></u-text>
<u-text :bold="(pages.hall_number!==''||pages.bedroom_number!=='')" text="户型" size="28"
color="#020B18"></u-text>
</view>
<view class="button-icon">
<u-icon name="arrow-down-fill" size="12"></u-icon>
@ -59,7 +65,8 @@
<view class="screen-type">
<view class="screen-type-button row " @click="priceShow = true">
<view class="button-text">
<u-text :bold="(pages.min_price!==''||pages.max_price!=='')" text="租金" size="28" color="#020B18"></u-text>
<u-text :bold="(pages.min_price!==''||pages.max_price!=='')" text="租金" size="28"
color="#020B18"></u-text>
</view>
<view class="button-icon">
<u-icon name="arrow-down-fill" size="12"></u-icon>
@ -86,7 +93,27 @@
<view class="map-container" :style="{display:(tabCheck === 'room'?'flex':'none')}">
<view class="top-map" :style="{marginTop:size.height+'px'}">
<view id="map"></view>
<view id="map" class="map">
<map id="shopMap" style="width:100%;height:1000rpx;" class="map" :show-location="true" :latitude="lat"
:longitude="lng" @markertap="markerTap" @tap="mapTap">
</map>
</view>
</view>
<view id="popMap" class="popMap row " v-if="popMapShow">
<view class="pop-container row">
<view class="title row">
<view class="value"><u-text text="北新国际二期" color="#020B18" size="32"></u-text></view>
<view class="button"><u-image mode="widthFix" width="=50" height="50"></u-image></view>
</view>
<view class="address row">
<view class="value"><u-text text="成都市新都区互惠大道158号" color="#AFB5BE" size="28"></u-text></view>
<view class="button"><u-image mode="widthFix" width="=50" height="50"></u-image></view>
</view>
<view class="pop-add"></view>
</view>
</view>
</view>
@ -256,8 +283,10 @@
</view>
<u-loadmore :custom-style="{display:(tabCheck === 'room'?'flex':'none')}" :status="status" fontSize="28" marginBottom="30" marginTop="30" @loadmore="getRoomList()"/>
<u-loadmore :custom-style="{display:(tabCheck === 'item'?'flex':'none')}" :status="statusItem" fontSize="28" marginBottom="30" marginTop="30" @loadmore="getItemList()"/>
<u-loadmore :custom-style="{display:(tabCheck === 'room'?'flex':'none')}" :status="status" fontSize="28"
marginBottom="30" marginTop="30" @loadmore="getRoomList()"/>
<u-loadmore :custom-style="{display:(tabCheck === 'item'?'flex':'none')}" :status="statusItem" fontSize="28"
marginBottom="30" marginTop="30" @loadmore="getItemList()"/>
<u-picker :show="streetShow"
:columns="[streetColumns]"
keyName="name"
@ -275,7 +304,8 @@
:show="houseShow"
@close="houseShow = false"
@open="open">
<u-row custom-style="min-height:200rpx;padding:50rpx 30rpx;justify-content: center;flex-wrap:wrap;align-items: center;">
<u-row
custom-style="min-height:200rpx;padding:50rpx 30rpx;justify-content: center;flex-wrap:wrap;align-items: center;">
<u-col :span="6">
<u-text text="厅数量" color="#020b18" size="28" custom-style="margin-bottom:20rpx;"></u-text>
<u-number-box buttonSize="50" inputWidth="70" :integer="true" v-model="pages.hall_number"></u-number-box>
@ -294,29 +324,33 @@
:show="priceShow"
@close="priceShow = false"
@open="open">
<u-row custom-style="min-height:200rpx;padding:50rpx 30rpx;justify-content: center;flex-wrap:wrap;align-items: center;">
<u-row
custom-style="min-height:200rpx;padding:50rpx 30rpx;justify-content: center;flex-wrap:wrap;align-items: center;">
<u-col :span="6">
<u-text text="最小价格" color="#020b18" size="28" custom-style="margin-bottom:20rpx;"></u-text><u-number-box buttonSize="50" inputWidth="70" :integer="true" v-model="pages.min_price" @change="valChange"></u-number-box>
<u-text text="最小价格" color="#020b18" size="28" custom-style="margin-bottom:20rpx;"></u-text>
<u-number-box buttonSize="50" inputWidth="70" :integer="true" v-model="pages.min_price"
@change="valChange"></u-number-box>
</u-col>
<u-col :span="6">
<u-text text="最大价格" color="#020b18" size="28" custom-style="margin-bottom:20rpx;"></u-text><u-number-box buttonSize="50" inputWidth="70" :integer="true" v-model="pages.max_price" @change="valChange"></u-number-box>
<u-text text="最大价格" color="#020b18" size="28" custom-style="margin-bottom:20rpx;"></u-text>
<u-number-box buttonSize="50" inputWidth="70" :integer="true" v-model="pages.max_price"
@change="valChange"></u-number-box>
</u-col>
<u-col :span="12" custom-style="margin-top:30rpx;">
<u-button type="warning" text="确定" @click="selectPrice"></u-button>
</u-col>
</u-row>
</u-popup>
</template>
<script>
import api from "@/utils/functions.js";
import {goodsList, goodsType, roomList, streetList} from "@/api/shop";
import MzCard from "@/components/MzCard/index.vue";
const img = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png';
export default {
computed: {
},
computed: {},
components: {
MzCard,
},
@ -335,36 +369,7 @@
name: '商品兑换',
id: 'item'
},],
listItem:[
{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},{
name: '公寓出租',
id:'room'
},
],
listItem: [],
tabCheck: 'room',
show: false,
title: '暖新商城',
@ -409,6 +414,10 @@
],
houseColumns: [],
priceColumns: [],
lng: 113.324520,
lat: 23.099994,
mapContext:{},
popMapShow:false,
}
},
onLoad() {
@ -417,10 +426,19 @@
},
onReady() {
this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
},
methods: {
// store.
getLocal() {
uni.getLocation({
type: 'wgs84',
success: function (res) {
this.lng = res.longitude;
this.lat = res.latitude;
}
});
},
tabsChange(e) {
console.log(e)
this.tabCheck = e.id
@ -471,7 +489,8 @@
changeListItem(e) {
this[e.name + 'Item'].push(e.value)
},
selectType(){},
selectType() {
},
getStreet() {
streetList({}).then(res => {
this.streetColumns = res.data;
@ -514,6 +533,69 @@
url: url
})
},
addMarkers() {
const positions = [
{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}
]
const markers = []
positions.forEach((p, i) => {
console.log(i)
markers.push(
Object.assign({}, {
id: i + 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
}, p)
)
})
this.mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
this.mapContext.addCustomLayer({
layerId:'popMap',
success:(res => {
console.log(res)
})
})
},
markerTap(e) {
// let that = this
// var id = e.markerId;
//页面数据逻辑
//根据项目调用请求方法或uni.request方法
//弹框控制与<uni-popup ref="popup" type="bottom">对应
// this.$refs.popup.open('bottom')
this.popMapShow = true;
this.mapContext.moveToLocation({
latitude: 23.099994,
longitude: 113.324520,
})
},
mapTap(){
this.popMapShow = false;
}
},
onPageScroll(res) {
@ -526,6 +608,24 @@
this.getItemList();
this.getStreet();
this.getGoodsType();
this.getLocal();
this.mapContext = uni.createMapContext("shopMap", this);
// // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
this.mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});
this.addMarkers();
},
}
</script>
@ -535,37 +635,45 @@
box-sizing: border-box;
width: 100%;
}
.body-background {
background: {
color: #F5F5F6;
}
}
.screen-type-button {
justify-content: space-between;
//border:2rpx solid #eee;
align-items: center;
//padding:12rpx 24rpx;
border-radius: 10rpx;
.button-text {
margin-right: 10rpx;
}
}
.screen-date-button {
justify-content: space-between;
border: 2rpx solid #eee;
align-items: center;
padding: 12rpx 24rpx;
border-radius: 10rpx;
.button-date {
//margin-right:50rpx;
}
}
.screen-button-group {
justify-content: flex-start;
.screen-button + .screen-button {
margin-left: 16rpx;
}
}
.screen-body {
position: fixed;
top: 91px;
@ -581,15 +689,18 @@
color: transparent;
}
padding: 16rpx 26rpx;
&.pad {
padding: 0rpx 26rpx 16rpx 26rpx;
position: sticky;
background: #fff;
.screen-container {
margin-bottom: 0;
}
}
.screen-container {
position: relative;
opacity: 1;
@ -598,9 +709,11 @@
}
}
.item-screen {
}
@keyframes show {
0% {
display: block;
@ -615,24 +728,28 @@
.show {
animation: show .5s;
}
.screen-search {
padding-bottom: 16rpx;
}
.top-map {
width: 100%;
height:1000rpx;
}
#map {
width: 100%;
height:100%;
height: 1000rpx;
background-color: gray;
}
.room-container {
width: 100%;
box-sizing: border-box;
background: rgba(245, 245, 246, 1);
border-radius: 20rpx 20rpx 0 0;
padding: 24rpx 0;
&.item-container {
padding: 0rpx 0;
background: none;
@ -645,23 +762,29 @@
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 16rpx;
.waterfall-item-body {
padding: 18rpx 16rpx;
.title {
margin-bottom: 12rpx;
}
.ext-container {
margin-bottom: 8rpx;
font-size: 28rpx;
font-weight: 400;
color: #AFB5BE;
.street {
color: #178AF2;
margin-left: auto;
}
}
.tags {
margin-bottom: 10rpx;
.tag {
font-size: 24rpx;
color: #AFB5BE;
@ -675,7 +798,52 @@
}
}
}
.item-screen {
background-color: #fff;
}
#map,.map{
width: 100%;
height:1000rpx;
}
#popMap,.popMap{
position: absolute;
z-index: 9999;
width:100%;
left:0;
justify-content: center;
.pop-container{
position: relative;
background:{
color:#fff;
};
width:550rpx;
border-radius: 10rpx;
padding:26rpx;
.title{
justify-content: space-between;
margin-bottom:18rpx;
}
.address{
justify-content: space-between;
}
.pop-add{
position: absolute;
bottom:-15rpx;
left:20%;
width:30rpx;
height:30rpx;
transform: rotateZ(45deg);
z-index: -1;
background:{
color:#fff;
}
}
}
}
.map-container{
position: relative;
justify-content: center;
align-items: center;
}
</style>

45
pages/Index/index.vue
Unescape View File

@ -25,10 +25,12 @@
@change="change1"
>
<FooterNav style="width:100%;"></FooterNav>
<FooterNav :button="buttonGroup" style="width:100%;" @change="footSelect"></FooterNav>
</u-tabbar>
<u-modal :show="show" title="登录" content="当前未登录是否前往登录" @confirm="userLogin" @cancel="this.show = false;"
:closeOnClickOverlay="true" showCancelButton></u-modal>
<u-notify ref="uNotify" message="Hi uview-plus"></u-notify>
</template>
<script>
@ -56,21 +58,62 @@
},
data() {
return {
marginTop:0,
value1: 0,
footCheck: 'home',
show: false,
title: '标题',
buttonGroup:[{
image: imghost + "/static/image/foot-1",
name: 'home',
title: '暖新人',
},
{
image: imghost + "/static/image/foot-2",
name: 'disabled',
title: '暖新活动',
},
{
image: imghost + "/static/image/foot-3",
name: 'shop',
title: '暖新商城',
},
{
image: imghost + "/static/image/foot-4",
name: 'user',
title: '我的',
},],
}
},
onLoad() {
},
onReady() {
let that = this;
// let height = api.wxSystemInfo().system.windowHeight
this.marginTop = (uni.$u.getPx(44) + uni.$u.sys().statusBarHeight)
},
onReachBottom() {
if(this.footCheck === 'shop'){
this.$refs.shop.getRoomList();
}
},
methods: {
footSelect(item){
if(item.name === 'disabled'){
this.$refs.uNotify.show({
top: this.marginTop+'px',
type: 'warning',
message: '暂未开放,敬请期待',
duration: 1000 * 5,
fontSize: 32,
safeAreaInsetTop:false
})
return false;
}
this.footCheck = item.name;
this.title = item.title;
},
change1(e) {
this.value1=e
},

Write Preview
Loading…
Cancel
Save