chuangte/bike
5
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
28085e2538
bike/pages_admin/order/device_detail.vue

442 lines
8.9 KiB
Vue
Raw Normal View History

11
2024-05-09 18:00:26 +08:00
<template>
11
2024-05-09 20:58:53 +08:00
<view class="page">
<u-navbar title="设备详情" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
height='36'></u-navbar>
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
:show-location='true' :polygons='polygons' :markers="markers" :polyline="polyline"></map>
<view class="info_card">
<view class="info_tit">
设备信息
</view>
<view class="lines"></view>
<view class="cont">
<view class="info_li">
<view class="half_infoli">
车牌号：<input type="text" v-model="searchKeyword" placeholder="" class="input"
placeholder-style="color:#C7CDD3">
</view>
<view class="half_infoli">
MAC：<span>1Km</span>
</view>
</view>
<view class="info_li">
<view class="half_infoli">
SN：<span>6分钟</span>
</view>
<view class="half_infoli">
车辆型号：<span>1Km</span>
</view>
</view>
<view class="info_li">
运营区域：<span>已完成</span>
</view>
</view>
<view class="lines"></view>
<view class="cont">
<view class="info_li">
<view class="half_infoli">
车辆状态：<span>6分钟</span>
</view>
<view class="half_infoli">
续航里程：<span>1Km</span>
</view>
</view>
<view class="info_li">
异常原因：<span>已完成</span>
</view>
</view>
<view class="lines"></view>
<view class="cont">
<view class="info_li">
<view class="half_infoli">
电池编号：<span>6分钟</span>
</view>
<view class="half_infoli">
GPRS信号：<span>1Km</span>
</view>
</view>
<view class="info_li">
电池电量：<span>已完成</span>
</view>
</view>
<view class="lines"></view>
<view class="cont">
<view class="info_li">
最后定位坐标：<span>120.257015;27.10556</span>
</view>
<view class="info_li" style="flex-wrap: wrap;display: inline-block;">
最后定位地址：<span>福建省宁德市福鼎市秦晖路附近久久红农 家乐（朝阳路店）</span>
</view>
<view class="info_li">
最后定位时间：<span>2024-04-25 15:22:36</span>
</view>
</view>
</view>
<view class="info_card" style="margin-top: 20rpx;">
<view class="info_tit">
订单信息
</view>
<view class="lines"></view>
<view class="cont">
<view class="info_li">
当前用户：<span>13365492512</span>
</view>
<view class="info_li" style="flex-wrap: wrap;display: inline-block;">
当前订单编号：<span>2169987651526787</span>
</view>
<view class="info_li">
最后定位时间：<span>2024-04-25 15:22:36</span>
</view>
</view>
</view>
<view class="bot_btn">
<view class="btn">
开锁
</view>
<view class="btn">
关锁
</view>
<view class="btn">
车辆禁用
</view>
<view class="btn">
车辆解禁
</view>
<view class="btn">
响铃寻车
</view>
<view class="btn" @click="tipshow=true" v-if="info.type==1">
维修处理
</view>
<view class="btn" @click="tipshow=true" v-if="info.type==2">
换电处理
</view>
</view>
<u-mask :show="show" @click="show = false" :z-index='100' />
<view class="tip_box" v-if="showgj">
<view class="top">
<view class="tip">
修改车牌号
</view>
<view class="ipt_box">
<view class="text">
车牌号
</view>
<view class="ipt">
<input type="text"
v-model="searchKeyword"
placeholder="0.00"
class="input"
placeholder-style="color:#C7CDD3"
>
元
</view>
</view>
</view>
<view class="bot">
<view class="bot_left" @click="show=false">
取消
</view>
<view class="bot_right">
确定
</view>
</view>
</view>
<!-- <view class="bot">
<view class="btn">
退款
</view>
</view> -->
11
2024-05-09 18:00:26 +08:00
</view>
</template>
<script>
export default {
data() {
return {
11
2024-05-09 20:58:53 +08:00
bgc: {
backgroundColor: "#F7FAFE",
},
show:true,
showgj:true,
searchKeyword: '11',
latitude: 39.916527,
longitude: 116.397128,
isMap: false,
zoomSize: 15,
markers: [{
id: 1,
latitude: 39.90469,
longitude: 116.40717,
title: 'Marker1'
}, {
id: 2,
latitude: 39.90969,
longitude: 116.41217,
title: 'Marker2'
}],
polyline: [{
points: [{
latitude: 39.916527,
longitude: 116.397128
}, {
latitude: 39.926527,
longitude: 116.397128
}, {
latitude: 39.926527,
longitude: 116.407128
}, {
latitude: 39.916527,
longitude: 116.407128
}],
width: 8,
arrowLine: true,
color: '#00AF99'
// strokeWidth: 2,
// strokeColor: '#00AF99',
// fillColor: '#00AF99'
}, ],
polygons: [{
points: [{
latitude: 39.918527,
longitude: 116.400128
},
{
latitude: 39.922527,
longitude: 116.400128
},
{
latitude: 39.924527,
longitude: 116.405128
},
{
latitude: 39.912527,
longitude: 116.402128
}
],
strokeColor: '#00FF00DD', // 使用不同的颜色来区分第二个区域
strokeWidth: 2,
fillColor: '#00FF00DD'
}],
cardId: '001区域'
11
2024-05-09 18:00:26 +08:00
}
},
methods: {
11
2024-05-09 20:58:53 +08:00
11
2024-05-09 18:00:26 +08:00
}
}
</script>
11
2024-05-09 20:58:53 +08:00
<style lang="scss">
page {
background-color: #F3F3F3;
}
.page {
padding-bottom: 250rpx;
width: 750rpx;
.map {
width: 750rpx;
height: 752rpx;
}
.tip_box {
position: fixed;
left: 72rpx;
top: 628rpx;
width: 610rpx;
// height: 282rpx;
background: #FFFFFF;
border-radius: 30rpx 30rpx 30rpx 30rpx;
z-index: 110;
padding-bottom: 100rpx;
.top {
padding: 52rpx 38rpx 42rpx 36rpx;
.ipt_box{
margin-top: 22rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.text{
width: 96rpx;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
}
.ipt{
padding: 10rpx 18rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 26rpx;
width: 420rpx;
height: 64rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx solid #979797;
.input{
width: 80%;
}
}
}
.tip{
width: 100%;
text-align: center;
font-weight: 700;
font-size: 32rpx;
color: #3D3D3D;
}
.txt {
margin-top: 32rpx;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
}
.bot {
position: absolute;
width: 610rpx;
// border-top: 2rpx solid #D8D8D8;
display: flex;
flex-wrap: nowrap;
// height: 100%;
bottom: -20rpx;
.bot_left {
border-radius: 0rpx 0rpx 0rpx 30rpx;
width: 50%;
height: 86rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
background: #EEEEEE;
}
.bot_right {
border-radius: 0rpx 0rpx 30rpx 0rpx;
width: 50%;
height: 86rpx;
background: #4C97E7;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
// border-left: 2rpx solid #D8D8D8;
font-weight: 500;
font-size: 32rpx;
// color: #4C97E7;
}
}
}
.bot_btn{
position: fixed;
bottom: 0;
display: flex;
flex-wrap: wrap;
padding: 40rpx 18rpx;
width: 750rpx;
height: 230rpx;
background: #fff;
// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
border-radius: 0rpx 0rpx 0rpx 0rpx;
.btn:nth-child(4n) {
margin-right: 0;
}
.btn{
margin-right: 18rpx;
display: flex;
align-items: center;
justify-content: center;
width: 164rpx;
height: 66rpx;
background: #E2F2FF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx solid #4C97E7;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
.info_card {
background: #FFFFFF;
.info_tit {
display: flex;
flex-wrap: nowrap;
padding: 22rpx 28rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
11
2024-05-09 18:00:26 +08:00
11
2024-05-09 20:58:53 +08:00
.money {
margin-left: auto;
font-weight: 500;
font-size: 32rpx;
color: #4C97E7;
}
}
.lines {
width: 750rpx;
height: 2rpx;
border: 2rpx solid #ccc;
}
.cont {
padding: 26rpx 28rpx;
.info_li {
display: flex;
flex-wrap: nowrap;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span {
color: #3D3D3D;
}
line-height: 48rpx;
.half_infoli {
display: flex;
flex-wrap: nowrap;
width: 50%;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span {
color: #3D3D3D;
}
.input{
width: 30%;
}
}
}
}
}
}
</style>
Reference in New Issue Copy Permalink