351 lines
12 KiB
Vue
351 lines
12 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" @click="handleBack">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
|
|
</div>
|
|
<map id="myMap" :longitude="longitude" :latitude="latitude" class="map"></map>
|
|
<div class="list" :style="{transform:isMoveUp?`translateY(calc(-40vh + ${menu.bottom + 5}px))`:''}">
|
|
<div class="top">
|
|
<div class="topImg" @click="handleChangeUp">
|
|
<image class="packUp" :style="{transform:isMoveUp?'rotate(180deg)':''}" src="https://eshangtech.com/ShopICO/ahyd-BID/service/packUp.svg"></image>
|
|
</div>
|
|
<div class="search">
|
|
<div class="left">
|
|
<picker class="pick" @change="handleChangeService" :value="selectIndex" :range="array" range-key="name">
|
|
<view class="picker">
|
|
{{array[selectIndex].name?array[selectIndex].name:''}}
|
|
</view>
|
|
</picker>
|
|
<image class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/upArrow.svg"></image>
|
|
</div>
|
|
<div class="right">
|
|
<input class="searchText" v-model="searchText" confirm-type="search" @confirm="handleSearch" placeholder="搜索服务区" placeholder-style="font-size: 14px;color: #A69E9F;"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="serviceList" :style="{height:isMoveUp?`calc(100vh - 90px - ${menu.bottom + 5}px)`:''}">
|
|
<div class="serviceItem" v-for="(item,index) in serviceList" :key="index" @click="handleGoDetail(item.SERVERPART_ID)">
|
|
<div class="topItem">
|
|
<p class="title">{{item.SERVERPART_NAME }}</p>
|
|
<div class="box">
|
|
<div class="imgBox">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/phone.svg"></image>
|
|
</div>
|
|
<div class="imgBox" style="margin-right: 0px">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="distance">距您 <text class="number">{{item.SERVERPART_DISTANCE}}</text> km</p>
|
|
<div class="info">
|
|
<image class="infoIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/address.svg"></image>
|
|
<p class="address">{{item.SERVERPART_ADDRESS}}</p>
|
|
</div>
|
|
<div class="info" v-if="item.STARTDATE">
|
|
<image class="infoIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg"></image>
|
|
<p class="time">{{item.STARTDATE}}</p>
|
|
</div>
|
|
<div class="typeList">
|
|
<image class="typeItem" v-if="item.SERVERPART_TYPE" src="https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg"></image>
|
|
<image class="typeItem" v-if="item.HASMOTHER" src="https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg"></image>
|
|
<image class="typeItem" v-if="item.HASPILOTLOUNGE" src="https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg"></image>
|
|
<image class="typeItem" v-if="item.HASCHARGE" src="https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg"></image>
|
|
<image class="typeItem" v-if="item.HASGUESTROOM" src="https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg"></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
name: "index",
|
|
data(){
|
|
return {
|
|
mapCtx: {},
|
|
latitude:30.207269999999998,//维度
|
|
longitude:120.18023,//经度
|
|
menu:{},//手机参数
|
|
statusBarHeight:'',// 每个手机的状态栏高度
|
|
selectIndex:0,//服务区选择器选择的值
|
|
array:[],//服务区选择器选择的列表
|
|
serviceList:[],
|
|
searchText:'',
|
|
isMoveUp:false, //是否展开
|
|
}
|
|
},
|
|
onLoad(){
|
|
// 获取手机参数
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
console.log('this.menu',this.menu)
|
|
// 地图初始化
|
|
this.mapCtx = uni.createMapContext('myMap')
|
|
this.getServiceList()
|
|
this.getLocation()
|
|
// this.getListData()
|
|
},
|
|
methods:{
|
|
//返回上一级页面
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
//获取片区列表
|
|
async getServiceList(){
|
|
let req = {
|
|
Province_Code:'340000'
|
|
}
|
|
const data = await request.$webGet('CommercialApi/BaseInfo/GetSPRegionList',req)
|
|
console.log('data22222',data)
|
|
this.array = data.Result_Data.List
|
|
},
|
|
//选择服务区
|
|
handleChangeService(e){
|
|
console.log('e',e)
|
|
this.selectIndex = Number(e.detail.value)
|
|
let value = this.array[Number(e.detail.value)].value
|
|
this.getListData(value)
|
|
},
|
|
//搜索框触发的方法
|
|
async handleSearch(){
|
|
|
|
let req = {
|
|
longitude:this.longitude,
|
|
Province_Code:'340000',
|
|
latitude:this.latitude,
|
|
Serverpart_Name:this.searchText
|
|
}
|
|
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
|
|
console.log('data',data)
|
|
this.serviceList = data.Result_Data.List
|
|
},
|
|
//跳转相对应的服务区详情界面
|
|
handleGoDetail(id){
|
|
uni.navigateTo({
|
|
url:`/pages/map/detail?SERVERPART_ID=${id}&latitude${this.latitude}&longitude=${this.longitude}&isPicker=${false}`
|
|
})
|
|
},
|
|
async getListData(value){
|
|
let req = {
|
|
longitude:this.longitude,
|
|
Province_Code:'340000',
|
|
latitude:this.latitude,
|
|
SPRegionType_ID:value?value:this.array[this.selectIndex].value
|
|
}
|
|
console.log('req',req)
|
|
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
|
|
console.log('data',data)
|
|
this.serviceList = data.Result_Data.List
|
|
},
|
|
//点击向上移动
|
|
handleChangeUp(){
|
|
if (this.isMoveUp){
|
|
this.isMoveUp = false
|
|
}else{
|
|
this.isMoveUp = true
|
|
}
|
|
},
|
|
getLocation(){
|
|
let _this = this
|
|
uni.getFuzzyLocation({
|
|
type:'gcj02',
|
|
altitude:true,
|
|
success:function (res){
|
|
console.log('res21312',res)
|
|
this.latitude = res.latitude
|
|
this.longitude = res.latitude
|
|
console.log('this.latitude',this.latitude)
|
|
_this.getListData()
|
|
}
|
|
})
|
|
},
|
|
//添加标点
|
|
addMarkers(){
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
max-height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
.leftArrow{
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 16px;
|
|
z-index:99999999999;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.map{
|
|
width: 100%;
|
|
height: 40vh;
|
|
}
|
|
.list{
|
|
width: 100%;
|
|
height: calc(60vh + 20px);
|
|
box-sizing: border-box;
|
|
transform: translateY(-20px);
|
|
background: #F2F4F5;
|
|
.top{
|
|
width: 100%;
|
|
height: 74px;
|
|
padding: 0 16px;
|
|
border-radius: 20px 20px 0 0;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
box-shadow: 0 4px 4px 0 rgba(22,0,2,0.04);
|
|
.topImg{
|
|
display: flex;
|
|
justify-content: center;
|
|
.packUp{
|
|
width: 26px;
|
|
height: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.search{
|
|
width: 100%;
|
|
height: 36px;
|
|
background: #F2F4F5;
|
|
border-radius: 4px;
|
|
margin-top: 13px;
|
|
box-sizing: border-box;
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
.left{
|
|
width: 30%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.picker{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
.selectIcon{
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.left:after{
|
|
content:'';
|
|
width: 2px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 0;top: 0;
|
|
background: #E1DFDF;
|
|
}
|
|
.right{
|
|
margin-left: 12px;
|
|
.searchText{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.serviceList{
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
height: calc(100% - 90px);
|
|
box-sizing: border-box;
|
|
padding: 0 16px ;
|
|
overflow-y: auto;
|
|
.serviceItem{
|
|
width: 100%;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
margin-bottom: 12px;
|
|
.topItem{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
.box{
|
|
display: flex;
|
|
align-items: center;
|
|
.imgBox{
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 1px solid #F1F1F1;
|
|
overflow: hidden;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
.icon{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.distance{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
.number{
|
|
color:#D7000F;
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
.info{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
.infoIcon{
|
|
width: 12px;
|
|
height: 15px;
|
|
margin-right: 4px;
|
|
}
|
|
.address,.time{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
.typeList{
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
.typeItem{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|