Skip to content

H
h5
提交 51070885 作者: 龚洪江
操作

功能：新全国网点

上级 c686fe33
正在显示 包含 630 行增加 和 0 行删除
components/pick-regions/pick-regions.vue 0 → 100644
<template>
<picker
mode="multiSelector"
:value="multiIndex"
:range="multiArray"
@change="handleValueChange"
@columnchange="handleColumnChange"
>
<slot></slot>
</picker>
</template>
<script>
import CHINA_REGIONS from './regions.json'
export default {
props: {
defaultRegions: {
type: Array,
default() {
return []
}
},
defaultRegionCode: {
type: String
},
defaultRegion: [String, Array]
},
data() {
return {
cityArr: CHINA_REGIONS[0].childs,
districtArr: CHINA_REGIONS[0].childs[0].childs,
multiIndex: [0, 0, 0],
isInitMultiArray: true
}
},
computed: {
multiArray() {
return this.pickedArr.map((arr) => arr.map((item) => item.name))
},
pickedArr() {
// 进行初始化
if (this.isInitMultiArray) {
return [CHINA_REGIONS, CHINA_REGIONS[0].childs, CHINA_REGIONS[0].childs[0].childs]
}
return [CHINA_REGIONS, this.cityArr, this.districtArr]
}
},
watch: {
defaultRegion: {
handler(region, oldRegion) {
if (Array.isArray(region)) {
// 避免传的是字面量的时候重复触发
oldRegion = oldRegion || []
if (region.join('') !== oldRegion.join('')) {
this.handleDefaultRegion(region)
}
} else if (region && region.length == 6) {
this.handleDefaultRegion(region)
} else {
console.warn('defaultRegion非有效格式')
}
},
immediate: true
}
},
methods: {
handleColumnChange(e) {
// console.log(e);
this.isInitMultiArray = false
const that = this
const col = e.detail.column
const row = e.detail.value
that.multiIndex[col] = row
try {
switch (col) {
case 0:
if (CHINA_REGIONS[that.multiIndex[0]].childs.length == 0) {
that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
break
}
that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
break
case 1:
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
break
case 2:
break
}
} catch (e) {
// console.log(e);
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
}
},
handleValueChange(e) {
// 结构赋值
const [index0, index1, index2] = e.detail.value
const [arr0, arr1, arr2] = this.pickedArr
const address = [arr0[index0], arr1[index1], arr2[index2]]
// console.log(address);
this.$emit('getRegion', address)
},
handleDefaultRegion(region) {
const isCode = !Array.isArray(region)
this.isInitMultiArray = false
let children = CHINA_REGIONS
for (let i = 0; i < 3; i++) {
for (let j = 0; j < children.length; j++) {
const condition = isCode
? children[j].code == region.slice(0, (i + 1) * 2)
: children[j].name.includes(region[i])
if (condition) {
// 匹配成功进行赋值
// console.log(i,j,children.length-1);
children = children[j].childs
if (i == 0) {
this.cityArr = children
} else if (i == 1) {
this.districtArr = children
}
this.$set(this.multiIndex, i, j)
// console.log(this.multiIndex);
break
} else {
// 首次匹配失败就用默认的初始化
// console.log(i,j,children.length-1);
if (i == 0 && j == children.length - 1) {
this.isInitMultiArray = true
}
}
}
}
}
}
}
</script>
pages/network/components/network-item/index.vue 0 → 100644
<template>
<view class="network-item-wrap">
<view class="network-item">
<view class="network-item-img">
<image
:src="networkItem.addressDescImg"
/>
</view>
<view class="network-item-content">
<view class="network-info-wrap">
<view class="network-info">
<view class="info-title">{{networkItem.address}}</view>
<view class="info-meta">{{networkItem.distance.toFixed(2)}}KM</view>
</view>
<!-- <view class="select-icon"> <image src="/page-home/static/image/select-icon.png" /> </view> -->
</view>
</view>
</view>
</view>
</template>
<script >
export default{
props:['networkItem']
}
</script>
<style lang="scss" scoped>
.network-item-wrap {
background-color: #fff;
height: 168rpx;
padding: 8rpx 16rpx;
.network-item {
display: flex;
border-bottom: 1rpx solid #e8e8e8;
&-img {
margin-right: 16rpx;
image {
width: 156rpx;
height: 156rpx;
}
}
&-content {
flex: 1;
.network-info-wrap {
display: flex;
align-items: center;
.network-info {
flex: 1;
.info-title {
font-size: 28rpx;
color: #1a1a1a;
line-height: 40rpx;
margin-bottom: 12rpx;
word-break: break-all;
}
.info-meta {
font-size: 24rpx;
color: #b3b3b3;
line-height: 34rpx;
word-break: break-all;
}
}
.select-icon {
margin: 0 54rpx 0 24rpx;
image {
width: 28rpx;
height: 24rpx;
vertical-align: bottom;
}
}
}
}
}
}
</style>
pages/network/index.vue 0 → 100644
<template>
<view class="websit-node-wrap">
<view class="map-content-wrap">
<view class="map-content" id="map"></view>
<view class="map-marker-operate">
<view
v-for="(v, i) in mapBtnList"
:key="i"
:class="{ 'operate-item': true, 'operate-item-active': i === selectBtnIndex }"
@click="changeTabEvent(i)"
>{{ v }}
</view>
</view>
</view>
<view class="websit-node-list">
<view class="websit-node-list-search">
<pick-region @getRegion="handleGetRegion">
<view class="location-select">
<view>深圳</view>
<image src="../../static/images/icon-down.png" />
</view
></pick-region>
<view class="search-content">
<image src="../../static/images/search-icon.png" />
<input
placeholder=""
placeholder-style="font-size: 28rpx;color: #B2B2B2;"
/>
</view>
</view>
<scroll-view class="websit-node-list-scroll" scroll-y @scrolltolower="scrollToLower">
<network-item v-for="(v,i) in websitListPagination" :key="i" :networkItem="v" />
</scroll-view>
</view>
</view>
</template>
<script>
import wx from 'weixin-js-sdk';
import NetworkItem from "./components/network-item/index.vue"
import PickRegion from '@/components/pick-regions/pick-regions.vue'
export default {
data() {
return {
title: 'Hello',
location: {},
locationData: {
adcode: "440305",
city: "深圳市",
city_code: "156440300",
district: "南山区",
location: {
lat: 39.9219,
lng: 116.44355
},
name: "中国,广东省,深圳市,南山区",
nation: "中国",
nation_code: "156",
province: "广东省",
},
isHeight:false,
websitHeight:0,
mapBtnList:['服务网点', '租赁网点', '培训网点','维修网点'],
selectBtnIndex:0
}
},
components:{
NetworkItem,
PickRegion
},
onLoad(option) {
let str = this.getQueryString("location") || JSON.stringify(this.locationData);
this.location = JSON.parse(str);
},
filters:{
getPhoneStr(value){
let str=String(value)
return str.substring(0,3)+'****'+str.substring(str.length-4,str.length)
}
},
onReachBottom() {
if (this.currentTipIndex != 0) {
if (this.query.pageNo * this.query.pageSize < this.total) {
switch (this.currentTipIndex) {
case 1:
this.query.pageNo++
this.getFlyerDotList()
break;
case 2:
this.query.pageNo++
this.getDeviceDotList()
break;
}
}
}
},
methods: {
toAddWebsit() {
wx.miniProgram.navigateTo({
url: "/page-home/cooperation/cooperation"
});
},
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
},
}
}
</script>
<!-- 内嵌高德地图 -->
<script module="ModuleInstance" lang="renderjs">
export default {
data() {
return {
map: null,
markers: [],
websitList: [],//所有网点
websitListPagination:[],//分页网点
massMarks: undefined, //海量点对象
query: {
pageNo: 1,
pageSize: 10
},
total: 0
};
},
mounted() {
if (window.AMap) {
// 观测更新的数据在 view 层可以直接访问到
this.initAmap();
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script');
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src =
`https://webapi.amap.com/maps?v=1.4.10&key=d78a13e2379db4234cae886709151ddf&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.MarkerClusterer`; //您申请的key值
//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
script.onload = () => {
window._AMapSecurityConfig = {
securityJsCode: 'd78a13e2379db4234cae886709151ddf', //您申请的安全密钥
}
this.initAmap();
}
document.head.appendChild(script);
}
},
beforeDestroy() {
},
methods: {
initAmap() {
this.map = new AMap.Map('map', {
// 显示地图缩放级别
zoom: 6,
// 地图中心点
resizeEnable: true,
center: [this.location.location.lng, this.location.location.lat],
});
this.map.on("complete", async () => {
await this.getMarkPoint();
this.websitListPagination=this.websitList.slice(0,10)
this.setMassMarks();
});
},
setMassMarks() {
let styleList = [
{
url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/b0364bd1-f193-4b93-ac9f-cfb6e2624d6b.png', // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor: new AMap.Pixel(20, 20), // 图标显示位置偏移量，基准点为图标左上角
},
// {
// url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/mmc1_flyer.png', // 图标地址
// size: new AMap.Size(40, 40), // 图标大小
// anchor: new AMap.Pixel(20, 20), // 图标显示位置偏移量，基准点为图标左上角
// },
// {
// url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/mmc1.png', // 图标地址
// size: new AMap.Size(40, 40), // 图标大小
// anchor: new AMap.Pixel(20, 20), // 图标显示位置偏移量，基准点为图标左上角
// }
];
this.massMarks = new AMap.MassMarks(this.markers, {
zIndex: 5, // 海量点图层叠加的顺序
zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
style: styleList, // 设置样式对象
});
// 将海量点添加至地图实例
this.massMarks.setMap(this.map);
},
async getMarkPoint() {
let res = await this.$httpRequest({
url: this.$api.getWebSitList,
method: 'get',
data: {
lat: this.location.location.lat,
lon: this.location.location.lng,
}
})
if (res.result) {
let nodeList = res.result.reduce((pre, cur) => {
let list = cur.locationList.filter((item) => {
item.grade = '4.' + this.RandomNum(5, 9)
item.day = this.RandomNum(1, 10)
item.count = this.RandomNum(4, 5) * 10
return item.range >= 100
});
pre.push(...list);
return pre;
}, []);
this.websitList=nodeList.map((v)=>({
addressDescImg:'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/774dec69-bf56-4dd9-9c3f-aaa33bc47bcd.png',
address:v.dizhi,
distance:v.range
}))
console.log("网点列表数据--->",this.websitList)
this.markers = nodeList.map((item, index) => {
return {
id: index,
lnglat: [item.jd, item.wd],
style: 0
};
});
}
},
// 数据切换
async changeTabEvent(index) {
this.selectBtnIndex = index;
switch (index) {
case 0:
await this.getMarkPoint()
this.massMarks.setData(this.markers)
break;
case 1:
this.query.pageNo = 1
this.query.pageSize=9999
await this.getDeviceDotList()
this.massMarks.setData(this.markers)
break;
case 2:
this.query.pageNo = 1
this.query.pageSize=9999
await this.getFlyerDotList()
this.massMarks.setData(this.markers)
break;
case 3:
this.query.pageNo = 1
this.query.pageSize=9999
await this.getDeviceDotList()
this.massMarks.setData(this.markers)
break;
}
this.websitListPagination=this.websitList.slice(0,10)
},
async getFlyerDotList() {
let res = await this.$httpRequest({
url: this.$api.flyerDotList,
method: 'get',
data: {
lat: this.location.location.lat,
lon: this.location.location.lng,
...this.query
}
})
if (res.result.list) {
this.websitList=res.result.list.map((v)=>({
addressDescImg:'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/774dec69-bf56-4dd9-9c3f-aaa33bc47bcd.png',
address:v.flyerName,
distance:v.distance
}))
this.markers = res.result.list.map((item, index) => {
return {
id: index,
lnglat: [item.lon, item.lat],
style: 1
};
});
}
},
async getDeviceDotList() {
let res = await this.$httpRequest({
url: this.$api.deviceDotList,
method: 'get',
data: {
lat: this.location.location.lat,
lon: this.location.location.lng,
...this.query
}
})
if (res.result.list) {
this.websitList=res.result.list.map((v)=>({
addressDescImg:'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/774dec69-bf56-4dd9-9c3f-aaa33bc47bcd.png',
address:v.uavName,
distance:v.distance
}))
this.markers = res.result.list.map((item, index) => {
return {
id: index,
lnglat: [item.lon, item.lat],
style: 1
};
});
}
},
RandomNum(minNum, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
},
// 下拉加载
scrollToLower(){
if(this.websitListPagination.length< this.websitList.length){
this.websitListPagination=this.websitListPagination.concat(this.websitList.slice(this.websitListPagination.length,this.websitListPagination.length+10))
}
}
},
};
</script>
<style scoped lang="scss">
.websit-node-wrap {
height: 100vh;
.map-content-wrap{
position: relative;
.map-content {
width: 100%;
height: 928rpx;
}
.map-marker-operate {
position: absolute;
bottom: 8rpx;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 10;
.operate-item {
width: 160rpx;
height: 48rpx;
background: #ffffff;
border-radius: 16rpx;
text-align: center;
font-size: 24rpx;
font-weight: 400;
color: #1690fc;
line-height: 48rpx;
&-active {
background: linear-gradient(270deg, #ff2100 0%, #fe9d45 100%);
color: #ffffff;
}
}
}
}
.websit-node-list{
height: calc(100vh - 928rpx);
position: absolute;
bottom: 0rpx;
left: 0;
width: 100%;
&-search{
height: 96rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20rpx;
.location-select {
font-size: 28rpx;
color: #000000;
line-height: 40rpx;
display: flex;
align-items: center;
white-space: nowrap;
image {
width: 16rpx;
height: 10rpx;
vertical-align: bottom;
margin-left: 14rpx;
}
margin-right: 32rpx;
}
.search-content {
width: 570rpx;
height: 64rpx;
background: #fdf1ed;
border-radius: 32rpx;
display: flex;
align-items: center;
padding: 12rpx 20rpx;
box-sizing: border-box;
image {
width: 28rpx;
height: 28rpx;
margin-right: 20rpx;
vertical-align: bottom;
}
input {
flex: 1;
}
}
}
&-scroll{
height: calc(100% - 96rpx);
}
}
}
::v-deep{
.amap-logo,.amap-copyright{
display: none !important;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论