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></u-upload>
          </u-form-item>
          <u-form-item borderBottom label="车牌号" labelWidth="200" @click="carInputClick(); hideKeyboard()">
            <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>
          <u-form-item label="车辆品牌" labelWidth="200" @click="brandType = true; hideKeyboard()">
            <u-input
                v-model="car.brandStr"
                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="showType = true; hideKeyboard()">
            <u-input
                v-model="car.modelStr"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择车辆型号"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </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'); hideKeyboard()">
            <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>

      <!-- 车辆品牌 -->
      <u-action-sheet
          :actions="brandList"
          :show="brandType"
          title="请选择车辆品牌"
          @close="brandType = false"
          @select="brandSelect"
      >
      </u-action-sheet>
      <!-- 车辆型号 -->
      <u-action-sheet
          :actions="typeList"
          :show="showType"
          title="请选择车辆型号"
          @close="showType = false"
          @select="typeSelect"
      >
      </u-action-sheet>

      <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 {bus} from "@/utils/eventBus";
import request from "@/utils/request";

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

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

      showType: false,
      brandType: false,
      typeList: [],
      brandList: [],
    };
  },
  onLoad(options) {
    // 如果是修改
    if (options.car) {
      // 有数据为编辑 或 删除
      this.car = JSON.parse(decodeURIComponent(options.car));
      console.log('初始化页面数据', this.car)
      this.bo1 = true;
      this.bo2 = false;
      this.pageTitle = '修改车辆信息'
    } else {
      // 没有数据 需要赋值一下初始化
      this.bo1 = false;
      this.bo2 = true;
      this.pageTitle = '添加车辆信息'
    }
    this.getBrandList()
  },
  methods: {
    typeSelect(e) {
      console.log('e', e)
    },
    brandSelect(e) {
      console.log('e', e)
      this.brandId = e.value
      this.getCarModule()
    },
    getCarModule() {
      request({
        url: '/admin-api/base/carModel/pageById',
        method: 'GET',
        params: {
          page: 1,
          size: 10000,
          brandId: this.brandId
        }
      }).then(res => {
        console.log(res);
        res.data.records.forEach(item => {
          item.name = item.modelName,
              item.value = item.id
        })
        this.typeList = res.data.records
      })
    },
    getBrandList() {
      request({
        url: '/admin-api/base/carBrand/page',
        method: 'GET',
        params: {
          page: 1,
          size: 10000
        }
      }).then(res => {
        console.log(res);
        res.data.records.forEach(item => {
          item.name = item.brandName,
          item.value = item.id
        })
        this.brandList = res.data.records
      })
    },

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

    },

    openDatePicker(picker) {
      if (picker === 'nj') {
        this.pickerConfirmField = 'njDate'
      } else if (picker === 'bx') {
        this.pickerConfirmField = 'bxDate'
      } else if (picker === 'zcrq') {
        this.pickerConfirmField = 'zcrqDate'
      }
      this.datePickerShow = true
    },
    datePickerConfirm({value}, field, picker) {
      const date = new Date(value)
      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}日`
      }
      console.log('for value', value)
      return value
    },
    // 新增
    async submit() {

      bus.$emit('updateCarInfo', this.car)
      if (this.car.id != null) {
        request({
          url: '/admin-api/base/carMain/update',
          method: 'PUT',
          data: this.car,
        })
      } else {
        request({
          url: '/admin-api/base/carMain/create',
          method: 'POST',
          data: this.car,
        })
      }
      uni.navigateBack();
      // let res = await request({
      //   url: '/userClient/base/myCar/create',
      //   method: 'POST',
      //   data: this.car,
      // })
      // if (res.code == 200) {
      //   // 新增成功返回上一个页面
      //   bus.$emit('updateCarInfo', res.result)
      //   uni.navigateBack();
      // }
    },
  }
}
</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>