maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
uniapp-ZHSQ/packages/community/communityDetail/index.vue

248 lines
7.2 KiB
Vue
Raw Blame History

<template>
<view class="container">
<u-notice-bar v-if="tipsList.length !== 0" :text="tipsList[0].title" :fontSize='28' @click="headerTipsClick" />
<view v-if="info.swiperList && info.swiperList.length !== 0">
<swiper class="banner" indicator-dots autoplay circular>
<swiper-item v-for="(item, index) in info.swiperList" :key="index">
<image class="banner_item" :src="item" mode="aspectFill" />
</swiper-item>
</swiper>
</view>
<view class="nav">
<u-grid col="4" :border="false">
<u-grid-item
v-for="(item, index) in navList"
@click="headerNavClick(item)"
:key="index"
>
<image class="grid_Pic" :src="item.pic" mode=""></image>
<text>{{item.desc}}</text>
</u-grid-item>
</u-grid>
</view>
<view class="line"></view>
<view class="sub_nav">
<view class="sub_nav_item" @click="repair">
<view class="sub_nav_item_desc">报事保修</view>
<view class="sub_nav_item_right">
<image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group%203022.png" mode=""/>
</view>
</view>
<view class="sub_nav_item wy_pay" @click="NotOpen">
<view class="sub_nav_item_desc">物业缴费</view>
<view class="sub_nav_item_right">
<image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_366.png" mode=""/>
</view>
</view>
<view class="sub_nav_item wy_pay2" @click="ReparirList">
<view class="sub_nav_item_desc">报修列表</view>
<view class="sub_nav_item_right">
<image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Repairwithone.png" mode=""/>
</view>
</view>
<view v-if="!isJoin" class="sub_nav_item tel_leave" @click="NotOpen">
<view class="sub_nav_item_desc">手机通行</view>
<view class="sub_nav_item_right">
<image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_302.png" mode=""/>
</view>
</view>
</view>
</view>
</template>
<script>
import { request, picUrl, NavgateTo } from '../../../utils';
import { apiArr } from '../../../api/community';
export default {
data () {
return {
pageTitle: '',
id: '', // 社区id
navList: [
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_345.png',
url: '/packages/community/applyOwer/index',
desc: '申请业主'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_346.png',
desc: '我的车辆'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_348.png',
desc: '社区活动'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_347.png',
desc: '呼叫管家'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_350.png',
desc: '访客登记'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_351.png',
desc: '便民信息'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_352.png',
desc: '物业缴费'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_356.png',
desc: '便捷挪车'
},
],
mainList: [
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_349.png',
desc: '报事报修',
url:"/community/oneRepair/index"
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_350.png',
desc: '访客登记'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_351.png',
desc: '便民信息'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_352.png',
desc: '物业缴费'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_353.png',
desc: '生活缴费'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_354.png',
desc: '社区投票'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_355.png',
desc: '租售信息'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_356.png',
desc: '便捷挪车'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_357.png',
desc: '一键报警'
},
{
pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_358.png',
desc: '更多服务'
},
],
info: {},
tipsList: [],
isJoin: false, // 是否入驻本小区
}
},
onLoad (options) {
this.pageTitle = options.title;
this.id = Number(options.id);
this.init(options.id);
},
methods: {
async getInfo (id) {
const res = await request(apiArr.info, "POST", {
community_id: Number(id)
}, { silent: false });
return res;
},
async getIsJoin (id) {
const res = await request(apiArr.isJoin, "POST", {
community_id: Number(id)
}, { silent: false });
return res;
},
async init(id) {
uni.showLoading({
title: '加载中',
mask: true
})
const [res, isJoinRes] = await Promise.all([
this.getInfo(id),
this.getIsJoin(id),
])
const newInfo = {
...res,
swiperList: res?.swiper_img ? res?.swiper_img.split(',').map((item) => picUrl+item): [],
}
console.log('newInfo', newInfo);
let navList = this.navList
navList[0].url = `/packages/community/applyOwer/index?id=${Number(id)}&title=${res.name}`;
navList[1].url = `/packages/community/mycar/index?id=${Number(id)}&title=${res.name}`;
this.info = newInfo;
this.navList = navList;
this.isJoin = isJoinRes.is_join;
uni.hideLoading();
uni.setNavigationBarTitle({
title: newInfo.name,
})
// 小区通知
const tipsRes = await request(apiArr.tipsList, 'POST', {
community_id: Number(id),
page_num: 1,
page_size: 10,
})
this.tipsList = tipsRes?.rows || []
},
NotOpen() {
uni.showModal({
title: '提示',
content: '此功能暂未开通！',
showCancel: false,
})
return
},
// 通知栏点击跳转
headerTipsClick() {
NavgateTo(`/packages/community/notice/index?id=${this.id}&title=${this.pageTitle}`, { isLogin: false })
},
// 宫格item点击
headerNavClick(event) {
const { pageTitle } = this;
if(!event.url) {
this.NotOpen();
return
}
NavgateTo( `${event.url}?title=${pageTitle}`)
},
repair(){
NavgateTo(`/packages/community/oneRepair/index`)
},
ReparirList(){
NavgateTo(`/packages/community/repairList/index?id=${this.id}&title=${this.info.name}`)
},
},
}
</script>
<style>
@import url("./index.css");
</style>
Reference in New Issue View Git Blame Copy Permalink