inti
This commit is contained in:
MeSHard
336
pages/car/car.vue
Normal file
336
pages/car/car.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user