<template>
<view class="w
apper">
<!
-- <view class="bg
-image"></view>
-->
<image class="bg
-image" src="/static/home/bus/bg
-image
.png" mode="widthFix" style="width: 100%;" />
<!
-- 自定义导航栏
-->
<view class="custom
-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="navbar
-content">
<!
-- 左侧返回按钮
-->
<view class="back
-btn" @click="handleBack">
<image src="/static/home/bus/back
-icon
.png" mode="aspectFit" style="width: 48rpx;height: 48rpx;" />
</view>
<!
-- 中间标题
-->
<text class="title">{{busLineBase
.name}}</text>
</view>
</view>
<view class="w
apper
-content" :style="{ paddingTop: statusBarHeight +50 + 'px' }">
<view class="line_info">
<view class="site">
<text class="from">{{busLineBase
.startSn}}</text>
<view class="arrow">
<text class="to">{{busLineBase
.endSn}}</text>
</view>
</view>
<view class="tit">
<view class="time_s">
<text class="time
-text">{{busLineBase
.firstTime}}</text>
</view>
<view class="time_e">
<text class="time
-text">{{busLineBase
.lastTime}}</text>
</view>
<text class="price">票价: {{busLineBase
.price}}</text>
</view>
</view>
<view class="distance
-class">
<view class="station">
<view class="station
-title">
<view class="station
-name">候车站</view>
<view class="station
-content">
<view class="active">{{stationName}}</view>
<view class="underline"></view>
</view>
</view>
</view>
<view class="distance" v
-if="state==0 && travelOrder!=0">
<view class="time">
<text class="time_title">{{Math
.ceil
(travelTime/60
)}}分钟</text>
</view>
<text class="arr">{{travelOrder}}站/
<text v
-if="travelDistance<1000">{{numFilter
(travelDistance
)}}m</text>
<text v
-else>{{numFilter
(travelDistance/1000
)}}km</text>
</text>
</view>
<view class="distance" v
-else
-if="state==0 && travelOrder==0 && isArrive==1">
<view class="time">
<view class="bus
-arr">已到站</view>
</view>
</view>
<view class="distance" v
-else
-if="state==0 &&isArrive==0">
<view class="time">
<view class="bus
-coming">即将到站 {{travelDistance}}m</view>
</view>
</view>
<view class="distance" v
-else
-if="state==
-1">
<view class="time">
<view class="none">等待发车</view>
</view>
</view>
<view class="distance" v
-else>
<view class="time">
<view class="none">暂无车辆信息</view>
</view>
</view>
<!
-- <view>已到站</view>
-->
</view>
</view>
<view class="site_list">
<scroll
-view class="w
apper_sitelist" scroll
-x="true" scroll
-with
-animation :scroll
-into
-view="targetId">
<view class="road">
<view class='
part' v
-for="
(item, index
) in siteList" @click="showActive
(index, item
.sn
)">
<view :id="'id'+item
.sid" class='name'>
<view>
<view class="dot_p" :class="{'dot_p_show': ind === index}"></view>
<view class='dot_r' v
-if="index!=siteList
.length
-1"></view>
</view>
<div :class="item
.state==1?'road
-bus':'road
-bus
-coming'" v
-if="item
.isHaveBus==0"></div>
<view class='dot_d' :class="{'dot_d_show': ind === index}"></view>
<view class='text' :class="{'text_show': ind === index}">
<view>{{index +1}}</view>
<view class="text
-dir">
{{item
.sn}}
</view>
</view>
</view>
</view>
</view>
</scroll
-view>
<!
-- <view class="my
-map"></view>
-->
</view>
<view class="my
-map">
2231
23
<web
-view ref="webview" :webview
-styles="webviewStyles" :src="src"
@onPostMessage="getMessage"></web
-view>
</view>
</view>
</template>
<script>
import {
getRealTimeBusLine,
getRealTimeBusLineStation
} from '@/request/bus
.js'
export default {
data
() {
return {
src: '',
timer: null,
isArrive: 0,
targetId: '',
state: 0,
stationName: '',
travelDistance: 0,
travelTime: 0,
travelOrder: 0,
ratio: '',
ind: '',
siteId: "",
lineName: "二号线",
siteName: "动漫园站",
siteList: [],
busLineBase: [],
stateBus: [],
time_s: '',
time_e: '',
from: '',
busPosition: [0, 5, 11],
to: '',
isActive: false,
lineId: '',
siteNum: '0',
haveBus: true,
webviewStyles: {
position: 'absolute',
top: '850px',
bottom: '30px',
// zIndex: '999',
marginTop: '850px',
marginLeft: '
20px',
marginRight: '
20px',
marginBottom: '10px',
height: '500px'
}
// 保留原有数据项
...
}
},
onLoad
(options
) {
// 获取路由参数
const {
statusBarHeight
} =
uni.getSystemInfoSync
()
// const systemInfo =
uni.getSystemInfoSync
();
// this
.ratio =
(systemInfo
.windowWidth / 750
) / 0
.5
console
.log
("options", options
)
this
.statusBarHeight = statusBarHeight
this
.lineId = options
.lineId
this
.lat = options
.lat
this
.lng = options
.lng
this
.lineName = options
.lineName
this
.getLineDetail
()
if
(this
.timer
) {
clearInterval
(this
.timer
);
this
.timer = null;
}
// this
.timer = setInterval
(() => {
// console
.log
("30"
)
// this
.refresh
()
// }, 1000 * 30
);
this
.init
()
},
methods: {
init
() {
setTimeout
(() => {
this
.src = '
../
../
../
../hybrid/html/map
.html'
}, 1000
);
},
handlePostMessage
(res
) {
this
.$refs
.webview
.evalJs
(`handleMessage
()`
);
},
getMessage
(e
) {
uni.showModal
({
content: "111",
showCancel: false
}
)
},
numFilter
(value
) {
if
(value != 0
) {
// 将数值转换为浮点数，并保留两位小数
let realVal = parseFloat
(value
).toFixed
(2);
return realVal;
}
},
async getLineDetail
() {
var res = await getRealTimeBusLine
({
lineId: this
.lineId,
lat: this
.lat,
lng: this
.lng
}
)
if
(res
.code == 0
) {
console
.log
("1", res
)
this
.siteList = res
.data
.busInfStop
var ind = res
.data
.targetOrder
this
.ind = res
.data
.targetOrder
- 1
this
.stationName = this
.siteList[ind
- 1]
.sn
this
.state = res
.data
.state
this
.busLineBase = res
.data
.busLineBase
this
.targetOrder = res
.data
.targetOrder
this
.$nextTick
(function
() {
this
.targetId = 'id' + this
.siteList[ind
- 4]
.sid
}
);
if
(this
.state == 0
) {
this
.stateBus = res
.data
.stateBus
var travelsList = this
.stateBus
.travels
this
.distance = this
.findAllClosest
(this
.stateBus, this
.targetOrder
)
if
(this
.distance
.length != 0
) {
var travels = this
.distance[0]
.travels
this
.travelDistance = travels[0]
.travelDistance
this
.travelOrder = travels[0]
.travelOrder
this
.travelTime = travels[0]
.travelTime
this
.siteList = this
.processArrays
(this
.siteList, this
.stateBus,
'order', 'state'
);
}
}
}
},
async showActive
(index, siteName
) {
this
.ind = index
this
.stationName = siteName
var res = await getRealTimeBusLineStation
({
lineId: this
.lineId,
stationName: this
.stationName
}
)
if
(res
.code == 0
) {
this
.siteList = res
.data
.busInfStop
var ind = res
.data
.targetOrder
this
.stationName = this
.siteList[ind
- 1]
.sn
this
.state = res
.data
.state
this
.busLineBase = res
.data
.busLineBase
this
.ind = res
.data
.targetOrder
- 1
this
.targetOrder = res
.data
.targetOrder
this
.$nextTick
(function
() {
this
.targetId = 'id' + this
.siteList[ind
- 4]
.sid
}
);
if
(this
.state == 0
) {
this
.stateBus = res
.data
.stateBus
var travelsList = this
.stateBus
.travels
this
.distance = this
.findAllClosest
(this
.stateBus, this
.targetOrder
)
if
(this
.distance
.length != 0
) {
var travels = this
.distance[0]
.travels
this
.travelDistance = travels[0]
.travelDistance
this
.travelOrder = travels[0]
.travelOrder
this
.travelTime = travels[0]
.travelTime
this
.isArrive = this
.distance[0]
.state
this
.siteList = this
.processArrays
(this
.siteList, this
.stateBus,
'order', 'state'
);
}
}
}
},
handleBack
() {
uni.navigateBack
()
},
async refresh
() {
console
.log
("刷新"
)
var res = await getRealTimeBusLineStation
({
lineId: this
.lineId,
stationName: this
.stationName
}
)
if
(res
.code == 0
) {
this
.siteList = res
.data
.busInfStop
var ind = res
.data
.targetOrder
this
.stationName = this
.siteList[ind
- 1]
.sn
this
.state = res
.data
.state
this
.busLineBase = res
.data
.busLineBase
this
.ind = res
.data
.targetOrder
- 1
this
.targetOrder = res
.data
.targetOrder
this
.$nextTick
(function
() {
this
.targetId = 'id' + this
.siteList[ind
- 4]
.sid
}
);
if
(this
.state == 0
) {
this
.stateBus = res
.data
.stateBus
var travelsList = this
.stateBus
.travels
this
.distance = this
.findAllClosest
(this
.stateBus, this
.targetOrder
)
if
(this
.distance
.length != 0
) {
var travels = this
.distance[0]
.travels
this
.travelDistance = travels[0]
.travelDistance
this
.travelOrder = travels[0]
.travelOrder
this
.travelTime = travels[0]
.travelTime
this
.isArrive = this
.distance[0]
.state
this
.siteList = this
.processArrays
(this
.siteList, this
.stateBus, 'order', 'state'
);
}
}
}
},
// 找到距离最近车站的小车
findAllClosest
(arr, target
) {
const validItems = arr
.filter
(item => item
.order < target + 1
);
if
(validItems
.length === 0
) return [];
const distances = validItems
.map
(item =>
({
item,
distance: Math
.abs
(item
.order
- target
)
}
));
if
(distances
.length != 0
) {
const minDist = Math
.min
(...distances
.map
(d => d
.distance
));
return distances
.filter
(d => d
.distance === minDist
).map
(d => d
.item
);
}
},
processArrays
(arrayA, arrayB, key, valueKey
) {
// 创建arrayB的快速查找映射（基于指定键）
const bMap = new Map
();
arrayB
.forEach
(item => {
if
(item[key] !== undefined
) {
bMap
.set
(item[key], item
);
}
}
);
// 遍历arrayA并添加属性
return arrayA
.map
(itemA => {
// 浅拷贝避免修改原对象
const newItem = {
...itemA
};
// 检查是否存在匹配元素
if
(bMap
.has
(newItem[key]
)) {
const matchedB = bMap
.get
(newItem[key]
);
// newItem
.state = 0;
newItem
.isHaveBus = 0;
// 添加arrayB中的属性值（如果存在）
if
(matchedB[valueKey] !== undefined
) {
newItem[valueKey] = matchedB[valueKey];
}
}
return newItem;
}
);
}
},
onPullDownRefresh
() {
console
.log
("下拉"
)
this
.refresh
()
setTimeout
(() => {
//结束下拉刷新
uni.stopPullDownRefresh
();
}, 1000
);
},
onUnload
() {
console
.log
('页面即将卸载'
);
if
(this
.timer
) {
clearInterval
(this
.timer
);
this
.timer = null;
}
}
}
</script>
<style>
page {
background
-color: #f5f5f5;
}
</style>
<style scoped>
.bg
-image {
position: absolute;
}
.custom
-navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
z
-index: 1000;
/* 自定义背景色 */
/* 自定义阴影 */
}
.navbar
-content {
height: 44px;
/* 标准导航栏高度 */
display: flex;
align
-items: center;
padding: 0 15px;
}
.title {
flex: 1;
text
-align: center;
font
-size: 17px;
font
-weight: bold;
color: #333;
/* 标题颜色 */
}
.back
-btn {
width: 48rpx;
height: 48rpx;
}
.right
-area {
width: 40px;
text
-align: right;
}
.info_w
apper {
height: 156px;
/* background: #36A3F9; */
/* background: url
(@/static/home/bus/detail
-bg
.png
) left no
-repeat; */
padding: 15px;
color: black;
position: absolute;
z
-index: 9;
width: 100%;
}
.line_info {
position: relative;
/* display: flex; */
}
.site {
font
-size: 3
2rpx;
color: black;
margin
-bottom: 10px;
text
-align: left;
display: flex;
margin
-left: 30px;
}
.from {
/* padding
-left: 5
2rpx; */
color: black;
}
.arrow {
background: url
(@/static/home/bus/single
.png
) left no
-repeat;
background
-size: 14px 5px;
margin
-left: 10px;
color: black;
}
.to {
padding
-left:
26px;
color: black;
}
.time_s {
background: url
(@/static/home/bus/start
.png
) left no
-repeat;
background
-size: 18px 18px;
justify
-self: baseline;
}
.time_e {
background: url
(@/static/home/bus/end
.png
) left no
-repeat;
background
-size: 18px 18px;
margin
-left: 15px;
}
.price {
margin
-left: 15px;
}
.tit {
color: #fff;
font
-size:
26rpx;
/* padding
-left: 5
2rpx; */
margin
-bottom: 10px;
height:
21px;
color: #333;
display: flex;
align
-items: baseline;
margin
-left: 30px;
}
.distance
-class {
border
-radius: 15px;
/* box
-shadow: 0 4rpx 1
2rpx rgba
(0, 0, 0, 0
.1
); */
background: url
(@/static/home/bus/distance
-bg
.png
) center no
-repeat;
background
-size: cover;
height: 160px;
position: absolute;
z
-index: 99;
left:
20px;
right:
20px;
}
.distance {
color: #B7BABB;
line
-height:
20px;
text
-align: center;
display: flex;
flex
-direction: column;
align
-items: center;
position: relative;
z
-index: 99;
/* align
-items: baseline; */
}
.time {
color: aquamarine;
}
.bus
-arr {
color: rgb
(255, 164, 17
);
font
-weight: bold;
margin
-top: 10px;
}
.bus
-coming {
color: rgb
(55, 170, 1
26
);
font
-weight: bold;
margin
-top: 10px;
}
.station {
margin
-left:
20px;
color: #353738;
padding: 10px;
}
.station
-title {
display: flex;
align
-items: baseline;
}
.station
-name {
margin
-right: 15px;
}
.station
-content {
padding
-top: 10px;
/* padding
-left:
20rpx; */
position: relative;
/* padding
-right: 50rpx; */
/* 确保文字在下划线上方 */
z
-index:
2;
justify
-content: center;
display: flex;
align
-items: center;
/* 文字在上层 */
}
.underline {
position: absolute;
bottom:
2px;
height: 3px;
background: linear
-gradient
(to right, rgb
(110,
207, 169
), rgb
(110,
224, 176
));
/* 下划线颜色 */
border
-radius: 3px;
z
-index:
-1;
width: 80%;
align
-items: center;
justify
-content: center;
display: flex;
/* margin
-left: 30rpx; */
/* width: 60rpx; */
/* 下划线在文字下方 */
}
.active {
color: black;
/* 激活状态文字颜色 */
font
-weight: bold;
/* font
-size: 36rpx; */
}
.time {
float: left;
width: 40%;
font
-size:
26rpx;
/* height: 130rpx; */
line
-height: 40px;
}
.time {
font
-size: 36rpx;
color: #353738;
}
.time
-text {
margin
-left:
25px;
}
.time_title {
color: rgb
(14, 170, 11
2);
font
-weight: bold;
}
.arr {
float: left;
/* width:
20%; */
font
-size: 30rpx;
color: rgb
(14, 170, 11
2);
}
.site_list {
/* margin: 15px; */
/* box
-shadow: 0 4rpx 1
2rpx rgba
(0, 0, 0, 0
.1
); */
background
-color: white;
border
-radius: 15px;
margin
-top: 150px;
padding
-left: 15px;
padding
-right: 15px;
padding
-top: 15px;
padding
-bottom: 10px;
background: url
(@/static/home/bus/site
-bg
.png
) center no
-repeat;
position: absolute;
z
-index: 99;
left:
20px;
right:
20px;
background
-size: cover;
/* 让背景图片覆盖整个视口 */
}
.site_list
.w
apper_sitelist {
width: 100%;
overflow
-x: scroll;
position: relative;
-webkit
-overflow
-scrolling: touch;
display: flex;
}
.bus_road {
background: url
(@/static/home/bus/bus
.png
) no
-repeat center;
background
-size: cover;
width:
28px;
height: 14px;
position: absolute;
z
-index: 1;
margin
-top: 4px;
left: 14px;
/* margin
-top:
-40px; */
}
.road
-bus {
background: url
(@/static/home/bus/bus
.png
) no
-repeat center;
background
-size: cover;
width:
28px;
height: 14px;
position: absolute;
z
-index: 1;
margin
-top:
-35px;
margin
-left: 10px;
/* left: 14px; */
/* margin
-top:
-40px; */
}
.road
-bus
-coming {
background: url
(@/static/home/bus/bus
.png
) no
-repeat center;
background
-size: cover;
width:
28px;
height: 14px;
position: absolute;
z
-index: 1;
margin
-top:
-35px;
margin
-left:
-40px;
}
.road {
display: flex;
}
.w
apper_sitelist::
-webkit
-scrollbar {
display: none;
}
/deep/::
-webkit
-scrollbar {
display: none;
width: 0;
height: 0;
}
.part {
padding: 10px;
display: flex;
flex
-direction: row;
text
-align: center;
justify
-content: center;
padding
-top: 30px;
}
.site_list
.dot_r {
margin
-top:
25px;
position: absolute;
top:
23px;
height: 3px;
background: linear
-gradient
(to right, rgb
(110,
207, 169
), rgb
(110,
224, 176
));
/* 下划线颜色 */
width: 46px;
border
-radius: 3rpx;
z
-index: 1;
margin
-left: 4px;
align
-items: center;
justify
-content: center;
display: flex;
}
.site_list
.name {
margin
-top:
28px;
display: flex;
flex
-direction: column;
align
-items: center;
}
.site_list
.text {
display: flex;
text
-align: center;
margin
-left: 5px;
flex
-direction: column;
}
.site_list
.text_show {
display: flex;
text
-align: center;
margin
-left: 5px;
color: rgb
(14, 170, 11
2);
font
-weight: bold;
}
.site_list
.dot_show {
background: url
(@/static/home/bus/position_red
.png
) no
-repeat center;
background
-size: 14px 18px;
}
.site_list
.dot_d_show {
border
-radius: 50%;
width: 16px;
height: 16px;
background
-color: rgba
(110,
207, 169, 0
.5
);
position: absolute;
z
-index: 999;
top: 41px;
margin
-left: 8px;
display: flex;
align
-items: center;
justify
-content: center;
}
.road
-class {
display: flex;
}
.dot_p {
border
-radius: 50%;
width: 8px;
height: 8px;
background
-color: rgb
(110,
207, 169
);
position: absolute;
z
-index: 999;
top: 45px;
display: flex;
align
-items: center;
justify
-content: center;
/* margin
-right:
2px; */
/* margin
-left: 10rpx; */
}
.dot_p_show {
border
-radius: 50%;
width: 8px;
height: 8px;
background
-color: rgb
(14, 170, 11
2);
position: absolute;
z
-index: 999;
top: 45px;
display: flex;
align
-items: center;
justify
-content: center;
}
.text
-dir {
margin
-top: 5px;
writing
-mode: vertical
-rl;
letter
-spacing: 3px;
}
.none {
color: #848484;
font
-size: 16px;
margin
-top: 15px;
}
.my
-map {
/* width: 100%; */
position: absolute;
z
-index: 999;
/* bottom:
20px; */
/* background
-color: white; */
/* margin
-bottom: 50px; */
left: 0;
right: 0;
top: 650px;
margin:
20px;
height: 370px;
}
.map {
margin
-top: 500px;
margin
-left:
20px;
margin
-right:
20px;
margin
-bottom: 10px;
/* z
-index: 9999; */
}
</style> 将
uniapp写法转化为h5
扫一扫
1251
到【灌水乐园】发言
