359 lines
11 KiB
Vue
359 lines
11 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||
<view class="searchBox_add">
|
||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityIcon.png" alt="" />
|
||
我的房产
|
||
</view>
|
||
</view>
|
||
|
||
<div class="myRealEstate">
|
||
<div class="myRealEstates">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityNav.png" mode="aspectFill"></image>
|
||
<div class="name">滏阳锦苑</div>
|
||
<div class="Visitor">访客身份 点击立即入驻本社区</div>
|
||
</div>
|
||
|
||
|
||
<div class="Announcement">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_Announcement.png" mode="aspectFill"></image>
|
||
<div class="line"></div>
|
||
<div class="msg" @click="notice">
|
||
<div>asdasdasd</div>
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_more.png" mode="aspectFill"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="navList">
|
||
<div class="navItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon1.png" mode="aspectFill"></image>
|
||
物业服务
|
||
</div>
|
||
|
||
<div class="navItem" @click="repair">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon2.png" mode="aspectFill"></image>
|
||
在线报修
|
||
</div>
|
||
|
||
<div class="navItem" @click="propertyPayment">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon3.png" mode="aspectFill"></image>
|
||
物业缴费
|
||
</div>
|
||
|
||
<div class="navItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon4.png" mode="aspectFill"></image>
|
||
物业公积
|
||
</div>
|
||
|
||
<div class="navItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon5.png" mode="aspectFill"></image>
|
||
社区管家
|
||
</div>
|
||
|
||
<div class="navItem" @click="mores">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIconMore.png" mode="aspectFill"></image>
|
||
更多
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabList">
|
||
<div class="tabItem tabItem1">
|
||
门禁通行
|
||
</div>
|
||
<div class="tabItem tabItem2">
|
||
人人爱净水
|
||
</div>
|
||
<div class="tabItem tabItem3">
|
||
馒头领取
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nearbyTit">
|
||
<div>周边补贴公积金商家</div>
|
||
|
||
<div class="more">更多>>></div>
|
||
</div>
|
||
|
||
|
||
<div class="nearbyList">
|
||
<div class="emptys" v-if="false">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png" mode="aspectFill"></image>
|
||
周边暂无补贴公积金商家
|
||
|
||
<div class="emptysBtn">
|
||
商户申请入驻
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nearbyList_left">
|
||
<div class="nearbyList_leftItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg1.png" mode="aspectFill"></image>
|
||
</div>
|
||
<div class="nearbyList_leftItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg1.png" mode="aspectFill"></image>
|
||
</div>
|
||
</div>
|
||
<div class="nearbyList_right">
|
||
<div class="nearbyList_rightItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
|
||
</div>
|
||
<div class="nearbyList_rightItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
|
||
</div>
|
||
<div class="nearbyList_rightItem">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="tabCard">
|
||
<div @click="changeTab" data-active="0" :class="active == 0 ? 'active tabCardItem' : 'tabCardItem'">社区互动
|
||
</div>
|
||
<div @click="changeTab" data-active="1" :class="active == 1 ? 'active tabCardItem' : 'tabCardItem'">社区团购
|
||
</div>
|
||
<div @click="changeTab" data-active="2" :class="active == 2 ? 'active tabCardItem' : 'tabCardItem'">上门服务
|
||
</div>
|
||
<div @click="changeTab" data-active="3" :class="active == 3 ? 'active tabCardItem' : 'tabCardItem'">本地优选
|
||
</div>
|
||
</div>
|
||
|
||
<div class="MsgList">
|
||
|
||
|
||
<div v-if="active == 0" class="act1">
|
||
<div class="empty" >
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
|
||
暂无信息
|
||
|
||
<div class="emptyAdd">发布社区互动信息</div>
|
||
</div>
|
||
|
||
<div class="MsgList_left" v-if="false">
|
||
<div class="MsgList_leftItem">
|
||
<div class="MsgList_leftItemImg">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png" mode="widthFix"></image>
|
||
</div>
|
||
<div class="MsgList_leftItemName">我家的小猫丢了，谁看见了请联系我~</div>
|
||
<div class="MsgList_leftItemMsg">
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="MsgList_right" v-if="false">
|
||
<div class="MsgList_rightItem">
|
||
<div class="MsgList_rightItemImg">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg2.png" mode="widthFix"></image>
|
||
</div>
|
||
|
||
<div class="MsgList_rightItemName">
|
||
这几天准备去春游，小区有人一起去么？
|
||
</div>
|
||
|
||
<div class="MsgList_leftItemMsg">
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="MsgList_rightItem">
|
||
|
||
<div class="MsgList_rightItemName">
|
||
这几天准备去春游，小区有人一起去么？
|
||
</div>
|
||
|
||
<div class="MsgList_leftItemMsg">
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
<div class="MsgList_leftItemMsg_like">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
|
||
134
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="active == 1" class="act2">
|
||
|
||
<div class="empty" >
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
|
||
暂无信息
|
||
|
||
<div class="emptyAdd">发布社区互动信息</div>
|
||
</div>
|
||
|
||
<div class="act2Item" v-for="itme in 3">
|
||
<div class="act2Item_left">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
|
||
</div>
|
||
<div class="act2Item_right">
|
||
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
||
<div class="act2Item_right_Msg">
|
||
本社区已抢购 <span>1536份</span>
|
||
</div>
|
||
|
||
<div class="act2Item_right_Btn">
|
||
<div class="act2Item_right_Btn_left">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Ms.png" mode="widthFix"></image>
|
||
￥
|
||
<span>5.58</span>
|
||
</div>
|
||
|
||
<div class="act2Item_right_Btn_right">
|
||
立即抢购
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="active == 2" class="act2">
|
||
|
||
<div class="empty" >
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
|
||
暂无信息
|
||
|
||
<div class="emptyAdd">发布社区互动信息</div>
|
||
</div>
|
||
|
||
<div class="act2Item" v-for="itme in 3">
|
||
<div class="act2Item_left">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
|
||
</div>
|
||
<div class="act2Item_right">
|
||
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
||
<div class="act2Item_right_Msg">
|
||
本社区已抢购 <span>1536份</span>
|
||
</div>
|
||
|
||
<div class="act2Item_right_Btn">
|
||
<div class="act2Item_right_Btn_left">
|
||
￥
|
||
<span>5.58</span>
|
||
/时起
|
||
</div>
|
||
|
||
<div class="act2Item_right_Btn_right">
|
||
立即预定
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="active == 3" class="act4">
|
||
<div class="act4Item" v-for="itme in 4">
|
||
<div class="act4Img">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="aspectFill"></image>
|
||
</div>
|
||
<div class="act4Name">
|
||
舒克小苏打牙膏（洁白细护）120G
|
||
</div>
|
||
<div class="act4Msg">
|
||
本社区已抢购 <span>1536份</span>
|
||
</div>
|
||
<div class="act4Price">
|
||
<span>￥</span>
|
||
99.00
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
uniqueByField,
|
||
menuButtonInfo,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
import {
|
||
apiArr
|
||
} from '../../../api/community';
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
top: "",
|
||
localHeight: "",
|
||
active: 0
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
// this.top = meun.height + meun.top;
|
||
this.localHeight = meun.height;
|
||
},
|
||
|
||
|
||
methods: {
|
||
changeTab(e) {
|
||
const active = e.currentTarget.dataset.active;
|
||
this.active = active;
|
||
},
|
||
|
||
mores() {
|
||
NavgateTo("../serverList/index")
|
||
},
|
||
|
||
notice(){
|
||
NavgateTo("../notice/index")
|
||
},
|
||
|
||
repair(){
|
||
NavgateTo("../repairList/index")
|
||
},
|
||
//物业报修
|
||
propertyPayment(){
|
||
NavgateTo("../propertyPayment/index")
|
||
},
|
||
},
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |