diff --git a/src/api/room/shopsApi.js b/src/api/room/shopsApi.js
new file mode 100644
index 0000000..0aa20f3
--- /dev/null
+++ b/src/api/room/shopsApi.js
@@ -0,0 +1,109 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询商铺列表
+export function queryShops(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params: {
+        ...params,
+        communityId,
+        roomType: '2020602'
+      }
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加商铺
+export function saveShops(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/room.saveShops',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to add shop'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新商铺
+export function updateShops(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/room.updateRoom',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to update shop'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 绑定业主商铺
+export function saveOwnerShops(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/room.saveOwnerShops',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to bind owner'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除商铺
+export function deleteShops(roomId) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.deleteRoom',
+      method: 'post',
+      data: {
+        roomId,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to delete shop'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/room/addShops.vue b/src/components/room/addShops.vue
new file mode 100644
index 0000000..c9e00e6
--- /dev/null
+++ b/src/components/room/addShops.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-dialog :title="$t('shops.addShop')" :visible.sync="dialogVisible" width="50%">
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('shops.shopNumber')" prop="roomNum">
+        <el-input v-model="formData.roomNum" :placeholder="$t('shops.shopNumberPlaceholder')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.shopFloor')" prop="layer">
+        <el-input v-model="formData.layer" :placeholder="$t('shops.floorRequired')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.building')" prop="floorId">
+        <el-select v-model="formData.floorId" 
+          :placeholder="$t('shops.building')" style="width: 100%">
+          <el-option v-for="item in floors" :key="item.floorId" :label="item.floorNum + $t('shops.building')"
+            :value="item.floorId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('shops.rent')" prop="roomRent">
+        <el-input v-model="formData.roomRent" :placeholder="$t('shops.rentPlaceholder')" type="number"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.builtUpArea')" prop="builtUpArea">
+        <el-input v-model="formData.builtUpArea" :placeholder="$t('shops.builtUpAreaPlaceholder')"
+          type="number"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.roomArea')" prop="roomArea">
+        <el-input v-model="formData.roomArea" :placeholder="$t('shops.roomAreaPlaceholder')" type="number"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.feeCoefficient')" prop="feeCoefficient">
+        <el-input v-model="formData.feeCoefficient" :placeholder="$t('shops.feeCoefficientPlaceholder')"
+          type="number"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.remark')">
+        <el-input type="textarea" v-model="formData.remark" :placeholder="$t('shops.remark')"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveShops } from '@/api/room/shopsApi'
+import { getFloors } from '@/api/room/roomApi'
+import {getCommunityId} from '@/api/community/communityApi'
+
+export default {
+  name: 'AddShops',
+  components: {
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      formData: {
+        roomNum: '',
+        layer: '',
+        floorId: '',
+        roomRent: '',
+        builtUpArea: '',
+        roomArea: '',
+        feeCoefficient: '1.00',
+        remark: '',
+        roomSubType: '120'
+      },
+      rules: {
+        roomNum: [
+          { required: true, message: this.$t('shops.shopNumberRequired'), trigger: 'blur' }
+        ],
+        layer: [
+          { required: true, message: this.$t('shops.floorRequired'), trigger: 'blur' }
+        ],
+        floorId: [
+          { required: true, message: this.$t('shops.buildingRequired'), trigger: 'change' }
+        ],
+        roomRent: [
+          { required: true, message: this.$t('shops.rentRequired'), trigger: 'blur' }
+        ],
+        builtUpArea: [
+          { required: true, message: this.$t('shops.builtUpAreaRequired'), trigger: 'blur' }
+        ],
+        roomArea: [
+          { required: true, message: this.$t('shops.roomAreaRequired'), trigger: 'blur' }
+        ],
+        feeCoefficient: [
+          { required: true, message: this.$t('shops.feeCoefficientRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+      this.resetForm()
+      this.searchFloors()
+    },
+    resetForm() {
+      this.formData = {
+        roomNum: '',
+        layer: '',
+        floorId: '',
+        roomRent: '',
+        builtUpArea: '',
+        roomArea: '',
+        feeCoefficient: '1.00',
+        remark: '',
+        roomSubType: '120'
+      }
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+    },
+    handleFloorChange(floor) {
+      this.formData.floorId = floor.floorId
+      this.$refs.form.validateField('floorId')
+    },
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.saveData()
+        }
+      })
+    },
+    saveData() {
+      saveShops(this.formData)
+        .then(res => {
+          if (res.code == 0) {
+            this.$message.success(this.$t('common.saveSuccess'))
+            this.dialogVisible = false
+            this.$emit('success')
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+        .catch(error => {
+          console.error(error)
+          this.$message.error(this.$t('common.saveFailed'))
+        })
+    },
+     async searchFloors() {
+        const {apiFloorDataVoList} = await getFloors({
+          communityId: getCommunityId(),
+          page:1,
+          row:100
+        })
+        this.floors = apiFloorDataVoList
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/bindOwnerShops.vue b/src/components/room/bindOwnerShops.vue
new file mode 100644
index 0000000..6b691e8
--- /dev/null
+++ b/src/components/room/bindOwnerShops.vue
@@ -0,0 +1,174 @@
+<template>
+  <el-dialog :title="formTitle" :visible.sync="dialogVisible" width="50%">
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('shops.shopNumber')">
+        <el-input v-model="formData.shopsName" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.tenantPhone')" prop="tel">
+        <el-input v-model="formData.tel" :placeholder="$t('shops.tenantPhoneRequired')" @blur="loadOwnerInfo"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.tenantName')" prop="ownerName">
+        <el-input v-model="formData.ownerName" :placeholder="$t('shops.tenantNameRequired')"></el-input>
+      </el-form-item>
+      <el-form-item v-if="formData.shopsState === '2006'" :label="$t('shops.leaseStart')" prop="startTime">
+        <el-date-picker v-model="formData.startTime" type="date" :placeholder="$t('shops.leaseStartRequired')"
+          value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
+      </el-form-item>
+      <el-form-item v-if="formData.shopsState === '2006'" :label="$t('shops.leaseEnd')" prop="endTime">
+        <el-date-picker v-model="formData.endTime" type="date" :placeholder="$t('shops.leaseEndRequired')"
+          value-format="yyyy-MM-dd" :picker-options="endDateOptions" style="width: 100%"></el-date-picker>
+      </el-form-item>
+      <el-form-item :label="$t('shops.remark')">
+        <el-input type="textarea" v-model="formData.remark" :placeholder="$t('shops.remark')"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveOwnerShops } from '@/api/room/shopsApi'
+import {queryOwners} from '@/api/owner/roomBindOwnerApi'
+import {getCommunityId} from '@/api/community/communityApi'
+import {getDateYYYYMMDD} from '@/utils/dateUtil'
+
+export default {
+  name: 'BindOwnerShops',
+  data() {
+    const validatePhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error(this.$t('shops.tenantPhoneRequired')))
+      } else if (!/^1[3-9]\d{9}$/.test(value)) {
+        callback(new Error(this.$t('shops.phoneFormatError')))
+      } else {
+        callback()
+      }
+    }
+
+    const validateEndDate = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error(this.$t('shops.leaseEndRequired')))
+      } else if (new Date(value) <= new Date(this.formData.startTime)) {
+        callback(new Error(this.$t('shops.leaseEndRequired')))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      dialogVisible: false,
+      formData: {
+        roomId: '',
+        shopsName: '',
+        ownerId: '',
+        ownerName: '',
+        tel: '',
+        startTime: '',
+        endTime: '',
+        remark: '',
+        shopsState: '2006'
+      },
+      rules: {
+        tel: [
+          { validator: validatePhone, trigger: 'blur' }
+        ],
+        ownerName: [
+          { required: true, message: this.$t('shops.tenantNameRequired'), trigger: 'blur' }
+        ],
+        startTime: [
+          { required: true, message: this.$t('shops.leaseStartRequired'), trigger: 'change' }
+        ],
+        endTime: [
+          { validator: validateEndDate, trigger: 'change' }
+        ]
+      },
+      endDateOptions: {
+        disabledDate: (time) => {
+          if (this.formData.startTime) {
+            return time.getTime() <= new Date(this.formData.startTime).getTime()
+          }
+          return false
+        }
+      }
+    }
+  },
+  computed: {
+    formTitle() {
+      return this.formData.shopsState === '2007'
+        ? this.$t('shops.sell') + this.$t('shops.shopInfo')
+        : this.$t('shops.rent') + this.$t('shops.shopInfo')
+    }
+  },
+  methods: {
+    open(row, state) {
+      this.dialogVisible = true
+      this.resetForm()
+      this.formData = {
+        roomId: row.roomId,
+        shopsName: `${row.floorNum}-${row.roomNum}`,
+        ownerId: '',
+        ownerName: '',
+        tel: '',
+        startTime: state === '2007' ? getDateYYYYMMDD() : '',
+        endTime: state === '2007' ? '2050-01-01' : '',
+        remark: '',
+        shopsState: state
+      }
+    },
+    resetForm() {
+      this.formData = {
+        roomId: '',
+        shopsName: '',
+        ownerId: '',
+        ownerName: '',
+        tel: '',
+        startTime: '',
+        endTime: '',
+        remark: '',
+        shopsState: '2006'
+      }
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+    },
+   async loadOwnerInfo() {
+      if (!this.formData.tel) return
+
+     const {data,total}  = await queryOwners({page:1,row:1,communityId:getCommunityId(),tel: this.formData.tel});
+     if(total>0){
+       this.formData.ownerName = data[0].name
+       this.formData.ownerId = data[0].ownerId
+     }else{
+       this.formData.ownerName = ''
+       this.formData.ownerId = ''
+     }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.saveData()
+        }
+      })
+    },
+    saveData() {
+      saveOwnerShops(this.formData)
+        .then(res => {
+          if (res.code == 0) {
+            this.$message.success(this.$t('common.saveSuccess'))
+            this.dialogVisible = false
+            this.$emit('success')
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+        .catch(error => {
+          console.error(error)
+          this.$message.error(this.$t('common.saveFailed'))
+        })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/editShops.vue b/src/components/room/editShops.vue
new file mode 100644
index 0000000..36b0497
--- /dev/null
+++ b/src/components/room/editShops.vue
@@ -0,0 +1,194 @@
+<template>
+  <el-dialog :title="$t('shops.edit') + $t('shops.shopInfo')" :visible.sync="dialogVisible" width="50%">
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('shops.shopId')">
+        <el-input v-model="formData.roomId" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.shopNumber')" prop="roomNum">
+        <el-input v-model="formData.roomNum" :placeholder="$t('shops.shopNumberRequired')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.shopFloor')" prop="layer">
+        <el-input v-model="formData.layer" :placeholder="$t('shops.floorRequired')"></el-input>
+      </el-form-item>
+      <el-form-item v-if="formData.state === '2006'" :label="$t('shops.leaseStart')" prop="startTime">
+        <el-date-picker v-model="formData.startTime" type="date" :placeholder="$t('shops.leaseStartRequired')"
+          value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
+      </el-form-item>
+      <el-form-item v-if="formData.state === '2006'" :label="$t('shops.leaseEnd')" prop="endTime">
+        <el-date-picker v-model="formData.endTime" type="date" :placeholder="$t('shops.leaseEndRequired')"
+          value-format="yyyy-MM-dd" :picker-options="endDateOptions" style="width: 100%"></el-date-picker>
+      </el-form-item>
+      <el-form-item :label="$t('shops.rent')" prop="roomRent">
+        <el-input v-model="formData.roomRent" :placeholder="$t('shops.rentPlaceholder')" type="number"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.builtUpArea')" prop="builtUpArea">
+        <el-input v-model="formData.builtUpArea" :placeholder="$t('shops.builtUpAreaPlaceholder')"
+          type="number"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.roomArea')" prop="roomArea">
+        <el-input v-model="formData.roomArea" :placeholder="$t('shops.roomAreaPlaceholder')" type="number"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('shops.feeCoefficient')" prop="feeCoefficient">
+        <el-input v-model="formData.feeCoefficient" :placeholder="$t('shops.feeCoefficientPlaceholder')"
+          type="number"></el-input>
+      </el-form-item>
+
+      <!-- 动态属性 -->
+      <div v-for="(item, index) in formData.attrs" :key="index">
+        <el-form-item v-if="item.specType === '2233'" :label="item.specName">
+          <el-input v-model="item.value" :placeholder="item.specHoldplace"></el-input>
+        </el-form-item>
+        <el-form-item v-if="item.specType === '3344'" :label="item.specName">
+          <el-select v-model="item.value" :placeholder="item.specHoldplace" style="width: 100%">
+            <el-option v-for="option in item.values" :key="option.value" :label="option.valueName"
+              :value="option.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <el-form-item :label="$t('shops.remark')">
+        <el-input type="textarea" v-model="formData.remark" :placeholder="$t('shops.remark')"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateShops } from '@/api/room/shopsApi'
+
+export default {
+  name: 'EditShops',
+  data() {
+    const validateEndDate = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error(this.$t('shops.leaseEndRequired')))
+      } else if (new Date(value) <= new Date(this.formData.startTime)) {
+        callback(new Error(this.$t('shops.leaseEndRequired')))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      dialogVisible: false,
+      formData: {
+        roomId: '',
+        roomNum: '',
+        layer: '',
+        builtUpArea: '',
+        feeCoefficient: '',
+        remark: '',
+        roomRent: '',
+        roomArea: '',
+        startTime: '',
+        endTime: '',
+        state: '',
+        attrs: []
+      },
+      rules: {
+        roomNum: [
+          { required: true, message: this.$t('shops.shopNumberRequired'), trigger: 'blur' }
+        ],
+        layer: [
+          { required: true, message: this.$t('shops.floorRequired'), trigger: 'blur' }
+        ],
+        roomRent: [
+          { required: true, message: this.$t('shops.rentRequired'), trigger: 'blur' }
+        ],
+        builtUpArea: [
+          { required: true, message: this.$t('shops.builtUpAreaRequired'), trigger: 'blur' }
+        ],
+        roomArea: [
+          { required: true, message: this.$t('shops.roomAreaRequired'), trigger: 'blur' }
+        ],
+        feeCoefficient: [
+          { required: true, message: this.$t('shops.feeCoefficientRequired'), trigger: 'blur' }
+        ],
+        startTime: [
+          { required: true, message: this.$t('shops.leaseStartRequired'), trigger: 'change' }
+        ],
+        endTime: [
+          { validator: validateEndDate, trigger: 'change' }
+        ]
+      },
+      endDateOptions: {
+        disabledDate: (time) => {
+          if (this.formData.startTime) {
+            return time.getTime() <= new Date(this.formData.startTime).getTime()
+          }
+          return false
+        }
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.dialogVisible = true
+      this.resetForm()
+      this.formData = { ...row }
+
+      // 处理日期格式
+      if (this.formData.startTime) {
+        this.formData.startTime = this.formData.startTime.split(' ')[0]
+      }
+      if (this.formData.endTime) {
+        this.formData.endTime = this.formData.endTime.split(' ')[0]
+      }
+
+      // 加载属性数据
+      this.loadAttributes()
+    },
+    resetForm() {
+      this.formData = {
+        roomId: '',
+        roomNum: '',
+        layer: '',
+        builtUpArea: '',
+        feeCoefficient: '',
+        remark: '',
+        roomRent: '',
+        roomArea: '',
+        startTime: '',
+        endTime: '',
+        state: '',
+        attrs: []
+      }
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+    },
+    loadAttributes() {
+      // 模拟加载属性数据
+      this.formData.attrs = [
+      ]
+    },
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.saveData()
+        }
+      })
+    },
+    saveData() {
+      updateShops(this.formData)
+        .then(res => {
+          if (res.code == 0) {
+            this.$message.success(this.$t('common.saveSuccess'))
+            this.dialogVisible = false
+            this.$emit('success')
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+        .catch(error => {
+          console.error(error)
+          this.$message.error(this.$t('common.saveFailed'))
+        })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/floorSelect2.vue b/src/components/room/floorSelect2.vue
new file mode 100644
index 0000000..b391862
--- /dev/null
+++ b/src/components/room/floorSelect2.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-select v-model="selectedFloor" filterable remote :remote-method="searchFloors" :loading="loading"
+    :placeholder="$t('shops.buildingPlaceholder')" style="width: 100%" @change="handleChange">
+    <el-option v-for="item in floors" :key="item.floorId" :label="item.floorNum + $t('shops.building')"
+      :value="item"></el-option>
+  </el-select>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+
+import { getFloors } from '@/api/room/roomApi'
+
+export default {
+  name: 'FloorSelect2',
+  data() {
+    return {
+      selectedFloor: null,
+      floors: [],
+      loading: false
+    }
+  },
+  methods: {
+    open() {
+      this.searchFloors()
+    },
+    async searchFloors() {
+        const {apiFloorDataVoList} = await getFloors({
+          communityId: getCommunityId(),
+          page:1,
+          row:100
+        })
+        this.floors = apiFloorDataVoList
+    },
+    handleChange(value) {
+      this.$emit('change', value)
+    },
+    clear() {
+      this.selectedFloor = null
+      this.floors = []
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 6c11abb..ae90d3c 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -126,6 +126,7 @@ import { messages as roomMessages } from '../views/room/roomLang.js'
 import { messages as addRoomViewMessages } from '../views/room/addRoomViewLang'
 import { messages as roomBindOwnerMessages } from '../views/owner/roomBindOwnerLang'
 import { messages as deleteOwnerRoomMessages } from '../views/owner/deleteOwnerRoomLang'
+import { messages as shopsMessages } from '../views/room/shopsLang'
 
 Vue.use(VueI18n)
 
@@ -256,6 +257,7 @@ const messages = {
     ...addRoomViewMessages.en,
     ...roomBindOwnerMessages.en,
     ...deleteOwnerRoomMessages.en,
+    ...shopsMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -382,6 +384,7 @@ const messages = {
     ...addRoomViewMessages.zh,
     ...roomBindOwnerMessages.zh,
     ...deleteOwnerRoomMessages.zh,
+    ...shopsMessages.zh,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 2f98d6f..4ae20da 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -607,15 +607,20 @@ const routes = [
         component: () => import('@/views/room/addRoomViewList.vue')
       },
       {
-        path:'/views/owner/roomBindOwner',
-        name:'/views/owner/roomBindOwner',
+        path: '/views/owner/roomBindOwner',
+        name: '/views/owner/roomBindOwner',
         component: () => import('@/views/owner/roomBindOwnerList.vue')
-        },
-        {
-          path:'/views/owner/deleteOwnerRoom',
-          name:'/views/owner/deleteOwnerRoom',
-          component: () => import('@/views/owner/deleteOwnerRoomList.vue')
-          },
+      },
+      {
+        path: '/views/owner/deleteOwnerRoom',
+        name: '/views/owner/deleteOwnerRoom',
+        component: () => import('@/views/owner/deleteOwnerRoomList.vue')
+      },
+      {
+        path: '/pages/property/shops',
+        name: '/pages/property/shops',
+        component: () => import('@/views/room/shopsList.vue')
+      },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/room/shopsLang.js b/src/views/room/shopsLang.js
new file mode 100644
index 0000000..711a4d1
--- /dev/null
+++ b/src/views/room/shopsLang.js
@@ -0,0 +1,124 @@
+export const messages = {
+  en: {
+    shops: {
+      queryCondition: 'Query Conditions',
+      shopInfo: 'Shop Information',
+      shopId: 'Shop ID',
+      shopIdPlaceholder: 'Please enter shop ID',
+      shopNumber: 'Shop Number',
+      shopNumberPlaceholder: 'Please enter shop number (format: Building-Shop)',
+      state: 'Status',
+      statePlaceholder: 'Please select status',
+      rented: 'Rented',
+      sold: 'Sold',
+      idle: 'Vacant',
+      addShop: 'Add Shop',
+      floor: 'Floor',
+      owner: 'Owner/Tenant',
+      contactNumber: 'Contact Number',
+      builtUpArea: 'Built-up Area',
+      roomArea: 'Indoor Area',
+      startTime: 'Start Lease Time',
+      endTime: 'End Lease Time',
+      rent: 'Rent',
+      feeCoefficient: 'Fee Coefficient',
+      operation: 'Operation',
+      rentAction: 'Rent',
+      sellAction: 'Sell',
+      unbind: 'Unbind',
+      edit: 'Edit',
+      delete: 'Delete',
+      squareMeter: 'm²',
+      layerUnit: 'F',
+      confirmDelete: 'Confirm Delete',
+      deleteTip: 'Deleting the shop will delete associated fees and payment records, and automatically unbind the owner!',
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      save: 'Save',
+      building: 'Building',
+      tenantPhone: 'Tenant Phone',
+      tenantName: 'Tenant Name',
+      leaseStart: 'Lease Start Date',
+      leaseEnd: 'Lease End Date',
+      remark: 'Remark',
+      shopFloor: 'Shop Floor',
+      feeCoefficientPlaceholder: 'Please enter fee coefficient',
+      builtUpAreaPlaceholder: 'Please enter built-up area',
+      roomAreaPlaceholder: 'Please enter indoor area',
+      rentPlaceholder: 'Please enter rent amount',
+      shopNumberRequired: 'Shop number is required',
+      floorRequired: 'Shop floor is required',
+      buildingRequired: 'Building is required',
+      rentRequired: 'Rent is required',
+      builtUpAreaRequired: 'Built-up area is required',
+      roomAreaRequired: 'Indoor area is required',
+      feeCoefficientRequired: 'Fee coefficient is required',
+      tenantPhoneRequired: 'Tenant phone is required',
+      tenantNameRequired: 'Tenant name is required',
+      leaseStartRequired: 'Lease start date is required',
+      leaseEndRequired: 'Lease end date is required',
+      phoneFormatError: 'Invalid phone format'
+    }
+  },
+  zh: {
+    shops: {
+      queryCondition: '查询条件',
+      shopInfo: '商铺信息',
+      shopId: '商铺ID',
+      shopIdPlaceholder: '请填写商铺ID',
+      shopNumber: '商铺编号',
+      shopNumberPlaceholder: '请填写商铺编号(格式:楼栋-商铺)',
+      state: '状态',
+      statePlaceholder: '请选择状态',
+      rented: '已出租',
+      sold: '已出售',
+      idle: '空闲',
+      addShop: '添加商铺',
+      floor: '楼层',
+      owner: '业主/租方',
+      contactNumber: '联系电话',
+      builtUpArea: '建筑面积',
+      roomArea: '室内面积',
+      startTime: '起租时间',
+      endTime: '截租时间',
+      rent: '租金',
+      feeCoefficient: '算费系数',
+      operation: '操作',
+      rentAction: '出租',
+      sellAction: '出售',
+      unbind: '解绑',
+      edit: '修改',
+      delete: '删除',
+      squareMeter: '平方米',
+      layerUnit: '层',
+      confirmDelete: '确认删除',
+      deleteTip: '确认是否删除!删除房屋会关联删除房屋下的费用以及缴费记录，并且自动解绑业主！',
+      cancel: '取消',
+      confirm: '确认',
+      save: '保存',
+      building: '楼栋',
+      tenantPhone: '租户手机号',
+      tenantName: '租户姓名',
+      leaseStart: '起租时间',
+      leaseEnd: '截租时间',
+      remark: '备注',
+      shopFloor: '商铺楼层',
+      feeCoefficientPlaceholder: '请填写算费系数',
+      builtUpAreaPlaceholder: '请填写建筑面积',
+      roomAreaPlaceholder: '请填写室内面积',
+      rentPlaceholder: '请填写租金',
+      shopNumberRequired: '商铺编号不能为空',
+      floorRequired: '商铺楼层不能为空',
+      buildingRequired: '楼栋不能为空',
+      rentRequired: '租金不能为空',
+      builtUpAreaRequired: '建筑面积不能为空',
+      roomAreaRequired: '室内面积不能为空',
+      feeCoefficientRequired: '算费系数不能为空',
+      tenantPhoneRequired: '租户手机号不能为空',
+      tenantNameRequired: '租户名称不能为空',
+      leaseStartRequired: '起租时间不能为空',
+      leaseEndRequired: '截租时间不能为空',
+      phoneFormatError: '手机号格式错误'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/shopsList.vue b/src/views/room/shopsList.vue
new file mode 100644
index 0000000..c640828
--- /dev/null
+++ b/src/views/room/shopsList.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="shops-container">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('shops.queryCondition') }}</span>
+          </div>
+          <el-form :inline="true" :model="queryParams" class="demo-form-inline text-left">
+            <el-form-item :label="$t('shops.shopId')">
+              <el-input v-model.trim="queryParams.roomId" :placeholder="$t('shops.shopIdPlaceholder')"
+                clearable></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('shops.shopNumber')">
+              <el-input v-model.trim="queryParams.roomNum" :placeholder="$t('shops.shopNumberPlaceholder')"
+                clearable></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('shops.state')">
+              <el-select v-model="queryParams.state" :placeholder="$t('shops.statePlaceholder')" clearable
+                style="width: 100%">
+                <el-option :label="$t('shops.rented')" value="2006"></el-option>
+                <el-option :label="$t('shops.sold')" value="2007"></el-option>
+                <el-option :label="$t('shops.idle')" value="2008"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">{{ $t('common.search') }}</el-button>
+              <el-button @click="handleReset">{{ $t('common.reset') }}</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('shops.shopInfo') }}</span>
+            <el-button v-if="hasPrivilege('502020082453087940')" type="primary" size="small" style="float: right"
+              @click="openAddDialog">
+              {{ $t('shops.addShop') }}
+            </el-button>
+          </div>
+
+          <el-table :data="shopsData" border style="width: 100%" v-loading="loading">
+            <el-table-column prop="roomId" :label="$t('shops.shopId')" align="center" />
+            <el-table-column :label="$t('shops.shopNumber')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.floorNum }}-{{ scope.row.roomNum }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('shops.floor')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.layer }}{{ $t('shops.layerUnit') }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('shops.owner')" align="center">
+              <template slot-scope="scope">
+                <router-link v-if="scope.row.ownerName" :to="`/pages/owner/ownerDetail?ownerId=${scope.row.ownerId}`"
+                  target="_blank">
+                  {{ scope.row.ownerName }}
+                </router-link>
+                <span v-else>--</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="link" :label="$t('shops.contactNumber')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.link || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('shops.builtUpArea')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.builtUpArea }}{{ $t('shops.squareMeter') }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('shops.roomArea')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.roomArea }}{{ $t('shops.squareMeter') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="startTime" :label="$t('shops.startTime')" align="center" />
+            <el-table-column prop="endTime" :label="$t('shops.endTime')" align="center" />
+            <el-table-column prop="roomRent" :label="$t('shops.rent')" align="center" />
+            <el-table-column prop="feeCoefficient" :label="$t('shops.feeCoefficient')" align="center" />
+            <el-table-column prop="stateName" :label="$t('shops.state')" align="center" />
+            <el-table-column v-for="(item, index) in listColumns" :key="index" :label="item" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.listValues[index] }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('shops.operation')" align="center" fixed="right" width="250">
+              <template slot-scope="scope">
+                <el-button-group>
+                  <el-button v-if="hasPrivilege('502020082493857941') && scope.row.state === '2008'" size="mini"
+                    @click="openRentDialog(scope.row)">
+                    {{ $t('shops.rentAction') }}
+                  </el-button>
+                  <el-button v-if="hasPrivilege('502020082493857941') && scope.row.state === '2008'" size="mini"
+                    @click="openSellDialog(scope.row)">
+                    {{ $t('shops.sellAction') }}
+                  </el-button>
+                  <el-button v-if="hasPrivilege('502020082493857941') && scope.row.state !== '2008'" size="mini"
+                    @click="openUnbind(scope.row)">
+                    {{ $t('shops.unbind') }}
+                  </el-button>
+                  <el-button v-if="hasPrivilege('502020082493857941')" size="mini" type="primary"
+                    @click="openEditDialog(scope.row)">
+                    {{ $t('shops.edit') }}
+                  </el-button>
+                  <el-button v-if="hasPrivilege('502020082417457942')" size="mini" type="danger"
+                    @click="openDeleteDialog(scope.row)">
+                    {{ $t('shops.delete') }}
+                  </el-button>
+                </el-button-group>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 20px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 子组件 -->
+    <add-shops ref="addDialog" @success="loadData"></add-shops>
+    <bind-owner-shops ref="bindDialog" @success="loadData"></bind-owner-shops>
+    <edit-shops ref="editDialog" @success="loadData"></edit-shops>
+    <delete-room ref="deleteDialog" @success="loadData"></delete-room>
+  </div>
+</template>
+
+<script>
+import { queryShops } from '@/api/room/shopsApi'
+import AddShops from '@/components/room/addShops'
+import BindOwnerShops from '@/components/room/bindOwnerShops'
+import EditShops from '@/components/room/editShops'
+import DeleteRoom from '@/components/room/deleteRoom'
+
+export default {
+  name: 'ShopsList',
+  components: {
+    AddShops,
+    BindOwnerShops,
+    EditShops,
+    DeleteRoom
+  },
+  data() {
+    return {
+      loading: false,
+      queryParams: {
+        roomId: '',
+        roomNum: '',
+        state: '',
+        roomType: '2020602',
+        page: 1,
+        row: 10
+      },
+      shopsData: [],
+      listColumns: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.loadData()
+  },
+  methods: {
+    loadData() {
+      this.loading = true
+      queryShops(this.queryParams)
+        .then(res => {
+            this.shopsData = res.rooms
+            this.pagination.total = res.total
+            this.dealShopsAttr(res.rooms)
+        })
+        .catch(error => {
+          console.error(error)
+          this.$message.error(this.$t('common.requestError'))
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleQuery() {
+      this.queryParams.page = 1
+      this.loadData()
+    },
+    handleReset() {
+      this.queryParams = {
+        roomId: '',
+        roomNum: '',
+        state: '',
+        roomType: '2020602',
+        page: 1,
+        row: 10
+      }
+      this.loadData()
+    },
+    handleSizeChange(size) {
+      this.queryParams.row = size
+      this.loadData()
+    },
+    handleCurrentChange(page) {
+      this.queryParams.page = page
+      this.loadData()
+    },
+    openAddDialog() {
+      this.$refs.addDialog.open()
+    },
+    openRentDialog(row) {
+      this.$refs.bindDialog.open(row, '2006')
+    },
+    openSellDialog(row) {
+      this.$refs.bindDialog.open(row, '2007')
+    },
+    openEditDialog(row) {
+      this.$refs.editDialog.open(row)
+    },
+    openDeleteDialog(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    openUnbind(row) {
+      this.$router.push(`/views/owner/deleteOwnerRoom?ownerId=${row.ownerId}`)
+    },
+    dealShopsAttr(shopss) {
+      // 处理商铺属性列
+     // this.listColumns = ['Attr1', 'Attr2'] // 实际应从API获取
+      shopss.forEach(shop => {
+        shop.listValues = [] // 实际应从API获取
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.shops-container {
+  padding: 20px;
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>
\ No newline at end of file