<template>
|
<view class="container">
|
<navbar title = '站点列表'></navbar>
|
<view class="content">
|
<view class="nav">
|
<view class="nav-title">
|
<view @click="switchTo(1)" class="title-text" :style="isNav === 1 ? isActive : {}">送水点</view>
|
<view @click="switchTo(2)" class="title-text" :style="isNav === 2 ? isActive : {}">设备点</view>
|
</view>
|
</view>
|
<view v-if="isNav === 1" class="main">
|
<block v-for="(item,index) in sendWaterSiteList" :key='index'>
|
<view class="item">
|
<view class="item-img">
|
<image v-if="item.image" :src="baseUrl + '/upload' + item.image" alt='' mode="aspectFit"></image>
|
<image v-else src="../../static/images/station/facilityImg.svg" alt='' mode="aspectFit"></image>
|
</view>
|
<view class="item-info">
|
<view class="info-name">{{item.name}}</view>
|
<view class="info-addr" @click="openMap(item.latitude,item.longitude)">
|
<text class="addr-text">地址：{{item.address}}</text>
|
<view>
|
<image src="../../static/images/index/icon22.svg" alt=''></image>
|
<text>{{item.distanceValue}}km</text>
|
</view>
|
</view>
|
<view class="info-phone" @click="toCall(item.phone)">电话:{{ item.phone}}</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
|
<view v-if="isNav === 2" class="main">
|
<block v-for="(item,index) in facilitySiteList" :key='index'>
|
<view class="item">
|
<view class="item-img">
|
<image v-if="item.image" :src="baseUrl + '/upload' + item.image" alt='' mode="aspectFit"></image>
|
<image v-else src="../../static/images/station/facilityImg.svg" alt='' mode="aspectFit"></image>
|
</view>
|
<view class="item-info">
|
<view class="info-name">{{item.name}}</view>
|
<view class="info-addr">
|
<text class="addr-text">地址：{{item.address}}</text>
|
<view @click="openMap(item.latitude,item.longitude)">
|
<image src="../../static/images/index/icon22.svg" alt=''></image>
|
<text>{{item.distanceValue}}km</text>
|
</view>
|
</view>
|
<view class="info-phone" @click="toCall(item.phone)">电话:{{ item.phone}}</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from 'vue'
|
import { siteApi } from '../../api/index.js'
|
import { BASE_URL } from '../../config/baseUrl.js';
|
|
const baseUrl = ref(BASE_URL)
|
const isNav = ref(2)//1：送水点；2：设备点
|
const isActive = ref({borderBottom:`3px solid #226AC9`})
|
const userLocation = ref()
|
const sendWaterSiteList = ref([])
|
const facilitySiteList = ref([])
|
|
//导航切换
|
function switchTo(val){
|
if((val === 1 && isNav.value === 1) || (val === 2 && isNav.value === 2)){
|
}else{
|
if(val === 1){
|
isNav.value = 1
|
}else if(val === 2){
|
isNav.value = 2
|
}
|
}
|
}
|
//获取送水点及饮水设备点列表
|
async function getSiteList(){
|
let param1 = {
|
type:1,
|
latitude: userLocation.value.lat,
|
longitude:userLocation.value.lon,
|
}
|
let param2 = {...param1}
|
param2.type = 2
|
await siteApi(param1).then((res) =>{
|
sendWaterSiteList.value = res.data
|
})
|
await siteApi(param2).then((res1) =>{
|
facilitySiteList.value = res1.data
|
})
|
}
|
//打开地图导航
|
function openMap(lat,lon){
|
uni.openLocation({
|
latitude: parseFloat(lat),
|
longitude: parseFloat(lon),
|
scale:18
|
})
|
}
|
function toCall(phone){
|
// #ifdef MP-WEIXIN
|
wx.makePhoneCall({
|
phoneNumber: phone,
|
success: function() {
|
console.log("拨打电话成功！")
|
},
|
fail: function() {
|
console.log("拨打电话失败！")
|
}
|
})
|
// #endif
|
}
|
onMounted(async() =>{
|
userLocation.value = JSON.parse(uni.getStorageSync('userLocation'))
|
await getSiteList()
|
})
|
</script>
|
|
<style lang="scss">
|
.container{
|
width: 100%;
|
height: 100vh;
|
.content{
|
width: 100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
padding:32rpx 0 100rpx;
|
box-sizing: border-box;
|
.nav{
|
height: 100rpx;
|
width:100%;
|
box-sizing: border-box;
|
margin-bottom:32rpx;
|
background-color: #FFF;
|
.nav-title{
|
width: 100%;
|
box-sizing: border-box;
|
padding: 0 160rpx;
|
height: 100rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.title-text{
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #000000;
|
width:120rpx;
|
height:65rpx;
|
text-align: center;
|
line-height:65rpx;
|
}
|
}
|
}
|
.main{
|
height:calc(100vh - 176rpx - 350rpx);
|
width:100%;
|
// background-color: #e4f8ff;
|
padding:0 32rpx;
|
box-sizing: border-box;
|
.item{
|
height:230rpx;
|
width:100%;
|
background-color: #FFFFFF;
|
border-radius: 24rpx;
|
padding:36rpx 20rpx;
|
margin-bottom:20rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items:center;
|
.item-img{
|
image{
|
width:140rpx;
|
height: 140rpx;
|
}
|
}
|
.item-info{
|
height:100%;
|
display: flex;
|
flex-direction: column;
|
margin-left:20rpx;
|
justify-content: space-between;
|
overflow: hidden;
|
.info-name{
|
color:#222c35;
|
}
|
.info-addr{
|
display: flex;
|
justify-content: space-between;
|
align-items:center;
|
.addr-text{
|
width:340rpx;
|
height:80rpx;
|
color: #6a6e75;
|
font-size:26rpx;
|
}
|
view{
|
display: flex;
|
justify-content: space-between;
|
align-items:center;
|
image{
|
width:50rpx;
|
height:50rpx;
|
}
|
text{
|
color: #6a6e75;
|
font-size:26rpx;
|
}
|
}
|
}
|
.info-phone{
|
font-size:26rpx;
|
color: #778bce;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
