diff --git a/src/api/car/carAddParkingSpaceApi.js b/src/api/car/carAddParkingSpaceApi.js
new file mode 100644
index 0000000..df755d6
--- /dev/null
+++ b/src/api/car/carAddParkingSpaceApi.js
@@ -0,0 +1,95 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询车辆信息
+export function getCarInfo(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取车辆信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加车辆停车位
+export function addCarParkingSpace(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.carAddParkingSpace',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '添加停车位失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询停车位列表
+export function queryParkingSpaces(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingSpace.queryParkingSpaces',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询停车位失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询停车场列表
+export function listParkingAreas() {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingArea.listParkingAreas',
+      method: 'get',
+      params: {
+        page: 1,
+        row: 50,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询停车场失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/car/hireParkingSpaceApi.js b/src/api/car/hireParkingSpaceApi.js
new file mode 100644
index 0000000..01fbc4c
--- /dev/null
+++ b/src/api/car/hireParkingSpaceApi.js
@@ -0,0 +1,136 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 保存车辆信息
+export function saveOwnerCar(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.saveOwnerCar',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '保存车辆信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询业主列表
+export function queryOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwners',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.records
+        })
+      } else {
+        reject(new Error(res.msg || '查询业主列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询停车位列表
+export function queryParkingSpaces(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingSpace.queryParkingSpaces',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取停车场区域列表
+export function listParkingAreas(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingArea.listParkingAreas',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取车辆属性规格
+export function getCarAttrSpec() {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/attr.getAttrSpec',
+      method: 'get',
+      params: {
+        specCd: 'owner_car_attr',
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '获取车辆属性规格失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取字典数据
+export function getDict(dictType, dictCd) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dict.getDict',
+      method: 'get',
+      params: {
+        dictType,
+        dictCd,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '获取字典数据失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/car/listOwnerCarApi.js b/src/api/car/listOwnerCarApi.js
new file mode 100644
index 0000000..94c7609
--- /dev/null
+++ b/src/api/car/listOwnerCarApi.js
@@ -0,0 +1,152 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询业主车辆
+export function queryOwnerCars(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询业主车辆失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除业主车辆
+export function deleteOwnerCars(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/owner.deleteOwnerCars',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '删除业主车辆失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 释放车位
+export function deleteCarParkingSpace(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/owner.deleteCarParkingSpace',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '释放车位失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导入车辆数据
+export function importData(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    const formData = new FormData()
+    formData.append('uploadFile', data.file)
+    formData.append('communityId', communityId)
+    formData.append('importAdapt', data.importAdapt || 'importOwnerCar')
+    
+    request({
+      url: '/callComponent/upload/assetImport/importData',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '导入失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 修改车辆信息
+export function editOwnerCar(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/owner.editOwnerCar',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '修改车辆信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出车辆数据
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params: {
+        ...params,
+        communityId,
+        pagePath: 'exportOwnerCar'
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '导出失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/car/parkingBoxManageApi.js b/src/api/car/parkingBoxManageApi.js
new file mode 100644
index 0000000..3e9cbaf
--- /dev/null
+++ b/src/api/car/parkingBoxManageApi.js
@@ -0,0 +1,124 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询岗亭列表
+export function getParkingBoxList(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        communityId,
+        iotApiCode: 'listParkingBoxBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取岗亭列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加岗亭
+export function addParkingBox(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/parkingBox.saveParkingBox',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '添加岗亭失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新岗亭
+export function updateParkingBox(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/parkingBox.updateParkingBox',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '更新岗亭失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除岗亭
+export function deleteParkingBox(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/parkingBox.deleteParkingBox',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '删除岗亭失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取停车场列表
+export function getParkingAreaList() {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/parkingArea.listParkingAreas',
+      method: 'get',
+      params: {
+        page: 1,
+        row: 50,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data.parkingAreas || [])
+      } else {
+        reject(new Error(res.msg || '获取停车场列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/buyCarMonthCardApi.js b/src/api/fee/buyCarMonthCardApi.js
new file mode 100644
index 0000000..1991851
--- /dev/null
+++ b/src/api/fee/buyCarMonthCardApi.js
@@ -0,0 +1,73 @@
+import request from '@/utils/request'
+
+/**
+ * 购买月卡订单
+ * @param {Object} data 订单数据
+ * @returns {Promise}
+ */
+export function buyCarMonthOrder(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/carMonth.buyCarMonthOrder',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '购买月卡失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询车主车辆
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function queryOwnerCars(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询车主车辆失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取月卡列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function getOpenApi(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取月卡列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/car/SearchParkingSpace.vue b/src/components/car/SearchParkingSpace.vue
new file mode 100644
index 0000000..e15a1da
--- /dev/null
+++ b/src/components/car/SearchParkingSpace.vue
@@ -0,0 +1,173 @@
+<template>
+  <el-dialog :title="$t('searchParkingSpace.title')" :visible.sync="visible" width="80%" @close="handleClose">
+    <el-card>
+      <el-row v-if="showSearchCondition" :gutter="20">
+        <el-col :span="8">
+          <el-select v-model="searchParkingSpaceInfo.areaNum" class="w-full"
+            :placeholder="$t('searchParkingSpace.parkingAreaPlaceholder')">
+            <el-option v-for="item in parkingAreas" :key="item.num" :label="item.num" :value="item.num" />
+          </el-select>
+        </el-col>
+        <el-col :span="8">
+          <el-input v-model="searchParkingSpaceInfo.num" :placeholder="$t('searchParkingSpace.numPlaceholder')" />
+        </el-col>
+        <el-col :span="8">
+          <el-button type="primary" @click="searchParkingSpaces">
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="resetParkingSpaces">
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="searchParkingSpaceInfo.parkingSpaces" class="mt-20">
+        <el-table-column prop="areaNum" :label="$t('searchParkingSpace.areaNum')" align="center" />
+        <el-table-column prop="num" :label="$t('searchParkingSpace.num')" align="center" />
+        <el-table-column :label="$t('searchParkingSpace.type')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.typeCd === '1001' ? $t('searchParkingSpace.ground') : $t('searchParkingSpace.underground') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="parkingTypeName" :label="$t('searchParkingSpace.parkingType')" align="center" />
+        <el-table-column prop="stateName" :label="$t('searchParkingSpace.state')" align="center" />
+        <el-table-column prop="area" :label="$t('searchParkingSpace.area')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="chooseParkingSpace(scope.row)">
+              {{ $t('common.select') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination class="mt-20" :current-page="pagination.currentPage" :page-sizes="[10, 20, 30, 50]"
+        :page-size="pagination.pageSize" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </el-card>
+  </el-dialog>
+</template>
+
+<script>
+import { queryParkingSpaces, listParkingAreas } from '@/api/car/hireParkingSpaceApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SearchParkingSpace',
+  props: {
+    parkingSpaceFlag: {
+      type: String,
+      default: 'F'
+    },
+    showSearchCondition: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      searchParkingSpaceInfo: {
+        parkingSpaces: [],
+        areaNum: '',
+        num: '',
+        carNum: ''
+      },
+      parkingAreas: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  async created() {
+    await this.listParkingAreas()
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.resetParkingSpaces()
+      this.loadAllParkingSpaceInfo()
+    },
+
+    handleClose() {
+      this.visible = false
+    },
+
+    async listParkingAreas() {
+      try {
+        const params = {
+          page: 1,
+          row: 50,
+          communityId: getCommunityId()
+        }
+
+        const { data } = await listParkingAreas(params)
+        this.parkingAreas = data
+      } catch (error) {
+        console.error('加载停车场区域失败:', error)
+      }
+    },
+
+    async loadAllParkingSpaceInfo() {
+      try {
+        const params = {
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize,
+          communityId: getCommunityId(),
+          num: this.searchParkingSpaceInfo.num,
+          areaNum: this.searchParkingSpaceInfo.areaNum,
+          carNum: this.searchParkingSpaceInfo.carNum,
+          state: this.parkingSpaceFlag
+        }
+
+        const { parkingSpaces, total } = await queryParkingSpaces(params)
+        this.searchParkingSpaceInfo.parkingSpaces = parkingSpaces
+        this.pagination.total = total
+      } catch (error) {
+        console.error('加载停车位信息失败:', error)
+        this.$message.error(this.$t('searchParkingSpace.loadError'))
+      }
+    },
+
+    chooseParkingSpace(parkingSpace) {
+      this.$emit('choose-parking-space', parkingSpace)
+      this.visible = false
+    },
+
+    searchParkingSpaces() {
+      this.pagination.currentPage = 1
+      this.loadAllParkingSpaceInfo()
+    },
+
+    resetParkingSpaces() {
+      this.searchParkingSpaceInfo.carNum = ''
+      this.searchParkingSpaceInfo.num = ''
+      this.searchParkingSpaceInfo.areaNum = ''
+      this.pagination.currentPage = 1
+      this.loadAllParkingSpaceInfo()
+    },
+
+    handleSizeChange(size) {
+      this.pagination.pageSize = size
+      this.loadAllParkingSpaceInfo()
+    },
+
+    handleCurrentChange(page) {
+      this.pagination.currentPage = page
+      this.loadAllParkingSpaceInfo()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.w-full {
+  width: 100%;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/car/addParkingBox.vue b/src/components/car/addParkingBox.vue
new file mode 100644
index 0000000..1b1a09e
--- /dev/null
+++ b/src/components/car/addParkingBox.vue
@@ -0,0 +1,216 @@
+<template>
+  <el-dialog
+    :title="$t('addParkingBox.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item
+        :label="$t('addParkingBox.boothName')"
+        prop="boxName"
+        :rules="[
+          { required: true, message: $t('addParkingBox.required') + $t('addParkingBox.boothName'), trigger: 'blur' },
+          { max: 64, message: $t('addParkingBox.maxLength'), trigger: 'blur' }
+        ]"
+      >
+        <el-input
+          v-model="formData.boxName"
+          :placeholder="$t('addParkingBox.required') + $t('addParkingBox.boothName')"
+        />
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('addParkingBox.parkingLot')"
+        prop="paId"
+        :rules="[
+          { required: true, message: $t('addParkingBox.required') + $t('addParkingBox.parkingLot'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.paId"
+          :placeholder="$t('addParkingBox.required') + $t('addParkingBox.parkingLot')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in parkingAreas"
+            :key="item.paId"
+            :label="item.num"
+            :value="item.paId"
+          />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('addParkingBox.tempCarIn')"
+        prop="tempCarIn"
+        :rules="[
+          { required: true, message: $t('addParkingBox.required') + $t('addParkingBox.tempCarIn'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.tempCarIn"
+          :placeholder="$t('addParkingBox.required') + $t('addParkingBox.tempCarIn')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('parkingBoxManage.yes')" />
+          <el-option value="N" :label="$t('parkingBoxManage.no')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('addParkingBox.tempAuth')"
+        prop="tempAuth"
+        :rules="[
+          { required: true, message: $t('addParkingBox.required') + $t('addParkingBox.tempAuth'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.tempAuth"
+          :placeholder="$t('addParkingBox.required') + $t('addParkingBox.tempAuth')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('parkingBoxManage.yes')" />
+          <el-option value="N" :label="$t('parkingBoxManage.no')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('addParkingBox.fee')"
+        prop="fee"
+        :rules="[
+          { required: true, message: $t('addParkingBox.required') + $t('addParkingBox.fee'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.fee"
+          :placeholder="$t('addParkingBox.required') + $t('addParkingBox.fee')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('parkingBoxManage.yes')" />
+          <el-option value="N" :label="$t('parkingBoxManage.no')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('addParkingBox.blueCarIn')"
+        prop="blueCarIn"
+        :rules="[
+          { required: true, message: $t('addParkingBox.required') + $t('addParkingBox.blueCarIn'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.blueCarIn"
+          :placeholder="$t('addParkingBox.required') + $t('addParkingBox.blueCarIn')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('addParkingBox.canEnter')" />
+          <el-option value="N" :label="$t('addParkingBox.cannotEnter')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('addParkingBox.yelowCarIn')"
+        prop="yelowCarIn"
+        :rules="[
+          { required: true, message: $t('addParkingBox.required') + $t('addParkingBox.yelowCarIn'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.yelowCarIn"
+          :placeholder="$t('addParkingBox.required') + $t('addParkingBox.yelowCarIn')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('addParkingBox.canExit')" />
+          <el-option value="N" :label="$t('addParkingBox.cannotExit')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item :label="$t('addParkingBox.remark')">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :placeholder="$t('addParkingBox.optional') + $t('addParkingBox.remark')"
+        />
+      </el-form-item>
+    </el-form>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('addParkingBox.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('addParkingBox.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addParkingBox, getParkingAreaList } from '@/api/car/parkingBoxManageApi'
+
+export default {
+  name: 'AddParkingBox',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        boxName: '',
+        paId: '',
+        tempCarIn: '',
+        tempAuth: '',
+        fee: '',
+        blueCarIn: '',
+        yelowCarIn: '',
+        remark: ''
+      },
+      parkingAreas: []
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.loadParkingAreas()
+    },
+    
+    async loadParkingAreas() {
+      try {
+        this.parkingAreas = await getParkingAreaList()
+      } catch (error) {
+        console.error('获取停车场列表失败:', error)
+        this.$message.error(this.$t('parkingBoxManage.fetchParkingAreaError'))
+      }
+    },
+    
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData = {
+        boxName: '',
+        paId: '',
+        tempCarIn: '',
+        tempAuth: '',
+        fee: '',
+        blueCarIn: '',
+        yelowCarIn: '',
+        remark: ''
+      }
+    },
+    
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await addParkingBox(this.formData)
+            this.$message.success(this.$t('parkingBoxManage.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('添加岗亭失败:', error)
+            this.$message.error(this.$t('parkingBoxManage.addError'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/car/deleteOwnerCar.vue b/src/components/car/deleteOwnerCar.vue
new file mode 100644
index 0000000..ed29047
--- /dev/null
+++ b/src/components/car/deleteOwnerCar.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-dialog 
+    :title="$t('listOwnerCar.confirmDelete')" 
+    :visible.sync="visible" 
+    width="500px">
+    <p>{{ $t('listOwnerCar.deleteCarConfirm') }}</p>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="confirmDelete" :loading="loading">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteOwnerCars } from '@/api/car/listOwnerCarApi'
+
+export default {
+  name: 'DeleteOwnerCar',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      carInfo: null
+    }
+  },
+  methods: {
+    open(carInfo) {
+      this.carInfo = carInfo
+      this.visible = true
+    },
+    
+    async confirmDelete() {
+      if (!this.carInfo || !this.carInfo.carId) return
+      
+      this.loading = true
+      try {
+        await deleteOwnerCars({ carId: this.carInfo.carId })
+        this.$message.success(this.$t('listOwnerCar.deleteSuccess'))
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        console.error('删除车辆失败:', error)
+        this.$message.error(error.message || this.$t('listOwnerCar.deleteError'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/car/deleteParkingBox.vue b/src/components/car/deleteParkingBox.vue
new file mode 100644
index 0000000..1df3ac3
--- /dev/null
+++ b/src/components/car/deleteParkingBox.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-dialog
+    :title="$t('deleteParkingBox.title')"
+    :visible.sync="visible"
+    width="30%"
+    center
+  >
+    <p>{{ $t('deleteParkingBox.confirmDelete') }}</p>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('deleteParkingBox.cancel') }}
+      </el-button>
+      <el-button type="danger" @click="handleConfirm">
+        {{ $t('deleteParkingBox.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteParkingBox } from '@/api/car/parkingBoxManageApi'
+
+export default {
+  name: 'DeleteParkingBox',
+  data() {
+    return {
+      visible: false,
+      boxId: ''
+    }
+  },
+  methods: {
+    open(row) {
+      this.boxId = row.boxId
+      this.visible = true
+    },
+    
+    async handleConfirm() {
+      try {
+        await deleteParkingBox({ boxId: this.boxId })
+        this.$message.success(this.$t('parkingBoxManage.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('删除岗亭失败:', error)
+        this.$message.error(this.$t('parkingBoxManage.deleteError'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/car/editCar.vue b/src/components/car/editCar.vue
new file mode 100644
index 0000000..f423c9b
--- /dev/null
+++ b/src/components/car/editCar.vue
@@ -0,0 +1,205 @@
+<template>
+  <el-dialog 
+    :title="$t('listOwnerCar.editCar')" 
+    :visible.sync="visible" 
+    width="600px"
+    @close="resetForm">
+    <el-form :model="form" label-width="120px">
+      <el-form-item :label="$t('listOwnerCar.carNum')" required>
+        <el-input 
+          v-model="form.carNum" 
+          :placeholder="$t('listOwnerCar.inputCarNumRequired')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('listOwnerCar.carBrand')">
+        <el-input 
+          v-model="form.carBrand" 
+          :placeholder="$t('listOwnerCar.inputCarBrand')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('listOwnerCar.carType')" required>
+        <el-select 
+          v-model="form.carType" 
+          :placeholder="$t('listOwnerCar.selectType')"
+          style="width: 100%">
+          <el-option 
+            v-for="item in carTypes" 
+            :key="item.statusCd" 
+            :label="item.name" 
+            :value="item.statusCd" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item :label="$t('listOwnerCar.color')">
+        <el-input 
+          v-model="form.carColor" 
+          :placeholder="$t('listOwnerCar.inputCarColor')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('listOwnerCar.licensePlateType')" required>
+        <el-select 
+          v-model="form.leaseType" 
+          :placeholder="$t('listOwnerCar.selectLicensePlateType')"
+          style="width: 100%">
+          <el-option value="H" :label="$t('listOwnerCar.monthlyRentCar')"></el-option>
+          <el-option value="S" :label="$t('listOwnerCar.soldCar')"></el-option>
+          <el-option value="I" :label="$t('listOwnerCar.internalCar')"></el-option>
+          <el-option value="NM" :label="$t('listOwnerCar.freeCar')"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <template v-if="form.leaseType === 'H' || form.leaseType === 'S'">
+        <el-form-item :label="$t('listOwnerCar.startRentTime')" required>
+          <el-date-picker
+            v-model="form.startTime"
+            type="datetime"
+            :placeholder="$t('listOwnerCar.inputStartRentTime')"
+            style="width: 100%"
+            value-format="yyyy-MM-dd HH:mm:ss" />
+        </el-form-item>
+        
+        <el-form-item :label="$t('listOwnerCar.endRentTime')" required>
+          <el-date-picker
+            v-model="form.endTime"
+            type="datetime"
+            :placeholder="$t('listOwnerCar.inputEndRentTime')"
+            style="width: 100%"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :disabledDate="disabledEndDate" />
+        </el-form-item>
+      </template>
+      
+      <el-form-item :label="$t('listOwnerCar.remark')">
+        <el-input 
+          v-model="form.remark" 
+          type="textarea" 
+          :rows="3" 
+          :placeholder="$t('listOwnerCar.inputRemark')" />
+      </el-form-item>
+    </el-form>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="submitForm" :loading="loading">
+        {{ $t('common.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { editOwnerCar } from '@/api/car/listOwnerCarApi'
+import { getDict } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditCar',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      carTypes: [],
+      form: {
+        carId: '',
+        memberId: '',
+        carNum: '',
+        carBrand: '',
+        carType: '',
+        carColor: '',
+        remark: '',
+        startTime: '',
+        endTime: '',
+        leaseType: ''
+      }
+    }
+  },
+  mounted() {
+    this.getCarTypes()
+  },
+  methods: {
+    open(carInfo) {
+      this.form = { ...carInfo }
+      this.visible = true
+    },
+    
+    async getCarTypes() {
+      try {
+        this.carTypes = await getDict('owner_car', 'car_type')
+      } catch (error) {
+        console.error('获取车辆类型失败:', error)
+      }
+    },
+    
+    disabledEndDate(endTime) {
+      if (!this.form.startTime) return false
+      const startTime = new Date(this.form.startTime)
+      return endTime.getTime() <= startTime.getTime()
+    },
+    
+    async submitForm() {
+      if (!this.validateForm()) return
+      
+      this.loading = true
+      try {
+        await editOwnerCar(this.form)
+        this.$message.success(this.$t('listOwnerCar.updateSuccess'))
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        console.error('更新车辆信息失败:', error)
+        this.$message.error(error.message || this.$t('listOwnerCar.updateError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    
+    validateForm() {
+      if (!this.form.carNum) {
+        this.$message.warning(this.$t('listOwnerCar.inputCarNumRequired'))
+        return false
+      }
+      
+      if (!this.form.carType) {
+        this.$message.warning(this.$t('listOwnerCar.selectTypeRequired'))
+        return false
+      }
+      
+      if (!this.form.leaseType) {
+        this.$message.warning(this.$t('listOwnerCar.selectLicensePlateTypeRequired'))
+        return false
+      }
+      
+      if ((this.form.leaseType === 'H' || this.form.leaseType === 'S') && 
+          (!this.form.startTime || !this.form.endTime)) {
+        this.$message.warning(this.$t('listOwnerCar.rentTimeRequired'))
+        return false
+      }
+      
+      if (this.form.startTime && this.form.endTime) {
+        const start = new Date(this.form.startTime)
+        const end = new Date(this.form.endTime)
+        if (start >= end) {
+          this.$message.warning(this.$t('listOwnerCar.endTimeAfterStart'))
+          return false
+        }
+      }
+      
+      return true
+    },
+    
+    resetForm() {
+      this.form = {
+        carId: '',
+        memberId: '',
+        carNum: '',
+        carBrand: '',
+        carType: '',
+        carColor: '',
+        remark: '',
+        startTime: '',
+        endTime: '',
+        leaseType: ''
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/car/editParkingBox.vue b/src/components/car/editParkingBox.vue
new file mode 100644
index 0000000..0ce36b8
--- /dev/null
+++ b/src/components/car/editParkingBox.vue
@@ -0,0 +1,208 @@
+<template>
+  <el-dialog
+    :title="$t('editParkingBox.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item
+        :label="$t('editParkingBox.boothName')"
+        prop="boxName"
+        :rules="[
+          { required: true, message: $t('editParkingBox.required') + $t('editParkingBox.boothName'), trigger: 'blur' },
+          { max: 64, message: $t('editParkingBox.maxLength'), trigger: 'blur' }
+        ]"
+      >
+        <el-input
+          v-model="formData.boxName"
+          :placeholder="$t('editParkingBox.required') + $t('editParkingBox.boothName')"
+        />
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('editParkingBox.parkingLot')"
+        prop="paId"
+        :rules="[
+          { required: true, message: $t('editParkingBox.required') + $t('editParkingBox.parkingLot'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.paId"
+          :placeholder="$t('editParkingBox.required') + $t('editParkingBox.parkingLot')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in parkingAreas"
+            :key="item.paId"
+            :label="item.num"
+            :value="item.paId"
+          />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('editParkingBox.tempCarIn')"
+        prop="tempCarIn"
+        :rules="[
+          { required: true, message: $t('editParkingBox.required') + $t('editParkingBox.tempCarIn'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.tempCarIn"
+          :placeholder="$t('editParkingBox.required') + $t('editParkingBox.tempCarIn')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('parkingBoxManage.yes')" />
+          <el-option value="N" :label="$t('parkingBoxManage.no')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('editParkingBox.tempAuth')"
+        prop="tempAuth"
+        :rules="[
+          { required: true, message: $t('editParkingBox.required') + $t('editParkingBox.tempAuth'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.tempAuth"
+          :placeholder="$t('editParkingBox.required') + $t('editParkingBox.tempAuth')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('parkingBoxManage.yes')" />
+          <el-option value="N" :label="$t('parkingBoxManage.no')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('editParkingBox.fee')"
+        prop="fee"
+        :rules="[
+          { required: true, message: $t('editParkingBox.required') + $t('editParkingBox.fee'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.fee"
+          :placeholder="$t('editParkingBox.required') + $t('editParkingBox.fee')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('parkingBoxManage.yes')" />
+          <el-option value="N" :label="$t('parkingBoxManage.no')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('editParkingBox.blueCarIn')"
+        prop="blueCarIn"
+        :rules="[
+          { required: true, message: $t('editParkingBox.required') + $t('editParkingBox.blueCarIn'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.blueCarIn"
+          :placeholder="$t('editParkingBox.required') + $t('editParkingBox.blueCarIn')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('editParkingBox.canEnter')" />
+          <el-option value="N" :label="$t('editParkingBox.cannotEnter')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item
+        :label="$t('editParkingBox.yelowCarIn')"
+        prop="yelowCarIn"
+        :rules="[
+          { required: true, message: $t('editParkingBox.required') + $t('editParkingBox.yelowCarIn'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.yelowCarIn"
+          :placeholder="$t('editParkingBox.required') + $t('editParkingBox.yelowCarIn')"
+          style="width:100%"
+        >
+          <el-option value="Y" :label="$t('editParkingBox.canExit')" />
+          <el-option value="N" :label="$t('editParkingBox.cannotExit')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item :label="$t('editParkingBox.remark')">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :placeholder="$t('editParkingBox.optional') + $t('editParkingBox.remark')"
+        />
+      </el-form-item>
+    </el-form>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('editParkingBox.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('editParkingBox.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateParkingBox, getParkingAreaList } from '@/api/car/parkingBoxManageApi'
+
+export default {
+  name: 'EditParkingBox',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        boxId: '',
+        boxName: '',
+        paId: '',
+        tempCarIn: '',
+        tempAuth: '',
+        fee: '',
+        blueCarIn: '',
+        yelowCarIn: '',
+        remark: ''
+      },
+      parkingAreas: []
+    }
+  },
+  methods: {
+    open(row) {
+      this.formData = { ...row }
+      this.visible = true
+      this.loadParkingAreas()
+    },
+    
+    async loadParkingAreas() {
+      try {
+        this.parkingAreas = await getParkingAreaList()
+      } catch (error) {
+        console.error('获取停车场列表失败:', error)
+        this.$message.error(this.$t('parkingBoxManage.fetchParkingAreaError'))
+      }
+    },
+    
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateParkingBox(this.formData)
+            this.$message.success(this.$t('parkingBoxManage.updateSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('更新岗亭失败:', error)
+            this.$message.error(this.$t('parkingBoxManage.updateError'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/car/importOwnerCar.vue b/src/components/car/importOwnerCar.vue
new file mode 100644
index 0000000..d898cf0
--- /dev/null
+++ b/src/components/car/importOwnerCar.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-dialog :title="$t('listOwnerCar.importCarTitle')" :visible.sync="visible" width="600px" @close="resetForm">
+    <el-form :model="form" label-width="120px">
+      <el-form-item :label="$t('listOwnerCar.selectFile')">
+        <el-upload class="upload-demo" action="" :on-change="handleFileChange" :auto-upload="false"
+          :show-file-list="false">
+          <el-button size="small" type="primary">{{ $t('listOwnerCar.selectFile') }}</el-button>
+          <div slot="tip" class="el-upload__tip">
+            {{ fileName || $t('listOwnerCar.fileRequired') }}
+          </div>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item :label="$t('listOwnerCar.downloadTemplate')">
+        <div>
+          {{ $t('listOwnerCar.downloadFirst') }}
+          <el-link type="primary" href="/import/importCar.xlsx" target="_blank">
+            {{ $t('listOwnerCar.importTemplate') }}
+          </el-link>
+          <span>{{ $t('listOwnerCar.prepareData') }}</span>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="importData" :loading="loading">
+        {{ $t('listOwnerCar.import') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { importData } from '@/api/car/listOwnerCarApi'
+
+export default {
+  name: 'ImportOwnerCar',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      file: null,
+      fileName: ''
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+    },
+
+    handleFileChange(file) {
+      this.file = file.raw
+      this.fileName = file.name
+    },
+
+    async importData() {
+      if (!this.file) {
+        this.$message.warning(this.$t('listOwnerCar.fileRequired'))
+        return
+      }
+
+      if (!this.checkFileType(this.fileName)) {
+        this.$message.warning(this.$t('listOwnerCar.invalidExcel'))
+        return
+      }
+
+      if (!this.checkFileSize(this.file.size)) {
+        this.$message.warning(this.$t('listOwnerCar.fileSizeExceed'))
+        return
+      }
+
+      this.loading = true
+      try {
+        const response = await importData({
+          file: this.file,
+          importAdapt: 'importOwnerCar'
+        })
+
+        this.$message.success(this.$t('listOwnerCar.importSuccess'))
+        this.$emit('success')
+        this.visible = false
+        this.$router.push(`/pages/property/assetImportLogDetail?logId=${response.data.logId}&logType=importOwnerCar`)
+      } catch (error) {
+        console.error('导入失败:', error)
+        this.$message.error(error.message || this.$t('listOwnerCar.importError'))
+      } finally {
+        this.loading = false
+      }
+    },
+
+    checkFileType(fileName) {
+      const ext = fileName.split('.').pop().toLowerCase()
+      return ['xlsx', 'xls'].includes(ext)
+    },
+
+    checkFileSize(size) {
+      const maxSize = 2 * 1024 * 1024 // 2MB
+      return size <= maxSize
+    },
+
+    resetForm() {
+      this.file = null
+      this.fileName = ''
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/i18n/commonLang.js b/src/i18n/commonLang.js
index 2ec0b1a..313184e 100644
--- a/src/i18n/commonLang.js
+++ b/src/i18n/commonLang.js
@@ -43,6 +43,7 @@ export const messages = {
         remark: 'Remark',
         hour:'hour',
         more:'More',
+        tip:'Tip',
       }
     },
     zh: {
@@ -89,6 +90,8 @@ export const messages = {
         remark: '备注',
         hour:'时',
         more:'更多',
+        tip:'提示',
+        
       }
     }
   } 
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index d3359f5..98e8e7c 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -146,6 +146,11 @@ import { messages as invoiceApplyDetailMessages } from '../views/fee/invoiceAppl
 import { messages as feeConfigDetailMessages } from '../views/fee/feeConfigDetailLang'
 import { messages as parkingAreaManageMessages } from '../views/car/parkingAreaManageLang'
 import { messages as listParkingSpaceMessages } from '../views/car/listParkingSpaceLang'
+import { messages as parkingBoxManageMessages } from '../views/car/parkingBoxManageLang'
+import { messages as listOwnerCarMessages } from '../views/car/listOwnerCarLang'
+import { messages as hireParkingSpaceMessages } from '../views/car/hireParkingSpaceLang'
+import { messages as carAddParkingSpaceMessages } from '../views/car/carAddParkingSpaceLang'
+import { messages as buyCarMonthCardMessages } from '../views/fee/buyCarMonthCardLang'
 
 Vue.use(VueI18n)
 
@@ -296,6 +301,11 @@ const messages = {
     ...feeConfigDetailMessages.en,
     ...parkingAreaManageMessages.en,
     ...listParkingSpaceMessages.en,
+    ...parkingBoxManageMessages.en,
+    ...listOwnerCarMessages.en,
+    ...hireParkingSpaceMessages.en,
+    ...carAddParkingSpaceMessages.en,
+    ...buyCarMonthCardMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -442,6 +452,11 @@ const messages = {
     ...feeConfigDetailMessages.zh,
     ...parkingAreaManageMessages.zh,
     ...listParkingSpaceMessages.zh,
+    ...parkingBoxManageMessages.zh,
+    ...listOwnerCarMessages.zh,
+    ...hireParkingSpaceMessages.zh,
+    ...carAddParkingSpaceMessages.zh,
+    ...buyCarMonthCardMessages.zh,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 56b533c..d1e6918 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -717,15 +717,40 @@ const routes = [
         component: () => import('@/views/fee/feeConfigDetailList.vue')
       },
       {
-        path:'/pages/property/parkingAreaManage',
-        name:'/pages/property/parkingAreaManage',
+        path: '/pages/property/parkingAreaManage',
+        name: '/pages/property/parkingAreaManage',
         component: () => import('@/views/car/parkingAreaManageList.vue')
-        },
-        {
-          path:'/pages/property/listParkingSpace',
-          name:'/pages/property/listParkingSpace',
-          component: () => import('@/views/car/listParkingSpaceList.vue')
-          },
+      },
+      {
+        path: '/pages/property/listParkingSpace',
+        name: '/pages/property/listParkingSpace',
+        component: () => import('@/views/car/listParkingSpaceList.vue')
+      },
+      {
+        path: '/pages/property/parkingBoxManage',
+        name: '/pages/property/parkingBoxManage',
+        component: () => import('@/views/car/parkingBoxManageList.vue')
+      },
+      {
+        path: '/pages/property/listOwnerCar',
+        name: '/pages/property/listOwnerCar',
+        component: () => import('@/views/car/listOwnerCarList.vue')
+      },
+      {
+        path: '/views/car/hireParkingSpace',
+        name: '/views/car/hireParkingSpace',
+        component: () => import('@/views/car/hireParkingSpaceList.vue')
+      },
+      {
+        path: '/views/car/carAddParkingSpace',
+        name: '/views/car/carAddParkingSpace',
+        component: () => import('@/views/car/carAddParkingSpaceList.vue')
+      },
+      {
+        path: '/views/fee/buyCarMonthCard',
+        name: '/views/fee/buyCarMonthCard',
+        component: () => import('@/views/fee/buyCarMonthCardList.vue')
+      },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/car/carAddParkingSpaceLang.js b/src/views/car/carAddParkingSpaceLang.js
new file mode 100644
index 0000000..2e7d158
--- /dev/null
+++ b/src/views/car/carAddParkingSpaceLang.js
@@ -0,0 +1,76 @@
+export const messages = {
+  en: {
+    carAddParkingSpace: {
+      vehicleInfo: 'Vehicle Information',
+      licensePlate: 'License Plate',
+      requiredLicensePlate: 'Required, please fill in the license plate',
+      startTime: 'Start Time',
+      requiredStartTime: 'Required, please fill in the start time',
+      endTime: 'End Time',
+      requiredEndTime: 'Required, please fill in the end time',
+      remark: 'Remark',
+      remarkPlaceholder: 'Please fill in remarks',
+      submit: 'Submit',
+      parkingSpaceInfo: 'Parking Space Information',
+      parkingSpaceId: 'Parking Space ID',
+      number: 'Number',
+      parkingLot: 'Parking Lot',
+      parkingSpaceStatus: 'Parking Space Status',
+      area: 'Area',
+      squareMeters: 'square meters',
+      remarks: 'Remarks',
+      selectParkingSpace: 'Select Parking Space',
+      search: 'Search',
+      reset: 'Reset',
+      parkingLotCode: 'Parking Lot Code',
+      parkingSpaceCode: 'Parking Space Code',
+      parkingLotType: 'Parking Lot Type',
+      parkingSpaceType: 'Parking Space Type',
+      operation: 'Operation',
+      select: 'Select',
+      aboveGround: 'Above Ground',
+      underground: 'Underground',
+      free: 'Free',
+      sold: 'Sold',
+      rented: 'Rented',
+      unknown: 'Unknown'
+    }
+  },
+  zh: {
+    carAddParkingSpace: {
+      vehicleInfo: '车辆信息',
+      licensePlate: '车牌号',
+      requiredLicensePlate: '必填，请填写车牌号',
+      startTime: '起租时间',
+      requiredStartTime: '必填，请填写起租时间',
+      endTime: '结租时间',
+      requiredEndTime: '必填，请填写结租时间',
+      remark: '备注',
+      remarkPlaceholder: '请填写备注信息',
+      submit: '提交',
+      parkingSpaceInfo: '停车位信息',
+      parkingSpaceId: '车位ID',
+      number: '编号',
+      parkingLot: '停车场',
+      parkingSpaceStatus: '车位状态',
+      area: '面积',
+      squareMeters: '平方米',
+      remarks: '备注',
+      selectParkingSpace: '选择车位',
+      search: '查询',
+      reset: '重置',
+      parkingLotCode: '停车场编码',
+      parkingSpaceCode: '停车位编码',
+      parkingLotType: '停车场类型',
+      parkingSpaceType: '车位类型',
+      operation: '操作',
+      select: '选择',
+      aboveGround: '地上停车位',
+      underground: '地下停车位',
+      free: '空闲',
+      sold: '已售卖',
+      rented: '已出租',
+      unknown: '未知'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/car/carAddParkingSpaceList.vue b/src/views/car/carAddParkingSpaceList.vue
new file mode 100644
index 0000000..0dd8393
--- /dev/null
+++ b/src/views/car/carAddParkingSpaceList.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header">
+            <span>{{ $t('carAddParkingSpace.vehicleInfo') }}</span>
+          </div>
+          <div>
+            <el-form label-width="120px">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item :label="$t('hireParkingSpace.parkingSpace')" prop="psName" required>
+                    <el-input v-model="carAddParkingSpaceInfo.psName" disabled style="width: 80%;"
+                      :placeholder="$t('hireParkingSpace.parkingSpacePlaceholder')" />
+                    <el-button type="primary" size="small" class="margin-left" @click="openSearchParkingSpaceModel">
+                      {{ $t('common.select') }}
+                    </el-button>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item :label="$t('carAddParkingSpace.licensePlate')">
+                    <el-input v-model.trim="carAddParkingSpaceInfo.carNum"
+                      :placeholder="$t('carAddParkingSpace.requiredLicensePlate')" disabled />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item :label="$t('carAddParkingSpace.startTime')">
+                    <el-date-picker v-model="carAddParkingSpaceInfo.startTime" style="width: 100%;" type="date"
+                      :placeholder="$t('carAddParkingSpace.requiredStartTime')" value-format="yyyy-MM-dd" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item :label="$t('carAddParkingSpace.endTime')">
+                    <el-date-picker v-model="carAddParkingSpaceInfo.endTime" style="width: 100%;" type="date"
+                      :placeholder="$t('carAddParkingSpace.requiredEndTime')" value-format="yyyy-MM-dd" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row :gutter="20">
+                <el-col :span="24">
+                  <el-form-item :label="$t('carAddParkingSpace.remark')">
+                    <el-input v-model.trim="carAddParkingSpaceInfo.remark" type="textarea"
+                      :placeholder="$t('carAddParkingSpace.remarkPlaceholder')" rows="3" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="24" style="text-align: right; margin-top: 20px;">
+        <el-button type="primary" @click="submitForm">
+          {{ $t('carAddParkingSpace.submit') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <search-parking-space ref="searchParkingSpace" @choose-parking-space="handleChooseParkingSpace" />
+  </div>
+</template>
+
+<script>
+import { getCarInfo, addCarParkingSpace } from '@/api/car/carAddParkingSpaceApi'
+import SearchParkingSpace from '@/components/car/SearchParkingSpace'
+
+export default {
+  name: 'CarAddParkingSpaceList',
+  components: {
+    SearchParkingSpace
+  },
+  data() {
+    return {
+      callBackComponent: 'carAddParkingSpace',
+      callBackFunction: 'notify',
+      carAddParkingSpaceInfo: {
+        carNum: '',
+        remark: '',
+        startTime: '',
+        endTime: '',
+        carId: '',
+        psId: '',
+        psName: '',
+        memberId: ''
+      }
+    }
+  },
+  created() {
+    this.carAddParkingSpaceInfo.carId = this.$route.query.carId
+    this.loadCarInfo()
+  },
+  methods: {
+    async loadCarInfo() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          carId: this.carAddParkingSpaceInfo.carId
+        }
+
+        const res = await getCarInfo(params)
+        if (res.code === 0 && res.data.length > 0) {
+          const carData = res.data[0]
+          this.carAddParkingSpaceInfo = {
+            ...this.carAddParkingSpaceInfo,
+            carNum: carData.carNum || '',
+            psId: carData.psId || ''
+          }
+          this.$refs.viewSelectParkingSpace.handleShowParkingSpace(carData)
+        }
+      } catch (error) {
+        console.error('Failed to load car info:', error)
+      }
+    },
+    handleParkingSpaceSelected(info) {
+      this.carAddParkingSpaceInfo.psId = info.psId
+    },
+    validateForm() {
+      if (!this.carAddParkingSpaceInfo.carNum) {
+        this.$message.error(this.$t('carAddParkingSpace.requiredLicensePlate'))
+        return false
+      }
+      if (!this.carAddParkingSpaceInfo.startTime) {
+        this.$message.error(this.$t('carAddParkingSpace.requiredStartTime'))
+        return false
+      }
+      if (!this.carAddParkingSpaceInfo.endTime) {
+        this.$message.error(this.$t('carAddParkingSpace.requiredEndTime'))
+        return false
+      }
+      if (!this.carAddParkingSpaceInfo.psId) {
+        this.$message.error(this.$t('carAddParkingSpace.parkingSpaceRequired'))
+        return false
+      }
+
+      const start = new Date(this.carAddParkingSpaceInfo.startTime)
+      const end = new Date(this.carAddParkingSpaceInfo.endTime)
+      if (start >= end) {
+        this.$message.error(this.$t('carAddParkingSpace.endTimeAfterStart'))
+        return false
+      }
+
+      return true
+    },
+    async submitForm() {
+      if (!this.validateForm()) return
+
+      try {
+        const data = {
+          ...this.carAddParkingSpaceInfo,
+          memberId: this.carId
+        }
+
+        const res = await addCarParkingSpace(data)
+        if (res.code === 0) {
+          this.$message.success(this.$t('carAddParkingSpace.submitSuccess'))
+          this.$router.go(-1)
+        } else {
+          this.$message.error(res.msg || this.$t('carAddParkingSpace.submitFailed'))
+        }
+      } catch (error) {
+        console.error('Submit failed:', error)
+        this.$message.error(this.$t('carAddParkingSpace.submitFailed'))
+      }
+    },
+    openSearchParkingSpaceModel() {
+      this.$refs.searchParkingSpace.open()
+    },
+    handleChooseParkingSpace(parkingSpace) {
+      this.carAddParkingSpaceInfo.psName = `${parkingSpace.areaNum}-${parkingSpace.num}`
+      this.carAddParkingSpaceInfo.psId = parkingSpace.psId
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+.el-row {
+  margin-bottom: 20px;
+}
+
+.margin-left {
+  margin-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/car/hireParkingSpaceLang.js b/src/views/car/hireParkingSpaceLang.js
new file mode 100644
index 0000000..486974b
--- /dev/null
+++ b/src/views/car/hireParkingSpaceLang.js
@@ -0,0 +1,132 @@
+export const messages = {
+  en: {
+    hireParkingSpace: {
+      title: 'Add Vehicle',
+      carNum: 'License Plate',
+      carNumPlaceholder: 'Required, please enter license plate',
+      carBrand: 'Car Brand',
+      carBrandPlaceholder: 'Optional, please enter car brand',
+      carType: 'Vehicle Type',
+      carTypePlaceholder: 'Required, please select vehicle type',
+      carColor: 'Color',
+      carColorPlaceholder: 'Optional, please enter color',
+      licenseType: 'License Type',
+      licenseTypePlaceholder: 'Required, please select license type',
+      monthlyRent: 'Monthly Rent',
+      saleCar: 'For Sale',
+      internalCar: 'Internal Vehicle',
+      freeCar: 'Free Vehicle',
+      startTime: 'Start Time',
+      startTimePlaceholder: 'Required, please select start time',
+      endTime: 'End Time',
+      endTimePlaceholder: 'Required, please select end time',
+      owner: 'Owner',
+      ownerPlaceholder: 'Required, please select owner',
+      parkingSpace: 'Parking Space',
+      parkingSpacePlaceholder: 'Required, please select parking space',
+      remark: 'Remark',
+      remarkPlaceholder: 'Optional, please enter remark',
+      validate: {
+        carNum: 'License plate is required',
+        carType: 'Vehicle type is required',
+        licenseType: 'License type is required',
+        owner: 'Owner is required',
+        parkingSpace: 'Parking space is required',
+        dateRange: 'Date range is required'
+      },
+      saveSuccess: 'Vehicle information saved successfully!',
+      saveError: 'Failed to save vehicle information'
+    },
+    searchOwner: {
+      title: 'Select Owner',
+      roomPlaceholder: 'Enter room number (Building-Unit-Room)',
+      namePlaceholder: 'Enter owner name',
+      memberId: 'Owner ID',
+      name: 'Name',
+      personType: 'Person Type',
+      personRole: 'Person Role',
+      idCard: 'ID Card',
+      contact: 'Contact',
+      loadError: 'Failed to load owner information'
+    },
+    searchParkingSpace: {
+      title: 'Select Parking Space',
+      parkingAreaPlaceholder: 'Select parking area',
+      numPlaceholder: 'Enter parking space number',
+      areaNum: 'Parking Area',
+      num: 'Parking Space',
+      type: 'Type',
+      ground: 'Ground',
+      underground: 'Underground',
+      parkingType: 'Parking Type',
+      state: 'State',
+      area: 'Area',
+      loadError: 'Failed to load parking space information'
+    }
+  },
+  zh: {
+    hireParkingSpace: {
+      title: '添加车辆',
+      carNum: '车牌号',
+      carNumPlaceholder: '必填，请填写车牌号',
+      carBrand: '汽车品牌',
+      carBrandPlaceholder: '选填，请填写汽车品牌',
+      carType: '车类型',
+      carTypePlaceholder: '必填，请选择车辆类型',
+      carColor: '颜色',
+      carColorPlaceholder: '选填，请填写颜色',
+      licenseType: '车牌类型',
+      licenseTypePlaceholder: '必填，请选择车牌类型',
+      monthlyRent: '月租车',
+      saleCar: '出售车辆',
+      internalCar: '内部车',
+      freeCar: '免费车',
+      startTime: '开始时间',
+      startTimePlaceholder: '必填，请填写开始时间',
+      endTime: '结束时间',
+      endTimePlaceholder: '必填，请填写结束时间',
+      owner: '业主',
+      ownerPlaceholder: '必填，请选择业主',
+      parkingSpace: '车位',
+      parkingSpacePlaceholder: '必填，请选择车位',
+      remark: '备注',
+      remarkPlaceholder: '选填，请填写备注',
+      validate: {
+        carNum: '车牌号不能为空',
+        carType: '车类型不能为空',
+        licenseType: '车牌类型不能为空',
+        owner: '业主不能为空',
+        parkingSpace: '车位不能为空',
+        dateRange: '请选择日期范围'
+      },
+      saveSuccess: '车辆信息保存成功！',
+      saveError: '车辆信息保存失败'
+    },
+    searchOwner: {
+      title: '选择业主',
+      roomPlaceholder: '输入房屋编号楼栋-单元-房屋',
+      namePlaceholder: '输入业主名称',
+      memberId: '业主编号',
+      name: '名称',
+      personType: '人员类型',
+      personRole: '人员角色',
+      idCard: '证件号',
+      contact: '联系方式',
+      loadError: '加载业主信息失败'
+    },
+    searchParkingSpace: {
+      title: '选择停车位',
+      parkingAreaPlaceholder: '请选择停车场',
+      numPlaceholder: '请输入停车位编号',
+      areaNum: '停车场编码',
+      num: '停车位编码',
+      type: '停车场类型',
+      ground: '地上停车位',
+      underground: '地下停车位',
+      parkingType: '车位类型',
+      state: '车位状态',
+      area: '面积',
+      loadError: '加载停车位信息失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/car/hireParkingSpaceList.vue b/src/views/car/hireParkingSpaceList.vue
new file mode 100644
index 0000000..10c4f56
--- /dev/null
+++ b/src/views/car/hireParkingSpaceList.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <el-card class="box-card margin">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('hireParkingSpace.title') }}</span>
+        <div class="">
+          <el-button type="primary" size="small" icon="el-icon-close" @click="goBack">
+            {{ $t('common.back') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-form ref="form" :model="hireParkingSpaceInfo" label-width="120px" label-position="right">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('hireParkingSpace.carNum')" prop="carNum" required>
+              <el-input v-model="hireParkingSpaceInfo.carNum" :placeholder="$t('hireParkingSpace.carNumPlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('hireParkingSpace.carBrand')">
+              <el-input v-model="hireParkingSpaceInfo.carBrand"
+                :placeholder="$t('hireParkingSpace.carBrandPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('hireParkingSpace.carType')" prop="carType" required>
+              <el-select v-model="hireParkingSpaceInfo.carType" class="w-full"
+                :placeholder="$t('hireParkingSpace.carTypePlaceholder')">
+                <el-option v-for="carType in hireParkingSpaceInfo.carTypes" :key="carType.statusCd" :label="carType.name"
+                  :value="carType.statusCd" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('hireParkingSpace.carColor')">
+              <el-input v-model="hireParkingSpaceInfo.carColor"
+                :placeholder="$t('hireParkingSpace.carColorPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('hireParkingSpace.licenseType')" prop="leaseType" required>
+              <el-select v-model="hireParkingSpaceInfo.leaseType" class="w-full"
+                :placeholder="$t('hireParkingSpace.licenseTypePlaceholder')" @change="changeLeaseType">
+                <el-option :label="$t('hireParkingSpace.monthlyRent')" value="H" />
+                <el-option :label="$t('hireParkingSpace.saleCar')" value="S" />
+                <el-option :label="$t('hireParkingSpace.internalCar')" value="I" />
+                <el-option :label="$t('hireParkingSpace.freeCar')" value="NM" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row v-if="showDateRange" :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('hireParkingSpace.startTime')" prop="startTime" required>
+              <el-date-picker v-model="hireParkingSpaceInfo.startTime" type="date" value-format="yyyy-MM-dd" class="w-full"
+                :placeholder="$t('hireParkingSpace.startTimePlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('hireParkingSpace.endTime')" prop="endTime" required>
+              <el-date-picker v-model="hireParkingSpaceInfo.endTime" type="date" value-format="yyyy-MM-dd" class="w-full"
+                :placeholder="$t('hireParkingSpace.endTimePlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('hireParkingSpace.owner')" prop="ownerName" required>
+              <el-input v-model="hireParkingSpaceInfo.ownerName" disabled
+                :placeholder="$t('hireParkingSpace.ownerPlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+              <div class="">
+                <el-button type="primary" size="small" @click="openChooseOwner">
+                  {{ $t('common.select') }}
+                </el-button>
+              </div>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('hireParkingSpace.parkingSpace')" prop="psName" required>
+              <el-input v-model="hireParkingSpaceInfo.psName" disabled
+                :placeholder="$t('hireParkingSpace.parkingSpacePlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+                <el-button type="primary" size="small" @click="openSearchParkingSpaceModel">
+                  {{ $t('common.select') }}
+                </el-button>
+          </el-col>
+        </el-row>
+
+        <el-row v-for="(item, index) in hireParkingSpaceInfo.attrs" :key="index">
+          <el-col :span="24">
+            <el-form-item :label="item.specName">
+              <el-input v-if="item.specType === '2233'" v-model="item.value" :placeholder="item.specHoldplace" />
+              <el-select v-else-if="item.specType === '3344'" v-model="item.value" class="w-full"
+                :placeholder="item.specHoldplace">
+                <el-option v-for="(val, idx) in item.values" :key="idx" :label="val.valueName" :value="val.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('hireParkingSpace.remark')">
+              <el-input v-model="hireParkingSpaceInfo.remark" type="textarea" :rows="3"
+                :placeholder="$t('hireParkingSpace.remarkPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <div class="mt-20 text-right">
+      <el-button @click="goBack">{{ $t('common.back') }}</el-button>
+      <el-button type="primary" @click="saveAddCarInfo">
+        {{ $t('common.submit') }}
+      </el-button>
+    </div>
+
+    <search-owner ref="searchOwner" @chooseOwner="handleChooseOwner" />
+    <search-parking-space ref="searchParkingSpace" @choose-parking-space="handleChooseParkingSpace" />
+  </div>
+</template>
+
+<script>
+import { saveOwnerCar } from '@/api/car/hireParkingSpaceApi'
+import { getCommunityId, getDict } from '@/api/community/communityApi'
+import SearchOwner from '@/components/owner/SearchOwner'
+import SearchParkingSpace from '@/components/car/SearchParkingSpace'
+import { getSpecAttrList } from '@/api/dev/attrSpecApi'
+
+export default {
+  name: 'HireParkingSpaceList',
+  components: {
+    SearchOwner,
+    SearchParkingSpace
+  },
+  data() {
+    return {
+      hireParkingSpaceInfo: {
+        carNum: '',
+        carBrand: '',
+        carType: '',
+        carColor: '',
+        remark: '',
+        startTime: '',
+        endTime: '',
+        leaseType: 'H',
+        ownerId: '',
+        ownerName: '',
+        psId: '',
+        psName: '',
+        attrs: [],
+        carTypes: []
+      }
+    }
+  },
+  computed: {
+    showDateRange() {
+      return ['H', 'S'].includes(this.hireParkingSpaceInfo.leaseType)
+    }
+  },
+  async created() {
+    await this.initData()
+  },
+  methods: {
+    async initData() {
+      this.communityId = getCommunityId()
+
+      // 加载车辆类型字典
+      try {
+        const carTypes = await getDict('owner_car', 'car_type')
+        this.hireParkingSpaceInfo.carTypes = carTypes
+      } catch (error) {
+        console.error('加载车辆类型失败:', error)
+      }
+
+      // 加载车辆属性规格
+      try {
+        await this.loadCarAttrSpec()
+      } catch (error) {
+        console.error('加载车辆属性失败:', error)
+      }
+    },
+
+    async loadCarAttrSpec() {
+      try {
+        const attrs = await getSpecAttrList('owner_car_attr')
+        this.hireParkingSpaceInfo.attrs = attrs.map(item => {
+          if (item.specShow === 'Y') {
+            return {
+              ...item,
+              value: '',
+              values: item.specType === '3344' ? [] : undefined
+            }
+          }
+          return null
+        }).filter(Boolean)
+      } catch (error) {
+        console.error('加载车辆属性规格失败:', error)
+      }
+    },
+
+    changeLeaseType() {
+      this.hireParkingSpaceInfo.startTime = ''
+      this.hireParkingSpaceInfo.endTime = ''
+    },
+
+    openChooseOwner() {
+      this.$refs.searchOwner.open()
+    },
+
+    handleChooseOwner(owner) {
+      this.hireParkingSpaceInfo.ownerName = owner.name
+      this.hireParkingSpaceInfo.ownerId = owner.memberId
+    },
+
+    openSearchParkingSpaceModel() {
+      this.$refs.searchParkingSpace.open()
+    },
+
+    handleChooseParkingSpace(parkingSpace) {
+      this.hireParkingSpaceInfo.psName = `${parkingSpace.areaNum}-${parkingSpace.num}`
+      this.hireParkingSpaceInfo.psId = parkingSpace.psId
+    },
+
+    validateForm() {
+      const requiredFields = [
+        { field: 'carNum', message: this.$t('hireParkingSpace.validate.carNum') },
+        { field: 'carType', message: this.$t('hireParkingSpace.validate.carType') },
+        { field: 'leaseType', message: this.$t('hireParkingSpace.validate.licenseType') },
+        { field: 'ownerId', message: this.$t('hireParkingSpace.validate.owner') },
+        { field: 'psId', message: this.$t('hireParkingSpace.validate.parkingSpace') }
+      ]
+
+      for (const { field, message } of requiredFields) {
+        if (!this.hireParkingSpaceInfo[field]) {
+          this.$message.error(message)
+          return false
+        }
+      }
+
+      // 验证日期范围
+      if (this.showDateRange) {
+        if (!this.hireParkingSpaceInfo.startTime || !this.hireParkingSpaceInfo.endTime) {
+          this.$message.error(this.$t('hireParkingSpace.validate.dateRange'))
+          return false
+        }
+      }
+
+      // 验证自定义属性
+      for (const attr of this.hireParkingSpaceInfo.attrs) {
+        if (attr.required === 'Y' && !attr.value) {
+          this.$message.error(attr.specHoldplace)
+          return false
+        }
+      }
+
+      return true
+    },
+
+    async saveAddCarInfo() {
+      if (!this.validateForm()) return
+
+      try {
+        const params = {
+          ...this.hireParkingSpaceInfo,
+          communityId: this.communityId
+        }
+
+        await saveOwnerCar(params)
+        this.$message.success(this.$t('hireParkingSpace.saveSuccess'))
+        this.goBack()
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(this.$t('hireParkingSpace.saveError'))
+      }
+    },
+
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-header-actions {
+  position: absolute;
+  right: 20px;
+  top: 15px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/car/listOwnerCarLang.js b/src/views/car/listOwnerCarLang.js
new file mode 100644
index 0000000..95febdf
--- /dev/null
+++ b/src/views/car/listOwnerCarLang.js
@@ -0,0 +1,182 @@
+export const messages = {
+  en: {
+    listOwnerCar: {
+      searchCondition: 'Search Condition',
+      inputCarNum: 'Please enter the license plate number',
+      inputParkingSpaceNum: 'Please fill in the parking space number',
+      selectParkingSpaceStatus: 'Required, please select the parking space status',
+      inputOwnerName: 'Please fill in the owner name',
+      inputContact: 'Please enter contact information',
+      inputMemberCarNum: 'Please enter member license plate number',
+      query: 'Query',
+      reset: 'Reset',
+      carInfo: 'Car Information',
+      importCar: 'Import Cars',
+      export: 'Export',
+      add: 'Add',
+      carNum: 'License Plate Number',
+      memberCar: 'Member Car',
+      roomNum: 'Room Number',
+      carPlateType: 'License Plate Type',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      validity: 'Validity',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      temporaryCar: 'Temporary Car',
+      parkingSpaceReleased: 'Parking space released',
+      normal: 'Normal',
+      expired: 'Expired',
+      noParkingSpace: 'No Parking Space',
+      release: 'Release',
+      renew: 'Renew',
+      buyMonthlyCard: 'Buy Monthly Card',
+      modify: 'Modify',
+      delete: 'Delete',
+      confirmDelete: 'Are you sure to delete?',
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      importCarTitle: 'Car Import',
+      selectFile: 'Select File',
+      downloadTemplate: 'Download Template',
+      importTemplate: 'Import Template',
+      prepareData: 'Prepare data and upload',
+      import: 'Import',
+      editCar: 'Edit Car',
+      carBrand: 'Car Brand',
+      inputCarBrand: 'Optional, please fill in the car brand, e.g. BMW X6',
+      inputCarNumRequired: 'Required, please fill in the license plate number',
+      selectType: 'Required, please select type',
+      inputCarColor: 'Optional, please fill in the car color, e.g. white',
+      licensePlateType: 'License Plate Type',
+      selectLicensePlateType: 'Required, please select license plate type',
+      monthlyRentCar: 'Monthly Rent Car',
+      soldCar: 'Sold Car',
+      internalCar: 'Internal Car',
+      freeCar: 'Free Car',
+      startRentTime: 'Start Rent Time',
+      endRentTime: 'End Rent Time',
+      inputStartRentTime: 'Required, please fill in the start rent time',
+      inputEndRentTime: 'Required, please fill in the end rent time',
+      inputRemark: 'Please fill in remarks',
+      save: 'Save',
+      deleteCarConfirm: 'Confirm whether to delete',
+      fileRequired: 'Required, please select data file',
+      invalidExcel: 'Invalid Excel format',
+      fileSizeExceed: 'Excel file size cannot exceed 2M',
+      importSuccess: 'Import successful',
+      importError: 'Import failed',
+      updateSuccess: 'Update successful',
+      updateError: 'Update failed',
+      deleteSuccess: 'Delete successful',
+      deleteError: 'Delete failed',
+      releaseSuccess: 'Release successful',
+      releaseError: 'Release failed',
+      exportSuccess: 'Export successful',
+      exportError: 'Export failed',
+      fetchError: 'Failed to get data',
+      allCars: 'All Cars',
+      expiredCars: 'Expired Cars',
+      downloadFirst: 'Please download first ',
+      selectTypeRequired: 'Please select car type',
+      selectLicensePlateTypeRequired: 'Please select license plate type',
+      rentTimeRequired: 'Please fill in rent time',
+      endTimeAfterStart: 'End time must be after start time',
+      iotSyncDetail: 'IoT sync details',
+      confirmRelease: 'Are you sure to release the car?',
+    }
+  },
+  zh: {
+    listOwnerCar: {
+      searchCondition: '查询条件',
+      inputCarNum: '请输入车牌号',
+      inputParkingSpaceNum: '请填写车位编号',
+      selectParkingSpaceStatus: '必填，请选择车位状态',
+      inputOwnerName: '请填写业主名称',
+      inputContact: '请输入联系方式',
+      inputMemberCarNum: '请输入成员车牌号',
+      query: '查询',
+      reset: '重置',
+      carInfo: '车辆信息',
+      importCar: '车辆导入',
+      export: '导出',
+      add: '添加',
+      carNum: '车牌号',
+      memberCar: '成员车辆',
+      roomNum: '房屋号',
+      carPlateType: '车牌类型',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      validity: '有效期',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      temporaryCar: '临时车',
+      parkingSpaceReleased: '车位已释放',
+      normal: '正常',
+      expired: '到期',
+      noParkingSpace: '无车位',
+      release: '释放',
+      renew: '续租',
+      buyMonthlyCard: '买月卡',
+      modify: '修改',
+      delete: '删除',
+      confirmDelete: '确认删除？',
+      cancel: '取消',
+      confirm: '确认',
+      importCarTitle: '车辆导入',
+      selectFile: '选择文件',
+      downloadTemplate: '下载模板',
+      importTemplate: '导入模板',
+      prepareData: '准备数据后，上传导入',
+      import: '导入',
+      editCar: '修改车辆',
+      carBrand: '车品牌',
+      inputCarBrand: '可选，请填写车品牌，如宝马X6',
+      inputCarNumRequired: '必填，请填写车牌号',
+      selectType: '必填，请选择类型',
+      inputCarColor: '可选，请填写车颜色，如白色',
+      licensePlateType: '车牌类型',
+      selectLicensePlateType: '必填，请选择车牌类型',
+      monthlyRentCar: '月租车',
+      soldCar: '出售车辆',
+      internalCar: '内部车',
+      freeCar: '免费车',
+      startRentTime: '起租时间',
+      endRentTime: '结租时间',
+      inputStartRentTime: '必填，请填写起租时间',
+      inputEndRentTime: '必填，请填写结租时间',
+      inputRemark: '请填写备注信息',
+      save: '保存',
+      deleteCarConfirm: '确认是否删除',
+      fileRequired: '必填，请选择数据文件',
+      invalidExcel: '不是有效的Excel格式',
+      fileSizeExceed: 'Excel文件大小不能超过2M',
+      importSuccess: '导入成功',
+      importError: '导入失败',
+      updateSuccess: '修改成功',
+      updateError: '修改失败',
+      deleteSuccess: '删除成功',
+      deleteError: '删除失败',
+      releaseSuccess: '释放成功',
+      releaseError: '释放失败',
+      exportSuccess: '导出成功',
+      exportError: '导出失败',
+      fetchError: '获取数据失败',
+      allCars: '全部车辆',
+      expiredCars: '到期车辆',
+      downloadFirst: '请先下载 ',
+      selectTypeRequired: '请选择车辆类型',
+      selectLicensePlateTypeRequired: '请选择车牌类型',
+      rentTimeRequired: '请填写起租时间和结租时间',
+      endTimeAfterStart: '结租时间必须大于起租时间',
+      iotSyncDetail: '同步物联网详情',
+      confirmRelease: '确认释放车辆？',
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/car/listOwnerCarList.vue b/src/views/car/listOwnerCarList.vue
new file mode 100644
index 0000000..b6443a9
--- /dev/null
+++ b/src/views/car/listOwnerCarList.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="list-owner-car-container">
+    <el-row :gutter="20">
+      <el-col :span="3">
+        <el-card class="tree-card">
+          <ul class="lease-type-list">
+            <li v-for="(item, index) in leaseTypes" :key="index" @click="switchLeaseType(item)"
+              :class="{ 'selected': conditions.leaseType === item.statusCd }">
+              {{ item.name }}
+            </li>
+          </ul>
+        </el-card>
+      </el-col>
+      <el-col :span="21">
+        <el-card class="search-card">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('listOwnerCar.searchCondition') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-input v-model.trim="conditions.carNumLike" :placeholder="$t('listOwnerCar.inputCarNum')" clearable />
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model.trim="conditions.num" :placeholder="$t('listOwnerCar.inputParkingSpaceNum')" clearable />
+            </el-col>
+            <el-col :span="6">
+              <el-select v-model="conditions.valid" :placeholder="$t('listOwnerCar.selectParkingSpaceStatus')" clearable>
+                <el-option value="1" :label="$t('listOwnerCar.normal')"></el-option>
+                <el-option value="3" :label="$t('listOwnerCar.expired')"></el-option>
+                <el-option value="2" :label="$t('listOwnerCar.noParkingSpace')"></el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model.trim="conditions.ownerName" :placeholder="$t('listOwnerCar.inputOwnerName')" clearable />
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mt-10">
+            <el-col :span="6">
+              <el-input v-model.trim="conditions.link" :placeholder="$t('listOwnerCar.inputContact')" clearable />
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model.trim="conditions.memberCarNumLike" :placeholder="$t('listOwnerCar.inputMemberCarNum')"
+                clearable />
+            </el-col>
+            <el-col :span="12" class="text-right">
+              <el-button type="primary" @click="queryMethod" icon="el-icon-search">
+                {{ $t('listOwnerCar.query') }}
+              </el-button>
+              <el-button @click="resetMethod" icon="el-icon-refresh">
+                {{ $t('listOwnerCar.reset') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="mt-20">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('listOwnerCar.carInfo') }}</span>
+            <div class="header-buttons">
+              <el-button v-if="hasPrivilege('502023032813991677')" type="primary" size="small" @click="addOwnerCar">
+                {{ $t('listOwnerCar.add') }}
+              </el-button>
+              <el-button size="small" @click="openOwnerCarImport">
+                <i class="el-icon-upload2"></i> {{ $t('listOwnerCar.importCar') }}
+              </el-button>
+              <el-button size="small" @click="exportExcel">
+                <i class="el-icon-download"></i> {{ $t('listOwnerCar.export') }}
+              </el-button>
+            </div>
+          </div>
+
+          <el-table :data="ownerCars" border v-loading="loading">
+            <el-table-column prop="carNum" :label="$t('listOwnerCar.carNum')" align="center">
+              <template slot-scope="scope">
+                <router-link :to="`/pages/car/carDetail?memberId=${scope.row.memberId}`" target="_blank">
+                  {{ scope.row.carNum }}
+                </router-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="memberCarCount" :label="$t('listOwnerCar.memberCar')" align="center">
+              <template slot-scope="scope">
+                <a href="javascript:void(0)" @click="toCarMember(scope.row)">
+                  {{ scope.row.memberCarCount || 0 }}
+                </a>
+              </template>
+            </el-table-column>
+            <el-table-column prop="roomName" :label="$t('listOwnerCar.roomNum')" align="center" width="150" />
+            <el-table-column :label="$t('listOwnerCar.carPlateType')" align="center">
+              <template slot-scope="scope">
+                <span v-if="scope.row.leaseType === 'T'">
+                  {{ $t('listOwnerCar.temporaryCar') }}
+                </span>
+                <span v-else>{{ scope.row.leaseTypeName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="carTypeName" :label="$t('listOwnerCar.carType')" align="center" />
+            <el-table-column prop="carColor" :label="$t('listOwnerCar.color')" align="center" />
+            <el-table-column :label="$t('listOwnerCar.owner')" align="center">
+              <template slot-scope="scope">
+                <router-link :to="`/pages/owner/ownerDetail?ownerId=${scope.row.ownerId}`" target="_blank">
+                  {{ scope.row.ownerName }}({{ scope.row.link }})
+                </router-link>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('listOwnerCar.parkingSpace')" align="center">
+              <template slot-scope="scope">
+                <span v-if="scope.row.areaNum && scope.row.state === '1001'">
+                  {{ scope.row.areaNum }}-{{ scope.row.num }}
+                </span>
+                <span v-else>{{ $t('listOwnerCar.parkingSpaceReleased') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('listOwnerCar.validity')" align="center">
+              <template slot-scope="scope">
+                <div v-if="scope.row.leaseType === 'H' || scope.row.leaseType === 'S'">
+                  {{ scope.row.startTime }}<br>~{{ scope.row.endTime }}
+                </div>
+                <div v-else>--</div>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('listOwnerCar.status')" align="center">
+              <template slot-scope="scope">
+                {{ getCarState(scope.row) }}
+                <span v-if="scope.row.iotStateName">
+                  (<a href="javascript:void(0)" @click="viewIotStateRemark(scope.row)">{{ scope.row.iotStateName }}</a>)
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" :label="$t('listOwnerCar.remark')" align="center" />
+            <el-table-column :label="$t('listOwnerCar.operation')" align="center" width="280">
+              <template slot-scope="scope">
+                <el-button v-if="scope.row.state !== '3003' && hasPrivilege('502023032855861676')" size="mini"
+                  @click="deleteCarParkingSpace(scope.row)">
+                  {{ $t('listOwnerCar.release') }}
+                </el-button>
+                <el-button v-else-if="hasPrivilege('502023032809021678')" size="mini"
+                  @click="addCarParkingSpace(scope.row)">
+                  {{ $t('listOwnerCar.renew') }}
+                </el-button>
+                <el-button v-if="scope.row.leaseType === 'H'" size="mini" @click="toBuyCarMonthCard(scope.row)">
+                  {{ $t('listOwnerCar.buyMonthlyCard') }}
+                </el-button>
+                <el-button v-if="scope.row.carTypeCd !== '1003' && hasPrivilege('502023032804261679')" size="mini"
+                  @click="openEditOwnerCar(scope.row)">
+                  {{ $t('listOwnerCar.modify') }}
+                </el-button>
+                <el-button v-if="hasPrivilege('502023032822121680')" size="mini" type="danger"
+                  @click="openDelOwnerCarModel(scope.row)">
+                  {{ $t('listOwnerCar.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination class="mt-20" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <import-owner-car ref="importOwnerCar" @success="listOwnerCarData" />
+    <edit-car ref="editCar" @success="listOwnerCarData" />
+    <delete-owner-car ref="deleteOwnerCar" @success="listOwnerCarData" />
+  </div>
+</template>
+
+<script>
+import { queryOwnerCars, exportData, deleteCarParkingSpace } from '@/api/car/listOwnerCarApi'
+import ImportOwnerCar from '@/components/car/importOwnerCar'
+import EditCar from '@/components/car/editCar'
+import DeleteOwnerCar from '@/components/car/deleteOwnerCar'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+
+export default {
+  name: 'ListOwnerCar',
+  components: { ImportOwnerCar, EditCar, DeleteOwnerCar },
+  data() {
+    return {
+      loading: false,
+      ownerCars: [],
+      leaseTypes: [],
+      conditions: {
+        carNumLike: '',
+        num: '',
+        valid: '',
+        leaseType: 'H',
+        ownerName: '',
+        link: '',
+        memberCarNumLike: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.initData()
+    this.listOwnerCarData()
+  },
+  methods: {
+    async initData() {
+      try {
+        const leaseTypes = await getDict('owner_car', 'lease_type')
+        this.leaseTypes = [{ statusCd: '', name: this.$t('listOwnerCar.allCars') }, ...leaseTypes,
+        { statusCd: 'expireCar', name: this.$t('listOwnerCar.expiredCars') }]
+      } catch (error) {
+        console.error('获取租赁类型失败:', error)
+      }
+    },
+
+    async listOwnerCarData() {
+      this.loading = true
+      try {
+        const params = {
+          ...this.conditions,
+          page: this.currentPage,
+          row: this.pageSize,
+          communityId: this.communityId
+        }
+
+        if (this.conditions.leaseType === 'expireCar') {
+          params.leaseType = ''
+          params.valid = 3
+        }
+
+        const response = await queryOwnerCars(params)
+        this.ownerCars = response.data
+        this.total = response.total
+      } catch (error) {
+        console.error('获取车辆列表失败:', error)
+        this.$message.error(this.$t('listOwnerCar.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+
+    switchLeaseType(item) {
+      this.conditions.leaseType = item.statusCd
+      this.currentPage = 1
+      this.listOwnerCarData()
+    },
+
+    queryMethod() {
+      this.currentPage = 1
+      this.listOwnerCarData()
+    },
+
+    resetMethod() {
+      this.conditions = {
+        carNumLike: '',
+        num: '',
+        valid: '',
+        leaseType: 'H',
+        ownerName: '',
+        link: '',
+        memberCarNumLike: ''
+      }
+      this.currentPage = 1
+      this.listOwnerCarData()
+    },
+
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.listOwnerCarData()
+    },
+
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.listOwnerCarData()
+    },
+
+    addOwnerCar() {
+      this.$router.push('/views/car/hireParkingSpace')
+    },
+
+    openEditOwnerCar(car) {
+      this.$refs.editCar.open(car)
+    },
+
+    openDelOwnerCarModel(car) {
+      this.$refs.deleteOwnerCar.open(car)
+    },
+
+    deleteCarParkingSpace(car) {
+      this.$confirm(this.$t('listOwnerCar.confirmRelease'), this.$t('common.tip'), {
+        confirmButtonText: this.$t('common.confirm'),
+        cancelButtonText: this.$t('common.cancel'),
+        type: 'warning'
+      }).then(async () => {
+        try {
+          await deleteCarParkingSpace(car)
+          this.$message.success(this.$t('listOwnerCar.releaseSuccess'))
+          this.listOwnerCarData()
+        } catch (error) {
+          console.error('释放车位失败:', error)
+          this.$message.error(error.message || this.$t('listOwnerCar.releaseError'))
+        }
+      })
+    },
+
+    addCarParkingSpace(car) {
+      this.$router.push(`/views/car/carAddParkingSpace?carId=${car.carId}`)
+    },
+
+    toBuyCarMonthCard(car) {
+      this.$router.push(`/views/fee/buyCarMonthCard?carNum=${car.carNum}`)
+    },
+
+    toCarMember(car) {
+      this.$router.push(`/pages/property/listOwnerCarMember?carId=${car.carId}&carNum=${car.carNum}`)
+    },
+
+    getCarState(car) {
+      if (car.state === '3003') {
+        return this.$t('listOwnerCar.expired')
+      }
+      const endTime = new Date(car.endTime)
+      if (endTime > new Date()) {
+        return this.$t('listOwnerCar.normal')
+      }
+      return this.$t('listOwnerCar.expired')
+    },
+
+    openOwnerCarImport() {
+      this.$refs.importOwnerCar.open()
+    },
+
+    async exportExcel() {
+      try {
+        const params = {
+          ...this.conditions,
+          communityId: this.communityId,
+          pagePath: 'exportOwnerCar'
+        }
+        await exportData(params)
+        this.$message.success(this.$t('listOwnerCar.exportSuccess'))
+        this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+      } catch (error) {
+        console.error('导出失败:', error)
+        this.$message.error(error.message || this.$t('listOwnerCar.exportError'))
+      }
+    },
+
+    viewIotStateRemark(car) {
+      this.$alert(car.iotRemark, `${car.carNum} ${this.$t('listOwnerCar.iotSyncDetail')}`, {
+        confirmButtonText: this.$t('common.confirm')
+      })
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-owner-car-container {
+  padding: 20px;
+
+  .tree-card {
+    height: 100%;
+
+    .lease-type-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        padding: 10px 15px;
+        text-align: center;
+        cursor: pointer;
+        border-bottom: 1px solid #eee;
+        transition: all 0.3s;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+
+        &.selected {
+          background-color: #409EFF;
+          color: white;
+        }
+      }
+    }
+  }
+
+  .search-card {
+    margin-bottom: 20px;
+  }
+
+  .header-buttons {
+    float: right;
+  }
+
+  .mt-10 {
+    margin-top: 10px;
+  }
+
+  .mt-20 {
+    margin-top: 20px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .el-table .expired-row {
+    background-color: #fef0f0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/car/parkingBoxManageLang.js b/src/views/car/parkingBoxManageLang.js
new file mode 100644
index 0000000..594803e
--- /dev/null
+++ b/src/views/car/parkingBoxManageLang.js
@@ -0,0 +1,122 @@
+export const messages = {
+  en: {
+    parkingBoxManage: {
+      searchTitle: 'Search Conditions',
+      boxIdPlaceholder: 'Please enter booth number',
+      boxNamePlaceholder: 'Please enter booth name',
+      tempCarInPlaceholder: 'Please select temporary car entry',
+      yes: 'Yes',
+      no: 'No',
+      searchBtn: 'Search',
+      resetBtn: 'Reset',
+      listTitle: 'Booth Information',
+      boxId: 'Booth Number',
+      boxName: 'Booth Name',
+      parkingLot: 'Parking Lot',
+      tempCarIn: 'Temporary Car Entry',
+      tempAuth: 'Temporary Car Audit',
+      fee: 'Chargeable',
+      blueCarIn: 'Already Present',
+      yelowCarIn: 'Not Present',
+      remark: 'Remark',
+      operation: 'Operation',
+      console: 'Console',
+      dataSource: 'Data comes from IoT system',
+      pagination: 'Pagination'
+    },
+    addParkingBox: {
+      title: 'Add Booth',
+      boothName: 'Booth Name',
+      parkingLot: 'Parking Lot',
+      tempCarIn: 'Temporary Car Entry',
+      tempAuth: 'Temporary Car Audit',
+      fee: 'Chargeable',
+      blueCarIn: 'Already Present',
+      yelowCarIn: 'Not Present',
+      remark: 'Remark',
+      required: 'Required',
+      optional: 'Optional',
+      save: 'Save',
+      cancel: 'Cancel'
+    },
+    editParkingBox: {
+      title: 'Edit Booth',
+      boothName: 'Booth Name',
+      parkingLot: 'Parking Lot',
+      tempCarIn: 'Temporary Car Entry',
+      tempAuth: 'Temporary Car Audit',
+      fee: 'Chargeable',
+      blueCarIn: 'Already Present',
+      yelowCarIn: 'Not Present',
+      remark: 'Remark',
+      save: 'Save',
+      cancel: 'Cancel'
+    },
+    deleteParkingBox: {
+      title: 'Confirm Operation',
+      confirmDelete: 'Confirm delete booth?',
+      cancel: 'Cancel',
+      confirm: 'Confirm Delete'
+    }
+  },
+  zh: {
+    parkingBoxManage: {
+      searchTitle: '查询条件',
+      boxIdPlaceholder: '请输入岗亭编号',
+      boxNamePlaceholder: '请输入岗亭名称',
+      tempCarInPlaceholder: '请选择临时车进场',
+      yes: '是',
+      no: '否',
+      searchBtn: '查询',
+      resetBtn: '重置',
+      listTitle: '岗亭信息',
+      boxId: '岗亭编号',
+      boxName: '岗亭名称',
+      parkingLot: '停车场',
+      tempCarIn: '临时车进场',
+      tempAuth: '临时车审核',
+      fee: '是否收费',
+      blueCarIn: '已在场',
+      yelowCarIn: '未在场',
+      remark: '备注',
+      operation: '操作',
+      console: '控制台',
+      dataSource: '数据来源于物联网系统，请到物联网系统管理数据',
+      pagination: '分页'
+    },
+    addParkingBox: {
+      title: '添加岗亭',
+      boothName: '岗亭名称',
+      parkingLot: '停车场',
+      tempCarIn: '临时车进场',
+      tempAuth: '临时车审核',
+      fee: '是否收费',
+      blueCarIn: '已在场',
+      yelowCarIn: '未在场',
+      remark: '备注',
+      required: '必填',
+      optional: '选填',
+      save: '保存',
+      cancel: '取消'
+    },
+    editParkingBox: {
+      title: '修改岗亭',
+      boothName: '岗亭名称',
+      parkingLot: '停车场',
+      tempCarIn: '临时车进场',
+      tempAuth: '临时车审核',
+      fee: '是否收费',
+      blueCarIn: '已在场',
+      yelowCarIn: '未在场',
+      remark: '备注',
+      save: '保存',
+      cancel: '取消'
+    },
+    deleteParkingBox: {
+      title: '请确认您的操作',
+      confirmDelete: '确定删除岗亭?',
+      cancel: '点错了',
+      confirm: '确认删除'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/car/parkingBoxManageList.vue b/src/views/car/parkingBoxManageList.vue
new file mode 100644
index 0000000..4f84fea
--- /dev/null
+++ b/src/views/car/parkingBoxManageList.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="parking-box-manage-container">
+    <el-card class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('parkingBoxManage.searchTitle') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model.trim="searchForm.boxId" :placeholder="$t('parkingBoxManage.boxIdPlaceholder')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model.trim="searchForm.boxName" :placeholder="$t('parkingBoxManage.boxNamePlaceholder')"
+            clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="searchForm.tempCarIn" :placeholder="$t('parkingBoxManage.tempCarInPlaceholder')" clearable
+            style="width:100%">
+            <el-option value="" :label="$t('parkingBoxManage.tempCarInPlaceholder')" />
+            <el-option value="Y" :label="$t('parkingBoxManage.yes')" />
+            <el-option value="N" :label="$t('parkingBoxManage.no')" />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('parkingBoxManage.searchBtn') }}
+          </el-button>
+          <el-button @click="handleReset">
+            {{ $t('parkingBoxManage.resetBtn') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <el-card class="list-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('parkingBoxManage.listTitle') }}</span>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="boxId" :label="$t('parkingBoxManage.boxId')" align="center" />
+        <el-table-column prop="boxName" :label="$t('parkingBoxManage.boxName')" align="center" />
+        <el-table-column prop="paNum" :label="$t('parkingBoxManage.parkingLot')" align="center" />
+        <el-table-column prop="tempCarIn" :label="$t('parkingBoxManage.tempCarIn')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.tempCarIn === 'Y' ? $t('parkingBoxManage.yes') : $t('parkingBoxManage.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="tempAuth" :label="$t('parkingBoxManage.tempAuth')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.tempAuth === 'Y' ? $t('parkingBoxManage.yes') : $t('parkingBoxManage.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="fee" :label="$t('parkingBoxManage.fee')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.fee === 'Y' ? $t('parkingBoxManage.yes') : $t('parkingBoxManage.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="blueCarIn" :label="$t('parkingBoxManage.blueCarIn')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.blueCarIn === 'Y' ? $t('parkingBoxManage.yes') : $t('parkingBoxManage.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="yelowCarIn" :label="$t('parkingBoxManage.yelowCarIn')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.yelowCarIn === 'Y' ? $t('parkingBoxManage.yes') : $t('parkingBoxManage.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" :label="$t('parkingBoxManage.remark')" align="center" />
+        <el-table-column :label="$t('parkingBoxManage.operation')" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button v-if="hasPrivilege('502022090904120022')" type="text" size="small"
+              @click="handleOpenConsole(scope.row)">
+              {{ $t('parkingBoxManage.console') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="pagination-row">
+        <el-col :span="12" class="data-source">
+          {{ $t('parkingBoxManage.dataSource') }}
+        </el-col>
+        <el-col :span="12">
+          <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-col>
+      </el-row>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+import { getParkingBoxList } from '@/api/car/parkingBoxManageApi'
+
+export default {
+  name: 'ParkingBoxManageList',
+  components: {
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        boxId: '',
+        boxName: '',
+        tempCarIn: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+
+    async fetchData() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ...this.searchForm
+        }
+
+        const res = await getParkingBoxList(params)
+        this.tableData = res.data
+        this.pagination.total = res.total || 0
+        this.pagination.current = res.page || 1
+      } catch (error) {
+        console.error('获取岗亭列表失败:', error)
+        this.$message.error(this.$t('parkingBoxManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+
+    handleSearch() {
+      this.pagination.current = 1
+      this.fetchData()
+    },
+
+    handleReset() {
+      this.searchForm = {
+        boxId: '',
+        boxName: '',
+        tempCarIn: ''
+      }
+      this.handleSearch()
+    },
+
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.fetchData()
+    },
+
+    handleCurrentChange(current) {
+      this.pagination.current = current
+      this.fetchData()
+    },
+
+    handleSuccess() {
+      this.fetchData()
+    },
+
+    handleOpenAdd() {
+      this.$refs.addDialog.open()
+    },
+
+    handleOpenEdit(row) {
+      this.$refs.editDialog.open(row)
+    },
+
+    handleOpenDelete(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+
+    handleOpenConsole(row) {
+      // 跳转到控制台页面
+      this.$router.push({
+        path: '/car/parkingAreaControl',
+        query: {
+          boxId: row.boxId,
+          paId: row.paId
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.parking-box-manage-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+  }
+
+  .list-card {
+    margin-bottom: 20px;
+  }
+
+  .pagination-row {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+
+    .data-source {
+      display: flex;
+      align-items: center;
+      color: #999;
+      font-size: 14px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/buyCarMonthCardLang.js b/src/views/fee/buyCarMonthCardLang.js
new file mode 100644
index 0000000..0e40fd4
--- /dev/null
+++ b/src/views/fee/buyCarMonthCardLang.js
@@ -0,0 +1,80 @@
+export const messages = {
+  en: {
+    buyCarMonthCard: {
+      title: 'Buy Monthly Card',
+      carNum: 'License Plate',
+      card: 'Monthly Card',
+      paymentMethod: 'Payment Method',
+      receivableAmount: 'Receivable Amount',
+      receivedAmount: 'Received Amount',
+      remark: 'Remark',
+      tip: 'Monthly cards need to be added in the IoT system and must be added to the parking lot where the vehicle is located',
+      placeholders: {
+        carNum: 'Required, please enter license plate number',
+        card: 'Required, please select monthly card',
+        paymentMethod: 'Required, please select payment method',
+        receivableAmount: 'Required, receivable amount',
+        receivedAmount: 'Required, received amount',
+        remark: 'Optional, please enter remark'
+      },
+      rules: {
+        carNumRequired: 'License plate number is required',
+        cardRequired: 'Monthly card is required',
+        paymentMethodRequired: 'Payment method is required',
+        receivedAmountRequired: 'Received amount is required'
+      },
+      warnings: {
+        carNotExist: 'Monthly rental car does not exist, please add it first',
+        carNoParkingSpace: 'Monthly rental car is not bound to a parking space'
+      },
+      errors: {
+        getDictFailed: 'Failed to get payment methods',
+        queryCarFailed: 'Failed to query vehicle information',
+        getCardsFailed: 'Failed to get monthly card list',
+        saveFailed: 'Failed to save monthly card order'
+      },
+      success: {
+        saveSuccess: 'Monthly card purchased successfully'
+      }
+    }
+  },
+  zh: {
+    buyCarMonthCard: {
+      title: '购买月卡',
+      carNum: '车牌号',
+      card: '月卡',
+      paymentMethod: '支付方式',
+      receivableAmount: '应收金额',
+      receivedAmount: '实收金额',
+      remark: '备注',
+      tip: '月卡请到物联网系统添加，需要添加到车辆所在的停车场',
+      placeholders: {
+        carNum: '必填，请填写车牌号',
+        card: '必填，请选择月卡',
+        paymentMethod: '必填，请选择支付方式',
+        receivableAmount: '必填，应收金额',
+        receivedAmount: '必填，实收金额',
+        remark: '选填，请填写备注'
+      },
+      rules: {
+        carNumRequired: '车牌号不能为空',
+        cardRequired: '月卡不能为空',
+        paymentMethodRequired: '支付方式不能为空',
+        receivedAmountRequired: '实收金额不能为空'
+      },
+      warnings: {
+        carNotExist: '月租车不存在,请先添加为月租车',
+        carNoParkingSpace: '月租车没有绑定车位'
+      },
+      errors: {
+        getDictFailed: '获取支付方式失败',
+        queryCarFailed: '查询车辆信息失败',
+        getCardsFailed: '获取月卡列表失败',
+        saveFailed: '保存月卡订单失败'
+      },
+      success: {
+        saveSuccess: '月卡购买成功'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/buyCarMonthCardList.vue b/src/views/fee/buyCarMonthCardList.vue
new file mode 100644
index 0000000..918cbdd
--- /dev/null
+++ b/src/views/fee/buyCarMonthCardList.vue
@@ -0,0 +1,234 @@
+<template>
+  <el-card class="buy-car-month-card-container">
+    <div slot="header">
+      <h5>{{ $t('buyCarMonthCard.title') }}</h5>
+    </div>
+
+    <el-form ref="form" :model="buyCarMonthCardInfo" label-width="120px">
+      <el-form-item :label="$t('buyCarMonthCard.carNum')" prop="carNum"
+        :rules="[{ required: true, message: $t('buyCarMonthCard.rules.carNumRequired'), trigger: 'blur' }]">
+        <el-input v-model="buyCarMonthCardInfo.carNum" :placeholder="$t('buyCarMonthCard.placeholders.carNum')"
+          @blur="_queryOwnerCar" clearable>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('buyCarMonthCard.card')" prop="cardId"
+        :rules="[{ required: true, message: $t('buyCarMonthCard.rules.cardRequired'), trigger: 'change' }]">
+        <el-select v-model="buyCarMonthCardInfo.cardId" :placeholder="$t('buyCarMonthCard.placeholders.card')"
+          @change="_changeCard" style="width:100%">
+          <el-option v-for="(item, index) in buyCarMonthCardInfo.cards" :key="index"
+            :label="`${item.cardName}(${item.cardMonth}${$t('common.month')})`" :value="item.cardId">
+          </el-option>
+        </el-select>
+        <div class="tip">{{ $t('buyCarMonthCard.tip') }}</div>
+      </el-form-item>
+
+      <el-form-item :label="$t('buyCarMonthCard.paymentMethod')" prop="primeRate"
+        :rules="[{ required: true, message: $t('buyCarMonthCard.rules.paymentMethodRequired'), trigger: 'change' }]">
+        <el-select v-model="buyCarMonthCardInfo.primeRate" :placeholder="$t('buyCarMonthCard.placeholders.paymentMethod')"
+          style="width:100%">
+          <el-option v-for="(item, index) in filteredPrimeRates" :key="index" :label="item.name" :value="item.statusCd">
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('buyCarMonthCard.receivableAmount')">
+        <el-input v-model="buyCarMonthCardInfo.receivableAmount"
+          :placeholder="$t('buyCarMonthCard.placeholders.receivableAmount')" disabled>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('buyCarMonthCard.receivedAmount')" prop="receivedAmount"
+        :rules="[{ required: true, message: $t('buyCarMonthCard.rules.receivedAmountRequired'), trigger: 'blur' }]">
+        <el-input v-model="buyCarMonthCardInfo.receivedAmount" type="number"
+          :placeholder="$t('buyCarMonthCard.placeholders.receivedAmount')">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('buyCarMonthCard.remark')">
+        <el-input v-model="buyCarMonthCardInfo.remark" type="textarea"
+          :placeholder="$t('buyCarMonthCard.placeholders.remark')">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="saveCarMonthOrderInfo">
+          <i class="el-icon-check"></i>{{ $t('common.submit') }}
+        </el-button>
+        <el-button type="warning" @click="goBack" style="margin-left:20px;">
+          {{ $t('common.back') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import { buyCarMonthOrder, queryOwnerCars, getOpenApi } from '@/api/fee/buyCarMonthCardApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'BuyCarMonthCardList',
+  data() {
+    return {
+      buyCarMonthCardInfo: {
+        orderId: '',
+        cardId: '',
+        carNum: '',
+        carId: '',
+        primeRate: '',
+        receivableAmount: '',
+        receivedAmount: '',
+        remark: '',
+        cards: [],
+        primeRates: [],
+        areaNum: ''
+      },
+      communityId: ''
+    }
+  },
+  computed: {
+    filteredPrimeRates() {
+      return this.buyCarMonthCardInfo.primeRates.filter(
+        item => item.statusCd !== '5' && item.statusCd !== '6' && item.statusCd !== '8'
+      )
+    }
+  },
+  mounted() {
+    this.communityId = getCommunityId()
+
+    // 从路由参数获取车牌号
+    if (this.$route.query.carNum) {
+      this.buyCarMonthCardInfo.carNum = this.$route.query.carNum
+      this._queryOwnerCar()
+    }
+
+    // 获取支付方式字典
+    this.getPrimeRateDict()
+  },
+  methods: {
+    async getPrimeRateDict() {
+      try {
+        const data = await getDict('pay_fee_detail', 'prime_rate')
+        this.buyCarMonthCardInfo.primeRates = data
+      } catch (error) {
+        console.error('获取支付方式字典失败:', error)
+        this.$message.error(this.$t('buyCarMonthCard.errors.getDictFailed'))
+      }
+    },
+
+    async _queryOwnerCar() {
+      if (!this.buyCarMonthCardInfo.carNum) return
+
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          communityId: this.communityId,
+          carNum: this.buyCarMonthCardInfo.carNum,
+          carTypeCd: '1001'
+        }
+
+        const res = await queryOwnerCars(params)
+        if (res.total < 1) {
+          this.$message.warning(this.$t('buyCarMonthCard.warnings.carNotExist'))
+          return
+        }
+
+        const carData = res.data[0]
+        if (!carData.paId) {
+          this.$message.warning(this.$t('buyCarMonthCard.warnings.carNoParkingSpace'))
+          return
+        }
+
+        this.buyCarMonthCardInfo.carId = carData.carId
+        this.buyCarMonthCardInfo.areaNum = carData.areaNum
+        this._listBuyMonthCards()
+      } catch (error) {
+        console.error('查询车主车辆失败:', error)
+        this.$message.error(this.$t('buyCarMonthCard.errors.queryCarFailed'))
+      }
+    },
+
+    async _listBuyMonthCards() {
+      if (!this.buyCarMonthCardInfo.areaNum) return
+
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId,
+          paNum: this.buyCarMonthCardInfo.areaNum,
+          iotApiCode: 'queryCarMonthCardBmoImpl'
+        }
+
+        const res = await getOpenApi(params)
+        this.buyCarMonthCardInfo.cards = res.data.data || []
+      } catch (error) {
+        console.error('获取月卡列表失败:', error)
+        this.$message.error(this.$t('buyCarMonthCard.errors.getCardsFailed'))
+      }
+    },
+
+    _changeCard() {
+      const cardId = this.buyCarMonthCardInfo.cardId
+      const selectedCard = this.buyCarMonthCardInfo.cards.find(item => item.cardId === cardId)
+
+      if (selectedCard) {
+        this.buyCarMonthCardInfo.receivableAmount = selectedCard.cardPrice
+        this.buyCarMonthCardInfo.receivedAmount = selectedCard.cardPrice
+      }
+    },
+
+    async saveCarMonthOrderInfo() {
+      try {
+        // 表单验证
+        await this.$refs.form.validate()
+
+        const params = {
+          ...this.buyCarMonthCardInfo,
+          communityId: this.communityId
+        }
+
+        const res = await buyCarMonthOrder(params)
+        if (res.code === 0) {
+          this.$message.success(this.$t('buyCarMonthCard.success.saveSuccess'))
+          this.goBack()
+        } else {
+          this.$message.error(res.msg || this.$t('buyCarMonthCard.errors.saveFailed'))
+        }
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error('保存月卡订单失败:', error)
+          this.$message.error(error.message)
+        }
+        // 验证失败不显示错误
+      }
+    },
+
+    clearBuyCarMonthCardInfo() {
+      this.$refs.form.resetFields()
+      this.buyCarMonthCardInfo.cards = []
+      this.buyCarMonthCardInfo.areaNum = ''
+      this.getPrimeRateDict()
+    },
+
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.buy-car-month-card-container {
+  margin: 20px;
+}
+
+.tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+</style>
\ No newline at end of file