336 lines
6.9 KiB
Vue
336 lines
6.9 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="add_btn">
|
|
<u-button type="primary" size="small" text="绑定车辆" @click="addCar" icon="plus-circle"></u-button>
|
|
</view>
|
|
|
|
<view class="card" :style="{ backgroundColor: item.color_color }" v-for="(item,index) in list">
|
|
<div class="vehicle-image" :style="{ backgroundColor: item.color_bg }">
|
|
<u-icon name="car-fill" color="#ffffff" size="90"></u-icon>
|
|
<div class="vehicle-number">{{item.vehicleNo}}</div>
|
|
<div class="vehicle-status " :style="{ backgroundColor: item.color_bg }">{{item.color_name}}</div>
|
|
<!-- status-available -->
|
|
</div>
|
|
<view class="vehicle-details">
|
|
<view class="vehicle-title">
|
|
<!-- <view class="vehicle-type" :style="{ backgroundColor: item.color_bg }">{{item.color_name}}</view> -->
|
|
</view>
|
|
<div class="vehicle-driver">
|
|
<div class="driver-avatar">{{config.account.slice(0, 1)}}</div>
|
|
<div class="driver-info">
|
|
<div class="driver-name">{{config.account.slice(0, 1)}}师傅</div>
|
|
<div class="driver-phone">{{config.phone.slice(0, 3)}}****{{config.phone.slice(7, 11)}}</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="vehicle-actions">
|
|
<view class="action-btn">
|
|
<u-button type="primary" size="small" text="入园申请" @click="enParkReport(item.vehicleNo)"></u-button>
|
|
</view>
|
|
<view class="action-btn">
|
|
<u-button type="success" size="small" text="编辑" @click="updateBindVehicle(item)"></u-button>
|
|
</view>
|
|
<view class="action-btn">
|
|
<u-button type="error" size="small" text="解除绑定" @click="unbindVehicle(item)"></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '../../common/config';
|
|
import {
|
|
get,
|
|
post
|
|
} from '@/common/request.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
color: [{
|
|
dai: {
|
|
color: '#dadbde40',
|
|
bg: '#dadbde'
|
|
}
|
|
},
|
|
{
|
|
lv: {
|
|
color: '#00ff001a',
|
|
bg: '#0f0'
|
|
}
|
|
},
|
|
{
|
|
huang: {
|
|
color: '#ffff001a',
|
|
bg: '#ff0'
|
|
}
|
|
},
|
|
{
|
|
huong: {
|
|
color: '#ff00001a',
|
|
bg: '#f00'
|
|
}
|
|
},
|
|
|
|
],
|
|
list: [],
|
|
color_1: '',
|
|
config:config.driverInfo
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getCarList()
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
onPullDownRefresh() {
|
|
setTimeout(() => {
|
|
this.getCarList()
|
|
uni.stopPullDownRefresh();
|
|
}, 500);
|
|
},
|
|
addCar() {
|
|
uni.navigateTo({
|
|
url: '/pages/car/addCar'
|
|
})
|
|
},
|
|
async getCarList() {
|
|
await post('/myapi/api/yq_driver/carList').then(res => {
|
|
res.data.map((value, index) => {
|
|
if (value.qr_color == 1) {
|
|
value.color_name = '绿码'
|
|
value.color_bg = '#0f0'
|
|
value.color_color = '#00ff001a'
|
|
} else if (value.qr_color == 2) {
|
|
value.color_name = '黄码'
|
|
value.color_bg = '#ff0'
|
|
value.color_color = '#ffff001a'
|
|
} else if (value.qr_color == 3) {
|
|
value.color_name = '红码'
|
|
value.color_bg = '#f00'
|
|
value.color_color = '#ff00001a'
|
|
}
|
|
})
|
|
this.list = res.data
|
|
})
|
|
},
|
|
enParkReport(vehicleNo) {
|
|
uni.navigateTo({
|
|
url: '/pages/order/addPark?vehicleNo=' + vehicleNo
|
|
})
|
|
},
|
|
updateBindVehicle(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/car/addCar?id=' + item.id + '&vehicleNo=' + item.vehicleNo
|
|
})
|
|
},
|
|
async unbindVehicle(item) {
|
|
|
|
const modalRes = await new Promise((resolve) => {
|
|
uni.showModal({
|
|
title: '解除绑定',
|
|
content: '是否确定解除绑定？',
|
|
success: resolve
|
|
})
|
|
})
|
|
|
|
if (!modalRes.confirm) return
|
|
|
|
|
|
|
|
const result = await post('/myapi/api/yq_driver/unbindVehicle', {
|
|
vehicleNo: item.vehicleNo
|
|
})
|
|
|
|
if (result.code == 1) {
|
|
uni.showToast({
|
|
title: '解绑成功',
|
|
icon: 'none'
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/car/car'
|
|
})
|
|
}, 500)
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.container {
|
|
padding: 10px 20px;
|
|
position: relative;
|
|
|
|
.add_btn {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 0px;
|
|
// width: 300px;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
}
|
|
|
|
.card {
|
|
|
|
background: white;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin-bottom: 20px;
|
|
|
|
.vehicle-image {
|
|
height: 160px;
|
|
background: linear-gradient(135deg, #1a6dcc, #0d4a9e);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 40px;
|
|
position: relative;
|
|
|
|
.vehicle-number {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 15px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
padding: 5px 12px;
|
|
border-radius: 20px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
// .status-available {
|
|
// background: #2ecc71;
|
|
// }
|
|
|
|
.vehicle-status {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.vehicle-details {
|
|
padding: 20px;
|
|
flex-grow: 1;
|
|
|
|
.vehicle-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #1a3a6d;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
|
|
.vehicle-type {
|
|
font-size: 14px;
|
|
color: #4d4949;
|
|
padding: 3px 10px;
|
|
// border-radius: 20px;
|
|
}
|
|
}
|
|
|
|
.vehicle-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
margin-top: 15px;
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.info-label {
|
|
font-size: 12px;
|
|
color: #777;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vehicle-driver {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 15px;
|
|
padding-top: 15px;
|
|
border-top: 1px dashed #c9c5c5;
|
|
|
|
.driver-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #1a6dcc;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
|
|
.driver-info {
|
|
flex: 1;
|
|
|
|
.driver-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.driver-phone {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.vehicle-actions {
|
|
padding: 15px 20px;
|
|
// background: #f9fbfd;
|
|
border-top: 1px solid #c9c5c5;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |