456 lines
12 KiB
Vue
456 lines
12 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||
<div class="searchBox_add">
|
||
<div class="emptyCommunity" @click="addCommunity"> {{communityVal}} </div>
|
||
<!-- <div class="MyCommunity" v-if="false">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/community_mycommunity.png"
|
||
mode="aspectFill"></image>
|
||
<span>惠生活</span>
|
||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="swiperBox1">
|
||
<swiper @animationfinish="swipers" autoplay circular>
|
||
<swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)">
|
||
<image :src="item.ad_picture" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<view class="dot">
|
||
<view :class="['dotItem', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList"
|
||
:key="index">
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <div class="dot">
|
||
<div class="dotItem"></div>
|
||
<div class="dotItem active"></div>
|
||
</div> -->
|
||
</div>
|
||
|
||
<div class="swiperBox2">
|
||
<swiper @animationfinish="swipers" autoplay circular>
|
||
<swiper-item v-for="(item, index) in streamerList" :key="index" @click="headerServerClick(item)">
|
||
<image :src="item.ad_picture" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
</div>
|
||
|
||
<div class="funcList">
|
||
<div class="funcItem" v-for="item in functionList" @click="jump(item.mini_program_url)">
|
||
<image :src="item.nav_icon"></image>
|
||
{{ item.nav_name }}
|
||
</div>
|
||
</div>
|
||
|
||
<div v-for="(item, index) in tileList" :key="index" class="ads" @click="headerServerClick(item)">
|
||
<image :src="item.ad_picture" mode="aspectFill" />
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<div v-for="(item, index) in categoryList" :key="index"
|
||
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||
{{ item.category_name }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="newsList">
|
||
<div class="newsItem" v-for="item in infoList">
|
||
<div class="newsItem_left">
|
||
<div class="newsItem_left_tit">{{item.title}}</div>
|
||
<div class="newsItem_left_sub">{{item.author}}</div>
|
||
</div>
|
||
<div class="newsItem_right">
|
||
<image :src="item.list_image" mode="aspectFill" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tips">下拉加载后续10条，共计30条</div>
|
||
|
||
<div class="bigAds" v-if="ads1Show">
|
||
<div class="bigAdsCon">
|
||
<div class="bigAdsCon_img">
|
||
<swiper @animationfinish="swipers" autoplay circular>
|
||
<swiper-item v-for="(item, index) in largePopList" :key="index"
|
||
@click="headerServerClick(item)">
|
||
<image :src="item.ad_picture" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
</div>
|
||
<div class="close" @click="closeAds">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_close.png">
|
||
</image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bigAds" v-if="ads2Show">
|
||
<div class="bigAdsCon2">
|
||
<div class="bigAdsCon2_img">
|
||
<swiper :current="currentSwiperIndex" @change="onSwiperChange" @animationfinish="swipers" autoplay
|
||
circular>
|
||
<swiper-item v-for="(item, index) in popList" :key="index">
|
||
<image :src="item.ad_picture" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
</div>
|
||
<div class="AdsBtnList">
|
||
<div class="AdsBtnItem1" @click="closeAds2">取消</div>
|
||
<div class="AdsBtnItem2" @click="onDetailClick">了解详情</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<nav-footer :current="1" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
uniqueByField,
|
||
menuButtonInfo,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
|
||
import {
|
||
apiArr
|
||
} from '../../../api/v2Community';
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
communityVal: '添加我的房产',
|
||
picUrl,
|
||
top: "",
|
||
localHeight: "",
|
||
queryPage: {
|
||
page_num: 1,
|
||
page_size: 10,
|
||
},
|
||
communityList: [],
|
||
flag: false,
|
||
|
||
functionList: [],
|
||
|
||
ads1Show: false,
|
||
ads2Show: false,
|
||
|
||
bannerList: [], //轮播图广告
|
||
currentIdx: 0,
|
||
streamerList: [], //横幅广告
|
||
tileList: [], //平铺广告
|
||
largePopList: [], //巨幅弹屏广告
|
||
popList: [], //弹屏广告
|
||
|
||
categoryList: [],
|
||
infoList: [],
|
||
selectedTab: 0,
|
||
|
||
currentAdIndex: 0,
|
||
|
||
rowNum: 0,
|
||
colNum: 0,
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
// this.top = meun.height + meun.top;
|
||
this.localHeight = meun.height;
|
||
// this.getCommunityList()
|
||
this.communityVal = uni.getStorageSync('changeCommData').name
|
||
await this.getfunctionNum()
|
||
this.getAdvertising()
|
||
this.getCategoryList()
|
||
},
|
||
|
||
|
||
methods: {
|
||
desc() {
|
||
NavgateTo("../communityDetail/index")
|
||
},
|
||
apply() {
|
||
NavgateTo("../applyOwer/index")
|
||
},
|
||
closeAds() {
|
||
this.ads1Show = false
|
||
},
|
||
closeAds2() {
|
||
this.ads2Show = false
|
||
},
|
||
jump(e) {
|
||
console.log(e);
|
||
NavgateTo(e)
|
||
},
|
||
|
||
addCommunity() {
|
||
NavgateTo("/packages/community/myCommunity/index")
|
||
},
|
||
|
||
// getCommunityList() {
|
||
// let that = this
|
||
// request(apiArr.getCommunityList, 'POST', {
|
||
// page_num: that.queryPage.page_num,
|
||
// page_size: that.queryPage.page_size,
|
||
// user_id:""
|
||
// }).then(res => {
|
||
// console.log(res)
|
||
// if (res.rows.length == that.queryPage.page_size) {
|
||
// that.queryPage.page_num++
|
||
// that.flag = true
|
||
// that.communityList = that.communityList.concat(res.rows)
|
||
// }else{
|
||
// that.flag = false
|
||
// that.communityList = that.communityList.concat(res.rows)
|
||
// }
|
||
// })
|
||
// },
|
||
swipers(event) {
|
||
// 获取当前轮播图索引
|
||
this.currentIdx = event.detail.current;
|
||
},
|
||
|
||
async getfunctionNum() {
|
||
const res = await request(apiArr.commInfo, "POST", {}, {
|
||
slice: false
|
||
});
|
||
this.rowNum = res.nav_row_num_comm
|
||
this.colNum = res.nav_row_total_comm
|
||
return await this.getfunctionList()
|
||
},
|
||
|
||
// async getfunctionList() {
|
||
// const res = await request(apiArr.navPage, "POST", {
|
||
// community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
// page_num: 1,
|
||
// page_size: 50
|
||
// })
|
||
// this.functionList = res.rows.map(item => {
|
||
// return {
|
||
// ...item,
|
||
// nav_icon: picUrl + item.nav_icon
|
||
// };
|
||
// });
|
||
// console.log(this.functionList)
|
||
// },
|
||
async getfunctionList() {
|
||
const res = await request(apiArr.navPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
page_num: 1,
|
||
page_size: 50
|
||
});
|
||
// 获取 rowNum 和 colNum 的乘积
|
||
const totalItems = this.rowNum * this.colNum;
|
||
// 使用 slice 方法截取前 totalItems 个元素
|
||
this.functionList = res.rows.slice(0, totalItems).map(item => {
|
||
return {
|
||
...item,
|
||
nav_icon: picUrl + item.nav_icon
|
||
};
|
||
});
|
||
console.log(this.functionList);
|
||
},
|
||
|
||
async getAdvertising() {
|
||
// bannerList
|
||
// streamerList
|
||
// tileList
|
||
// largePopList
|
||
// popList
|
||
const res = await request(apiArr.advPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
ad_position: 1,
|
||
page_num: 1,
|
||
page_size: 50
|
||
})
|
||
this.bannerList = res.rows.map(item => {
|
||
return {
|
||
...item,
|
||
ad_picture: picUrl + item.ad_picture
|
||
};
|
||
});
|
||
|
||
const res2 = await request(apiArr.advPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
ad_position: 2,
|
||
page_num: 1,
|
||
page_size: 50
|
||
})
|
||
this.streamerList = res2.rows.map(item => {
|
||
return {
|
||
...item,
|
||
ad_picture: picUrl + item.ad_picture
|
||
};
|
||
});
|
||
|
||
const res3 = await request(apiArr.advPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
ad_position: 3,
|
||
page_num: 1,
|
||
page_size: 50
|
||
})
|
||
this.tileList = res3.rows.map(item => {
|
||
return {
|
||
...item,
|
||
ad_picture: picUrl + item.ad_picture
|
||
};
|
||
});
|
||
|
||
const res4 = await request(apiArr.advPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
ad_position: 4,
|
||
page_num: 1,
|
||
page_size: 50
|
||
})
|
||
this.largePopList = res4.rows.map(item => {
|
||
return {
|
||
...item,
|
||
ad_picture: picUrl + item.ad_picture
|
||
};
|
||
});
|
||
this.ads1Show = res4.rows.length !== 0 ? true : false;
|
||
|
||
const res5 = await request(apiArr.advPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
ad_position: 5,
|
||
page_num: 1,
|
||
page_size: 50
|
||
})
|
||
this.popList = res5.rows.map(item => {
|
||
return {
|
||
...item,
|
||
ad_picture: picUrl + item.ad_picture
|
||
};
|
||
});
|
||
this.ads2Show = res5.rows.length !== 0 ? true : false;
|
||
},
|
||
|
||
headerServerClick(e) {
|
||
console.log('当前点击内容', e);
|
||
if (!e.link_url) {
|
||
this.NotOpen();
|
||
return
|
||
}
|
||
if (e.link_url) {
|
||
// #ifdef APP-PLUS
|
||
uni.navigateTo({
|
||
url: '/pages/webview/webview?url=' + encodeURIComponent(e.link_url)
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
window.open(e.link_url, '_blank');
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
|
||
if (e.appid) {
|
||
uni.navigateToMiniProgram({
|
||
appId: e.appid,
|
||
path: e.link_url,
|
||
//需要传递给目标小程序的数据
|
||
extraData: {
|
||
'data1': 'test'
|
||
},
|
||
success(res) {
|
||
console.log('打开成功', res)
|
||
}
|
||
})
|
||
} else {
|
||
NavgateTo(e.link_url)
|
||
// NavgateTo('/packages/localLife/index/index')
|
||
}
|
||
// 小程序中可能需要用户手动复制链接或使用web-view
|
||
// uni.showModal({
|
||
// title: '提示',
|
||
// content: '即将打开外部链接，请复制后在浏览器中打开: ' + e.link_url,
|
||
// confirmText: '复制链接',
|
||
// success(res) {
|
||
// if (res.confirm) {
|
||
// uni.setClipboardData({
|
||
// data: e.link_url,
|
||
// success() {
|
||
// uni.showToast({
|
||
// title: '复制成功',
|
||
// icon: 'success'
|
||
// });
|
||
// }
|
||
// });
|
||
// }
|
||
// }
|
||
// });
|
||
// #endif
|
||
}
|
||
},
|
||
onSwiperChange(e) {
|
||
this.currentAdIndex = e.detail.current;
|
||
},
|
||
onDetailClick() {
|
||
console.log('1111');
|
||
// 获取当前显示的广告项
|
||
const currentAd = this.popList[this.currentAdIndex];
|
||
if (currentAd) {
|
||
this.headerServerClick(currentAd);
|
||
} else if (this.popList.length > 0) {
|
||
// 如果当前索引无效，默认使用第一项
|
||
this.headerServerClick(this.popList[0]);
|
||
}
|
||
},
|
||
|
||
NotOpen() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '此功能暂未开通！',
|
||
showCancel: false,
|
||
complete: (res) => {
|
||
if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
async getCategoryList() {
|
||
const res = await request(apiArr.categoryPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
category_code: "",
|
||
category_name: "",
|
||
page_num: 1,
|
||
page_size: 30
|
||
})
|
||
this.categoryList = res.rows
|
||
this.selectTab(0, res.rows[0])
|
||
},
|
||
|
||
async selectTab(index, item) {
|
||
this.selectedTab = index;
|
||
console.log('选中的tab:', index);
|
||
const res = await request(apiArr.infoPage, "POST", {
|
||
community_id: Number(uni.getStorageSync('changeCommData').id),
|
||
announcement_category_id: item.id,
|
||
title: '',
|
||
category_name: '',
|
||
page_num: 1,
|
||
page_size: 10,
|
||
})
|
||
this.infoList = res.rows.map(item => {
|
||
return {
|
||
...item,
|
||
list_image: picUrl + item.list_image,
|
||
};
|
||
});
|
||
}
|
||
},
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |