<template>
|
<view class="map">
|
<!-- 头部 -->
|
<view class="container_h">
|
<view class="container_head" :style="{height: navHeight + 'px', marginTop: statusbarHeight + 'px'}">
|
<view class="container_head_input" :style="{height : height + 'px'}">
|
<uni-icons type="search" size="18" color="#999999"></uni-icons>
|
<input type="text" placeholder="你想去哪里" placeholder-style="color: #999999; font-size: 28rpx; font-weight: 500;" />
|
</view>
|
</view>
|
</view>
|
<!-- 地图 -->
|
<view class="map_box">
|
<map></map>
|
</view>
|
<!-- 底部 -->
|
<view class="map_popule">
|
<view class="map_popule_icon" @click="open">
|
<uni-icons type="top" size="20" v-if="!isOpen"></uni-icons>
|
<uni-icons type="bottom" size="20" v-if="isOpen"></uni-icons>
|
</view>
|
<view class="map_popule_text">
|
<text>当前区域商户列表</text>
|
</view>
|
<scroll-view scroll-y class="map_popule_list" v-if="isOpen">
|
<view class="map_popule_list_item" v-for="(item, index) in 1" :key="index" @click="toStroe">
|
<image src="@/static/uni.png" mode="widthFix"></image>
|
<view class="map_popule_list_item_info">
|
<view class="title">珈琲光景</view>
|
<view class="divide">
|
<uni-rate size="18" :value="5" color="#bbb" active-color="red" />
|
<text>5.0</text>
|
</view>
|
<view class="address">瑞金一路179号</view>
|
<view class="isbusiness">营业中</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
isOpen: false
|
}
|
},
|
computed: {
|
...mapState(['statusbarHeight', 'navHeight', 'height'])
|
},
|
methods: {
|
open() {
|
this.isOpen = !this.isOpen
|
},
|
toStroe() {
|
uni.navigateTo({
|
url: '/pages/storeDetails/index'
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.map {
|
width: 100%;
|
.container_h {
|
width: 100%;
|
height: auto;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 9;
|
.container_head {
|
width: 100%;
|
padding: 0 32rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
.container_head_input {
|
width: 488rpx;
|
background: rgba(255,255,255,0.5);
|
border-radius: 32rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 28rpx;
|
box-sizing: border-box;
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 28rpx;
|
font-family: PingFang SC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #000000;
|
margin-left: 12rpx;
|
}
|
}
|
}
|
}
|
.map_box {
|
width: 100vw;
|
height: 100vh;
|
map {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.map_popule {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 9999;
|
width: 100%;
|
max-height: 776rpx;
|
background-color: #ffffff;
|
border-radius: 25rpx 25rpx 0 0;
|
padding: 20rpx 32rpx;
|
box-sizing: border-box;
|
.map_popule_icon {
|
width: 100%;
|
text-align: center;
|
}
|
.map_popule_text {
|
text {
|
font-size: 36rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
}
|
.map_popule_list {
|
width: 100%;
|
height: auto;
|
max-height: 620rpx;
|
transition: .5s;
|
display: flex;
|
flex-direction: column;
|
margin-top: 24rpx;
|
.active {
|
border: 2rpx solid #D20A0A;
|
border-radius: 12rpx;
|
}
|
.map_popule_list_item {
|
padding: 20rpx;
|
background-color: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 24rpx;
|
&:first-child {
|
margin-top: 0 !important;
|
}
|
image {
|
flex-shrink: 0;
|
width: 172rpx;
|
height: 172rpx;
|
margin-right: 16rpx;
|
}
|
.map_popule_list_item_info {
|
flex: 1;
|
height: 172rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.title {
|
font-size: 28rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
.divide {
|
display: flex;
|
align-items: center;
|
text {
|
margin-left: 10rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #D20A0A;
|
}
|
}
|
.address {
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
}
|
.isbusiness {
|
font-size: 22rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #D20A0A;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
