532 lines
9.2 KiB
Vue
532 lines
9.2 KiB
Vue
<!-- 道路救援 首页-->
|
|
<template>
|
|
<view class="content">
|
|
<view class="dil">
|
|
<!-- 顶部 -->
|
|
<view class="top-two">
|
|
<view class="top-left">
|
|
<view class="left1">
|
|
<text>当前空闲</text>
|
|
</view>
|
|
<view class="left2">
|
|
<text>10条待确认</text>
|
|
</view>
|
|
</view>
|
|
<view class="top-right">
|
|
<view class="">
|
|
<uni-icons type="location-filled" color="#4282D8" size="16"></uni-icons>
|
|
</view>
|
|
<view class="">泸州</view>
|
|
</view>
|
|
</view>
|
|
<!-- 四个选项 -->
|
|
<view class="four-box">
|
|
<view class="boxf">
|
|
<view class="zi1">待确认</view>
|
|
<view class="zi2">0</view>
|
|
</view>
|
|
<view class="boxf1">
|
|
<view class="zi1">进行中</view>
|
|
<view class="zi2">0</view>
|
|
</view>
|
|
<view class="boxf2">
|
|
<view class="zi1">已完成</view>
|
|
<view class="zi2">0</view>
|
|
</view>
|
|
<view class="boxf3" @click="getyyz()">
|
|
<view class="zi1" v-if="yy==true">开始营业</view>
|
|
<view class="zi1" v-if="yy==false">营业中...</view>
|
|
<!-- <view class="zi2">0</view> -->
|
|
</view>
|
|
</view>
|
|
<!-- 标签切换 -->
|
|
<view class="box-tap">
|
|
<view class="tap-left">
|
|
<view v-for="(item,index) in tapbox" :key="index">
|
|
<view class="zi3" :class="{'acttext' : tapid == item.id }" @click="gettap(item.id)">
|
|
{{item.text}}
|
|
</view>
|
|
<view class="gang" v-if=" tapid == item.id "></view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<!-- <view class="tap-right" @click="gohistory()">
|
|
<view class="zi3">
|
|
历史订单
|
|
</view>
|
|
<view class="">
|
|
<uni-icons color: #666666; type="right" size="18"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="tap-box">
|
|
|
|
<view class="boxt">
|
|
<view class="boxt-left">
|
|
<view class="left-lan">
|
|
<view class="">搭电</view>
|
|
</view>
|
|
<view class="text1">目的地</view>
|
|
<view class="text2">救援车辆距 <text class="lanzi"> 1.7KM</text> </view>
|
|
<view class="text2">预计 <text class="lanzi">30分钟</text> 到达</view>
|
|
</view>
|
|
<view class="boxt-right">
|
|
<view class="zhtai">
|
|
<view class="">待支付</view>
|
|
</view>
|
|
<view class="dianhua">
|
|
<view class="ticon">
|
|
<image src="../../static/dh.png" mode=""></image>
|
|
</view>
|
|
<view class="">联系司机</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 一键救援 -->
|
|
<view class="yijian">
|
|
<view class="y-left" @click="getyi()">
|
|
<view class="">司机端测试</view>
|
|
</view>
|
|
<view class="y-right">
|
|
<view class="">列表</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view style="width: 100%; height: 80px; "></view>
|
|
<!-- dibu -->
|
|
</view>
|
|
<tabBar></tabBar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request';
|
|
import tabBar from '../../components/tabBar/tabBar.vue';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
latitude: '',
|
|
longitude: '',
|
|
counter: 0,
|
|
timer: null,
|
|
yy: true,
|
|
arrbox: [{
|
|
text: '待支付',
|
|
id: 1
|
|
},
|
|
{
|
|
text: '待评价',
|
|
id: 2
|
|
},
|
|
],
|
|
tapid: 1,
|
|
tapbox: [{
|
|
text: '待确认',
|
|
id: 1
|
|
},
|
|
{
|
|
text: '进行中',
|
|
id: 2
|
|
},
|
|
{
|
|
text: '已完成',
|
|
id: 3
|
|
},
|
|
],
|
|
userinfo: {},
|
|
one: true,
|
|
ws: null,
|
|
timeout: null,
|
|
heartbeatMessage: 'ping',
|
|
heartbeatInterval: 5000, // 心跳间隔，单位：毫秒
|
|
reconnectInterval: 1000, // 断线重连间隔，单位：毫秒
|
|
lastHeartbeatTime: null, // 上一次心跳时间
|
|
|
|
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {},
|
|
components: {
|
|
tabBar,
|
|
},
|
|
methods: {
|
|
getStatus() {
|
|
request({
|
|
url: '/app/driver/getStatus?driverId=' + this.userinfo.userId,
|
|
method: 'get',
|
|
|
|
}).then((res) => {
|
|
console.log('初次加载', res);
|
|
})
|
|
},
|
|
getyyz() {
|
|
this.yy = !this.yy
|
|
if (this.yy == true) {
|
|
this.getconnect()
|
|
}
|
|
|
|
},
|
|
getone() {
|
|
this.one = !this.one
|
|
},
|
|
//一键救援
|
|
getyi() {
|
|
uni.navigateTo({
|
|
url: '/pages/rescue/order'
|
|
})
|
|
},
|
|
//预约
|
|
getyue() {
|
|
uni.navigateTo({
|
|
url: '/pages/rescue/order'
|
|
})
|
|
},
|
|
//标签页的切换
|
|
gettap(id) {
|
|
this.tapid = id
|
|
},
|
|
gohistory() {
|
|
uni.navigateTo({
|
|
url: '/pages/rescue/historylist'
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer); // 销毁组件前清除定时器
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100vh);
|
|
|
|
background-color: #F6F6F6;
|
|
|
|
}
|
|
|
|
.dil {
|
|
background-color: #F6F6F6;
|
|
box-sizing: border-box;
|
|
padding: 45px 12px;
|
|
}
|
|
|
|
.top-two {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-left {
|
|
width: 180px;
|
|
height: 26px;
|
|
box-sizing: border-box;
|
|
border-radius: 50px;
|
|
background-color: #D1EDFF;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left1 {
|
|
width: 50%;
|
|
background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
|
|
font-size: 13px;
|
|
color: white;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.left2 {
|
|
width: 50%;
|
|
background: #D1EDFF;
|
|
font-size: 13px;
|
|
color: #207EFE;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-right {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #4282D8;
|
|
}
|
|
|
|
.four-box {
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
|
|
}
|
|
|
|
.boxf {
|
|
margin-top: 6px;
|
|
height: 84px;
|
|
width: 49%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
background-image: url('../../static/dzf.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.boxf1 {
|
|
margin-top: 6px;
|
|
height: 84px;
|
|
width: 49%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
background-image: url('../../static/dpq.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.boxf2 {
|
|
margin-top: 6px;
|
|
height: 84px;
|
|
width: 49%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
background-image: url('../../static/zxz.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.boxf3 {
|
|
margin-top: 6px;
|
|
height: 84px;
|
|
width: 49%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
background-image: url('../../static/yyd.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.zi1 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.zi2 {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.box-tap {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.tap-left {
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.tap-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.zi3 {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.left-img1 {
|
|
width: 65px;
|
|
height: 15px;
|
|
margin-right: 20px;
|
|
|
|
// smargin-bottom: 10px;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.gang {
|
|
width: 40px;
|
|
height: 5px;
|
|
border-radius: 50px;
|
|
margin-top: 6px;
|
|
background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
|
|
}
|
|
|
|
.tap-box {
|
|
margin-top: 24px;
|
|
background-color: #F6F6F6;
|
|
}
|
|
|
|
.boxt {
|
|
// height: 110px;
|
|
width: 100%;
|
|
background-color: white;
|
|
border-radius: 6px;
|
|
margin-top: 14px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.boxt-left {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.left-lan {
|
|
width: 50px;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #207EFE;
|
|
font-size: 14px;
|
|
color: white;
|
|
border-radius: 0px 0px 6px 0px;
|
|
}
|
|
|
|
.text1 {
|
|
margin-left: 24px;
|
|
margin-top: 5px;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.lanzi {
|
|
font-weight: bold;
|
|
color: #4C98FF;
|
|
}
|
|
|
|
.text2 {
|
|
margin-left: 24px;
|
|
margin-top: 5px;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.boxt-right {
|
|
width: 50%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.zhtai {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 60px;
|
|
height: 25px;
|
|
box-sizing: border-box;
|
|
background: #FFD7D7;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FF4C4C;
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.dianhua {
|
|
position: absolute;
|
|
bottom: -110px;
|
|
right: 10px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #3289FF;
|
|
|
|
}
|
|
|
|
.ticon {
|
|
|
|
|
|
width: 12px;
|
|
height: 13px;
|
|
margin-right: 5px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.yijian {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
background: #F3BA60;
|
|
color: #542F0E;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.y-left {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 70%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
background: #FFE3AC;
|
|
}
|
|
|
|
.y-right {
|
|
width: 30%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.acttext {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|