zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成小区相关的接口对接

Browse Source
This commit is contained in:
Zy
2026-04-07 18:02:18 +08:00
parent ee55b4dca7
commit b87a594d4e
32 changed files with 913 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/views/community/index.vue
View File

@@ -1,76 +1,153 @@
<template>
<div class="container">
<div class="community_nav_box">
<div class="currentbox">当前小区：xxxxxxxxxxxxx</div>
<div class="subtitle flex align-center">
<div class="line"></div>
<div class="changecommunity">切换小区</div>
</div>
<div class="box">
<div class="header">
<span class="">智慧物业后台管理系统</span>
<navbar ref="navbarRef" />
</div>
<div class="communityBody">
<div
class="coummunity_card"
:class="{
activeCommunity: index === 2
}"
v-for="(item, index) in list"
:key="index"
>
<img src="https://picsum.photos/400/400" alt="" />
<div class="coummunityaction_box">
<div class="coummunityname">{{ item.name }}</div>
<div class="counmmunityaddress">{{ item.address }}</div>
</div>
<div class="actions flex">
<div>管理</div>
<div>编辑</div>
<div>删除</div>
<div class="container">
<div class="community_nav_box">
<div class="currentbox">当前小区:{{ currentViliageInfo && currentViliageInfo.villageName }}</div>
<div class="subtitle flex align-center">
<div class="line"></div>
<div class="changecommunity">切换小区</div>
</div>
</div>
<div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
<div class="addCoummunity">
<el-icon>
<AddLocation></AddLocation>
</el-icon>
<div>添加小区</div>
<div class="communityBody">
<div
class="coummunity_card"
:class="{
activeCommunity: item.choiceStatus === 0
}"
v-for="(item, index) in list"
:key="index"
>
<el-image :src="item.villageImageUrl ? item.villageImageUrl.split(',')[0] : ''">
<template #error>
<div class="image-viewer-slot image-slot">
<el-icon><Picture /></el-icon>
</div>
</template>
</el-image>
<div class="coummunityaction_box">
<div class="coummunityname">{{ item.villageName }}</div>
<div class="counmmunityaddress">{{ item.address }}</div>
</div>
<div class="actions flex">
<div
@click="handleclick(item)"
:style="{
color: item.choiceStatus === 0 ? 'green' : ''
}"
>
{{ item.choiceStatus === 0 ? '进入' : '管理' }}
</div>
<div @click="handleEdit(item)">编辑</div>
<div @click="handleDelete(item)">删除</div>
</div>
</div>
<div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
<div class="addCoummunity">
<el-icon>
<AddLocation></AddLocation>
</el-icon>
<div>添加小区</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const list = ref([
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
}
]);
import Navbar from '@/layout/components/Navbar.vue';
import { deleteVillageByIdAPI, switchVillageAPI, getCommunitylistAPI } from '@/api/system/community/index';
import type { communitylist_rows_type } from '@/api/system/community/type';
import { Picture } from '@element-plus/icons-vue';
const router = useRouter();
const list = ref<communitylist_rows_type[]>([]);
const currentViliageInfo = ref<communitylist_rows_type>();
/** 获取小区列表 */
function getlist() {
getCommunitylistAPI().then((res) => {
list.value = res.rows;
currentViliageInfo.value = res.rows.find((item) => item.choiceStatus === 0);
res.rows.forEach((item) => {
if (item.villageImageUrl) {
console.log(item.villageImageUrl.split(','));
}
});
});
}
getlist();
/** 新增小区 */
function handleAdd() {
console.log('add');
router.push({
path: '/community/AddCommunity'
});
}
/** 删除小区 */
function handleDelete(item: communitylist_rows_type) {
deleteVillageByIdAPI(item.villageId).then(() => {
const newlist = list.value.filter((listitem) => listitem.villageId !== item.villageId);
list.value = newlist;
});
}
/** 编辑小区 */
function handleEdit(item: communitylist_rows_type) {
router.push({
path: '/community/AddCommunity',
query: {
id: item.villageId
}
});
}
/** 管理小区 */
function handleclick(item: communitylist_rows_type) {
if (item.choiceStatus === 0) {
router.push({
path: '/index'
});
} else {
switchVillageAPI(item.villageId).then((res) => {
console.log('切换成小区---------------------');
ElMessage.success('切换小区成功');
router.push({
path: '/index'
});
});
}
}
</script>
<style scoped lang="scss">
.box {
.header {
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
background-color: #1a75ff;
& > div {
flex: 1;
}
& > span {
padding-left: 20px;
font-size: 20px;
color: white;
}
}
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 30px;
height: 200px;
background: #fff;
}
.container {
width: 100%;
margin: 0 auto;
@@ -106,30 +183,41 @@ function handleAdd() {
}
}
.communityBody {
padding: 30px;
padding: 20px;
color: #000;
display: flex;
flex-wrap: wrap;
align-items: center;
display: grid;
grid-template-columns: repeat(5, minmax(292px, 1fr));
@media (max-width: 1540px) {
grid-template-columns: repeat(4, minmax(292px, 1fr));
}
@media (max-width: 1280px) {
grid-template-columns: repeat(3, minmax(292px, 1fr));
}
@media (max-width: 1030px) {
grid-template-columns: repeat(2, minmax(292px, 1fr));
}
.coummunity_card {
width: 330px;
height: 330px;
height: 300px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
margin-right: 15px;
margin-right: 10px;
margin-bottom: 15px;
overflow: hidden;
img {
display: flex;
flex-direction: column;
&:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.el-image {
height: 200px;
width: 100%;
object-fit: cover;
}
.coummunityaction_box {
height: 100px;
padding: 10px 10px;
flex: 1;
padding: 10px 5px;
font-size: 15px;
.counmmunityaddress {
margin-top: 20px;
font-size: small;