Skip to content

H
h5-ci-test
提交 9328a054 作者: 龚洪江
操作

功能：网点页面

上级 7411cd90
正在显示 包含 53 行增加 和 91 行删除
src/pages/index/comp/network-list/index.vue
......@@ -2,8 +2,6 @@
<view class="network-list">
<scroll-view v-if="!isclick" class="list-view" scroll-y>
<view v-for="(i, j) in list" :key="j" class="list-item" @click="handleSelect(j)">
<!-- 头像 -->
<!-- <image class="item-image" :src="getNetworkLevel(0)" mode="widthFix"></image> -->
<image
class="item-image"
src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e9381486ae2144058e2743f3a92178ce_mergeImage.png"
......@@ -34,18 +32,10 @@
<view class="content-type"> 航拍/航测 | CAAC证书 | 测绘乙级 </view>
<view class="content-location">
<image src="../../../../static/img/location.png" mode="widthFix" />
<text>广东省深圳市南山区-打12路深圳国际创新</text>
<text>{{ i.address }}</text>
</view>
<!-- <view class="content-price">
<u-icon
size="16"
name="https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/popup-network-price.png"
></u-icon>
<view class="text">已交保证金<span class="num">10000元</span></view>
</view> -->
</view>
<view class="item-distance">据你158m </view>
<!-- <view class="item-action" @click="toCooperation">联系客服派单</view> -->
<view class="item-distance">据你{{ i.distance }}km </view>
</view>
</scroll-view>
<scroll-view v-else class="list-view-click" scroll-y>
......@@ -69,7 +59,7 @@
<view class="content-type"> 航拍/航测 | CAAC证书 | 测绘乙级 </view>
<view class="content-location">
<image src="../../../../static/img/location.png" mode="widthFix" />
<text>广东省深圳市南山区-打12路深圳国际创新</text>
<text>{{ i.address }}</text>
</view>
</view>
</view>
......@@ -78,7 +68,6 @@
</template>
<script setup lang="ts">
import { onMounted, PropType } from 'vue'
// import weChatSDK from 'z-weixin-ts'
import { InterListType } from '@/api/interface'
import { listCompanyInfoByCoopIdType } from '@/api/interface/common'
......@@ -96,37 +85,10 @@ const props = defineProps({
})
// 事件
const emits = defineEmits(['onSelect'])
// 网点等级
// const networkLevelList = [
// {
// value: 0,
// label: '金牌网点',
// icon: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/%E9%87%91%E7%89%8C@2x.png'
// },
// {
// value: 1,
// label: '银牌网点',
// icon: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/%E9%93%B6%E7%89%8C@2x.png'
// },
// {
// value: 2,
// label: '铜牌网点',
// icon: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/%E9%93%9C%E7%89%8C@2x.png'
// }
// ]
// 获取当前网点的等级
// const getNetworkLevel = (level: number) => {
// return networkLevelList.find((i) => i.value === level)?.icon || ''
// }
// 网点点击事件
const handleSelect = (j: number) => {
emits('onSelect', props.list[j])
}
// const toCooperation = () => {
// weChatSDK.miniProgram.navigateTo({
// url: '/page-mine/help-center/index'
// })
// }
// 组件挂载
onMounted(() => {
console.log(props.list)
......
src/pages/index/index.vue
<template>
<view class="network-map-warp">
<view id="map-content" :class="[isclick ? 'map-content-click' : 'map-content']"></view>
<view class="network-return" @click="returns">
<image src="../../static/img/return.png" mode="widthFix" />
</view>
<!-- 位置图标 -->
<view :class="isclick ? 'network-location-click' : 'network-location'">
<!-- <u-icon
size="18"
name="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb34fee468ca3e624ae37b2ed7f800c2cbc382947577b1daba895ca28cda483d4"
></u-icon> -->
<view
:class="isclick ? 'network-location-click' : 'network-location'"
@click="backCurrentLocation"
>
<image src="../../static/img/mylocation.png" mode="widthFix" />
<text>我的位置</text>
</view>
<!-- 列表图标 -->
<view :class="['network-list-click', isclick ? 'network-list-show' : '']">
<!-- <u-icon
size="18"
name="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf2561f36b7cad7d458a843b0a01249a692737b67280ad7f5a76b94264dabd383"
></u-icon> -->
<view
:class="['network-list-click', isclick ? 'network-list-show' : '']"
@click="showNetWorkList"
>
<image src="../../static/img/listicon.png" mode="widthFix" />
<text>列表</text>
</view>
......@@ -31,7 +26,7 @@
<image src="../../static/img/join.png" mode="widthFix" />
<text>享受免费流量扶持3个月</text>
</view>
<view class="network-enter-willjoin">
<view class="network-enter-willjoin" @click="toJoinPage">
<image src="../../static/img/will_join.png" mode="widthFix" />
</view>
</view>
......@@ -47,8 +42,6 @@
{{ i.name }}
</view>
</view>
<!--网点搜索-->
<!-- <network-select /> -->
<!--网点列表-->
<network-list
v-if="networkList.length !== 0"
......@@ -57,21 +50,16 @@
@on-select="handleSelect"
/>
<view v-else class="network-none">空空如也</view>
<!--底部操作-->
<!-- <network-footer /> -->
</view>
</template>
<script>
import weChatSDK from 'z-weixin-ts'
import { CommonAPI } from '@/api'
// import NetworkSelect from './comp/network-select/index.vue'
import NetworkList from './comp/network-list/index.vue'
// import NetworkFooter from './comp/network-footer/index.vue'
export default {
components: {
// NetworkSelect,
NetworkList
// NetworkFooter
},
data() {
return {
......@@ -129,11 +117,20 @@ export default {
// 网点点击事件
handleSelect(e) {
this.setCenterPoint(e)
// console.log('网点点击事件 --->', e)
},
// 返回上一页
returns() {
uni.navigateBack()
// 显示网点列表
showNetWorkList() {
this.isclick = false
},
// 跳转加盟
toJoinPage() {
weChatSDK.miniProgram.navigateTo({
url: '/page-identity/identity-list/index'
})
},
// 当前位置
backCurrentLocation() {
this.map.setCenter([this.location.lng, this.location.lat])
}
}
}
......@@ -220,12 +217,12 @@ export default {
position: element.position,
icon: this.icon,
});
console.log('labelMarker',labelMarker)
this.markers.push(labelMarker);
labelMarker.on('click', (e) => {
// 给marker绑定事件
console.log('执行了--->',e)
this.openInfo({...element,...this.networkList[index]});
// 点击点更改布局
this.isclick = true
this.isclick = true
});
});
......@@ -242,10 +239,6 @@ export default {
},
// 在指定位置打开信息窗体
openInfo(obj) {
const starStr = `${new Array(obj.score || 0).fill('⭐').join('')}
<span style="filter:grayscale(1)">${new Array( 5 - obj.score || 0).fill('⭐').join('')}</span>`
const contentStr = obj.content.replace(/;|；/g, `<div />`)
// console.log('点击到此处 --->',contentStr)
// 构建信息窗体中显示的内容
const domStr = `
<div class="map-open-info">
......@@ -254,7 +247,7 @@ export default {
${obj.companyName || '-'}
</div>
<div class="location">
<span class="location-info"> 飞手团队 | 距你1123.5km </span>
<span class="location-info"> ${this.networkTypeList[this.currentTypeIndex].name} | 距你${obj.distance}km </span>
</div>
</div>
<div class="info-right">
......@@ -263,23 +256,21 @@ export default {
</div>
</div>
`;
// <div class="content">网点位置：${obj.address || '-'}</div>
// <div class="content">${contentStr || ''}</div>
// <div class="content">服务评分：${starStr}</div>
const infoWindow = new AMap.InfoWindow({
zIndex: 99999,
offset: [0, -38], // 偏移
content: domStr, // 使用默认信息窗体框样式，显示信息内容
});
infoWindow.open(this.map, obj.position);
// const button = document.querySelector('.map-open-info .button');
// button.onclick = () => {
// uni.navigateTo({
// url: `/pages/statisticsAdminSingle/index?sysParkId=${obj.sysParkId}`,
// });
// this.$ownerInstance.callMethod('goDetails', {sysParkId:obj.sysParkId})
// }
const navigate = document.querySelector('.navigate');
navigate.onclick = () => {
weChatSDK.miniProgram.openLocation({
latitude: obj.lat,
longitude: obj.lon,
name: obj.companyName,
address: obj.address
})
}
},
removeAllOverlay() {
// 清除地图上所有添加的覆盖物
......@@ -292,10 +283,10 @@ export default {
},
// 设置中心点
setCenterPoint(e){
console.log('执行到此处 --->',e)
this.map.setCenter([e.lon, e.lat])
this.openInfo({position:[e.lon, e.lat],...e});
console.log('执行到此处 --->',e)
}
},
},
};
</script>
......@@ -307,9 +298,6 @@ export default {
display: none;
}
.map-content {
//height: calc(100vh - 504rpx);
// height: calc(100vh - 704rpx);
// height: calc(100vh - 88rpx);
height: 1052rpx;
width: 100%;
z-index: 10;
......@@ -444,6 +432,7 @@ export default {
.network-enter-willjoin {
padding-top: 22rpx;
margin-left: 82rpx;
animation: scale-animation 0.638s infinite;
image {
width: 198rpx;
height: 108rpx;
......@@ -645,4 +634,15 @@ export default {
}
}
}
@keyframes scale-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
src/static/img/join.png
src/static/img/join.png

2.2 KB | W: | H:

src/static/img/join.png

5.6 KB | W: | H:

src/static/img/join.png
src/static/img/join.png
src/static/img/join.png
src/static/img/join.png
  • 2-up
  • Swipe
  • Onion skin
src/static/img/location-icon.png
src/static/img/location-icon.png

2.2 KB | W: | H:

src/static/img/location-icon.png

5.6 KB | W: | H:

src/static/img/location-icon.png
src/static/img/location-icon.png
src/static/img/location-icon.png
src/static/img/location-icon.png
  • 2-up
  • Swipe
  • Onion skin
src/static/img/location.png
src/static/img/location.png

315 Bytes | W: | H:

src/static/img/location.png

600 Bytes | W: | H:

src/static/img/location.png
src/static/img/location.png
src/static/img/location.png
src/static/img/location.png
  • 2-up
  • Swipe
  • Onion skin
src/static/img/navigate.png
src/static/img/navigate.png

346 Bytes | W: | H:

src/static/img/navigate.png

621 Bytes | W: | H:

src/static/img/navigate.png
src/static/img/navigate.png
src/static/img/navigate.png
src/static/img/navigate.png
  • 2-up
  • Swipe
  • Onion skin
src/static/img/supermen.png
src/static/img/supermen.png

4.2 KB | W: | H:

src/static/img/supermen.png

12.8 KB | W: | H:

src/static/img/supermen.png
src/static/img/supermen.png
src/static/img/supermen.png
src/static/img/supermen.png
  • 2-up
  • Swipe
  • Onion skin
src/static/img/will_join.png
src/static/img/will_join.png

5.9 KB | W: | H:

src/static/img/will_join.png

17.4 KB | W: | H:

src/static/img/will_join.png
src/static/img/will_join.png
src/static/img/will_join.png
src/static/img/will_join.png
  • 2-up
  • Swipe
  • Onion skin
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论