From ec0c028ff77de0ad4a569ed3e35c49aeab553821 Mon Sep 17 00:00:00 2001
From: Vinjor <vinjorm@gmail.com>
Date: Wed, 13 Nov 2024 15:24:30 +0800
Subject: [PATCH] 1

---
 pages-order/addOrder/addOrder.vue |  19 +-
 pages.json                        |   6 +
 pages/myCar/addCarUser.vue        | 530 ++++++++++++++++++++++++++++++
 3 files changed, 549 insertions(+), 6 deletions(-)
 create mode 100644 pages/myCar/addCarUser.vue

diff --git a/pages-order/addOrder/addOrder.vue b/pages-order/addOrder/addOrder.vue
index 412cb7c..f69c833 100644
--- a/pages-order/addOrder/addOrder.vue
+++ b/pages-order/addOrder/addOrder.vue
@@ -29,10 +29,10 @@
 <!--        </view>-->
         <view :class="{ 'none': !carList || carList.length === 0 }" class="card cardInfo carCard">
           <template v-if="!carList || carList.length === 0">
-            <image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/carNoneIcon.png"></image>
-            <view class="btn">
+            <image @click="addCarUserInfo()" class="cardNoneIcon" mode="widthFix" src="/pages-order/static/carNoneIcon.png"></image>
+            <view class="btn" @click="addCarUserInfo()">
               <image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
-              <text @click="editCarInfo()">添加车辆信息</text>
+              <text >添加车辆信息</text>
             </view>
           </template>
           <template v-else>
@@ -98,8 +98,8 @@
           <template v-if="!userInfo">
             <image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/userNone.png"></image>
             <view class="btn">
-              <image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
-              <text @click="editUserInfo()">添加客户信息</text>
+<!--              <image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>-->
+              <text >客户信息</text>
             </view>
           </template>
           <template v-else>
@@ -629,7 +629,14 @@ export default {
           url: `/pages/myCar/carDetail?car=${index >= 0 ? encodeURIComponent(JSON.stringify(this.carList[index])) : ''}&userInfo=${encodeURIComponent(JSON.stringify(this.userInfo))}`
         });
       }
