dianliang/lanan-repair-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
94a9d0d5f3
lanan-repair-app/pages-internal/carManagement/carDetails.vue

499 lines
12 KiB
Vue
Raw Normal View History

更新0811
2025-08-11 17:42:50 +08:00
<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>
Reference in New Issue Copy Permalink