瑶都万能墙
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.
 
 
 

444 lines
9.2 KiB

<template>
<view class="page">
<view>
<!-- <uv-swiper
:list="bannerList"
indicator
height="490rpx"
indicatorStyle="bottom: 100rpx;"
keyName="image"></uv-swiper> -->
<image :src="headInfo.bg" style="width: 100%;height: 490rpx;" mode="aspectFill"></image>
</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>
<view
@click="$utils.navigateTo('/pages_order/mine/allUser')"
>
{{headInfo.userNum}}江华人
</view>
</view>
<view class="dynamics">
{{headInfo.homeNum}}租房
<text>|</text>
{{headInfo.jobNum}}工作
<text>|</text>
{{headInfo.jdNum}}景点
<text>|</text>
{{headInfo.shopNum}}美食
<text>|</text>
{{headInfo.activityNum}}活动
</view> -->
<view class="dynamics">
江华便民生活好帮手
</view>
</view>
<view class="join" @click="join">
<view v-if="userInfo.idCardOpen == 0">
审核中
</view>
<view v-else-if="!userInfo.idCardOpen">
成为会员
</view>
<view v-else>
<uv-icon color="#fff" size="30rpx" name="list-dot"></uv-icon>
</view>
</view>
</view>
</view>
<view class="box">
<!-- 菜单栏 -->
<scroll-view scroll-x="true">
<view class="life">
<view class="mouse"
@click="menuClick(item.url)"
v-if="index < 9"
:key="index" v-for="(item, index) in menu">
<view class="RentingAhouseimg">
<image :src="item.icon" mode=""></image>
</view>
<view class="RentingAhouse">
{{ item.title }}
</view>
</view>
<view class="more"
v-if="menu.length > 8"
@click="menuClick(item.url)" >
<view class="RentingAhouseimg">
<image src="" mode=""></image>
</view>
<view class="RentingAhouse">
更多
</view>
</view>
</view>
</scroll-view>
<!-- 分类 -->
<view class="LabelOptions">
<uv-tabs :list="category" :activeStyle="{color : '#000', fontWeight : 900, fontSize : '36rpx'}"
lineColor="#5baaff" lineHeight="8rpx" lineWidth="60rpx" keyName="title"
@click="tabsClick"></uv-tabs>
</view>
<!-- 动态列表 -->
<view class="dynamicList">
<dynamicItem :key="index" v-for="(item, index) in list" :item="item"
@click="$utils.navigateTo('/pages_order/post/postDetail?id=' + item.id)" />
</view>
</view>
<!-- 页面浮窗 -->
<createDetailPopup @customerServiceOpen="$refs.customerServicePopup.open()"
@integralDetailsOpen="$refs.integralDetailsPopup.open('bottom')" />
<!-- 加入我们 -->
<certificationPopup ref="certificationPopup" />
<!-- 分享 -->
<sharePopup ref="sharePopup" />
<!-- 签到获取积分 -->
<signInOnePopup ref="signInOnePopup" />
<!-- 联系客服 -->
<customerServicePopup :title="headInfo.details" :image="headInfo.kefu" ref="customerServicePopup" />
<!-- 隐私协议 -->
<PrivacyAgreementPoup />
<!-- 积分规则 -->
<uv-popup ref="integralDetailsPopup" :round="30" :customStyle="{height: '60vh'}">
<view style="overflow: scroll;padding: 30rpx 20rpx;">
<uv-parse :content="headInfo.integralDetails"></uv-parse>
</view>
</uv-popup>
<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 customerServicePopup from '@/components/user/customerServicePopup.vue'
import sharePopup from '@/components/user/sharePopup.vue'
import signInOnePopup from '@/components/user/signInOnePopup.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,
customerServicePopup,
dynamicItem,
certificationPopup,
sharePopup,
signInOnePopup,
},
data() {
return {
// headInfo: {},
menu: [],
mixinsListApi: 'getPostPage',
bannerList: [],
onShowData: false,
}
},
onLoad(query) {
if (query.shareId) {
uni.setStorageSync('shareId', query.shareId)
}
this.getData()
// this.getIndexHeaderInfo()
this.$store.commit('getIndexHeaderInfo')
this.getClassifyList()
// this.getBannerList()
this.$store.commit('getCategory')
},
onShareAppMessage(res) {
return {
title: this.headInfo.name,
path: '/pages/index/index'
}
},
onShow() {
this.getUserInfo()
},
onPullDownRefresh() {
// this.getIndexHeaderInfo()
this.getClassifyList()
// this.getBannerList()
this.$store.commit('getCategory')
this.getUserInfo()
},
computed: {
...mapState(['city', 'category', 'userInfo', 'headInfo']),
},
methods: {
tabsClick(item) {
if (item.index) {
this.queryParams.classId = item.id
} else {
delete this.queryParams.classId
}
this.getData()
},
menuClick(url) {
if (!url){
uni.showToast({
title:'暂未开放,请耐心等待',
icon: 'none'
})
return
}
// 跳转页面
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
}
})
},
join() {
if (!uni.getStorageSync('token')) {
uni.navigateTo({
url: '/pages_order/auth/wxLogin'
})
return
}
// if(this.userInfo.idCardOpen == 0){
// uni.showToast({
// title: '审核中...',
// icon:'none'
// })
// }else if(!this.userInfo.idCardOpen){
// this.$refs.certificationPopup.open()
// }else{
this.$refs.sharePopup.open()
// }
},
getUserInfo() {
if (uni.getStorageSync('token')) {
this.$store.commit('getUserInfo')
}
},
}
}
</script>
<style scoped lang="scss">
.page {
position: relative;
/deep/ .uv-tabs__wrapper__scroll-view::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
}
image {
width: 100%;
height: 100%;
}
.Headbackground {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding-top: 80rpx;
// 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: 25rpx;
align-items: center;
position: relative;
.profilePicture {
width: 150rpx;
height: 150rpx;
image {
border-radius: 20rpx;
}
}
.UniversalWall {
padding: 0rpx 20rpx;
.dynamic {
font-size: 40rpx;
letter-spacing: 5rpx;
}
.dynamics {
margin-top: 20rpx;
font-size: 25rpx;
display: flex;
text {
margin: 0 10rpx;
}
}
}
.join {
position: absolute;
right: 10rpx;
top: 40rpx;
padding: 10rpx 20rpx;
background-color: $uni-color;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rpx;
}
}
}
.box {
margin-top: -70rpx;
background-color: #fff;
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
position: relative;
z-index: 9;
overflow: hidden;
.life {
display: flex;
text-align: center;
padding: 10rpx 0;
flex-wrap: wrap;
.mouse {
// margin-top: 20rpx;
width: 20%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 26rpx;
flex-shrink: 0;
.RentingAhouseimg {
margin-top: 20rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
image {
width: 70rpx;
height: 70rpx;
}
}
}
.more {
margin-top: 85rpx;
margin-left: 47rpx;
}
}
.dynamicList {
padding-top: 10rpx;
}
}
</style>