<!
--
* @Description: 海淀智慧物业app
-
-->
<template>
<div class="economicdevelopment
-page overflow_div page
-background scoll_box dashboard
-page">
<titlepage v
-if="pathStr !== '/'" :title="pathName" :query="query"></titlepage>
<!
-- <div class="top_box" @click.stop="checkboxGroupShowFn">
-->
<!
-- <div class="right_icon">
-->
<!
-- <van
-icon name="arrow
-down" v
-if="!checkboxGroupShow" />
-->
<!
-- <van
-icon name="arrow
-up" v
-if="checkboxGroupShow" />
-->
<!
-- </div>
-->
<!
-- 下拉多选查询
-->
<!
-- <p v
-for="(item,i) of checkboxGroup" :key="i" @click.stop="deleteCheckbox(item)">
-->
<!
-- <span>{{ item.name }}</span>
-->
<!
-- <van
-icon name="close" style="trans
form: scale(1.2);" />
-->
<!
-- </p>
-->
<!
-- <div v
-if="checkboxGroup.length===0" class="placeholder">请选择小区</div>
-->
<!
-- </div>
-->
<!
-- 0805 增加查询项
-->
<div class="userLoginSearch">
<a
-row :gutter="10">
<a
-col :span="12">
<a
-select show
-search v
-model="pane.szjz" :filterOption="filterOption" style="width: 100%"
@change="handleStreetChange" placeholder="街镇">
<a
-select
-option :value="item.id" v
-for="(item, i) in streetColumns" :key="i"
:
lable="item.departName">
{{ item.departName }}
</a
-select
-option>
</a
-select>
</a
-col>
<a
-col :span="12">
<a
-select show
-search v
-model="pane.sqmc" :filterOption="filterOption" style="width: 100%"
@change="handleSQChange" placeholder="社区">
<a
-select
-option :value="item.id" v
-for="(item, i) in townColumns" :key="i"
:
lable="item.departName">
{{ item.departName }}
</a
-select
-option>
</a
-select>
</a
-col>
</a
-row>
<a
-row :gutter="10" style="margin
-top: 10px;">
<a
-col :span="12">
<a
-input v
-model="pane.xmmc" placeholder="项目名称">
<a
-icon slot="suffix" type="search" style="color:#3b77b3;" />
</a
-input>
</a
-col>
<a
-col :span="12" style="margin
-top: 2px;">
<div class="checkboxContainer">
<span>专业化物业</span>
<a
-checkbox v
-model="sfwzyhwyValue" @change="changeZyhwy" />
</div>
</a
-col>
</a
-row>
<!
-- 新增搜索与重置按钮
-->
<div class="search
-reset
-btns" style="margin
-top: 15px; display: flex; justify
-content: space
-between;">
<van
-button type="info" block @click="reLoadData">搜索</van
-button>
<van
-button type="default" block @click="handleReset">重置</van
-button>
</div>
</div>
<div class="tabBox">
<!
-- <van
-tabs v
-model:active="activeName" color="#1989fa" @change="changeTab">
-->
<!
-- <van
-tab title="所有项目" name="0">
-->
<a
-spin :spinning="spinning">
<div class="itemBox" v
-for="(item, i) in listData" :key="i" @click="showDetail(item.id)">
<div class="contentBox">
<div class="imgBox">
<template v
-if="item.imgUrl">
<van
-image :src="item.imgUrl" width="50px" height="50px" style="border
-radius: 5px;">
<template v
-slot:loading>
<van
-loading type="spinner" size="20" />
</template>
<template v
-slot:error>加载失败</template>
</van
-image>
</template>
<template v
-else>
<div
style="
width: 50px;
height: 50px;
display: flex;
align
-items: center;
justify
-content: center;
background: #f0f0f0;
color: #999;
font
-size: 12px;
"
>
暂无图片
</div>
</template>
</div>
<div class="msgBox">
<p>{{ item.xmmc ? item.xmmc : '' }}</p>
<p>物业服务企业:{{ item.wyfwqy ? item.wyfwqy : '暂无企业' }}</p>
<p>
更新时间:
{{ item.updateTime ? item.updateTime : '暂无更新时间' }}
</p>
</div>
<!
-- <van
-icon class="iconBox" name="edit" />
-->
</div>
<div
class="typeBox"
v
-if="item.fwxz && item.fwxz.length > 0"
:class="[
item.fwxz == 1 || item.fwxz == 2 || item.fwxz == 3 || item.fwxz == 4 || item.fwxz == 5
? 'personalType'
: 'publicType'
]"
>
<span v
-for="(item1, i1) in item.fwxz" :key="i1">
<span v
-if="item1 == 1"> 商品住宅 </span>
<span v
-if="item1 == 2"> 商住两用 </span>
<span v
-if="item1 == 3"> 共有产权 </span>
<span v
-if="item1 == 4"> 保障性住房(经适房、公租房等) ) </span>
<span v
-if="item1 == 5"> 直管公房 </span>
<span v
-if="item1 == 6"> 军产房 </span>
<span v
-if="item1 == 7"> 三供一业 </span>
<span v
-if="item1 == 8"> 非经资产移交 </span>
<span v
-if="item1 == 9"> 房改售房 </span>
<span v
-if="item1 == 10"> 回迁安置房 </span>
<span v
-if="item1 ==
-99"> 其他 </span>
</span>
</div>
<!
-- <div v
-else></div>
-->
</div>
<a
-button class="moreBtn" @click="getprojectListMsg" :disabled="moreDisabled">
{{ moreText }}
<van
-icon name="arrow
-down" />
</a
-button>
<!
-- 增加一个空div 顶高度
-->
<div style="height: 100px;width:100%"></div>
</a
-spin>
<!
-- </van
-tab>
-->
<!
-- <van
-tab title="小区列表" name="1">
-->
<!
-- <div style="font
-size: 14px">
-->
<!
-- <div class="itemBox" v
-for="(item, i) in tab2ListData" :key="i" @click="showDetail(item.id)">
-->
<!
-- <div class="contentBox">
-->
<!
-- <div class="imgBox">
-->
<!
-- <!– <van
-image src="" width="50px" height="50px">
-->
<!
-- <template v
-slot:loading>
-->
<!
-- <van
-loading type="spinner" size="20" />
-->
<!
-- </template>
-->
<!
-- </van
-image> –>
-->
<!
-- <template v
-if="item.imgUrl">
-->
<!
-- <van
-image :src="item.imgUrl" width="50px" height="50px">
-->
<!
-- <template v
-slot:loading>
-->
<!
-- <van
-loading type="spinner" size="20" />
-->
<!
-- </template>
-->
<!
-- <template v
-slot:error>加载失败</template>
-->
<!
-- </van
-image>
-->
<!
-- </template>
-->
<!
-- <template v
-else>
-->
<!
-- <div
-->
<!
-- style="
-->
<!
-- margin
-top: 20px;
-->
<!
-- width: 50px;
-->
<!
-- height: 50px;
-->
<!
-- display: flex;
-->
<!
-- align
-items: center;
-->
<!
-- justify
-content: center;
-->
<!
-- background: #f0f0f0;
-->
<!
-- color: #999;
-->
<!
-- font
-size: 12px;
-->
<!
-- "
-->
<!
-- >
-->
<!
-- 暂无图片
-->
<!
-- </div>
-->
<!
-- </template>
-->
<!
-- </div>
-->
<!
-- <div class="msgBox">
-->
<!
-- <p>{{ item.xmmc ? item.xmmc : '' }}</p>
-->
<!
-- <p>物业服务企业:{{ item.wyfwqy ? item.wyfwqy : '暂无企业' }}</p>
-->
<!
-- <p>
-->
<!
-- 更新时间:
-->
<!
-- {{ item.updateTime ? item.updateTime : '暂无更新时间' }}
-->
<!
-- </p>
-->
<!
-- </div>
-->
<!
-- <!– <van
-icon class="iconBox" name="edit" /> –>
-->
<!
-- </div>
-->
<!
-- <div
-->
<!
-- class="typeBox"
-->
<!
-- v
-if="item.fwxz"
-->
<!
-- :class="[
-->
<!
-- item.fwxz == 1 || item.fwxz == 2 || item.fwxz == 3 || item.fwxz == 4 || item.fwxz == 5
-->
<!
-- ? 'personalType'
-->
<!
-- : 'publicType'
-->
<!
-- ]"
-->
<!
-- >
-->
<!
-- <span v
-for="(item1, i1) in item.fwxz" :key="i1">
-->
<!
-- <span v
-if="item1 == 1"> 商品住宅 </span>
-->
<!
-- <span v
-if="item1 == 2"> 商住两用 </span>
-->
<!
-- <span v
-if="item1 == 3"> 共有产权 </span>
-->
<!
-- <span v
-if="item1 == 4"> 保障性住房(经适房、公租房等) ) </span>
-->
<!
-- <span v
-if="item1 == 5"> 直管公房 </span>
-->
<!
-- <span v
-if="item1 == 6"> 军产房 </span>
-->
<!
-- <span v
-if="item1 == 7"> 三供一业 </span>
-->
<!
-- <span v
-if="item1 == 8"> 非经资产移交 </span>
-->
<!
-- <span v
-if="item1 == 9"> 房改售房 </span>
-->
<!
-- <span v
-if="item1 == 10"> 回迁安置房 </span>
-->
<!
-- <span v
-if="item1 ==
-99"> 其他 </span>
-->
<!
-- </span>
-->
<!
-- </div>
-->
<!
-- <div v
-else></div>
-->
<!
-- </div>
-->
<!
-- <a
-button class="moreBtn" @click="getTab2List" :disabled="moreDisabled">
-->
<!
-- {{ moreText }}
-->
<!
-- <van
-icon name="arrow
-down" />
-->
<!
-- </a
-button>
-->
<!
-- </div>
-->
<!
-- </van
-tab>
-->
<!
-- </van
-tabs>
-->
</div>
<!
-- <div class="container">
-->
<!
-- <div v
-for="(item,i) of notifyList" class="project_list_item">
-->
<!
-- </div>
-->
<!
-- </div>
-->
<!
-- <div class="fixedBox">
专题
<br />图层
</div>
-->
<!
-- 顶部小区查询项弹框
-->
<!
-- <van
-popup
-->
<!
-- v
-model="checkboxGroupShow"
-->
<!
-- position="bottom"
-->
<!
-- :style="{ height: '50%',zIndex:9999 }">
-->
<!
-- <div class="my_checkbox_popup">
-->
<!
-- <p class="cancel" @click="cancel(true)">取消</p>
-->
<!
-- <p class="confirm" @click="comfirm">确认</p>
-->
<!
-- </div>
-->
<!
-- <van
-checkbox
-group v
-model="checkboxGroupIds">
-->
<!
-- <van
-cell
-group>
-->
<!
-- <van
-cell
-->
<!
-- class="my_checkbox_popup_cell"
-->
<!
-- v
-for="(items, index) in dataOption"
-->
<!
-- clickable
-->
<!
-- :key="index"
-->
<!
-- :title="items.name"
-->
<!
-- @click="onSelect(items,index)">
-->
<!
-- <template #right
-icon>
-->
<!
-- <van
-checkbox :name="items.id" ref="CoverableCities" class="my_checkbox_popup_item" />
-->
<!
-- </template>
-->
<!
-- </van
-cell>
-->
<!
-- </van
-cell
-group>
-->
<!
-- </van
-checkbox
-group>
-->
<!
-- </van
-popup>
-->
</div>
</template>
<script>
import rolemixins from '@/utils/rolemixins';
import { managerListMsg, xioaquList } from '@/api/comm';
import { getSendRangeData } from '@/api/home';
import { getSqmcData } from '@/api/userState';
export default {
name: 'projectList',
components: {},
mixins: [rolemixins],
data() {
return {
listData: [],
tab2ListData: [],
activeName: 'tab1',
pathStr: this.$route.path,
pathName: this.$route.meta.title ? this.$route.meta.title : '',
query: {},
//分页
pane: {
pageNo: 1,
total: 0,
pageSize: 10
},
sfwzyhwyValue: false,
moreDisabled: false,
moreText: '加载更多',
streetColumns: [],
townColumns: [],
spinning: false,
timer: null
};
},
created() {
},
activated() {
},
be
foreDestroy() {
if (this.timer) {
clearTimeout(this.timer);
}
},
mounted() {
// this.initCheckboxGroup();
// this.getData();
this.getprojectListMsg();
this.getStreetData();
},
methods: {
// 切换tab
changeTab(tab) {
this.activeName = tab;
// this.getTab2List();
console.log('ffffff', tab);
this.pane.pageNo = 1;
this.moreDisabled = false;
this.moreText = '加载更多';
this.pane.total = 0;
this.listData = [];
this.tab2ListData = [];
if (tab == '0') {
this.getprojectListMsg();
} else {
this.getTab2List();
}
},
// 获取数据列表接口
getData() {
let params = {
id: 1
};
},
// 获取所有项目
async getprojectListMsg() {
this.spinning = true;
const res = await managerListMsg(this.pane);
if (res.success) {
this.pane.total = res.result.total;
this.listData = [...this.listData, ...res.result.records];
this.listData.
forEach((item) => {
if (item.fwxz && !Array.isArray(item.fwxz)) {
item.fwxz = item.fwxz.split(',');
} else {
item.fwxz = item.fwxz || [];
}
});
this.$
forceUpdate();
if (this.listData.length >= this.pane.total) {
this.moreDisabled = true;
this.moreText = '没有更多了';
} else {
this.moreDisabled = false;
this.moreText = '加载更多';
}
}
this.spinning = false;
},
// 获取小区列表
getTab2List() {
xioaquList(this.pane).then((res) => {
this.pane.total = res.result.total;
this.pane.pageNo = this.pane.pageNo + 1;
if (res.code == 200) {
if (res.result.records.length < this.pane.pageSize) {
this.moreDisabled = true;
this.moreText = '没有更多了';
this.tab2ListData = [...this.tab2ListData, ...res.result.records];
this.$
forceUpdate();
} else {
this.moreDisabled = false;
this.moreText = '加载更多';
this.tab2ListData = [...this.tab2ListData, ...res.result.records];
this.$
forceUpdate();
}
}
});
},
// 跳转项目信息详情
filterOption(inputValue, option) {
return option.data.attrs.
lable
? option.data.attrs.
lable.includes(inputValue)
: null;
},
// 获取街镇数据以及社区数据
getStreetData() {
getSendRangeData().then((res) => {
this.streetColumns = res.result;
});
},
// 获取社区数据
getTownData(val) {
getSqmcData({ id: val }).then((res) => {
this.townColumns = res.result;
});
},
handleTownConfirm(val) {
this.sqmcName = val.departName;
this.pane.sqmc = val.id;
this.townPicker = false;
},
handleSearch() {
console.log(this.pane);
this.pane.pageNo = 1;
this.moreDisabled = false;
this.moreText = '加载更多';
this.listData = [];
this.getprojectListMsg();
},
handleReset() {
this.pane = {
xmmc: '',
szjz: undefined,
sqmc: undefined,
pageNo: 1,
pageSize: 10,
total: 0
};
this.moreDisabled = false;
this.townColumns = [];
this.moreDisabled = false
this.moreText = '加载更多';
this.listData = [];
this.$nextTick(() => {
this.$
forceUpdate
})
this.getprojectListMsg();
},
showDetail(id) {
this.$router.push({
path: '/listDetail',
query: {
id: id
}
});
},
changeZyhwy(e) {
this.pane.sfwzyhwy = this.sfwzyhwyValue ? 1 : 0;
this.reLoadData();
},
handleStreetChange(val) {
// 清空社区
this.pane.sqmc = undefined;
this.getTownData(val);
// this.reLoadData();
},
handleSQChange(val) {
this.pane.sqmc = val;
// this.reLoadData();
},
reLoadData() {
this.pane.pageNo = 1;
this.moreDisabled = false;
this.moreText = '加载更多';
this.listData = [];
this.getprojectListMsg();
},
// changeXmmc(e) {
// if (this.timer) {
// clearTimeout(this.timer);
// }
// this.timer = setTimeout(() => {
// this.moreDisabled = false;
// this.moreText = '加载更多';
// this.listData = [];
// // this.getprojectListMsg();
// }, 1000);
// }
// checkboxGroupShowFn() {
// this.checkboxGroupShow = true;
// }
// initCheckboxGroup() {
// this.checkboxGroupIds = [];
// this.checkboxGroup = [];
// },
// onSelect(items, index) {
// this.$refs.CoverableCities[index].toggle();
// },
// comfirm() {
// let text = [];
// this.dataOption.map((its, i) => {
// if (this.checkboxGroupIds.indexOf(its.id) !==
-1) {
// text.push(its);
// }
// });
// this.checkboxGroup = text;
// this.$
forceUpdate();
// this.cancel(false);
// },
// cancel(flag) {
// this.$
forceUpdate();
// this.checkboxGroupShow = false;
// if (flag) {
// this.initCheckboxGroup();
// }
// },
// deleteCheckbox(item) {
// this.checkboxGroup.map((its, index) => {
// if (item.id === its.id) {
// this.checkboxGroup.splice(index, 1);
// }
// });
// this.checkboxGroupIds = this.checkboxGroup.map(its => {
// return its.id;
// });
// console.log(this.checkboxGroup, this.checkboxGroupIds, '
----deleteCheckbox');
// }
}
};
</script>
<style scoped lang="less">
@import '~@/assets/css/comm.less';
.economicdevelopment
-page {
height: 100%;
.fixedBox {
width: 80px;
height: 80px;
border
-radius: 50%;
box
-shadow: 5px 5px 5px #ccc,
-5px
-5px 5px #ccc, 5px
-5px 5px #ccc,
-5px 5px 5px #ccc;
position: absolute;
bottom: 20px;
right: 20px;
background: #fff;
font
-size: 14px;
text
-align: center;
display: flex;
align
-items: center;
justify
-content: center;
}
.top_box {
width: auto;
height: 40px;
background: #fff;
border: 1px solid #3b77b3;
position: relative;
display: flex;
align
-items: center;
padding: 0 5px;
margin: 0 10px;
.right_icon {
position: absolute;
top: 5px;
right: 10px;
}
p {
padding: 5px 10px 20px 10px;
height: 24px;
background: rgba(59, 119, 179, 0.15);
border
-radius: 12px;
border: 1px solid rgba(59, 119, 179, 0.5);
color: #3b77b3;
font
-size: 12px;
font
-weight: 500;
font
-family: PingFangSC, PingFang SC;
margin: 0 2px;
span {
display: inline
-block;
margin
-right: 10px;
}
}
div.placeholder {
width: 100%;
color: #d4d3d3;
font
-size: 16px;
font
-weight: normal;
text
-align: center;
}
}
/deep/ .van
-tabs__content {
overflow
-y: scroll;
}
.tabBox {
width: auto;
margin: 0 10px;
margin
-top: 5px;
height: 88vh;
overflow: hidden;
overflow
-y: scroll;
.itemBox {
width: 100%;
//height: 80px;
position: relative;
font
-size: 12px;
padding: 10px;
background: #fff;
margin
-bottom: 10px;
display: flex;
align
-items: flex
-end;
margin
-top: 5px;
.contentBox {
display: flex;
justify
-content: space
-between;
text
-align: center;
width: 100%;
.iconBox {
font
-size: 26px;
width: auto;
height: 30px;
line
-height: 60px;
}
.msgBox {
text
-align: left;
width: 200px;
}
.imgBox {
width: 50px;
height: 50px;
display: flex;
align
-items: center;
justify
-content: center;
}
}
.typeBox {
position: absolute;
height: 20px;
line
-height: 20px;
top: 0;
right: 10px;
text
-align: center;
padding: 0 5px;
max
-width: 50%;
white
-space: nowrap;
overflow: hidden;
text
-overflow: ellipsis;
}
.personalType {
background: #e99d42;
}
.publicType {
background: #a2ef4d;
}
}
}
//.container {
// height: 100% !important;
// padding: 0 12.5px;
//
//}
}
.my_checkbox_popup {
width: 100%;
height: 45px;
line
-height: 45px;
margin
-bottom: 5px;
display: flex;
justify
-content: space
-between;
align
-items: center;
p {
height: 100%;
padding: 0 0.42667rem;
font
-size: 0.37333rem;
background
-color: transparent;
border: none;
cursor: pointer;
}
p.cancel {
color: #969799;
}
p.confirm {
color: #576b95;
}
}
.my_checkbox_popup_cell {
/deep/ .van
-cell__title {
padding: 8px 10px;
}
}
.my_checkbox_popup_item {
padding: 10px 15px;
}
.moreBtn {
text
-align: center;
color: #1989fa;
border: none;
width: 100%;
background: #fff;
}
.userLoginSearch {
background
-color: #fff;
border
-radius: 10px;
padding: 10px;
margin: 10px 0;
.checkboxContainer {
width: 100%;
border
-radius: 10px;
border: 1px solid #3b77b3;
font
-size: 14px;
padding: 0 8px;
height: 32px;
line
-height: 32px;
display: flex;
align
-items: center;
justify
-content: space
-between;
color: #3b77b3;
}
}
.search
-reset
-btns {
// background
-color: #3c78b1;
display: flex;
gap: 10px;
.van
-button {
background
-color: #3c78b1;
flex: 1;
font
-size: 14px;
color: #ffffff;
}
}
::v
-deep .ant
-select
-selection {
border
-color: #3b77b3;
border
-radius: 10px;
color: #3b77b3;
.ant
-select
-selection__placeholder {
color: #3b77b3;
}
}
::v
-deep .ant
-input {
border
-color: #3b77b3;
border
-radius: 10px;
padding
-left: 8px;
color: #3b77b3;
&::placeholder {
color: #3b77b3;
}
}
</style>
<template v
-if="item.imgUrl">
<van
-image :src="item.imgUrl" width="50px" height="50px" style="border
-radius: 5px;">
<template v
-slot:loading>
<van
-loading type="spinner" size="20" />
</template>
<template v
-slot:error>加载失败</template>
</van
-image>
</template>
<template v
-else>
<div
style="
width: 50px;
height: 50px;
display: flex;
align
-items: center;
justify
-content: center;
background: #f0f0f0;
color: #999;
font
-size: 12px;
"
>
暂无图片
</div>
</template>这段代码现在是图片,换成视频,点击视频后可弹出并播放
本文详细解析了HTML中for属性的功能与用法，展示如何通过for属性实现表单控件与标签的关联，使用户交互更加友好。适用于所有非隐藏表单元素，尤其在单选按钮与复选框的使用中效果显著。
扫一扫
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
