lanan-repair/pages/myCar/carDetail.vue

<template>
  <view class="container">
    <VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
    <view class="body">
      <view class="card">
        <button type="primary" @click="openCameraScan">识别行驶证</button>
        <view class="formItem">
          <text class="formLabel require">是否车主</text>
          <view>
            <radio-group v-model="car.isOwner" @change="radioChange">
              <radio value="1" :checked="car.isOwner=='1'">是</radio>
              <radio value="0" :checked="car.isOwner=='0'">否</radio>
            </radio-group>
          </view>
        </view>
        <view class="formItem">
          <text class="formLabel require">车牌号</text>
          <input type="text" style="text-align: right" placeholder="请输入车牌号" v-model="car.licenseNumber"/>
        </view>
        <view class="formItem">
          <text class="formLabel">车架号</text>
          <input type="text" style="text-align: right" placeholder="请输入车架号" v-model="car.vin"/>
        </view>
        <view class="formItem">
          <text class="formLabel">发动机号码</text>
          <input type="text" style="text-align: right" placeholder="请输入发动机号码" v-model="car.engineNumber"/>
        </view>
        <view class="formItem">
          <text class="formLabel">品牌</text>
          <song-data-picker
              ref="songpicker"
              style=" width: 55%;"
              :localdata="brandList"
              popup-title="请选择品牌"
              :openSearch="true"
              @change="onchange"
              @nodeclick="onnodeclick"
          ></song-data-picker>
<!--          <picker @change="brandChange" :value="brandIndex" :range="brandNamesComputed">-->
<!--            <view class="uni-input">{{ brandNamesComputed[brandIndex] }}</view>-->
<!--          </picker>-->
        </view>
        <view class="formItem">
          <text class="formLabel">型号</text>
          <input type="text" style="text-align: right" placeholder="请输入型号" v-model="car.carModelInput"/>
        </view>
        <view class="formItem">
          <text class="formLabel">车辆性质</text>
          <picker @change="natureChange" :value="natureIndex" :range="natureNamesComputed">
            <view class="uni-input">{{ natureNamesComputed[natureIndex] }}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">车辆类别</text>
          <picker @change="categoryChange" :value="categoryIndex" :range="categoryNamesComputed">
            <view class="uni-input">{{ categoryNamesComputed[categoryIndex] }}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">注册日期</text>
          <picker
              mode="date"
              :value="car.carRegisterDate"
              start="2020-01-01"
              end="2030-12-31"
              @change="bindDateChange1">
            <view style="margin-left: 10rpx">
              {{ car.carRegisterDate}}
            </view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">行驶证</text>
          <u-upload
              :action="uploadUrl"
              :headers="headers"
              :file-list="fileList"
              :max-count="1"
              :show-upload-btn="true"
              @after-read="afterRead"
              @delete="deleteFile"
              @success="uploadSuccess"
              @fail="uploadFail"
          ></u-upload>

        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btnItem edit" @click="submit" v-if="bo2">
        确定
      </view>

      <view class="btnItem delete" v-if="bo1" @click="del">
        <uni-icons type="trash" color="#F92C2C"></uni-icons>
        删除
      </view>
      <view class="line" v-if="bo1"></view>
      <view class="btnItem edit" v-if="bo1" @click="submit">
        <uni-icons type="compose" color="#0174F6"></uni-icons>
        保存
      </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 {getJSONData} from '@/utils/auth'

