yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.修改商户的地图可视化

Browse Source
dev
杨杰 2 years ago
parent 14fcb61ffe
commit 850903d2f1
3 changed files with 115 additions and 163 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      Utils/Api.js
  2. 269
      pages/tabBar/category/category.vue
  3. BIN
      static/img/changed.png

9
Utils/Api.js
Unescape View File

@ -139,7 +139,14 @@ export const getOrderById = params => {
//获取商户列表 //获取商户列表
export const getMerchantList = params => { export const getMerchantList = params => {
return POST('GET', `${base}/highMerchantStore/getMerchantList`, params).then(res => res.data); return POST('GET', `${base}/highMerchantStore/getMerchantList`, params).then(res => res.data);
} }
//查询新的地图商户
export const getIndustry = params => {
return POST('GET', `${base}/common/getIndustry`, params).then(res => res.data);
}
export const getMapStore = params => {
return POST('GET', `${base}/common/getMapStore`, params).then(res => res.data);
}
//首页获取门店 //首页获取门店
export const getStoreListByMerchant = params => { export const getStoreListByMerchant = params => {
return POST('GET', `${base}/highMerchantStore/getStoreListByMerchant`, params).then(res => res.data); return POST('GET', `${base}/highMerchantStore/getStoreListByMerchant`, params).then(res => res.data);

269
pages/tabBar/category/category.vue
Unescape View File

@ -12,15 +12,16 @@
<view class="width100 cover-views mart15"> <view class="width100 cover-views mart15">
<scroll-view class="width90 cover-view-cont" scroll-x="true"> <scroll-view class="width90 cover-view-cont" scroll-x="true">
<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']" <view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
v-for="(item,index) in marker" :key="index" @click="changeType(item)">全部全部{{index}}</view> v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
</view>
</scroll-view> </scroll-view>
<!-- 二级分类 --> <!-- 二级分类 -->
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;"> <view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']" <!-- :class="[selectFirst == 1? 'onchange' : '']" -->
@click="changeChilerType()">全部 <view class="font14 width30w onchange text1" @click="changeChilerType()">{{selectFirstName}}
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> <image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
</view> </view>
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']">全部 <view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> <image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
</view> </view>
<view class="font14 width30w"> <view class="font14 width30w">
@ -36,33 +37,22 @@
<!-- //显示内容 --> <!-- //显示内容 -->
<view class="change-optiac paddbotm20" v-if="selectChiler == 1"> <view class="change-optiac paddbotm20" v-if="selectChiler == 1">
<scroll-view scroll-y="true" class="width100 height260"> <scroll-view scroll-y="true" class="width100 height260">
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> <view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
<view class="width90w" :class="[selectFirst == 1? 'onchange' : '']">发生地方是发生地方</view> v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> <view class="width90w" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}</view>
</view> <image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> v-if="selectFirst == item.id"></image>
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view> </view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> </scroll-view>
<view class="width90w">发生地方是发生地方</view> </view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> <!-- 二级距离 -->
</view> <view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> <scroll-view scroll-y="true" class="width100 height260">
<view class="width90w">发生地方是发生地方</view> <view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
<view class="width90w" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}</view>
<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
v-if="distance == item"></image>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -72,7 +62,7 @@
<view class="line-view"></view> <view class="line-view"></view>
<view class="mart10 fcor666 font13 width100">发现更多商户</view> <view class="mart10 fcor666 font13 width100">发现更多商户</view>
<view class="input-box"> <view class="input-box">
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" <input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
@input="toSearch()" /> @input="toSearch()" />
</view> </view>
</view> </view>
@ -82,16 +72,14 @@
<view class="line-view"></view> <view class="line-view"></view>
<view class="mart10 fcor666 font13 width100">发现更多商户</view> <view class="mart10 fcor666 font13 width100">发现更多商户</view>
<view class="input-box"> <view class="input-box">
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" <input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
@input="toSearch()" /> @input="toSearch()" />
</view> </view>
<scroll-view class="scoroll-cont width94 mart10" scroll-y="true"> <scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
<view class="width94 alijusstart" @click.stop="updateSelected(1)"> <view class="width94 alijusstart" @click.stop="updateSelected(1)">
<view class="width30">
<image src="../../../static/img/jfx.png" class="icon45" mode="widthFix">
</image>
</view>
<view class="width70"></view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -100,146 +88,51 @@
</view> </view>
</template> </template>
<script> <script>
import {
getIndustry,
getMapStore
} from '../../../Utils/Api.js';
let app = getApp(); let app = getApp();
export default { export default {
data() { data() {
return { return {
latitude: 23.106574, //纬度 latitude: '', //纬度
longitude: 113.324587, //经度 longitude: '', //经度
scale: 13, //缩放级别 scale: 13, //缩放级别
bottomData: false, bottomData: false,
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres2: 'xiala.png', imgadres2: 'xiala.png',
marker: [{ marker: '',
id: 0, typeid: 0, //选择分类
latitude: 23.13065, //纬度 isSelected: 1, //是否选择下拉
longitude: 113.3274, //经度 selectFirst: '', //筛选是否有值
iconPath: '../../../static/img/user/user5.png', //显示的图标 selectFirstName: '', //筛选值名字
rotate: 0, // 旋转度数 selectChiler: 2, // 一级子菜单筛选
width: 20, //宽 selectChilerdistance: 2, // 二级子菜单筛选
height: 30, //高 goodsFirstClassList: '', //商品一级分类
// title:'我在这里',//标注点名 goodsSendotClassList: '', //商品一级分类
alpha: 0.5, //透明度 distanceList: [{
callout: { //自定义标记点上方的气泡窗口 点击有效 id: 1,
content: '天宝大厦', //文本 title: '1km'
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 1234597,
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 30, //高
// title:'我在这里',//标注点名
alpha: 0.5, //透明度
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持
// color:'red',//文本颜色
// },
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '广州塔', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 2,
latitude: 23.1338, //纬度
longitude: 113.33052, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '德隆大厦', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
}, },
{ {
id: 3, id: 3,
latitude: 23.136455, //纬度 title: '3km'
longitude: 113.329002, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '羊城国际商贸中心', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 4,
latitude: 23.224781, //纬度
longitude: 113.293911, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '天瑞广场A座', //文本
color: '#ffffff', //文字颜色
fontSize: 16, //文本大小
borderRadius: 15, //边框圆角
borderWidth: '12',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
}, },
{ {
id: 5, id: 5,
latitude: 23.072726, //纬度 title: '5km'
longitude: 113.277921, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '大米和小米儿童康复(广州盈丰)中心', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 15, //边框圆角
borderWidth: '8',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
}, },
], ], //距离
typeid: 0, //选择分类 distance: '1',
isSelected: 1, //是否选择下拉 distanceName: '1km',
selectFirst: 1, //筛选是否有值 searchName: '' //搜索名称
selectChiler: 1, // 子菜单筛选
} }
}, },
onLoad() { onLoad() {
this.getIndustry();
this.latitude = app.globalData.latitude;
this.longitude = app.globalData.longitude;
}, },
computed: { computed: {
mapheight() { mapheight() {
@ -267,6 +160,46 @@
}, },
methods: { methods: {
//查询商户列表
getIndustry() {
getIndustry().then(res => {
if (res.return_code == '000000') {
this.goodsFirstClassList = res.return_data;
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;
this.getMapStore();
}
})
},
//查询商户
getMapStore() {
let datas = {
distance: this.distance,
name: this.searchName,
childId: this.selectFirst,
longitude: app.globalData.longitude,
latitude: app.globalData.latitude
}
getMapStore(datas).then(res => {
if (res.return_code == '000000') {
this.marker = res.return_data
}
})
},
//选择二级分类数据
changeFirstcont(item) {
this.selectFirst = item.id;
this.selectFirstName = item.name;
this.selectChiler = 2;
},
//选择距离
changeDistance(item) {
this.distance = item.id;
this.distanceName = item.title;
this.selectChilerdistance = 2;
},
//地图点击事件 //地图点击事件
markertap(e) {}, markertap(e) {},
//地图点击事件 //地图点击事件
@ -305,9 +238,9 @@
} }
findByLatAndLng(datas).then(res => { findByLatAndLng(datas).then(res => {
if (res.return_code == '000000') { if (res.return_code == '000000') {
this.city = res.return_data.provinceName; this.city = res.return_data.provinceName;
app.globalData.cityName = res.return_data.provinceName; app.globalData.cityName = res.return_data.provinceName;
app.globalData.qianzhuCityName = res.return_data.cityName; app.globalData.qianzhuCityName = res.return_data.cityName;
app.globalData.cityId = res.return_data.regionId; app.globalData.cityId = res.return_data.regionId;
// app.globalData.cityId = '500100'; // app.globalData.cityId = '500100';
if (res.return_data.result.addressComponent.adcode) { if (res.return_data.result.addressComponent.adcode) {
@ -390,6 +323,9 @@
//选择类型 //选择类型
changeType(item) { changeType(item) {
this.typeid = item.id; this.typeid = item.id;
this.goodsSendotClassList = item.childIndustry;
this.selectFirst = item.childIndustry[0].id;
this.selectFirstName = item.childIndustry[0].name;
}, },
//子菜单显示 //子菜单显示
changeChilerType() { changeChilerType() {
@ -399,6 +335,15 @@
this.selectChiler = 1; this.selectChiler = 1;
} }
}, },
//距离显示
changeChilerdistance() {
if (this.selectChilerdistance == 1) {
this.selectChilerdistance = 2;
} else {
this.selectChilerdistance = 1;
}
},
// 是否选择下拉 // 是否选择下拉
updateSelected(item) { updateSelected(item) {
this.isSelected = item; this.isSelected = item;

BIN
static/img/changed.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 489 B

Write Preview
Loading…
Cancel
Save