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.
646 lines
14 KiB
646 lines
14 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" v-if="userInfo.id">
|
|
<uv-icon size="30rpx" color="#fff" name="map"></uv-icon>
|
|
江华瑶族自治县
|
|
</view>
|
|
<view class="Toggle"
|
|
v-else>
|
|
</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 class="dynamics">
|
|
<view
|
|
@click="$utils.navigateTo('/pages_order/mine/allUser')"
|
|
>
|
|
当前已有{{headInfo.userNum}}位江华人入驻
|
|
</view>
|
|
</view>
|
|
<view class="dynamics intro-text">
|
|
江华便民生活好帮手
|
|
</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 class="join2" @click="join2">
|
|
订阅通知
|
|
</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="turntable-entrance" @click="goTurntable">
|
|
<view class="turntable-content">
|
|
<view class="turntable-icon">
|
|
<text class="icon">🎰</text>
|
|
<view class="shine"></view>
|
|
</view>
|
|
<view class="turntable-text">
|
|
<text class="title">幸运大转盘</text>
|
|
<text class="subtitle">天天有惊喜，转一转试试手气！</text>
|
|
</view>
|
|
<view class="turntable-arrow">
|
|
<text>→</text>
|
|
</view>
|
|
</view>
|
|
</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="$utils.navigateTo('/pages_order/mine/customerService')"
|
|
@integralDetailsOpen="$refs.integralDetailsPopup.open('bottom')" />
|
|
|
|
<!-- <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 mixinsList from '@/mixins/loadList.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,
|
|
|
|
templateIds: [
|
|
'uXZnHWrjtcX9JHlnMpdlWmzgJp71sKxCRiMn3TrE-EE',
|
|
'gTzGpOfJcYxtbvPG9OHnhbureKz5XLG8NPyECUGb2lw',
|
|
],
|
|
}
|
|
},
|
|
onLoad(query) {
|
|
if (query.shareId) {
|
|
uni.setStorageSync('shareId', query.shareId)
|
|
}
|
|
|
|
this.onSubscribeMessageTap();
|
|
// 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.onSubscribeMessageTap();
|
|
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.refreshList()
|
|
},
|
|
//订阅模版消息
|
|
onSubscribeMessageTap(){
|
|
let templateIds = [
|
|
'uXZnHWrjtcX9JHlnMpdlWmzgJp71sKxCRiMn3TrE-EE',
|
|
'gTzGpOfJcYxtbvPG9OHnhbureKz5XLG8NPyECUGb2lw',
|
|
];
|
|
console.log("======")
|
|
console.log(templateIds)
|
|
wx.requestSubscribeMessage({
|
|
tmplIds: templateIds, // 需要订阅的模板ID列表
|
|
success(res) {
|
|
console.log('订阅消息调用成功', res);
|
|
// res[tmplId] 表示用户是否同意订阅该模板ID对应的消息
|
|
// 例如：res['your_template_id_1'] === 'accept' 表示用户同意订阅
|
|
templateIds.forEach(tmplId => {
|
|
if (res[tmplId] === 'accept') {
|
|
console.log(`用户同意订阅模板ID：${tmplId}`);
|
|
// 这里可以添加用户同意后的逻辑，比如发送消息等（注意：发送消息需要在后端进行）
|
|
} else if (res[tmplId] === 'reject') {
|
|
console.log(`用户拒绝订阅模板ID：${tmplId}`);
|
|
} else {
|
|
console.log(`用户对该模板ID的订阅请求：${res[tmplId]}`); // 'ban' 表示用户被禁止订阅该模板
|
|
}
|
|
});
|
|
},
|
|
fail(err) {
|
|
console.error('订阅消息调用失败', err);
|
|
}
|
|
});
|
|
},
|
|
|
|
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
|
|
this.share.title = this.headInfo.name
|
|
}
|
|
})
|
|
},
|
|
//获取菜单
|
|
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();
|
|
// }
|
|
|
|
},
|
|
join2() {
|
|
if (!uni.getStorageSync('token')) {
|
|
uni.navigateTo({
|
|
url: '/pages_order/auth/wxLogin'
|
|
})
|
|
return
|
|
}
|
|
this.onSubscribeMessageTap();
|
|
},
|
|
getUserInfo() {
|
|
if (uni.getStorageSync('token')) {
|
|
this.$store.commit('getUserInfo')
|
|
}
|
|
},
|
|
// 跳转到大转盘页面
|
|
goTurntable() {
|
|
uni.navigateTo({
|
|
url: '/pages_order/marketing/turntable'
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</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-color: #00000052;
|
|
|
|
// 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;
|
|
}
|
|
|
|
&.intro-text {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.join2 {
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 120rpx;
|
|
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;
|
|
|
|
// 大转盘入口样式
|
|
.turntable-entrance {
|
|
margin: 20rpx;
|
|
border-radius: 20rpx;
|
|
background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%);
|
|
box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
|
animation: shine 3s infinite;
|
|
}
|
|
|
|
.turntable-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.turntable-icon {
|
|
position: relative;
|
|
margin-right: 30rpx;
|
|
|
|
.icon {
|
|
font-size: 60rpx;
|
|
display: block;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
}
|
|
|
|
.turntable-text {
|
|
flex: 1;
|
|
|
|
.title {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: 10rpx;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.subtitle {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
.turntable-arrow {
|
|
font-size: 36rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
|
|
animation: arrow-bounce 1.5s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% { left: -100%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
|
40% { transform: translateY(-10rpx); }
|
|
60% { transform: translateY(-5rpx); }
|
|
}
|
|
|
|
@keyframes arrow-bounce {
|
|
0%, 100% { transform: translateX(0); }
|
|
50% { transform: translateX(10rpx); }
|
|
}
|
|
|
|
.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>
|