lanan-repair-app/pages/myCar/carDetail.vue

<template>
  <view class="container">
    <VNavigationBar :title="pageTitle" background-color="#fff" title-color="#333"></VNavigationBar>
    <view class="body">
      <u-form labelPosition="top">
        <view class="card">
          <u-form-item borderBottom label="上传图片" labelWidth="200">
            <u-upload
                :fileList="fileList1"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                :maxCount="1"
                multiple
            ></u-upload>
          </u-form-item>
          <u-form-item borderBottom label="车牌号" labelWidth="200" @click="carInputClick();">
            <u-input
                v-model="car.licenseNumber"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请输入车牌号"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <!--          @click="brandType = true;"-->
          <u-form-item label="车辆品牌" labelWidth="200">
            <picker @change="picker($event)" :value="arrayIndex" :range="brandList" range-key="brandName" v-if="brandList">
              <view class="uni-input">{{ brandList && brandList[arrayIndex] ? brandList[arrayIndex].brandName : '' }}</view>
            </picker>
          </u-form-item>
          <u-form-item label="车辆型号" labelWidth="200">
            <u-input
                v-model="car.carModel"
                border="none"
                placeholder="请输入车辆型号"
            ></u-input>
          </u-form-item>
          <u-form-item class="formItem" label="车辆性质" labelWidth="200">
            <picker @change="natureChange" :value="natureIndex" :range="natureList" range-key="value" v-if="natureList">
              <view class="uni-input">{{ natureList[natureIndex].value}}</view>
            </picker>
          </u-form-item>
        </view>

        <view class="card">
          <u-form-item borderBottom label="车架号" labelWidth="200">
            <u-input v-model="car.vin" border="none" placeholder="请输入车架号"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="发动机号" labelWidth="200">
            <u-input v-model="car.engineNumber" border="none" placeholder="请输入发动机号"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="年检时间" labelWidth="200" @click="openDatePicker('nj'); ">
            <u-input
                v-model="car.inspectionDate"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择年检时间"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item borderBottom label="保险时间" labelWidth="200" @click="openDatePicker('bx'); hideKeyboard()">
            <u-input
                v-model="car.insuranceDate"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择保险时间"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item label="注册日期时间" labelWidth="200" @click="openDatePicker('zcrq'); hideKeyboard()">
            <u-input
                v-model="car.carRegisterDate"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择注册日期时间"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
        </view>
      </u-form>


      <keyboard-plate ref="plateNumber" :plateNum.sync='car.licenseNumber' isShow
                      @change="getPlateNum"></keyboard-plate>
      <u-datetime-picker
          v-model="datePickerValue"
          :formatter="formatter"
          :show="datePickerShow"
          mode="date"
          @cancel="datePickerCancel"
          @confirm="datePickerConfirm"
      ></u-datetime-picker>
    </view>
    <view class="footer">
      <view class="btnItem edit" @click="submit">
        确定
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue';
import request from "@/utils/request";
import config from '@/config'
import upload from "@/utils/upload";
import {getDictByCode} from "@/utils/utils";

