xinjiangMiniProgram/pages/tabbar/index/index.vue

<template>
	<view class="content ">
		<view class="status_bar"></view>
		<up-navbar leftText=" " title="事务通" :safeAreaInsetTop="false" :autoBack="false" :fixed="false">
			<template #left>
				<view class=""></view>
			</template>
		</up-navbar>
		<view class="padding">
			<view class="banner1">
				<image :src="imgUrl + 'homebanner.png'"  mode="widthFix"></image>
			</view>
			<view class="myhome">
				<view class="flex-b">
					<view class="h2">我的房屋</view>
					<view class="btn" @click="goHome('/pages/subPage/authentication/authentication')">关联房屋</view>
				</view>

				<view class="borderCard" @click="$goPage('/pages/subPage/login/login')" v-if="!counterStore.token">
					<view class="flex">
						<view class="text2">立即登录</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="text3">登录成功即可关联房屋~</view>
					<view class="banner3">
						<image :src="imgUrl + 'homebanner3.png'" mode="widthFix"></image>
						<!-- <image src="@/static/images/homebanner3.png" mode=""></image> -->
					</view>
				</view>

				<view class="borderCard" v-if="myHouse.length">
					<view class="" v-for="(item, index) in myHouse" :key="index">
						<view class="text">房屋地址：{{ item.roomAddress}}</view>
						<view class="text">房屋面积：{{ item.roomSize }}</view>
					</view>
					<view class="banner3">
						<!-- <image src="@/static/images/homebanner3.png" mode=""></image> -->
						<image :src="imgUrl + 'homebanner3.png'" mode="widthFix"></image>
					</view>
				</view>

			</view>

			<view class="severCon">
				<view class="h1pad">
					<view class="h1" >服务</view>
				</view>
				<view class="banner2" @click="goSever('/pages/subPage/ballots/ballotsList/ballotsList')">
					<!-- <image src="@/static/images/homebanner2.png" mode=""></image> -->
					<image :src="imgUrl + 'homebanner2.png'"  mode="widthFix"></image>
				</view>
			</view>

			<view class="noticeCon">
				<view class="h1pad flex-b">
					<view class="h1">公示公告</view>
					<view class="more" @click="$goPage('/pages/subPage/notice/notice')">
						<view class="txt">更多</view>
						<view class="icon">
							<image src="@/static/images/arrRight.png" mode=""></image>
						</view>
					</view>
				</view>
				<notice :list="noticeList" />
			</view>
		</view>
		<up-popup :show="show" @close="show=false" mode="center" :round="10" :customStyle="{width: '90%'}" closeable>
			<view class="popCon">
				<view class="hello">你好：</view>
				<view class="p">
					欢迎来到 <text>“新疆首府公馆”</text>，为了更好的为您提供服务，请您选择房屋信息，进行业主身份认证。
				</view>
				<oneBtn text="点击认证业主" @oneBtnClick="goHome('/pages/subPage/authentication/authentication')"></oneBtn>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import siteObj from '@/config/site.config.js'
	const {
		imgUrl,
		tmplIds
	} = siteObj

	import {
		ref
	} from 'vue'
	import notice from './comp/notice.vue'
	import {
		userStore
	} from '@/store/index.js';
	const counterStore = userStore();
	import {
		getNoticeList,
		getHouses,
		appletSubscribe
	} from '@/config/api.js'

	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'


	console.log(counterStore.token)
	const show = ref(false)

	function authentication() {
		show.value = false
		uni.$u.route({
			url: '/pages/subPage/authentication/authentication'
		})
	}
	// 公告列表
	let params = ref({
		pageNo: 1,
		pageSize: 20
	})
	let noticeList = ref([])
	async function getNoticeListFn() {
		const {
			data: res
		} = await getNoticeList(params)
		noticeList.value = res.list
	}

	// 我的房子
	const myHouse = ref([])
	async function getHousesFn() {
		if (!counterStore.token) return true
		const {
			data: res
		} = await getHouses()
		if(!res.length) {
			show.value = true
			return 
		}
		myHouse.value = res
		counterStore.upDateUseInfo('myHouse', res)
	}
	// 点击投票跳转
	function goSever(url) {
		if(!myHouse.value) return
		goHome(url)
	}
	async function goHome(url) {
		if(show.value) show.value = false
		let token = counterStore.token;
		if (token) {
			const openId = counterStore.loginInfo.openId
			uni.requestSubscribeMessage({
				tmplIds,
				async success(res) {
					let acceptArr = []
					tmplIds.forEach((item) => {
						if (res[item] == 'accept') {
							acceptArr.push(item)
						}
					})
					console.log('订阅成功: ', acceptArr)
					if(!acceptArr.length) return
					await appletSubscribe({openId, templateIds: acceptArr})
					
				},
				fail(err) {
					console.log('订阅失败：', err)
				},
				complete() {
					
					uni.$u.route({
						url
					})
				}
			})
			
			
		} else {
			uni.$u.route({
				url: '/pages/subPage/login/login'
			})
		}
	}

	onPullDownRefresh(async () => {
		await getNoticeListFn()
		await getHousesFn()
		uni.stopPullDownRefresh()
	})

	onShow(() => {
		getNoticeListFn()
		getHousesFn()
		
	})
</script>

<style lang="scss" scoped>
	.h1pad {
		padding: 30rpx 0 20rpx 0;
	}

	.popCon {
		padding: 60rpx 40rpx;
		color: #333;

		.hello {
			font-size: 36rpx;
			font-weight: 700;
		}

		.p {
			font-size: 28rpx;
			padding: 30rpx 0 60rpx 0;

			text {
				color: $themC;
			}
		}
	}

	image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		padding: 0rpx 0 100rpx 0;

		.banner1 {
			width: 100%;
			// height: 260rpx;
		}

		.myhome {
			width: 100%;
			margin-top: 40rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 14rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 0 30rpx 0rpx 30rpx;
			overflow: auto;
			.flex-b {
				width: 100%;
				height: 94rpx;

				.h2 {
					font-size: 36rpx;
					color: #333;
					font-weight: 700;
				}

				.btn {
					width: 132rpx;
					height: 44rpx;
					background: #DE3A26;
					border-radius: 22rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					color: #fff;
					text-align: center;

				}
			}

			.borderCard {
				width: 100%;
				border-radius: 20rpx;
				border: 2rpx solid #EFEFEF;
				padding: 40rpx 20rpx 0rpx 30rpx;
				margin-top: 15rpx;
				margin-bottom: 30rpx;
				.text {
					font-size: 28rpx;
					margin-bottom: 24rpx;
				}

				.text2 {
					font-size: 36rpx;
					font-weight: bold;

				}

				.text3 {
					color: #999;
					margin-top: 20rpx;
				}

				.banner3 {
					width: 255rpx;
					height: 142rpx;
					margin-left: auto;
				}
			}
		}

		.severCon {
			.banner2 {
				width: 100%;
				// height: 180rpx;
			}
		}

		.noticeCon {
			.h1pad {
				.more {
					display: flex;
					align-items: center;

					.txt {
						font-size: 28rpx;
						color: #CCCCCC;
					}

					.icon {
						width: 12rpx;
						height: 22rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>