export default {
  components: {
    VNavigationBar
  },
  data() {
    return {
      uploadUrl: config.baseUrl+"/app-api/infra/file/upload",
      headers: {},
      fileList: [],
      car: {
        id:"",
        //是否车主
        isOwner:"1",
        // 车牌号
        licenseNumber: '',
        // 车架号
        vin: '',
        // 发动机号码
        engineNumber: '',
        // 品牌id
        carBrand:'',
        // 型号
        carModelInput: '',
        // 车辆性质  字典字段
        carNature:'',
        // 车辆类别  字典字段
        carCategory:'',
        // 注册日期
        carRegisterDate:'',
      },
      bo1: false,
      bo2: true,
      categoryIndex: 0,
      natureIndex: 0,
      brandIndex: 0,
      //可选车辆类别范围
      categoryList: [],
      //可选车辆性质范围
      natureList: [],
      //所有可选车辆品牌
      brandList: [],
      //选中的车辆品牌id
      brandId: '',
      //选中的车辆品牌名称
      brandName: 0,
    };
  },
  // 计算属性，将对象数组转换为字符串数组
  computed: {
    // 计算属性，将对象数组转换为字符串数组   picker 标签的 range 属性 只能绑定数组
    brandNamesComputed() {
      return this.brandList.map(item => item.brandName);
    },
    natureNamesComputed() {
      return this.natureList.map(item => item.label);
    },
    categoryNamesComputed() {
      return this.categoryList.map(item => item.label);
    }
  },
  onShow(){
    this.getCameraPhoto()
  },
  onLoad(options) {
    // 如果是修改
    if (options.id) {
      // 有数据为编辑 或 删除
      this.car = getJSONData("carInfo");
      console.log('初始化页面数据', this.car)
      if(this.car.carRegisterDate){
        this.car.carRegisterDate = this.timestampToDate(this.car.carRegisterDate)
      }
      this.fileList = [
        {
          url:config.baseImageUrl+this.car.carLicenseImg
        }
      ]
      this.$forceUpdate()
      console.log('初始化页面数据', this.fileList)
      this.bo1 = true;
      this.bo2 = false;
    } else {
      // 没有数据 需要赋值一下初始化
      this.bo1 = false;
      this.bo2 = true;
    }
    // 初始化
    this.getCategoryList();
    this.getNatureList();
    this.getBrandList();
  },
  methods: {
    onchange(e) {
      this.brandId = e.detail.value[0].id
      this.brandName = e.detail.value[0].brandName
      this.car.carBrand = e.detail.value[0].id
    },
    onnodeclick(node) {
      console.log(node,"node")
    },
    radioChange(event){
      this.car.isOwner = event.detail.value
    },
    /**
     * 时间戳转文字
     * */
    timestampToDate(timestamp) {
      const date = new Date(timestamp); // 如果timestamp是数值，可以直接作为Date构造函数的参数
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    /**
     * ocr识别内容自动赋值
     * */
    getCameraPhoto(){
      let pages = getCurrentPages();
      let currPage = pages[pages.length-1];
      if(typeof(currPage.data.driveLicense) != undefined && currPage.data.driveLicense != null){
        let driveLicense = currPage.data.driveLicense;
        this.fileList=[{
          url: driveLicense.imgUrl
        }]
        this.car.licenseNumber = driveLicense.plateNo
        this.car.vin = driveLicense.vin
        this.car.engineNumber = driveLicense.engineNo
        this.car.carRegisterDate = driveLicense.registerDate
        //车辆品牌自动定位
        this.brandList.forEach((item, index) => {
          if (item.brandName == driveLicense.brand) {
            this.car.carBrand = this.brandList[index].id;
            this.setCarBrand(this.brandList[index].id,item.brandName)
          }
        })
        //车辆性质自动定位
        this.natureList.forEach((item, index) => {
          if (item.label == driveLicense.useCharacter) {
            this.natureIndex = index;
            this.car.carNature = this.natureList[index].value;
          }
        })
      }
    },
    /**
     * 设置选中的车辆品牌
     * @param id
     * @param name
     */
    setCarBrand(id,name){
      this.$nextTick(()=>{
        this.brandId = id
        this.brandName = name
        this.$refs.songpicker.inputSelected=[{text:name,value:id}]
      })
    },
    /**
     * 打开摄像头
     */
    openCameraScan(){
      uni.navigateTo({
        url: '/pages/myCar/scan-frame'
      });
    },
    // 调用OCR服务进行文字识别
    recognizeText(imagePath) {

    },
    afterRead(file) {
      //上传
      // uploadFileApi  为上传到服务端的接口 count大于1 使用 await
      upload({
        url:'/app-api/infra/file/upload',
        filePath: file.file.url
      }).then((res)=>{
        this.fileList.push({
          url: config.baseImageUrl+res.data
        })
        console.log(this.fileList)
      })
    },
    deleteFile(file, index) {
      console.log('删除文件');
      this.fileList.splice(index, 1);
    },
    uploadSuccess(res, file) {
      console.log('上传成功', res);
    },
    uploadFail(error, file) {
      console.log('上传失败', error);
    },
    // 品牌选择事件
    brandChange(event) {
      // 下标
      const newIndex = event.detail.value;
      this.brandIndex = newIndex;
     //
      this.car.carBrand = this.brandList[newIndex].id;
    },
    // 车辆类别选择事件
    categoryChange(event) {
      const newIndex = event.detail.value;
      this.categoryIndex = newIndex;
    //
      this.car.carCategory = this.categoryList[newIndex].value;
    },
    // 车辆性质选择事件
    natureChange(event) {
      const newIndex = event.detail.value;
      this.natureIndex = newIndex;
    //
      this.car.carNature = this.natureList[newIndex].value;
    },
    // 日期选择 事件
    bindDateChange1(e) {
      this.car.carRegisterDate = e.target.value; // 更新选择的日期到data中的date变量

    },
    // 查询下拉 车辆类别
    async getCategoryList() {
      let res = await request({
        url: '/app-api/system/dict-data/type?type=car_category',
        method: 'get',
        tenantIdFlag: false
      })
      if (res.code == 200) {
        console.log('车辆类别', res.data)
        this.categoryList = res.data;
        if (this.bo2 == true){
          this.car.carCategory = res.data[0].value;
        }
        else {
        // 如果是修改 遍历当前集合 将index 同步
          this.categoryList.forEach((item, index) => {
            if (item.value == this.car.carCategory) {
              this.categoryIndex = index;
            }
          })

        }
      }
    },
    // 查询下拉 车辆性质
    async getNatureList() {
      let res = await request({
        url: '/app-api/system/dict-data/type?type=car_nature',
        method: 'get',
        tenantIdFlag: false
      })
      if (res.code == 200) {
        console.log('车辆性质', res.data)
        this.natureList = res.data;
        if (this.bo2 == true){
          this.car.carNature = res.data[0].value;
        }
        else {
          // 如果是修改 遍历当前集合 将index 同步
          this.natureList.forEach((item, index) => {
            if (item.value == this.car.carNature) {
              this.natureIndex = index;
            }
          })
        }
      }
    },
    // 查询下拉 车辆品牌
    async getBrandList() {
      let res = await request({
        url: '/userClient/base/carBrand/list',
        method: 'get',
      })
      if (res.code == 200) {
        console.log('车辆品牌', res.data)
        res.data.forEach(item => {
          item.text = item.brandName,
              item.value = item.id
        })
        this.brandList = res.data;
        if (this.bo2 == true){
          this.car.carBrand= res.data[0].id;
        }else {
          // 如果是修改 遍历当前集合 将index 同步
          this.brandList.forEach((item, index) => {
            if (item.id == this.car.carBrand) {
              this.setCarBrand(item.id,item.brandName)
            }
          })
        }
      }
    },
    // 新增或修改
    async submit() {
      if(this.fileList.length>0){
        this.car.carLicenseImg = this.fileList[0].url.replace(config.baseImageUrl,"")
      }
      let res = await request({
        url: '/app-api/base/user-car/createOrUpdate',
        method: 'POST',
        data: this.car,
        tenantIdFlag: false
      })
      if (res.code == 200) {
        uni.showToast({
          title: '保存成功',
          icon: 'none'
        })
        setTimeout(()=>{
          // 操作成功返回上一个页面
          uni.navigateBack();
        },500)
      }else {
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    },
    //删除
    async del() {
      let res = await request({
        url: `/app-api/base/user-car/delById?id=${this.car.id}`,
        method: 'delete',
        tenantIdFlag: false
      })
      if (res.code == 200) {
        uni.showToast({
          title: '删除成功',
          icon: 'none'
        })
        setTimeout(()=>{
          // 删除成功返回上一个页面
          uni.navigateBack();
        },500)
      }else {
        uni.showToast({
          title: '删除失败',
          icon: 'none'
        })
      }
    },
  }
}
</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 0;
      padding: 0 32rpx;
      background-color: #fff;

      .formItem {
        box-sizing: border-box;
        width: 686rpx;
        margin: 0 auto;
        padding: 40rpx;

        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 20rpx;

        border-bottom: 1rpx solid #dddddd;

        &:last-child {
          border: none;
        }

        .require {
          content: "*";
          color: red;
        }
      }

      .labelVal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 20rpx;
      }


      .formLabel {
        font-size: 32rpx;
        color: #333333;
      }

      .formValue {
        flex: 1;
        width: 0;
        text-align: right;
        font-size: 32rpx;
        color: #999999;
      }

      .carImg {
        width: 240rpx;
        height: 150rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        background-color: #efefef;
      }

      .formImg {
        margin-top: 30rpx;
        width: 240rpx;
        height: 150rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        background-color: #efefef;
      }
    }
  }

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

    .line {
      width: 2rpx;
      background-color: #dddddd;
    }

    .btnItem {
      flex: 1;
      width: 0;
      padding: 34rpx 0;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 32rpx;

      &.delete {
        color: #f92c2c;
      }

      &.edit {
        color: #0174f6;
      }
    }
  }
}
</style>