You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
5.5 KiB
285 lines
5.5 KiB
<template>
|
|
<view class="page">
|
|
|
|
<view>
|
|
<uv-swiper
|
|
:list="bannerList"
|
|
indicator
|
|
height="520rpx"
|
|
indicatorStyle="bottom: 100rpx;"
|
|
keyName="image"></uv-swiper>
|
|
</view>
|
|
|
|
<!-- 瑶都万能墙 -->
|
|
<view class="Headbackground">
|
|
<view class="Toggle">
|
|
<uv-icon
|
|
size="30rpx"
|
|
color="#fff"
|
|
name="map"></uv-icon>
|
|
江华瑶族自治县
|
|
</view>
|
|
<view class="top">
|
|
<view class=" profilePicture">
|
|
<image :src="headinfo.headImage" mode=""></image>
|
|
</view>
|
|
<view class="UniversalWall">
|
|
<view class="dynamic">
|
|
{{ headinfo.name }}
|
|
</view>
|
|
|
|
<view class="dynamics">
|
|
{{headinfo.num}}动态<text>|</text>{{headinfo.userNum}}江华人
|
|
</view>
|
|
</view>
|
|
|
|
<view class="join"
|
|
@click="$refs.certificationPopup.open()">
|
|
加入
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="life">
|
|
<view class="mouse" @click="menuClick(item.url)"
|
|
:key="index"
|
|
v-for="(item, index) in menu">
|
|
<view class="RentingAhouseimg">
|
|
<image
|
|
:src="item.icon"
|
|
style="width: 90rpx;height: 90rpx;" mode=""></image>
|
|
</view>
|
|
<view class="RentingAhouse">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="LabelOptions">
|
|
<uv-tabs :list="category"
|
|
:activeStyle="{color : '#000', fontWeight : 900}"
|
|
lineColor="#5baaff"
|
|
lineHeight="8rpx"
|
|
lineWidth="50rpx"
|
|
keyName="title"
|
|
@click="tabsClick"></uv-tabs>
|
|
</view>
|
|
|
|
<dynamicItem
|
|
:key="index"
|
|
v-for="(item, index) in list"
|
|
:item="item"
|
|
/>
|
|
</view>
|
|
|
|
<createDetailPopup/>
|
|
|
|
<certificationPopup ref="certificationPopup"/>
|
|
|
|
<PrivacyAgreementPoup />
|
|
<tabber select="0" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import certificationPopup from '@/components/user/certificationPopup.vue'
|
|
import createDetailPopup from '@/components/user/createDetailPopup.vue'
|
|
import dynamicItem from '@/components/list/dynamic/dynamicItem.vue'
|
|
import mixinsList from '@/mixins/list.js'
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
mixins: [mixinsList],
|
|
components: {
|
|
tabber,
|
|
PrivacyAgreementPoup,
|
|
createDetailPopup,
|
|
dynamicItem,
|
|
certificationPopup,
|
|
},
|
|
data() {
|
|
return {
|
|
headinfo: {},
|
|
menu : [],
|
|
mixinsListApi : 'getPostPage',
|
|
bannerList : [],
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getIndexHeaderInfo()
|
|
this.getClassifyList()
|
|
this.getBannerList()
|
|
this.$store.commit('getCategory')
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getIndexHeaderInfo()
|
|
this.getClassifyList()
|
|
this.getBannerList()
|
|
this.$store.commit('getCategory')
|
|
},
|
|
computed: {
|
|
...mapState(['city', 'category']),
|
|
},
|
|
methods: {
|
|
tabsClick(item) {
|
|
if(item.index){
|
|
this.queryParams.classId = item.id
|
|
}else{
|
|
delete this.queryParams.classId
|
|
}
|
|
this.getData()
|
|
},
|
|
menuClick(url) {
|
|
// 跳转页面
|
|
if (url.includes('reLaunch:')) {
|
|
uni.reLaunch({
|
|
url : url.replace('reLaunch:', '')
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
},
|
|
//获取首页头部信息
|
|
getIndexHeaderInfo(){
|
|
this.$api('getIndexHeaderInfo',res =>{
|
|
if(res.code == 200){
|
|
this.headinfo = res.result
|
|
}
|
|
})
|
|
},
|
|
//获取菜单
|
|
getClassifyList(){
|
|
this.$api('getClassifyList',res =>{
|
|
if(res.code == 200){
|
|
this.menu = res.result
|
|
}
|
|
})
|
|
},
|
|
//获取菜单
|
|
getClassifyList(){
|
|
this.$api('getClassifyList',res =>{
|
|
if(res.code == 200){
|
|
this.menu = res.result
|
|
}
|
|
})
|
|
},
|
|
// 获取banner
|
|
getBannerList(){
|
|
this.$api('getBannerList', res =>{
|
|
if(res.code == 200){
|
|
this.bannerList = res.result
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.Headbackground {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
padding-top: 150rpx;
|
|
// background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
|
|
.Toggle{
|
|
margin: 10rpx 30rpx;
|
|
padding: 20rpx;
|
|
background-color: #00000022;
|
|
color: #fff;
|
|
border-radius: 40rpx;
|
|
width: fit-content;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
color: white;
|
|
padding: 35rpx;
|
|
align-items: center;
|
|
|
|
.profilePicture {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
image{
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.UniversalWall {
|
|
padding: 0rpx 45rpx;
|
|
|
|
.dynamic {
|
|
font-size: 40rpx;
|
|
letter-spacing: 5rpx;
|
|
}
|
|
|
|
.dynamics {
|
|
margin-top: 20rpx;
|
|
font-size: 25rpx;
|
|
|
|
text {
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.join {
|
|
width: 125rpx;
|
|
height: 50rpx;
|
|
background-color: $uni-color;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.box{
|
|
margin-top: -60rpx;
|
|
background-color: #f7f7f7;
|
|
border-top-left-radius: 40rpx;
|
|
border-top-right-radius: 40rpx;
|
|
position: relative;
|
|
z-index: 9;
|
|
.life {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
flex-wrap: wrap;
|
|
|
|
.mouse {
|
|
.RentingAhouseimg {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 15rpx;
|
|
width: 130rpx;
|
|
height: 100rpx;
|
|
background-color: #ffffff;
|
|
border-top-left-radius: 40rpx;
|
|
border-bottom-right-radius: 40rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|