xinjiangMiniProgram/pages/tabbar/index/index.vue

<template>
	<view class="content ">
		<up-navbar leftText=" " title="事务通" :safeAreaInsetTop="false" :autoBack="false">
			<template #left>
				<view class=""></view>
			</template>
		</up-navbar>
		<view class="padding">
			<view class="banner1">
				<image :src="imgUrl + 'homebanner.png'" mode=""></image>
			</view>
			<view class="myhome">
				<view class="flex-b">
					<view class="h2">我的房屋</view>
					<view class="btn" @click="goHome">关联房屋</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=""></image>
						<!-- <image src="@/static/images/homebanner3.png" mode=""></image> -->
					</view>
				</view>
				
				<view class="borderCard"  v-if="counterStore.token">
					<view class="text">房屋地址：新疆首府公馆一期住宅1-1-101</view>
					<view class="text">房屋面积：156.32㎡</view>
					<view class="banner3">
						<!-- <image src="@/static/images/homebanner3.png" mode=""></image> -->
						<image :src="imgUrl + 'homebanner3.png'" mode=""></image>
					</view>
				</view>
				
			</view>

			<view class="severCon">
				<view class="h1pad">
					<view class="h1">服务</view>
				</view>
				<view class="banner2" @click="$goPage('/pages/subPage/ballots/ballotsList/ballotsList')">
					<!-- <image src="@/static/images/homebanner2.png" mode=""></image> -->
					<image :src="imgUrl + 'homebanner2.png'" mode=""></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="点击认证业主" @click.native="authentication"></oneBtn>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import siteObj from '@/config/site.config.js'
	const {imgUrl} = siteObj
	
	import {
		ref
	} from 'vue'
	import notice from './comp/notice.vue'
	import {
		userStore
	} from '@/store/index.js';
	import { getNoticeList } from '@/config/api.js'
	
	import {
			onLoad,
			onShow,
			onPullDownRefresh,
			onReachBottom
		} from '@dcloudio/uni-app'
	

	const counterStore = userStore();
	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
	}
	getNoticeListFn()
	
	function goHome() {
		let token = counterStore.token;
		if(token) {
			uni.$u.route({
				url: '/pages/subPage/authentication/authentication'
			})
		}else {
			uni.$u.route({
				url: '/pages/subPage/login/login'
			})
		}
	}
	
	onPullDownRefresh(()=>{
		getNoticeListFn()
	})
</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: 90rpx 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 30rpx 30rpx;

			.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 0 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>