<template>
|
<view class="content">
|
<view class="nav-bar" :style="{paddingTop:statusBarHeight + 'px'}">
|
<view class="nav-bar-content fixed" :style="{top:statusBarHeight + 'px',paddingTop:searchTop + 'px'}">
|
<view class="search">
|
<view class="search-icon"></view>
|
<input class="input" v-model="searchValue" @confirm="searchConfirm" placeholder="输入搜索内容" @focus="searchFocus"></input>
|
</view>
|
</view>
|
<view class="nav-bar-content"></view>
|
</view>
|
<view class="notice">
|
<u-notice-bar :text="notices" direction="column" fontSize="26rpx" bgColor="#FFFFFF" icon="/static/icon/icon_shape.png" color="#000000"></u-notice-bar>
|
<view class="list-nav-box" @click="showList">
|
<view class="list-nav" :class="{list:listShow}"></view>
|
</view>
|
</view>
|
<view class="map-box" id="contentBox" :class="{show:!listShow}">
|
<map name="" class="map" v-if="!loading.contentBox" :style="{height:mapHeight + 'px'}" :longitude="position.longitude" :latitude="position.latitude" :markers="markers" @regionchange="regionchange" @markertap="markertap" @callouttap="callouttap">
|
<cover-view class="un-login" v-if="!isLogin">
|
<cover-view>未登录</cover-view>
|
<cover-view class="login-button" @click="$navTo('/pages/login/index')">立即登录</cover-view>
|
</cover-view>
|
<cover-view class="un-user-info" v-if="isLogin">
|
<cover-view class="un-left">
|
<cover-view class="device-info isOK" style="margin-bottom: 0;">
|
<cover-view class="device-info-icon"></cover-view>
|
<cover-view class="device-info-text">设备正常</cover-view>
|
</cover-view>
|
<cover-view class="device-info" >
|
<cover-view class="device-info-icon"></cover-view>
|
<cover-view class="device-info-text">设备故障</cover-view>
|
</cover-view>
|
<cover-view class="gold-info">
|
<cover-image class="gold-info-icon" src="/static/icon/icon_water_coin.png"></cover-image>
|
<cover-view class="gold-info-text">饮水币：{{userInfo.ysb}}</cover-view>
|
</cover-view>
|
</cover-view>
|
<cover-view class="service-button" @click="service">
|
<cover-image class="service-button-icon" src="/static/icon/icon_phone.png"></cover-image>
|
<cover-view class="service-button-text">联系客服</cover-view>
|
</cover-view>
|
</cover-view>
|
<cover-view slot="callout">
|
<block v-for="(item,index) of markers" :key="index">
|
<cover-view class="outlets-item" :marker-id="item.id">
|
<cover-view class="outlets-item-info">
|
<cover-view class="outlets-item-title">{{item.name}}</cover-view>
|
<cover-view class="outlets-item-distance">
|
<cover-image class="outlets-item-icon" src="/static/icon/list/icon_distance.png"></cover-image>
|
<cover-view class="outlets-item-text">{{item.jl.toFixed(2)}}KM</cover-view>
|
</cover-view>
|
<cover-view class="outlets-item-addr">
|
<cover-image class="outlets-item-icon" src="/static/icon/list/icon_location.png"></cover-image>
|
<cover-view class="outlets-item-text">{{item.adder}}</cover-view>
|
</cover-view>
|
</cover-view>
|
<cover-view class="outlets-item-botton">
|
<cover-view>去</cover-view>
|
<cover-view>饮</cover-view>
|
<cover-view>水</cover-view>
|
</cover-view>
|
</cover-view>
|
</block>
|
</cover-view>
|
<cover-image class="csan-icon" @click="scan" src="/static/icon/icon_scan.png"></cover-image>
|
</map>
|
<view class="content-box-loading" v-if="loading.contentBox"></view>
|
</view>
|
<!-- 列表 -->
|
<view class="list-content" id="contentBox" v-if="listShow">
|
<!-- <image class="csan-icon" @click="scan" src="/static/icon/icon_scan.png" mode="widthFix"></image> -->
|
<scroll-view scroll-y="true" @scrolltolower="scrolltolower" :style="{height:mapHeight + 'px'}">
|
<view class="list">
|
<view class="list-item" v-for="(item,index) of list" :key="index">
|
<view class="list-item-title">{{item.name }}</view>
|
<view class="list-item-distance">
|
<image class="list-item-distance-icon" src="/static/icon/list/icon_distance.png" mode="widthFix"></image>
|
<text class="list-item-distance-text">{{item.jl.toFixed(2) }}KM</text>
|
</view>
|
<view class="list-item-addr">
|
<image class="list-item-addr-icon" src="/static/icon/list/icon_location.png" mode="widthFix"></image>
|
<text class="list-item-addr-text">{{item.adder}}</text>
|
</view>
|
<button class="button to-detail" @click="navToDetail(item.id)">去饮水</button>
|
</view>
|
<view class="nomore" v-if="!loading.list && !list.length">
|
<u-loadmore status="nomore" />
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<protocolPopup @confirm="protocolConfirm"></protocolPopup>
|
<k-tabbar :list="TabBar.list" v-model="TabBar.current" icon-size="30rpx" :height="50" :before-switch="beforeSwitch"></k-tabbar>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapMutations
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
loading:{
|
list:false,
|
contentBox:true
|
},
|
notices: [],
|
windowHeight:'',
|
statusBarHeight:"",
|
mapHeight:"0px",
|
searchTop:"",
|
markers:[],
|
listShow:false,
|
searchValue:"",
|
page:1,
|
list:[]
|
}
|
},
|
onLoad() {
|
this.init()
|
let mapHeight = uni.getStorageSync('mapHeight')
|
if(mapHeight){
|
if(uni.getStorageSync('isProtocol') == 1){
|
this.loading.contentBox = false
|
}
|
this.mapHeight = mapHeight
|
}
|
},
|
onReady() {
|
const system = uni.getSystemInfoSync()
|
const isDevTools = system.platform === 'devtools';
|
// this.windowHeight = system.windowHeight
|
this.statusBarHeight = system.statusBarHeight
|
let tabBerHeight = isDevTools?0:50/* 自定义导航栏高度*/
|
this.searchTop = uni.getMenuButtonBoundingClientRect().top - system.statusBarHeight
|
setTimeout(()=>{
|
if(this.loading.contentBox){
|
this.computedHeight()
|
}
|
},1200)
|
// setTimeout(()=>{
|
// this.computedHeight()
|
// },2000)
|
},
|
computed:{
|
...mapState({
|
isLogin: state=>state.isLogin,
|
userInfo: state=>state.userInfo,
|
systemInfo: state=>state.systemInfo,
|
position: state=>state.position
|
}),
|
TabBar() {
|
return this.$TabBar
|
},
|
},
|
watch:{
|
isLogin(val){
|
if(!val){
|
this.listShow = false
|
}
|
}
|
},
|
methods: {
|
...mapMutations(['setPosition']),
|
computedHeight(){
|
const query = uni.createSelectorQuery().in(this);
|
query
|
.select("#contentBox")
|
.boundingClientRect((data) => {
|
console.log("得到布局位置信息" ,data);
|
this.mapHeight = data.height
|
uni.setStorageSync('mapHeight',this.mapHeight)
|
if(uni.getStorageSync('isProtocol') == 1){
|
this.loading.contentBox = false
|
}
|
})
|
.exec();
|
},
|
protocolConfirm(){
|
this.loading.contentBox = false
|
},
|
init() {
|
this.$apis.home.DrinkingWaterGONGAO().then(res=>{
|
this.notices = res.data.map(item=>item.text)
|
})
|
this.getMarkers(this.position.latitude,this.position.longitude)
|
},
|
getPosition(fun){
|
uni.getLocation({
|
success: (ev) => {
|
let position = {
|
latitude:ev.latitude,
|
longitude: ev.longitude
|
}
|
this.setPosition(position)
|
fun && fun()
|
},
|
fail:(err)=>{
|
console.log(err);
|
fun && fun()
|
this.$toast("获取定位失败")
|
}
|
})
|
},
|
getMarkers(lat,lon){
|
this.$apis.home.HomeDrinkingWater({lat,lon}).then(res=>{
|
this.markers = res.data.map(item=>{
|
return {
|
id: item.id,
|
latitude: item.lat,
|
longitude: item.lon,
|
iconPath: item.typs == 0?'/static/icon/icon_device_position_active.png':'/static/icon/icon_device_position.png',
|
width: uni.upx2px(57),
|
height: uni.upx2px(69),
|
adder: item.adder,
|
name: item.name,
|
jl: item.jl,
|
customCallout:{
|
anchorY:-10,
|
anchorX:0,
|
display: 'NONE'
|
}
|
}
|
})
|
})
|
},
|
regionchange(ev){
|
if(ev.type == 'end'){
|
// this.getMarkers(ev.detail.centerLocation.latitude,ev.detail.centerLocation.longitude)
|
this.getMarkers(this.position.latitude,this.position.longitude)
|
}
|
},
|
markertap(ev){
|
this.markers.find((item,index)=>{
|
if(item.id == ev.markerId){
|
item.customCallout.display = 'ALWAYS'
|
}else{
|
item.customCallout.display = 'NONE'
|
}
|
})
|
},
|
callouttap(ev){
|
if(!this.isLoginHandle()) return
|
this.navToDetail(ev.markerId)
|
},
|
searchConfirm(){
|
if(!this.loading.list){
|
this.page = 1
|
this.search()
|
}
|
},
|
searchFocus(){
|
if(!this.isLoginHandle()) return
|
this.getPosition()
|
},
|
search(){
|
let params = {
|
name:this.searchValue,
|
lat:this.position.latitude,
|
lon:this.position.longitude,
|
pageNum:this.page,
|
pageSize:10
|
}
|
this.listShow = true
|
this.loading.list = true
|
this.$apis.home.DrinkingWater(params).then(res=>{
|
this.loading.list = false
|
if(this.page == 1){
|
this.list = res.data
|
}else{
|
this.list = [...this.list,...res.data]
|
}
|
})
|
},
|
scrolltolower(){
|
if(!this.loading.list){
|
this.page ++
|
this.search()
|
}
|
},
|
showList(){
|
if(!this.isLoginHandle()) return
|
this.listShow = !this.listShow
|
if(this.listShow){
|
this.getPosition(()=>{
|
this.search()
|
})
|
}
|
|
},
|
navToDetail(id){
|
this.$navTo('/pages/index/index/detail?id=' + id)
|
},
|
scan(){
|
if(!this.isLoginHandle()) return
|
uni.scanCode({
|
success: (ev) => {
|
this.$apis.home.kaDrinkingWater({ControllerId:ev.result}).then(res=>{
|
// this.$navTo('/pages/index/index/detail?isOpen=1&id=' + res.data.id)
|
this.$toast("扫码成功，饮水设备已开启")
|
})
|
}
|
})
|
},
|
// 联系客服
|
service(){
|
if(!this.isLoginHandle()) return
|
if(!this.userInfo.servicePhone){
|
this.$toast('当前没有客服电话')
|
return
|
}
|
uni.makePhoneCall({
|
phoneNumber:this.userInfo.servicePhone
|
})
|
},
|
isLoginHandle(){
|
if(!this.isLogin){
|
this.$navTo('/pages/login/index')
|
return false
|
}
|
return true
|
},
|
beforeSwitch(){
|
return this.isLoginHandle()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.content {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
/deep/.u-notice__left-icon .u-icon__img{
|
width: 26rpx !important;
|
height: 32rpx !important;
|
}
|
.nav-bar{
|
.nav-bar-content{
|
height: 88rpx;
|
width: 750rpx;
|
display: flex;
|
// align-items: center;
|
padding-left: 98rpx;
|
&.fixed{
|
position: fixed;
|
top: 0;
|
}
|
.search{
|
width: 442rpx;
|
height: 58rpx;
|
background: rgba(0, 0, 0, 0.06);
|
border-radius: 29rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 19rpx;
|
.search-icon{
|
width: 28rpx;
|
height: 28rpx;
|
background-image: url(/static/icon/icon_search.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.input{
|
flex: 1;
|
padding: 0 14rpx;
|
font-size: 24rpx;
|
line-height: 24rpx;
|
}
|
}
|
}
|
}
|
.notice{
|
display: flex;
|
align-items: center;
|
padding: 0 28rpx 0 0;
|
height: 68rpx;
|
.list-nav-box{
|
height: 68rpx;
|
width: 68rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.list-nav{
|
width: 34rpx;
|
height: 32rpx;
|
background-image: url(/static/icon/icon_list.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
&.list{
|
background-image: url(/static/icon/list/icon_location.png);
|
width: 26rpx;
|
}
|
}
|
}
|
.map-box{
|
flex: 1;
|
position: absolute;
|
left: -750rpx;
|
.content-box-loading{
|
height: 100%;
|
}
|
.map{
|
width: 750rpx;
|
// height: 100%;
|
position: relative;
|
left: -750rpx;
|
}
|
&.show{
|
position: relative;
|
left: 0;
|
.map{
|
left: 0;
|
}
|
}
|
}
|
.un-login{
|
box-sizing: border-box;
|
width: 687rpx;
|
height: 77rpx;
|
background: rgba(0,0,0,0.8);
|
border-radius: 19rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 46rpx;
|
color: #FFFFFF;
|
justify-content: space-between;
|
position: absolute;
|
bottom: 20rpx;
|
left: 50%;
|
transform: translateX(-50%);
|
.login-button{
|
width: 173rpx;
|
height: 46rpx;
|
background: #FF2729;
|
border-radius: 58rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
line-height: 46rpx;
|
}
|
}
|
.un-user-info{
|
position: absolute;
|
bottom: 20rpx;
|
left: 22rpx;
|
width: 702rpx;
|
.un-left{
|
padding-bottom: 34rpx;
|
.device-info{
|
display: flex;
|
align-items: center;
|
margin-bottom: 26rpx;
|
&.isOK{
|
.device-info-icon{
|
background: #FF2729;
|
opacity: 1;
|
}
|
}
|
.device-info-icon{
|
width: 20rpx;
|
height: 20rpx;
|
background: #000000;
|
opacity: 0.4;
|
border-radius: 100%;
|
margin-right: 10rpx;
|
}
|
.device-info-text{
|
font-size: 24rpx;
|
line-height: 33rpx;
|
color: rgba(0, 0, 0, 0.6);
|
}
|
}
|
.gold-info{
|
display: flex;
|
align-items: center;
|
.gold-info-icon{
|
width: 38rpx;
|
height: 38rpx;
|
margin-right: 10rpx;
|
}
|
.gold-info-text{
|
font-size: 24rpx;
|
color: rgba(0, 0, 0, 0.6);
|
line-height: 33rpx;
|
flex: 1;
|
}
|
}
|
}
|
|
.service-button{
|
width: 200rpx;
|
height: 64rpx;
|
background: #FFFFFF;
|
border-radius: 32rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
.service-button-icon{
|
width: 36rpx;
|
height: 36rpx;
|
}
|
.service-button-text{
|
font-size: 24rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 33rpx;
|
margin-left: 6rpx;
|
}
|
}
|
}
|
.csan-icon{
|
width: 61.54rpx;
|
height: 61.54rpx;
|
position: absolute;
|
right: 38rpx;
|
top: 26rpx;
|
}
|
}
|
.outlets-item {
|
width: 381rpx;
|
height: 165rpx;
|
background-color: #FFFFFF;
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
|
border-radius: 12rpx;
|
padding: 20rpx;
|
display: flex;
|
align-items: center;
|
.outlets-item-info {
|
flex: 1;
|
.outlets-item-title {
|
font-weight: 700;
|
font-size: 27rpx;
|
font-family: PingFangSC, PingFang SC;
|
color: #000000;
|
line-height: 30rpx;
|
overflow: auto;
|
|
width: 12em; /* 必须设置固定宽度 */
|
white-space: nowrap; /* 禁止换行 */
|
overflow: hidden; /* 隐藏溢出内容 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
display: inline-block; /* 需要设置为块级元素 */
|
}
|
.outlets-item-distance {
|
display: flex;
|
align-items: center;
|
margin-top: 18rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-size: 24rpx;
|
color: rgba(0, 0, 0, .6);
|
line-height: 24rpx;
|
overflow: auto;
|
.outlets-item-icon{
|
width: 23rpx;
|
height: 23rpx;
|
float: left;
|
overflow: auto;
|
}
|
.outlets-item-text{
|
float: left;
|
padding-left: 12rpx;
|
overflow: auto;
|
}
|
}
|
.outlets-item-addr {
|
display: flex;
|
align-items: center;
|
margin-top: 18rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-size: 24rpx;
|
color: rgba(0, 0, 0, .6);
|
line-height: 24rpx;
|
overflow: auto;
|
.outlets-item-icon{
|
width: 22rpx;
|
height: 27rpx;
|
float: left;
|
overflow: auto;
|
}
|
.outlets-item-text{
|
float: left;
|
padding-left: 12rpx;
|
overflow: auto;
|
|
width: 12em; /* 必须设置固定宽度 */
|
white-space: nowrap; /* 禁止换行 */
|
overflow: hidden; /* 隐藏溢出内容 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
display: inline-block; /* 需要设置为块级元素 */
|
}
|
}
|
|
}
|
.outlets-item-botton {
|
width: 34rpx;
|
padding-left: 4rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 700;
|
font-size: 26rpx;
|
color: #FB282A;
|
line-height: 34rpx;
|
letter-spacing: 12rpx;
|
overflow: auto;
|
}
|
}
|
|
.list-content {
|
position: relative;
|
flex: 1;
|
.csan-icon{
|
width: 61.54rpx;
|
height: 61.54rpx;
|
position: absolute;
|
right: 38rpx;
|
top: 26rpx;
|
}
|
.list {
|
padding: 25rpx 26rpx 25rpx 28rpx;
|
.list-item {
|
padding-bottom: 30rpx;
|
border-bottom: 2rpx solid rgba(217, 217, 217, 0.4);
|
margin-bottom: 28rpx;
|
.list-item-title {
|
font-weight: 700;
|
font-size: 32rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 46rpx;
|
}
|
.list-item-distance {
|
display: flex;
|
align-items: center;
|
margin-top: 7rpx;
|
.list-item-distance-icon {
|
width: 24rpx;
|
height: 24rpx;
|
}
|
.list-item-distance-text {
|
padding-left: 11rpx;
|
font-size: 28rpx;
|
color: rgba(0, 0, 0, .6);
|
line-height: 38rpx;
|
}
|
}
|
.list-item-addr {
|
display: flex;
|
align-items: center;
|
margin-top: 3rpx;
|
.list-item-addr-icon {
|
width: 22.4rpx;
|
height: 28rpx;
|
}
|
.list-item-addr-text {
|
padding-left: 11rpx;
|
padding-left: 11rpx;
|
font-size: 28rpx;
|
color: rgba(0, 0, 0, .6);
|
line-height: 38rpx;
|
}
|
}
|
.to-detail{
|
width: 320rpx;
|
height: 72rpx;
|
background: #FFFFFF;
|
border-radius: 38rpx;
|
border: 2rpx solid #FB282A;
|
font-weight: 700;
|
font-size: 28rpx;
|
color: #FB282A;
|
line-height: 38rpx;
|
margin: 0 auto;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
}
|
</style>
|
|
|
