You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
754 lines
23 KiB
754 lines
23 KiB
<template>
|
|
<view class="map-container">
|
|
<!-- #ifdef H5 -->
|
|
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude" :longitude="longitude"
|
|
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
|
|
<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
|
|
<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
|
|
</cover-view>
|
|
<!-- 一级分类 -->
|
|
<cover-view class="width100 cover-views mart15">
|
|
<scroll-view class="width90 cover-view-cont" scroll-x="true">
|
|
<cover-view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
|
|
v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
|
|
</cover-view>
|
|
</scroll-view>
|
|
<!-- 二级分类 -->
|
|
<cover-view class="width100 mart15 backcorfff cover-viewchage alijus fotct"
|
|
style="border-radius: 22px;">
|
|
<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
|
|
<cover-view class="font14 width30w fotct onchange text1"
|
|
@click="changeChilerType()">{{selectFirstName}}
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
|
|
</cover-view>
|
|
<cover-view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
|
|
</cover-view>
|
|
<cover-view class="font14 width30w">
|
|
<!-- 全部
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
<!-- //模态框 -->
|
|
<cover-view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
|
|
<cover-view class="width100 backcorfff"></cover-view>
|
|
</cover-view>
|
|
<!-- //显示内容 -->
|
|
<cover-view class="change-optiac paddbotm20" v-if="selectChiler == 1">
|
|
<scroll-view scroll-y="true" class="width100 height260">
|
|
<cover-view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
|
|
v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
|
|
<cover-view class="width90w font14"
|
|
:class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}</cover-view>
|
|
<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
|
|
v-if="selectFirst == item.id"></image>
|
|
</cover-view>
|
|
</scroll-view>
|
|
</cover-view>
|
|
<!-- 二级距离 -->
|
|
<cover-view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
|
|
<scroll-view scroll-y="true" class="width100 height260">
|
|
<cover-view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
|
|
v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
|
|
<cover-view class="width90w font14"
|
|
:class="[ distance== item.id? 'onchange' : '']">{{item.title}}</cover-view>
|
|
<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
|
|
v-if="distance == item.id"></image>
|
|
</cover-view>
|
|
</scroll-view>
|
|
</cover-view>
|
|
|
|
<!-- 未打开筛选前 -->
|
|
<cover-view class="cover-view-foot" v-if="isSelected == 1">
|
|
<cover-view class="line-view" @click="updateSelected(2)"></cover-view>
|
|
<cover-view class="paddtop10 fcor666 font13 width100" @click="updateSelected(2)">点击发现更多商户</cover-view>
|
|
<cover-view class="input-box">
|
|
<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
|
|
@click="updateSelected(2)" />
|
|
</cover-view>
|
|
</cover-view>
|
|
|
|
<!-- 打开筛选后 -->
|
|
<cover-view class="cover-view-foot-behind" v-if="isSelected == 2">
|
|
<cover-view class="line-view" @click="updateSelected(1)"></cover-view>
|
|
<cover-view class="paddtop10 fcor666 font13 width100" @click="updateSelected(1)">点击发现更多商户</cover-view>
|
|
<cover-view class="input-box">
|
|
<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
|
|
@input="getMapStore()" />
|
|
</cover-view>
|
|
<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
|
|
<cover-view v-if="marker == '' " class="mart30 fotct font14 fcor666 fotct width100">
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
|
|
</cover-view>
|
|
<cover-view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i"
|
|
@click="seeloaction(box)">
|
|
<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r"
|
|
style="max-width: 50px;min-width: 50px;">
|
|
</image>
|
|
<cover-view class="fotlt paddleft5">
|
|
<cover-view class="text2 width100 font16 fontwig6">
|
|
{{box.callout.content}}
|
|
</cover-view>
|
|
<cover-view class="height22">
|
|
<cover-view class="width70 flleft text1 font13 fcor999">
|
|
{{box.callout.address}}
|
|
</cover-view>
|
|
<cover-view class="width30 flright font13 fcor666 fotct">
|
|
<image mode="widthFix" :src="imagewxUrl+imgadres4" style="width: 10px;"></image>
|
|
{{box.distance}}km
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</scroll-view>
|
|
</cover-view>
|
|
</map>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP -->
|
|
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude" :longitude="longitude"
|
|
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
|
|
<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
|
|
<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
|
|
</cover-view>
|
|
<!-- 一级分类 -->
|
|
<view class="width100 cover-views mart15">
|
|
<scroll-view class="width90 cover-view-cont" scroll-x="true">
|
|
<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
|
|
v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 二级分类 -->
|
|
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
|
|
<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
|
|
<view class="font14 width30w fotct onchange text1" @click="changeChilerType()">{{selectFirstName}}
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
<view class="font14 width30w">
|
|
<!-- 全部
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- //模态框 -->
|
|
<view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
|
|
<view class="width100 backcorfff"></view>
|
|
</view>
|
|
<!-- //显示内容 -->
|
|
<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
|
|
<scroll-view scroll-y="true" class="width100 height260">
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
|
|
v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
|
|
<view class="width90w font14" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}
|
|
</view>
|
|
<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
|
|
v-if="selectFirst == item.id"></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 二级距离 -->
|
|
<view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
|
|
<scroll-view scroll-y="true" class="width100 height260">
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
|
|
v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
|
|
<view class="width90w font14" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}
|
|
</view>
|
|
<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
|
|
v-if="distance == item.id"></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 未打开筛选前 -->
|
|
<view class="cover-view-foot" v-if="isSelected == 1">
|
|
<view class="line-view" @click="updateSelected(2)"></view>
|
|
<view class="paddtop10 fcor666 font13 width100" @click="updateSelected(2)">点击发现更多商户</view>
|
|
<view class="input-box">
|
|
<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
|
|
@click="updateSelected(2)" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 打开筛选后 -->
|
|
<view class="cover-view-foot-behind" v-if="isSelected == 2">
|
|
<view class="line-view" @click="updateSelected(1)"></view>
|
|
<view class="paddtop10 fcor666 font13 width100" @click="updateSelected(1)">点击发现更多商户</view>
|
|
<view class="input-box">
|
|
<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
|
|
@input="getMapStore()" />
|
|
</view>
|
|
<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
|
|
<view v-if="marker == '' " class="mart30 fotct font14 fcor666 fotct width100">
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
|
|
</view>
|
|
<view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i"
|
|
@click="seeloaction(box)">
|
|
<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r"
|
|
style="max-width: 50px;min-width: 50px;">
|
|
</image>
|
|
<view class="fotlt paddleft5">
|
|
<view class="text2 width100 font16 fontwig6">
|
|
{{box.callout.content}}
|
|
</view>
|
|
<view class="height22">
|
|
<view class="width70 flleft text1 font13 fcor999">
|
|
{{box.callout.address}}
|
|
</view>
|
|
<view class="width30 flright font13 fcor666 fotct">
|
|
<image mode="widthFix" :src="imagewxUrl+imgadres4" style="width: 10px;"></image>
|
|
{{box.distance}}km
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</map>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getIndustry,
|
|
getMapStore
|
|
} from '../../../Utils/Api.js';
|
|
let app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
latitude: '', //纬度
|
|
longitude: '', //经度
|
|
scale: 13, //缩放级别
|
|
bottomData: false,
|
|
imagewxUrl: app.globalData.imageWxImg,
|
|
imgadres2: 'xiala.png',
|
|
imgadres3: 'noorder.png',
|
|
imgadres4: 'dh.png',
|
|
marker: '', //商户
|
|
typeid: 99999999, //选择分类
|
|
isSelected: 1, //是否选择下拉
|
|
selectFirst: '99999999', //筛选是否有值
|
|
selectFirstName: '全部', //筛选值名字
|
|
selectChiler: 2, // 一级子菜单筛选
|
|
selectChilerdistance: 2, // 二级子菜单筛选
|
|
goodsFirstClassList: [{
|
|
"childIndustry": null,
|
|
"createTime": 1640252815000,
|
|
"name": "全部",
|
|
"id": 99999999,
|
|
"wechatCompanyCode": "716",
|
|
"wechatName": "全部",
|
|
"ext3": null,
|
|
"parentId": 1,
|
|
"wechatSelfEmployedCode": "719",
|
|
"ext2": null,
|
|
"status": 1,
|
|
"ext1": "650"
|
|
}], //商品一级分类
|
|
goodsSendotClassList: [{
|
|
"childIndustry": null,
|
|
"createTime": 1640252998000,
|
|
"name": "全部",
|
|
"id": 99999999,
|
|
"wechatCompanyCode": "716",
|
|
"wechatName": "全部",
|
|
"ext3": null,
|
|
"parentId": 13,
|
|
"wechatSelfEmployedCode": "719",
|
|
"ext2": null,
|
|
"status": 1,
|
|
"ext1": "642"
|
|
}], //商品一级分类
|
|
distanceList: [{
|
|
id: 1,
|
|
title: '1km'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '3km'
|
|
},
|
|
{
|
|
id: 5,
|
|
title: '5km'
|
|
},
|
|
], //距离
|
|
distance: '3',
|
|
distanceName: '3km',
|
|
searchName: '', //搜索名称
|
|
typeplat: 1 //手机类型
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
// this.latitude = app.globalData.latitude;
|
|
// this.longitude = app.globalData.longitude;
|
|
this.onControltap();
|
|
},
|
|
computed: {
|
|
mapheight() {
|
|
let data = ''
|
|
if (this.bottomData) {
|
|
if (this.upTop) {
|
|
data = '50px'
|
|
} else {
|
|
data = '200px'
|
|
}
|
|
} else {
|
|
data = '100vh'
|
|
}
|
|
return data
|
|
},
|
|
coverbottom() {
|
|
let data = ''
|
|
if (this.bottomData) {
|
|
data = '20rpx'
|
|
} else {
|
|
data = '200rpx'
|
|
}
|
|
return data
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
//查询商户列表
|
|
getIndustry() {
|
|
getIndustry().then(res => {
|
|
if (res.return_code == '000000') {
|
|
for (var i = 0; i < res.return_data.length; i++) {
|
|
this.goodsFirstClassList.push(res.return_data[i]);
|
|
}
|
|
// this.typeid = res.return_data[0].id;
|
|
// this.goodsSendotClassList = res.return_data[0].childIndustry;
|
|
// this.selectFirst = res.return_data[0].childIndustry[0].id;
|
|
// this.selectFirstName = res.return_data[0].childIndustry[0].name;
|
|
let platform = uni.getSystemInfoSync().platform;
|
|
if (platform == 'android') {
|
|
this.typeplat = 2;
|
|
this.getMapStore();
|
|
}
|
|
if (platform == 'ios' || platform == 'devtools') {
|
|
this.typeplat = 1;
|
|
this.getMapStore();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//查询商户
|
|
getMapStore() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let childId = '';
|
|
if (this.selectFirst == 99999999) {
|
|
childId = '';
|
|
} else {
|
|
childId = this.selectFirst
|
|
}
|
|
let datas = {
|
|
distance: this.distance,
|
|
name: this.searchName,
|
|
type: this.typeplat,
|
|
childId: childId,
|
|
longitude: this.longitude,
|
|
latitude: this.latitude
|
|
}
|
|
getMapStore(datas).then(res => {
|
|
uni.hideLoading();
|
|
if (res.return_code == '000000') {
|
|
this.marker = res.return_data
|
|
} else {
|
|
this.marker = [];
|
|
}
|
|
})
|
|
},
|
|
//选择二级分类数据
|
|
changeFirstcont(item) {
|
|
this.selectFirst = item.id;
|
|
this.selectFirstName = item.name;
|
|
this.selectChiler = 2;
|
|
this.getMapStore();
|
|
},
|
|
//选择距离
|
|
changeDistance(item) {
|
|
this.distance = item.id;
|
|
this.distanceName = item.title;
|
|
this.selectChilerdistance = 2;
|
|
this.getMapStore();
|
|
},
|
|
//地图点击事件
|
|
markertap(e) {
|
|
// #ifdef H5
|
|
let markerId = e.detail.markerId;
|
|
for (var i = 0; i < this.marker.length; i++) {
|
|
if (markerId == this.marker[i].id) {
|
|
this.seeloaction(this.marker[i]);
|
|
}
|
|
}
|
|
// #endif
|
|
},
|
|
//地图点击事件
|
|
callouttap(e) {
|
|
// #ifdef MP
|
|
let markerId = e.markerId;
|
|
for (var i = 0; i < this.marker.length; i++) {
|
|
if (markerId == this.marker[i].id) {
|
|
this.seeloaction(this.marker[i]);
|
|
}
|
|
}
|
|
// #endif
|
|
},
|
|
|
|
postionIng() {
|
|
let that = this;
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
app.globalData.latitude = res.latitude;
|
|
app.globalData.longitude = res.longitude;
|
|
that.findByLatAndLng(res.longitude, res.latitude);
|
|
// uni.request({
|
|
// url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude +
|
|
// ',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB',
|
|
// data: {},
|
|
// success: function(res) {
|
|
// that.city = res.data.result.address_component.city.replace(/市/g,
|
|
// '');
|
|
// app.globalData.cityId = res.data.result.ad_info.adcode;
|
|
// // app.globalData.cityId = '500100';
|
|
// that.getMerchantList();
|
|
// }
|
|
// })
|
|
}
|
|
})
|
|
},
|
|
//金纬度转
|
|
findByLatAndLng(item, item1) {
|
|
let datas = {
|
|
lng: item,
|
|
lat: item1
|
|
}
|
|
findByLatAndLng(datas).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.city = res.return_data.provinceName;
|
|
app.globalData.cityName = res.return_data.provinceName;
|
|
app.globalData.qianzhuCityName = res.return_data.cityName;
|
|
app.globalData.cityId = res.return_data.regionId;
|
|
// app.globalData.cityId = '500100';
|
|
if (res.return_data.result.addressComponent.adcode) {
|
|
this.getMerchantList();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 商户列表
|
|
getMerchantList() {
|
|
let params = {
|
|
regionId: app.globalData.cityId
|
|
}
|
|
getMerchantList(params).then(res => {
|
|
if (res.return_code == '000000' && res.return_data != '') {
|
|
this.MerchantList = res.return_data;
|
|
this.showCategoryIndex = res.return_data[0].merchantName;
|
|
this.showCategoryIndexId = res.return_data[0].id;
|
|
this.pageNum = 1;
|
|
this.pageSize = 10;
|
|
this.isNoMoreData = false;
|
|
this.categoryList = [];
|
|
this.getStoreListByMerchant();
|
|
|
|
} else {
|
|
this.MerchantList = [];
|
|
uni.showToast({
|
|
title: '暂无数据',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//跳转位置
|
|
goPostion() {
|
|
uni.navigateTo({
|
|
url: '/pages/user/positioning/positioning'
|
|
})
|
|
},
|
|
//门店列表
|
|
getStoreListByMerchant() {
|
|
console.log(222);
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
if (this.isNoMoreData) {
|
|
uni.hideLoading()
|
|
return false;
|
|
}
|
|
let pagenum = this.pageNum;
|
|
let params = {
|
|
merchantId: this.showCategoryIndexId,
|
|
longitude: app.globalData.longitude,
|
|
latitude: app.globalData.latitude,
|
|
pageNum: pagenum,
|
|
pageSize: this.pageSize
|
|
|
|
}
|
|
getStoreListByMerchant(params).then(res => {
|
|
uni.hideLoading();
|
|
if (res.return_code == '000000') {
|
|
uni.hideLoading();
|
|
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
|
|
this.categoryList = this.categoryList.concat(res.return_data.list);
|
|
if (res.return_data.total == (this.pageNum * this.pageSize)) {
|
|
this.isNoMoreData = true;
|
|
}
|
|
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
|
|
} else {
|
|
this.categoryList = [];
|
|
}
|
|
})
|
|
},
|
|
// 定位点击事件
|
|
onControltap() {
|
|
uni.showLoading({
|
|
title: '定位中'
|
|
})
|
|
uni.getLocation({
|
|
geocode: true,
|
|
type: 'wgs84',
|
|
success: (res) => {
|
|
uni.hideLoading();
|
|
// console.log(res, '获取当前位置')
|
|
this.longitude = res.longitude;
|
|
this.latitude = res.latitude;
|
|
this.getIndustry();
|
|
},
|
|
fail() {
|
|
uni.hideLoading();
|
|
},
|
|
address: (res) => {
|
|
console.log('address', res)
|
|
}
|
|
});
|
|
},
|
|
//选择类型
|
|
changeType(item) {
|
|
this.typeid = item.id;
|
|
if (item.id == 99999999) {
|
|
this.goodsSendotClassList = [{
|
|
"childIndustry": null,
|
|
"createTime": 1640252998000,
|
|
"name": "全部",
|
|
"id": 99999999,
|
|
"wechatCompanyCode": "716",
|
|
"wechatName": "全部",
|
|
"ext3": null,
|
|
"parentId": 13,
|
|
"wechatSelfEmployedCode": "719",
|
|
"ext2": null,
|
|
"status": 1,
|
|
"ext1": "642"
|
|
}];
|
|
this.selectFirst = '99999999';
|
|
this.selectFirstName = '全部';
|
|
}else{
|
|
this.goodsSendotClassList = item.childIndustry;
|
|
this.selectFirst = item.childIndustry[0].id;
|
|
this.selectFirstName = item.childIndustry[0].name;
|
|
}
|
|
|
|
this.getMapStore();
|
|
},
|
|
//子菜单显示
|
|
changeChilerType() {
|
|
if (this.selectChiler == 1) {
|
|
this.selectChiler = 2;
|
|
} else {
|
|
this.selectChilerdistance = 2;
|
|
this.selectChiler = 1;
|
|
}
|
|
},
|
|
//距离显示
|
|
changeChilerdistance() {
|
|
if (this.selectChilerdistance == 1) {
|
|
this.selectChilerdistance = 2;
|
|
} else {
|
|
this.selectChiler = 2;
|
|
this.selectChilerdistance = 1;
|
|
}
|
|
|
|
},
|
|
// 是否选择下拉
|
|
updateSelected(item) {
|
|
this.isSelected = item;
|
|
},
|
|
seeloaction(item) {
|
|
// #ifdef H5
|
|
window.location.href =
|
|
`http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`;
|
|
// #endif
|
|
// #ifdef MP
|
|
uni.openLocation({
|
|
latitude: Number(item.latitude), //目的地的定位
|
|
longitude: Number(item.longitude), //目的地的定位
|
|
name: item.store_name,
|
|
address: item.address
|
|
})
|
|
// #endif
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='less' scoped>
|
|
.map-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.cover-views {
|
|
position: absolute;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.cover-view-cont {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cover-view-head {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
background-color: #fff;
|
|
display: inline-table;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
position: relative;
|
|
margin-right: 15px;
|
|
border-radius: 22px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.cover-viewchage {
|
|
height: 35px;
|
|
}
|
|
|
|
.onchange {
|
|
color: #089bf5;
|
|
}
|
|
|
|
.onclick {
|
|
background-color: #089bf5;
|
|
color: #fff;
|
|
}
|
|
|
|
.cover-view-loca {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
color: #484848;
|
|
background-color: #fff;
|
|
background-size: 60px 60px;
|
|
background-position: center center;
|
|
position: absolute;
|
|
bottom: 100px;
|
|
right: 16px;
|
|
}
|
|
|
|
.cover-image {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.cover-view-foot {
|
|
text-align: center;
|
|
height: 200rpx;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
border-radius: 18px 18px 0 0;
|
|
}
|
|
|
|
.change-cont {
|
|
position: absolute;
|
|
z-index: 99999999;
|
|
top: 100px;
|
|
background-color: #333;
|
|
width: 100%;
|
|
opacity: 0.8;
|
|
height: calc(100% - 100px);
|
|
}
|
|
|
|
.change-optiac {
|
|
position: absolute;
|
|
z-index: 99999999;
|
|
top: 100px;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
height: 260px;
|
|
}
|
|
|
|
.cover-view-foot-behind {
|
|
text-align: center;
|
|
height: calc(100% - 110px);
|
|
background-color: #fff;
|
|
position: absolute;
|
|
z-index: 999999;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
border-radius: 18px 18px 0 0;
|
|
}
|
|
}
|
|
|
|
.scoroll-cont {
|
|
height: calc(100% - 80px);
|
|
}
|
|
|
|
.line-view {
|
|
width: 10%;
|
|
margin-left: 45%;
|
|
height: 5px;
|
|
border-radius: 12px;
|
|
margin-top: 10px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.input-box {
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
margin-top: 5px;
|
|
text-align: left;
|
|
height: 70rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 22px;
|
|
position: relative;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
input {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
height: 30px;
|
|
color: #666;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.onclick {
|
|
background-color: #089bf5;
|
|
color: #fff;
|
|
}
|
|
|
|
.recontleft {
|
|
margin-left: 10px;
|
|
}
|
|
</style> |