首先给如下的一个json串，如何封装成一个实时公交车组件？
{
"lineinfo": {
"fir_time": "06:30",
"sta_sta": "宝龙一城公交场站",
"end_sta": "五显公交场站",
"other_lineid": "MzUwMjAwMDEwNjcy",
"end_time": "21:00",
"bus_money": "1",
"bus_staname": "656路"
},
"stations": [{
"bus_staname": "宝龙一城公交场站",
"sid": "350200010671114"
}, {
"bus_staname": "明发园站",
"sid": "350200010671115"
}, {
"bus_staname": "软件园南门站",
"sid": "350200010671116"
}, {
"bus_staname": "岭兜二里",
"sid": "350200010671117"
}, {
"bus_staname": "前埔路岭兜",
"sid": "350200010671118"
}, {
"bus_staname": "岭兜佳园",
"sid": "350200010671031"
}, {
"bus_staname": "软件园西门",
"sid": "350200010671036"
}, {
"bus_staname": "金山洪塘",
"sid": "350200010671037"
}, {
"bus_staname": "湖里万达广场",
"sid": "350200010671085"
}, {
"bus_staname": "国贸中心",
"sid": "350200010671039"
}, {
"bus_staname": "翔安肖厝",
"sid": "350200010671098",
"busInfo": {
"lating": "24.564792",
"longing": "118.228637",
"distance": 0,
"dis_stat": 11
},
"preTime": "0.0"
}, {
"bus_staname": "林前",
"sid": "350200010671090",
"disState": 1
}, {
"bus_staname": "后房",
"sid": "350200010671091",
"disState": 2
}, {
"bus_staname": "洪厝",
"sid": "350200010671040",
"disState": 3
}, {
"bus_staname": "西岩跨线桥",
"sid": "350200010671103",
"disState": 4
}, {
"bus_staname": "东坑",
"sid": "350200010671062",
"disState": 5
}, {
"bus_staname": "翔安人力资源",
"sid": "350200010671063",
"disState": 6
}, {
"bus_staname": "湖头",
"sid": "350200010671064",
"disState": 7
}, {
"bus_staname": "翔安体育场",
"sid": "350200010671087",
"disState": 8
}, {
"bus_staname": "郑坂路口",
"sid": "350200010671065",
"disState": 9
}, {
"bus_staname": "数字经济产业园",
"sid": "350200010671101",
"busInfo": {
"lating": "24.639621530384673",
"longing": "118.23512598264088",
"distance": 623,
"dis_stat": 21
},
"preTime": "1.4"
}, {
"bus_staname": "亭洋",
"sid": "350200010671099",
"disState": 1
}, {
"bus_staname": "内垵",
"sid": "350200010671066",
"disState": 2
}, {
"bus_staname": "黎安",
"sid": "350200010671067",
"disState": 3
}, {
"bus_staname": "庵边路口",
"sid": "350200010671068",
"disState": 4
}, {
"bus_staname": "洪坑",
"sid": "350200010671069",
"disState": 5
}, {
"bus_staname": "仑头",
"sid": "350200010671092",
"disState": 6
}, {
"bus_staname": "湖厝",
"sid": "350200010671070",
"disState": 7
}, {
"bus_staname": "三忠",
"sid": "350200010671119",
"disState": 8
}, {
"bus_staname": "朝拜埔",
"sid": "350200010671093",
"disState": 9
}, {
"bus_staname": "新霞",
"sid": "350200010671073",
"disState": 10
}, {
"bus_staname": "埔后路口",
"sid": "350200010671074",
"disState": 11
}, {
"bus_staname": "洪塘中学",
"sid": "350200010671075",
"busInfo": {
"lating": "24.712523",
"longing": "118.201859",
"distance": 0,
"dis_stat": 33
},
"preTime": "0.0"
}, {
"bus_staname": "洪塘派出所",
"sid": "350200010671088",
"disState": 1
}, {
"bus_staname": "苏厝路口",
"sid": "350200010671077",
"disState": 2
}, {
"bus_staname": "大同东宅",
"sid": "350200010671097",
"disState": 3
}, {
"bus_staname": "康浔村",
"sid": "350200010671111",
"disState": 4
}, {
"bus_staname": "下溪头",
"sid": "350200010671086",
"disState": 5
}, {
"bus_staname": "顶溪头",
"sid": "350200010671089",
"disState": 6
}, {
"bus_staname": "啤酒厂",
"sid": "350200010671080",
"disState": 7
}, {
"bus_staname": "埔前",
"sid": "350200010671094",
"disState": 8
}, {
"bus_staname": "东桥",
"sid": "350200010671081",
"disState": 9
}, {
"bus_staname": "梵天寺",
"sid": "350200010671082",
"disState": 10
}, {
"bus_staname": "影视城",
"sid": "350200010671104",
"busInfo": {
"lating": "24.738056316747382",
"longing": "118.16051085918018",
"distance": 318,
"dis_stat": 44
},
"preTime": "0.7"
}, {
"bus_staname": "五显镇政府站",
"sid": "350200010671105",
"disState": 1
}, {
"bus_staname": "五显公交场站",
"sid": "350200010671106",
"disState": 2
}
],
"buses": [{
"lating": "24.564792",
"longing": "118.228637",
"distance": 0,
"dis_stat": 11
}, {
"lating": "24.639621530384673",
"longing": "118.23512598264088",
"distance": 623,
"dis_stat": 21
}, {
"lating": "24.712523",
"longing": "118.201859",
"distance": 0,
"dis_stat": 33
}, {
"lating": "24.738056316747382",
"longing": "118.16051085918018",
"distance": 318,
"dis_stat": 44
}
]
}
话不多，直接上代码了
<template>
<view class="bus">
<view class="bus-head">
<u-row customStyle="padding: 5px 10px;font-size: 30rpx;">
<u-col span="3">
<view class="">{{busInfo.lineinfo.bus_staname}}</view>
</u-col>
<u-col span="9">
<view class="">{{busInfo.lineinfo.sta_sta}} - {{busInfo.lineinfo.end_sta}}</view>
</u-col>
</u-row>
<u-row customStyle="padding: 5px 10px;font-size: 20rpx;color: #999" gutter="5">
<u-col span="3">
<view class="">首班 {{busInfo.lineinfo.fir_time}}</view>
</u-col>
<u-col span="3">
<view class="">末班 {{busInfo.lineinfo.end_time}}</view>
</u-col>
<u-col span="3">
<view class="">票价 {{busInfo.lineinfo.bus_money}}元</view>
</u-col>
<u-col span="3">
<view class="">总站数 {{busInfo.stations.length}}</view>
</u-col>
</u-row>
<u-row customStyle="padding: 5px 10px;">
<u-icon :label="busLength" size="15" :name="busImg"></u-icon>
</u-row>
</view>
<view class="bus-body">
<view class="box-top" v-for="(item,index) in busInfo.stations" :key="index" @click="onStation(item)">
<!-- 左边 -->
<view v-if="busInfo.buses && busInfo.buses.length && busInfo.buses.find(bus => bus.dis_stat === index + 1)" class="left-box-top" :class="{'mgt10':busInfo.buses.find(bus => bus.dis_stat === index + 1).distance !== 0}">
<view class="active" v-if="busInfo.buses.find(bus => bus.dis_stat === index + 1).distance===0">
已到站
</view>
<view style="display: flex;" v-else>
<view class="">
距离下站: {{busInfo.buses.find(bus => bus.dis_stat === index + 1).distance}}米
</view>
<u-image width="20" height="20" shape="circle" :src="busImg"></u-image>
</view>
</view>
<view v-else class="left-box-top"></view> <!-- 左边 -->
<view class="line active"><!-- 中线 -->
<view class="dot active" :class="['dot','active',busInfo.buses.find(bus => bus.dis_stat === index + 1).distance===0? 'doc-active' : '']"></view> <!-- 圆点 -->
<view class="animate-line">↓</view>
</view>
<view class="right-box-top"> <!-- 右边 -->
<view>{{item.bus_staname}}</view>
<view class="tip-color" v-if="index===0">（起始站）</view>
<view class="tip-color" v-if="index===busInfo.stations.length-1">（终点站）</view>
</view>
</view>
</view>
<view class="bus-station-sel" v-if="selStationInfo">
<view class="sel-station">{{selStationInfo.bus_staname}}</view>
<view v-if="!selStationInfo.preTime && !selStationInfo.disState" class="cur-info">等候发车</view>
<view v-if="selStationInfo.preTime&&selStationInfo.preTime <= 1" class="cur-info">
<view v-if="selStationInfo.preTime&&selStationInfo.preTime!=='0.0'">
{{Number(selStationInfo.preTime).toFixed(0)}}分钟
</view>
<view>
<view v-if="selStationInfo.busInfo&&selStationInfo.busInfo.distance===0">
已到站
</view>
<view v-else>
即将到达 / {{selStationInfo.busInfo.distance}}米
</view>
</view>
</view>
<view v-if="selStationInfo.disState" class="cur-info">
<view class="">
{{Number(selStationInfo.disState).toFixed(0)}}个站
</view>
<view class="" v-if="selStationInfo.disState <= 2">
即将到站
</view>
<view class="" v-else>
行驶中
</view>
</view>
</view>
<view class="bus-btns">
<view class="refresh mgb10" @click="refresh">
刷新
</view>
<view class="refresh mgb10" @click="onDirect">
换向
</view>
<view class="refresh mgb10" @click="onReturn">
返回
</view>
<!-- <view class="refresh mgb10"> -->
<button class="refresh mgb10 share" open-type="share">
<view>分享好友</view>
<!-- <image class="right" src="/static/right_h.png"></image> -->
</button>
推荐
<!-- </view> -->
</view>
</view>
</template>
<script>
import { getBusNow } from "../../api/bus.js";
import adUtils from "../../util/tools/ad.js";
export default {
name: 'timeBus',
data() {
return {
busImg: require("../../static/images/bus.png"),
selStationInfo: null,
lineInfo:null,
city: null,
busInfo: {
"lineinfo": {},
"stations": [],
"buses": []
},
busLength: 0,
time: null
}
},
onLoad(options) {
this.lineInfo = JSON.parse(options.lineInfo);
this.city = uni.getStorageSync('currentCity');
this.getBusNow(this.lineInfo,this.city.cityid,this.lineInfo.bus_linestrid || this.lineInfo.busLinestrid);
},
unLoad() {
this.time && clearInterval(this.time);
},
methods: {
onStation(data) {
this.selStationInfo = null;
this.selStationInfo = data;
},
onDirect() {
this.getBusNow(this.lineInfo,this.city.cityid,this.busInfo.lineinfo.other_lineid);
},
onReturn() {
uni.navigateBack({
url: "/pages/index/home/home",
success: (res) => {
console.log(`跳转到首页`);
},
fail: (err)=> {
console.log(err)
}
})
},
refresh() {
this.getBusNow(this.lineInfo,this.city.cityid,this.lineInfo.bus_linestrid || this.lineInfo.busLinestrid);
},
toLine(name) {
return name.replace(/([A-Z])/g,"_$1").toLowerCase();
},
async getBusNow(lineInfo,cityid,lineId) {
const keyStr = this.$store.state.$keyStr;
const idEncryption = this.$store.state.$idEncryption;
const res = await getBusNow({
params: {
idEncryption,
key: keyStr,
cityId: cityid,
busLinestrid: lineId,
busLinenum: lineInfo.bus_linenum || lineInfo.busLinenum,
busStaname: lineInfo.bus_staname || lineInfo.busStaname
}
});
this.busInfo = res;
this.busLength = `当前有${res.buses?res.buses.length : 0}辆车正在行驶`;
},
}
}
</script>
<style lang="scss" scoped>
.bus {
&-body{
.box-top{
font-size: 26rpx;
width: 100%;
min-height: 120rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
.left-box-top{
width: 240rpx;
text-align: right;
padding-left: 10rpx;
color: red;
}
.mgt10 {
margin-top: -60rpx;
}
.line{
width: 28rpx;
background-color: springgreen;
margin: 0 20rpx 0 20rpx;
.dot{
width: 18rpx;
height: 18rpx;
background-color: white;
border: 6rpx solid springgreen;
border-radius: 50%;
position: relative;
// left: -26rpx;
}
.doc-active {
border: 6rpx solid blue;
}
.animate-line {
animation-name: move;
font-size: 30rpx;
color: white;
animation-timing-function: linear;
animation-duration: .3s;
animation-iteration-count: infinite;
animation-delay: 1s;
animation-direction: alternate;
animation-fill-mode: forwards;
}
}
.right-box-top{
flex: 1;
padding: 0 0 20rpx 0;
}
}
//激活元素
.active{
color: springgreen;
}
// 隐藏元素
.none{
background-color: rgba(0,0,0,0) !important;
}
.tip-color{
color: #eb9b02;
}
}
&-station-sel {
position: fixed;
background-color: green;
color: white;
text-align: center;
top: 20%;
min-width: 200rpx;
right: 0;
.sel-station {
height: 40rpx;
background-color: seagreen;
padding: 10rpx;
}
.cur-info {
padding: 10rpx;
font-size: 20rpx;
}
}
&-btns{
position: fixed;
// background-color: green;
color: white;
text-align: center;
top: 50%;
width: 150rpx;
right: 0;
.refresh {
border-top-left-radius: 30rpx;
border-bottom-left-radius: 30rpx;
text-align: center;
border: 1px solid green;
background-color: green;
width: 100%;
height: 60rpx;
line-height: 60rpx;
}
.mgb10 {
margin-bottom: 20rpx;
}
.share {
border-top-right-radius: 0%;
color: #fff;
border-bottom-right-radius: 0%;
}
}
}
@keyframes move {
0% {
transform: translateY(100%);
}
50% {
transform: translateY(50%);
}
80% {
transform: translateY(20%);
}
100% {
transform: translateY(0);
}
}
</style>
最终的效果图：
演示的微信小程序如下：
