|
|
@@ -0,0 +1,429 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <uni-navbar title="车辆信息"></uni-navbar>
|
|
|
+ <reaee-video-cover-extractor :path="tempFilePath" @success='success' @error='error' />
|
|
|
+ <view class="box">
|
|
|
+ <view class="reject-box commonBj commonMt commonMb infoHeightBig">
|
|
|
+ <view class="reject-box-top">
|
|
|
+ <view class="top-left">
|
|
|
+ <image src="../../static/images/car/yunshu.png" mode="widthFix"></image>
|
|
|
+ <text class="listTitle">车辆信息</text>
|
|
|
+ </view>
|
|
|
+ <view class="top-right">
|
|
|
+ <image
|
|
|
+ :src="carInfo.deleteFlag===0?'../../static/images/car/binding.png':'../../static/images/car/binding2.png'"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ <text :class="carInfo.deleteFlag===0?'stateText':'nostateText'"
|
|
|
+ class="state-text">{{carInfo.deleteFlag===0?'已绑定':'未绑定'}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="reject-box-bottom infoHeight">
|
|
|
+ <view class="state-icon">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">企业名称:</text>
|
|
|
+ </view>
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <text class="infoText">{{carInfo.companyName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="border-style"></view> -->
|
|
|
+ <view class="state-icon">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">车牌号码:</text>
|
|
|
+ </view>
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <text class="infoText">{{carInfo.carNumber}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="border-style"></view> -->
|
|
|
+ <view class="state-icon">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">车 型:</text>
|
|
|
+ </view>
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <text class="infoText">{{carInfo.carType}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="border-style"></view> -->
|
|
|
+ <view class="state-icon">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">车 系:</text>
|
|
|
+ </view>
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <text class="infoText">{{carInfo.carSeries}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="border-style"></view> -->
|
|
|
+ <view class="state-icon">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">载重标准:</text>
|
|
|
+ </view>
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <text class="infoText">{{carInfo.carCarry}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="border-style"></view> -->
|
|
|
+ <view class="state-icon block">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">车辆行驶证件</text>
|
|
|
+ </view>
|
|
|
+ <view class="uploadBox flexAlignCenter block mt30 ">
|
|
|
+ <!-- <xfx-image-upload class="radius15" :remove="false" :add=false :chooseNum="1"
|
|
|
+ v-model="drivingLicense" mediaType="image"></xfx-image-upload> -->
|
|
|
+ <u--image radius="15rpx" :showLoading="true" :src="drivingLicense" width="599rpx"
|
|
|
+ v-if="drivingLicense"
|
|
|
+ height="270rpx" @tap="previewImg(drivingLicense)">
|
|
|
+ </u--image>
|
|
|
+ <text v-else class="infoText">暂无</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="state-icon mb0 block">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">车辆状态</text>
|
|
|
+ </view>
|
|
|
+ <view class="mt30 zhanwei">
|
|
|
+ <view v-if="imgList.length>0" class="imgBox">
|
|
|
+ <u--image class="border radius15" radius="15rpx" :key="index"
|
|
|
+ v-for="(item,index) in imgList" :showLoading="true" :src="item.url" width="240rpx"
|
|
|
+ height="240rpx" @tap="previewImg(item.url)">
|
|
|
+ </u--image>
|
|
|
+ </view>
|
|
|
+ <view class="state-box-size border radius15 " v-if="vedioList.length>0">
|
|
|
+ <xfx-image-upload class="state-box-size radius15" :max="1" :remove="false" :add="false"
|
|
|
+ v-model="vedioList" mediaType="video"></xfx-image-upload>
|
|
|
+ </view>
|
|
|
+ <text v-if="vedioList.length===0&&imgList.length===0" class="infoText">暂无</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 审批状态 -->
|
|
|
+ <view class="reject-box mt28 commonMb commonGreenBj" v-if="isHomeInfo">
|
|
|
+ <view class="reject-box-top just-content-start bg-color-green">
|
|
|
+ <image src="../../static/images/car/yunshu.png" mode="widthFix"></image>
|
|
|
+ <text class="listTitle">审批状态</text>
|
|
|
+ </view>
|
|
|
+ <view class="reject-box-bottom pb0">
|
|
|
+ <view class="state-icon">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="greenCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">审批状态:</text>
|
|
|
+ </view>
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <u-icon color="#017D3E" style="margin-right: 12rpx;" name="checkmark-circle-fill"></u-icon>
|
|
|
+ <text class="greenText">通过</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view :class="isPass?'border-style mb':'border-style2'"></view> -->
|
|
|
+ <!-- <view class="state-icon" v-if="carInfo.deleteFlag === 1">
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <view class="redCircle">
|
|
|
+ </view>
|
|
|
+ <text class="itemText">驳回原因:</text>
|
|
|
+ </view>
|
|
|
+ <view class="flexAlignCenter">
|
|
|
+ <text class="redText">{{}}</text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view v-if="!isPass" class="border-style2 mb"></view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ carDetail,
|
|
|
+ } from "@/api/company/car.js"
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 详情数据列表
|
|
|
+ carInfo: {},
|
|
|
+ // 行驶证列表
|
|
|
+ drivingLicense: '',
|
|
|
+ // 视频列表
|
|
|
+ vedioList: [],
|
|
|
+ // 车辆状态图片列表
|
|
|
+ imgList: [],
|
|
|
+ // 接收的id
|
|
|
+ id: null,
|
|
|
+ tempFilePath: '',
|
|
|
+ srcVideo: '',
|
|
|
+ isHomeInfo:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ select() {
|
|
|
+ this.tempFilePath = this.srcVideo;
|
|
|
+ },
|
|
|
+ success(o) {
|
|
|
+ console.log('成功了', o);
|
|
|
+ this.vedioList = [{
|
|
|
+ cover: o,
|
|
|
+ url: this.srcVideo
|
|
|
+ }]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 视频封面提取失败
|
|
|
+ error(e) {
|
|
|
+ console.log('error', e);
|
|
|
+ },
|
|
|
+ previewImg(urls) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [urls],
|
|
|
+ current: urls
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // previewImg(current) {
|
|
|
+ // const urls = this.list.map(item => {
|
|
|
+ // return item
|
|
|
+ // })
|
|
|
+ // uni.previewImage({
|
|
|
+ // current,
|
|
|
+ // urls
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // 获取详情
|
|
|
+ getDetail() {
|
|
|
+ // console.log(this.id, '详情');
|
|
|
+ carDetail(this.id).then((result) => {
|
|
|
+ console.log(result, '详情');
|
|
|
+ this.carInfo = result.data
|
|
|
+ this.drivingLicense = result.data.drivingLicense[0].url;
|
|
|
+ // this.tempFilePath =result.data.carVideo[0].url;
|
|
|
+ this.srcVideo = result.data.carVideo[0].url;
|
|
|
+ // this.changVideo(result.data.carVideo[0].url);
|
|
|
+ // let videourl='https://vd3.bdstatic.com/mda-ke6p5rankhca6xbv/v1-cae/hd/mda-ke6p5rankhca6xbv.mp4'
|
|
|
+ // this.vedioList.push(result.data.carVideo[0].url)
|
|
|
+ // this.vedioList.push(videourl)
|
|
|
+ // let data=this.getVideoBase64(result.data.carVideo[0].url)
|
|
|
+ // console.log(data,'data');
|
|
|
+ this.imgList = result.data.imgList;
|
|
|
+ this.select();
|
|
|
+ // result.data.imgList.forEach(item => {
|
|
|
+ // this.imgList.push(item.url)
|
|
|
+ // })
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('请求失败rr');
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad: function(option) {
|
|
|
+ // 是否是首页点进去的详情页面
|
|
|
+ if (option.isHomeInfo) {
|
|
|
+ this.isHomeInfo = false
|
|
|
+ }else{
|
|
|
+ this.isHomeInfo = true
|
|
|
+ }
|
|
|
+ if (option.id) {
|
|
|
+ this.companyName = this.$store.state.user.companyName
|
|
|
+ // console.log('接收过来的id', option.id);
|
|
|
+ this.id = option.id
|
|
|
+ // console.log(this.id);
|
|
|
+ this.getDetail()
|
|
|
+ // this.getUserCompanyInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ // 上传组件样式
|
|
|
+ .uploadBox {
|
|
|
+
|
|
|
+ // width: 599rpx;
|
|
|
+ // height: 250rpx;
|
|
|
+ // /deep/ .u-image__loading{
|
|
|
+ // width: 100%;
|
|
|
+ // height: 250rpx;
|
|
|
+ // }
|
|
|
+ /deep/ .u-image {
|
|
|
+ border: 1rpx solid #495B93;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.xfx-image-upload-Item {
|
|
|
+ uni-image {
|
|
|
+ width: 240rpx;
|
|
|
+ height:240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xfx-image-upload-Item-video-fixed {
|
|
|
+ width: 240rpx;
|
|
|
+ height:240rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zhanwei {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .zhanwei uni-view:not(:first-child) {
|
|
|
+ // width: 180rpx !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .zhanwei uni-view:not(:last-child) {
|
|
|
+ // margin-right: 29rpx;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .reject-box {
|
|
|
+
|
|
|
+ .reject-box-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 69rpx;
|
|
|
+ background: #7FB5FF;
|
|
|
+ border-radius: 26rpx 26rpx 0px 0px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .top-right {
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 36rpx;
|
|
|
+
|
|
|
+ uni-image {
|
|
|
+ width: 28rpx;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-text {
|
|
|
+
|
|
|
+ margin-left: 13rpx;
|
|
|
+ line-height: 69rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ uni-image {
|
|
|
+ width: 50rpx;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .reject-box-bottom {
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .state-icon {
|
|
|
+ display: flex;
|
|
|
+ margin: 40rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-icon:nth-child(1) {
|
|
|
+ margin: 0 0 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-style {
|
|
|
+ border-top: 1rpx dashed #F98803;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-style2 {
|
|
|
+ border-top: 1rpx dashed #FB5637;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .reject-box-bottom:nth-child(2) {
|
|
|
+ padding: 40rpx 40rx 20rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .block {
|
|
|
+ display: block !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ border: 1rpx solid #495B93;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-size {
|
|
|
+ width: 598rpx;
|
|
|
+ height: 198rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mt30 {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radius15 {
|
|
|
+ border-radius: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-box-size {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-box-size-video {
|
|
|
+ width: 235rpx !important;
|
|
|
+ height: 235rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .space-between {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .just-content-start {
|
|
|
+ justify-content: flex-start !important;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-color-green {
|
|
|
+ background: #36C372 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-color-red {
|
|
|
+ background: #FB5637 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fontTongGuo {
|
|
|
+ font-size: 28rpx !important;
|
|
|
+ font-weight: bold !important;
|
|
|
+ color: #007C3C !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb {
|
|
|
+ margin-bottom: 53rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pb0 {
|
|
|
+ padding-bottom: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mt28 {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb0 {
|
|
|
+ margin-bottom: 0rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+ }
|
|
|
+</style>
|
