499 lines
12 KiB
Vue
499 lines
12 KiB
Vue
<template>
|
||
<view class="student-details">
|
||
|
||
<!-- 顶部表头信息 -->
|
||
<view class="page-top" :style='{ justifyContent: "center" }'>
|
||
|
||
<!-- 返回上一级页面信息 -->
|
||
<view class='go-back-page' @click='pageBack'>返回</view>
|
||
|
||
<!-- 人员/车辆/我的组件显示的表头信息 -->
|
||
<view class="other-title-class">
|
||
车辆管理
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 顶部卡片信息 -->
|
||
<view class='top-card-class'>
|
||
<!-- 卡片信息 -->
|
||
<view class='people-info-class'>
|
||
|
||
<!-- <view class='info-left'>
|
||
<image
|
||
src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/d130f1d20b4540da9a9b1821fe16a53e_mergeImage.png"
|
||
mode=""></image>
|
||
</view> -->
|
||
<view class="info-left">
|
||
<image :src="carDetail.avatar ? (imgUrl + carDetail.avatar) : defaultAvatar" mode=""
|
||
@tap="previewImage" />
|
||
</view>
|
||
<view class='info-right'>
|
||
<view class='info-right-top'>车牌号：{{ carDetail.carNo }}</view>
|
||
<view class='info-right-bottom'>{{ carDetail.brand }} {{ carDetail.carModel }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- <card-com :buttonTabValue="2" ref='cardCom' :listData="listData"></card-com> -->
|
||
</view>
|
||
|
||
<!-- 详情内容信息 -->
|
||
<view class='student-content-class'>
|
||
|
||
<view class='content-in-class'>
|
||
|
||
<!-- 车辆信息 -->
|
||
<view class='student-info-class card-simple-lass'>
|
||
|
||
<!-- 卡片标题信息 -->
|
||
<view class='title-class'>
|
||
|
||
<view class='title-left-class'>车辆信息</view>
|
||
<view class='title-right-class' @click="dropDown(1)">
|
||
<view><text v-if="showCar1">点击收起</text><text v-if="!showCar1">点击展开</text></view>
|
||
<image v-if="!showCar1" src="../../indexCom/img/kuang_xiala.png" mode="scaleToFill"></image>
|
||
<image v-if="showCar1" src="../../indexCom/img/shouqi.png" mode="scaleToFill"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class='row-line-class'>-->
|
||
<!-- <view class='form-row-title-class'>公司名称</view>-->
|
||
<!-- <view class='form-row-content-class'>一汽大众</view>-->
|
||
<!-- </view>-->
|
||
<!-- 表单内容信息 - 一行多列样式 -->
|
||
<view v-show="showCar1">
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>车辆使用人</view>
|
||
<view class='form-row-content-class'>{{ carDetail.userName }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>使用人电话</view>
|
||
<view class='form-row-content-class'>{{carDetail.userPhone}}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>车架号</view>
|
||
<view class='form-row-content-class'>{{ carDetail.frameNumber }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>发动机号</view>
|
||
<view class='form-row-content-class'>{{ carDetail.engineNumber }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>车辆注册日期</view>
|
||
<view class='form-row-content-class'>{{ carDetail.carRegisterDate }}</view>
|
||
</view>
|
||
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>年检到期时间</view>
|
||
<view class='form-row-content-class'>{{ carDetail.inspectionDate }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>保险到期时间</view>
|
||
<view class='form-row-content-class'>{{ carDetail.baoxianEntime }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>承保险种</view>
|
||
<view class='form-row-content-class'>{{ carDetail.content }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>最近保养日期</view>
|
||
<view class='form-row-content-class'>{{ carDetail.upkeepRecentTime }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>最近保养公里数</view>
|
||
<view class='form-row-content-class'>{{ carDetail.upkeepRecentMileage }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>下次保养日期</view>
|
||
<view class='form-row-content-class'>{{ carDetail.upkeepNextTime }}</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>下次保养公里数</view>
|
||
<view class='form-row-content-class'>{{ carDetail.upkeepNextMileage }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='card-simple-lass'>
|
||
|
||
<!-- 卡片标题信息 -->
|
||
<view class='title-class'>
|
||
<view class='title-left-class'>车辆附件</view>
|
||
<view @click="goFile" style="color:#55A3FF">查看附件</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上年保费 -->
|
||
<view class='card-simple-lass'>
|
||
|
||
<!-- 卡片标题信息 -->
|
||
<view class='title-class'>
|
||
|
||
<view class='title-left-class'>上年保费</view>
|
||
<view class='title-right-class' @click="dropDown(2)">
|
||
<view><text v-if="showCar2">点击收起</text><text v-if="!showCar2">点击展开</text></view>
|
||
<image v-if="!showCar2" src="../../indexCom/img/kuang_xiala.png" mode="scaleToFill"></image>
|
||
<image v-if="showCar2" src="../../indexCom/img/shouqi.png" mode="scaleToFill"></image>
|
||
</view>
|
||
</view>
|
||
<view v-show="showCar2">
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>交强险</view>
|
||
<view class='form-row-content-class'>{{ carDetail.compulsoryIns }} 元</view>
|
||
</view>
|
||
<view class='row-line-class'>
|
||
<view class='form-row-title-class'>商业险</view>
|
||
<view class='form-row-content-class'>{{ carDetail.busiIns }} 元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 空占位符 -->
|
||
<view class='null-view-class'></view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import cardCom from '../../indexCom/cardList/cardCom.vue'
|
||
import request from '@/utils/request';
|
||
import config from '@/config'
|
||
export default {
|
||
components: {
|
||
// 顶部卡片信息
|
||
cardCom
|
||
},
|
||
data() {
|
||
return {
|
||
// 顶部卡片数组信息
|
||
listData: [
|
||
[]
|
||
],
|
||
//车辆信息
|
||
carDetail: {},
|
||
showCar1: true,
|
||
showCar2: false,
|
||
showCar3: false,
|
||
imgUrl: config.imagesUrl,
|
||
defaultAvatar: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a6443b351f174eee968f9019dc0c06c6_mergeImage.png',
|
||
}
|
||
},
|
||
onLoad(data) {
|
||
console.log('接收数据', data)
|
||
this.getDetail(data.id)
|
||
},
|
||
methods: {
|
||
/**
|
||
* 展开收起更多字段
|
||
*/
|
||
dropDown(index) {
|
||
switch (index) {
|
||
case 1:
|
||
this.showCar1 = !this.showCar1
|
||
break;
|
||
case 2:
|
||
this.showCar2 = !this.showCar2
|
||
break;
|
||
case 3:
|
||
this.showCar3 = !this.showCar3
|
||
break;
|
||
}
|
||
},
|
||
/**
|
||
* @description 返回上一级页面
|
||
*/
|
||
pageBack() {
|
||
uni.navigateBack({
|
||
delta: 1 // delta值为1时表示返回的页面层数
|
||
});
|
||
},
|
||
previewImage() {
|
||
const avatar = this.carDetail.avatar ?
|
||
this.imgUrl + this.carDetail.avatar :
|
||
this.defaultAvatar;
|
||
|
||
uni.previewImage({
|
||
current: avatar,
|
||
urls: [avatar]
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取车辆详情
|
||
*/
|
||
getDetail(id) {
|
||
request({
|
||
url: '/admin-api/drivingSchool/system/car/' + id,
|
||
method: 'get',
|
||
}).then((res) => {
|
||
this.carDetail = res.data
|
||
console.log('carDeatlis', this.carDetail)
|
||
let carPhotoArray = []
|
||
let drivingLicenceArray = []
|
||
let otherPhotoArray = []
|
||
this.carDetail.carPhoto.split(",").map((item) => {
|
||
carPhotoArray.push({
|
||
url: config.imagesUrl + item
|
||
})
|
||
})
|
||
this.carDetail.drivingLicence.split(",").map((item) => {
|
||
drivingLicenceArray.push({
|
||
url: config.imagesUrl + item
|
||
})
|
||
})
|
||
this.carDetail.otherPhoto.split(",").map((item) => {
|
||
otherPhotoArray.push({
|
||
url: config.imagesUrl + item
|
||
})
|
||
})
|
||
this.carDetail.carPhotoArray = carPhotoArray
|
||
this.carDetail.drivingLicenceArray = drivingLicenceArray
|
||
this.carDetail.otherPhotoArray = otherPhotoArray
|
||
})
|
||
},
|
||
goFile() {
|
||
if (!this.carDetail.id) {
|
||
uni.showToast({
|
||
title: '请先新增车辆',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.carDetail.folderId) {
|
||
console.log('当前员工没有文件加')
|
||
//给当前员工创建一个文件夹
|
||
request({
|
||
url: '/admin-api/system/equInfo/addFolder',
|
||
method: 'post',
|
||
data: JSON.stringify(this.carDetail.id), // 手动转换为 JSON
|
||
}).then(res => {
|
||
this.carDetail.folderId = res.data
|
||
uni.navigateTo({
|
||
url: '/pages/internalManagement/dataManagement/deviceManage?type=staff&folderId=' +
|
||
this.carDetail.folderId
|
||
})
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/internalManagement/dataManagement/deviceManage?type=staff&folderId=' + this
|
||
.carDetail.folderId
|
||
})
|
||
}
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.test-in-content {
|
||
width: 94%;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 32rpx;
|
||
background-color: #F5F6F9;
|
||
|
||
.image-form-class {
|
||
margin-bottom: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
|
||
image {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
.row-line-class {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
.null-view-class {
|
||
width: 1rpx;
|
||
height: 10rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.people-info-class {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #F5F6F9;
|
||
background-color: white;
|
||
padding: 22rpx;
|
||
|
||
.info-left {
|
||
flex-shrink: 0;
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-right-top {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #101A3E;
|
||
text-align: left;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.info-right-bottom {
|
||
margin-top: 20rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #8D90A6;
|
||
}
|
||
|
||
.image-form-class {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
padding-bottom: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f5f6f9;
|
||
|
||
image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.row-line-class {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #F5F6F9;
|
||
|
||
.form-row-title-class {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #8D90A6;
|
||
text-align: left;
|
||
}
|
||
|
||
.form-row-content-class {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #1F1F1F;
|
||
}
|
||
}
|
||
|
||
.top-card-class {
|
||
width: 100%;
|
||
height: 166rpx;
|
||
}
|
||
|
||
.student-content-class {
|
||
width: 100%;
|
||
padding: 20rpx;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
overflow-y: scroll;
|
||
|
||
.content-in-class {
|
||
width: 94%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-simple-lass {
|
||
width: 94%;
|
||
padding: 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
flex-shrink: 0;
|
||
|
||
.form-title-class {
|
||
width: 100%;
|
||
margin-bottom: 12rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #8D90A6;
|
||
text-align: left;
|
||
}
|
||
|
||
.form-content-class {
|
||
width: 100%;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #1F1F1F;
|
||
text-align: left;
|
||
padding-bottom: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #F5F6F9;
|
||
}
|
||
|
||
.title-class {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
|
||
.title-left-class {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #101A3E;
|
||
}
|
||
|
||
.title-right-class {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #8D90A6;
|
||
|
||
image {
|
||
width: 47rpx;
|
||
height: 47rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.student-info-class {}
|
||
}
|
||
|
||
.page-top {
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
height: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
color: white;
|
||
flex-shrink: 0;
|
||
background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
|
||
|
||
.go-back-page {
|
||
position: absolute;
|
||
left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.student-details {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-color: #F1F3F6;
|
||
}
|
||
</style> |