export default {
  components: {
    VNavigationBar
  },
  data() {
    return {
      pageTitle: '',
      car: {
        // 车牌号
        licenseNumber: '',
        // 型号
        carModelInput: '',
        // 品牌id
        carBrand: '',
        // 车辆类别  字典字段
        carCategory: '',
        // 车辆性质  字典字段
        carNature: '',
        // 注册日期
        carRegisterDate: '',
        // 车辆品牌型号数组
        brandAndModel: [],
      },
      userInfo: {},
      arrayIndex: 0,
      bo1: false,
      bo2: true,

      datePickerShow: false,
      datePickerValue: new Date().getTime(),
      pickerConfirmField: 'njDate',
      brandId: '',

      showType: false,
      brandType: false,
      typeList: [],
      brandList: [],
      fileList1: [],
      imageUrl: '',
      //可选车辆性质范围
      natureList: [],
      natureIndex: 0,
    };
  },
  onLoad(options) {
    // 如果是修改
    if (options.car) {
      // 有数据为编辑 或 删除
      this.car = JSON.parse(decodeURIComponent(options.car));
      this.brandId = this.car.carBrand
      console.log('初始化页面数据', this.car)
      this.bo1 = true;
      this.bo2 = false;
      this.pageTitle = '修改车辆信息'
      if (this.car.carLicenseImg) {
        this.fileList1.push({
          url: config.baseImageUrl + this.car.carLicenseImg
        })
      }
    } else {
      // 没有数据 需要赋值一下初始化
      this.bo1 = false;
      this.bo2 = true;
      this.pageTitle = '添加车辆信息'
    }
    this.getBrandList()
    this.getNatureList()
    this.car.userId = JSON.parse(decodeURIComponent(options.userInfo)).userId;
    this.userInfo = JSON.parse(decodeURIComponent(options.userInfo))
    console.log(this.car)

  },
  methods: {
    typeSelect(e) {
    },
    picker(e) {
      // 或者
      this.arrayIndex = e.target.value;
      this.brandId = this.brandList[e.target.value].value
    },
    // 车辆性质选择事件
    natureChange(event) {
      const newIndex = event.detail.value;
      this.natureIndex = newIndex;
      //
      this.car.carNature = this.natureList[newIndex].value;
    },
    getBrandList() {
      request({
        url: '/admin-api/base/carBrand/page',
        method: 'GET',
        params: {
          pageNo: 1,
          pageSize: 10000
        }
      }).then(res => {
        res.data.records.forEach(item => {
          item.name = item.brandName,
              item.value = item.id
        })
        this.brandList = res.data.records
        if (this.car) {
          for (let i = 0; i < this.brandList.length; i++) {
            if (this.car.carBrand == this.brandList[i].id) {
              this.arrayIndex = i;
            }
          }
        }
      })
    },

    // 打开车牌选择器
    carInputClick() {
      this.$refs.plateNumber.open();
    },
    getPlateNum(e) {

    },

    openDatePicker(picker) {
      if (picker === 'nj') {
        this.pickerConfirmField = 'inspectionDate'
      } else if (picker === 'bx') {
        this.pickerConfirmField = 'insuranceDate'
      } else if (picker === 'zcrq') {
        this.pickerConfirmField = 'carRegisterDate'
      }
      this.datePickerShow = true
    },
    datePickerConfirm({value}, field, picker) {
      let date;

      // 检查 value 是否为时间戳
      if (typeof value === 'number') {
        // 如果是时间戳，确保是毫秒单位
        date = new Date(value);
      } else if (typeof value === 'string') {
        // 如果是日期字符串，尝试解析
        date = new Date(value);
      }

      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        console.error('Invalid date:', value);
        return;
      }
      this.car[this.pickerConfirmField] = date.getFullYear() + '-' + (Number(date.getMonth()) + 1 + '').padStart(2, '0') + '-' + (date.getDate() + '').padStart(2, '0')
      this.datePickerCancel(picker)
    },
    datePickerCancel(picker) {
      this.datePickerValue = new Date().getTime()
      this.datePickerShow = false
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 新增
    async submit() {
      // bus.$emit('updateCarInfo', this.car)
      this.car.brandAndModel = [this.brandId, this.car.carModel]
      //将日期转为时间戳
      if (this.car.inspectionDate) {
        this.car.inspectionDate = new Date(this.car.inspectionDate).getTime()
      }else {
        this.car.inspectionDate = undefined
      }
      if (this.car.insuranceDate) {
        this.car.insuranceDate = new Date(this.car.insuranceDate).getTime()
      }else {
        this.car.insuranceDate = undefined
      }
      if (this.car.carRegisterDate) {
        this.car.carRegisterDate = new Date(this.car.carRegisterDate).getTime()
      }else {
        this.car.carRegisterDate = undefined
      }
      if (this.car.id != null) {
        request({
          url: '/admin-api/base/carMain/update',
          method: 'PUT',
          data: this.car,
        }).then(res => {
          uni.navigateBack();
        })
      } else {
        request({
          url: '/admin-api/base/carMain/create',
          method: 'POST',
          data: this.car,
        }).then(res => {
          request({
            url: '/admin-api/base/carMain/page',
            method: 'GET',
            params: {
              licenseNumber: this.car.licenseNumber
            }
          }).then(res => {
            this.car = res.data.records[0]
            request({
              url: '/admin-api/base/custom/bindCustomerCar',
              method: 'post',
              data: {
                carList: [this.car],
                id: this.userInfo.id
              }
            }).then(res => {
              uni.navigateBack();
            })
          })

        })
      }
    },
    // 查询下拉 车辆性质
    async getNatureList() {
      this.natureList= getDictByCode('car_nature')
      if (this.bo2 == true) {
        // setTimeout(() => {
        //   this.car.carNature = this.natureList[0].value;
        // }, 15000)
      } else {
        // 如果是修改 遍历当前集合 将index 同步
        this.natureList.forEach((item, index) => {
          if (item.value == this.car.carNature) {
            this.natureIndex = index;
          }
        })
      }

    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        upload({
          url: '/admin-api/infra/file/upload',
          filePath: url
        }).then(res => {
          resolve(config.baseImageUrl +res.data)
          this.car.carLicenseImg = res.data
          this.imageUrl = config.baseImageUrl + res.data
          request({
            url: '/admin-api/base/carMain/vehicleLicenseOCR',
            method: 'POST',
            data: this.imageUrl,
            tenantIdFlag: false
          }).then((res) => {
            this.car.vin = res.data.vin
            this.car.licenseNumber = res.data.plateNo
            this.car.carRegisterDate = res.data.issueDate
            this.car.engineNumber = res.data.engineNo
            //车辆品牌自动定位
            this.brandList.forEach((item, index) => {
              if (item.brandName == res.data.brand) {
                this.arrayIndex = index;
                this.brandId = this.brandList[index].id;
              }
            })
            //车辆性质自动定位
            this.natureList.forEach((item, index) => {
              if (item.label == res.data.useCharacter) {
                this.natureIndex = index;
                this.car.carNature = this.natureList[index].value;
              }
            })
          })
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>


.container {
  box-sizing: border-box;
  height: 100%;
  background-color: #f3f5f7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .card {
      margin: 20rpx 30rpx;
      padding: 0 30rpx;
      background-color: #fff;
    }
  }

  .footer {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30rpx 0;

    .btnItem {
      width: 510rpx;
      height: 76rpx;
      background: #0174F6;
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      font-size: 32rpx;
      color: #FFFFFF;

      line-height: 76rpx;
      text-align: center;
    }
  }
}
</style>