-
+    },
+    /**
+     * 添加车辆和客户信息
+     */
+    addCarUserInfo(){
+      uni.navigateTo({
+        url: `/pages/myCar/addCarUser`
+      })
     },
     editUserInfo(userInfo) {
       if (this.phone == '') return uni.showToast({
diff --git a/pages.json b/pages.json
index f1248f3..403e450 100644
--- a/pages.json
+++ b/pages.json
@@ -34,6 +34,12 @@
         "navigationBarTitleText": ""
       }
     },
+    {
+      "path": "pages/myCar/addCarUser",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
     {
       "path": "pages/my/register",
       "style": {
diff --git a/pages/myCar/addCarUser.vue b/pages/myCar/addCarUser.vue
new file mode 100644
index 0000000..f947c48
--- /dev/null
+++ b/pages/myCar/addCarUser.vue
@@ -0,0 +1,530 @@
+<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="客户姓名" label-width="200">
+            <u-input v-model="userInfo.cusName" border="none" placeholder="请输入客户姓名"></u-input>
+          </u-form-item>
+          <u-form-item borderBottom label="客户性别" label-width="200">
+            <u-radio-group
+                v-model="userInfo.sex"
+                placement="row"
+            >
+              <u-radio key="0" label="男" name="0" style="margin-right: 100rpx"></u-radio>
+              <u-radio key="1" label="女" name="1"></u-radio>
+            </u-radio-group>
+          </u-form-item>
+          <u-form-item borderBottom label="客户联系方式" label-width="200">
+            <u-input v-model="userInfo.phoneNumber" border="none" placeholder="请输入客户手机号" type="number"></u-input>
+          </u-form-item>
+        </view>
+
+        <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
+                @click="carInputClick();"
+                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">
+            <song-data-picker
+                ref="songpicker"
+                style=" width: 100%;"
+                :localdata="brandList"
+                popup-title="请选择品牌"
+                :openSearch="true"
+                @change="onchange"
+                @nodeclick="onnodeclick"
+            ></song-data-picker>
+<!--            <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.nextInspectionDate"
+                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.insuranceExpiryDate"
+                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: {
+        cusName:"",
+        sex:"0",
+        phoneNumber:"",
+        car:{}
+      },
+      bo1: false,
+      bo2: true,
+
+      datePickerShow: false,
+      datePickerValue: new Date().getTime(),
+      pickerConfirmField: 'njDate',
+      showType: false,
+      brandType: false,
+      typeList: [],
+      //所有可选车辆品牌
+      brandList: [],
+      //选中的车辆品牌id
+      brandId: '',
+      //选中的车辆品牌名称
+      brandName: 0,
+      fileList1: [],
+      imageUrl: '',
+      //可选车辆性质范围
+      natureList: [],
+      natureIndex: 0,
+    };
+  },
+  onLoad() {
+    // 没有数据 需要赋值一下初始化
+    this.bo1 = false;
+    this.bo2 = true;
+    this.pageTitle = '添加车辆信息'
+    this.getBrandList()
+    this.getNatureList()
+  },
+  methods: {
+    onchange(e) {
+      this.brandId = e.detail.value[0].id
+      this.brandName = e.detail.value[0].brandName
+    },
+    onnodeclick(node) {
+      console.log(node,"node")
+    },
+    typeSelect(e) {
+    },
+    // 车辆性质选择事件
+    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.text = 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.setCarBrand(this.brandList[i].id,this.brandList[i].brandName)
+            }
+          }
+        }
+      })
+    },
+
+    // 打开车牌选择器
+    carInputClick() {
+      this.$refs.plateNumber.open();
+    },
+    getPlateNum(e) {
+
+    },
+
+    openDatePicker(picker) {
+      if (picker === 'nj') {
+        this.pickerConfirmField = 'nextInspectionDate'
+      } else if (picker === 'bx') {
+        this.pickerConfirmField = 'insuranceExpiryDate'
+      } 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() {
+      let jsonData = {}
+      if(!this.userInfo.cusName){
+        uni.showToast({
+          title: '请输入客户名称',
+          icon: 'none'
+        })
+      }
+      if(!this.userInfo.phoneNumber){
+        uni.showToast({
+          title: '请输入客户手机号',
+          icon: 'none'
+        })
+      }
+      if(!this.car.licenseNumber){
+        uni.showToast({
+          title: '请输入车牌号',
+          icon: 'none'
+        })
+      }
+      this.car.carBrand = this.brandId
+      // bus.$emit('updateCarInfo', this.car)
+      this.car.brandAndModel = [this.brandId, this.car.carModel]
+      //将日期转为时间戳
+      if (this.car.nextInspectionDate) {
+        this.car.nextInspectionDate = new Date(this.car.nextInspectionDate).getTime()
+      }else {
+        this.car.nextInspectionDate = undefined
+      }
+      if (this.car.insuranceExpiryDate) {
+        this.car.insuranceExpiryDate = new Date(this.car.insuranceExpiryDate).getTime()
+      }else {
+        this.car.insuranceExpiryDate = undefined
+      }
+      if (this.car.carRegisterDate) {
+        this.car.carRegisterDate = new Date(this.car.carRegisterDate).getTime()
+      }else {
+        this.car.carRegisterDate = undefined
+      }
+      this.userInfo.car = this.car
+      //提交保存数据
+      request({
+        url: '/admin-api/base/custom/saveCustomerAndCar',
+        method: 'POST',
+        data: this.userInfo,
+      }).then(res => {
+        if(res.code==200){
+          //保存成功
+          uni.showToast({
+            title: "新增成功",
+            icon: 'none'
+          })
+          setTimeout(()=>{
+            uni.navigateTo({
+              url: `/pages-order/addOrder/addOrder?phone=${this.userInfo.phoneNumber}&carId=${res.data.carId}`
+            });
+          },700)
+        }else{
+          uni.showToast({
+            title: res.msg,
+            icon: 'none'
+          })
+        }
+      })
+    },
+    // 查询下拉 车辆性质
+    async getNatureList() {
+      request({
+        url: '/admin-api/system/dict-data/type',
+        method: 'get',
+        params:{type:"car_nature"}
+      }).then((res) => {
+        console.log(res)
+        if (res.code == 200) {
+         this.natureList = res.data
+          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: '上传中'
+        })
+      })
+      uni.showLoading({
+        title: '正在识别中...'
+      });
+      try {
+        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++
+        }
+      }catch (e){
+        uni.hideLoading()
+      }
+    },
+    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.setCarBrand(item.id,item.brandName)
+              }
+            })
+            //车辆性质自动定位
+            this.natureList.forEach((item, index) => {
+              if (item.label == res.data.useCharacter) {
+                this.natureIndex = index;
+                this.car.carNature = this.natureList[index].value;
+              }
+            })
+            uni.hideLoading()
+          })
+        })
+      })
+    },
+    /**
+     * 设置选中的车辆品牌
+     * @param id
+     * @param name
+     */
+    setCarBrand(id,name){
+      this.$nextTick(()=>{
+        this.brandId = id
+        this.brandName = name
+        this.$refs.songpicker.inputSelected=[{text:name,value:id}]
+      })
+    }
+  }
+}
+</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>