Applet/pages/index/index.vue

<template>
	<view class="container">
		<!-- 动画 -->
		<uni-transition ref="ani" class="dhbox" custom-class="transition" :mode-class="modeClass" v-if="dhshow" :show="dhshow" :styles="styles">
			<img src="https://fuyu.scapp.cn/static/wxa/dh.jpg" class="dhimg">
			<view class="to" @click="show">
				跳过
			</view>
		</uni-transition>
		<view v-show="!dhshow">
			<view class="page-section page-section-spacing swiper">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image style="width: 100%; height: 100%;" :src="item"></image>
					</swiper-item>
				</swiper>
			</view>
			<uni-notice-bar moreColor="#000" scrollable show-get-more show-icon :text="notice" more-text="更多>>" @getmore="getMore" />
			<!-- 党建 -->
			<uni-section titleFontSize="16px"  class="mb-10 sectionBox" title="党建引领" type="line">
				<view class="card" v-for="(item, index) in construct" :key="index" :border="false" @click="illnessBtn(item)">
					<image style="width: 50%; height: 55px; margin: 0 auto; display: block;" :src="item.url"></image>
					<text class="title">{{ item.title }}</text>
				</view>
			</uni-section>
			<!-- 治理 -->
			<uni-section titleFontSize="16px"  class="mb-10 sectionBox" title="精细治理" type="line">
				<view class="card" v-for="(item, index) in govern" :key="index" :border="false" @click="illnessBtn(item)">
					<image style="width: 50%; height: 55px; margin: 0 auto; display: block;" :src="item.url"></image>
					<text class="title">{{ item.title }}</text>
				</view>
			</uni-section>
			<!-- 疫情 -->
			<uni-section titleFontSize="16px" class="mb-10 sectionBox" title="便民服务" type="line">
				<view class="card" v-for="(item, index) in list" :key="index" :border="false" @click="illnessBtn(item)">
					<image style="width: 50%; height: 55px; margin: 0 auto; display: block;" :src="item.url"></image>
					<text class="title">{{ item.title }}</text>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import request from '../../api/system.js';
	import requestLogin from '../../api/login.js';
	const appid = uni.getAccountInfoSync().miniProgram.appId;
	export default {
		data() {
			return {
				styles: {
					width: '100vw',
					height: '100vh',
				},
				modeClass: ['fade', 'zoom-in'],
				dhshow: true,
				list: [],
				policyList: [],
				notice: '通知公告',
				autoplay: true,
				interval: 3000,
				duration: 500,
				indicatorDots: false,
				bannerList: [],
				govern: [],
				construct: [],
				timeout: null
			}
		},
		async mounted() {
			wx.hideTabBar();
			this.timeout = setTimeout(() => {
				this.show();
			}, 3000)
			const config = await requestLogin.getJson();
			const { list, bannerList, governList, construct } = config.data;
			this.list = list;
			this.bannerList = bannerList;
			this.govern = governList;
			this.construct = construct;
			const _this = this;
			wx.login({
				 success: async ({ code }) => {
					const res = await requestLogin.login({ code, appId: appid });
					if (res && res.code == 200) {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userinfo', res.data.user);
						uni.setStorageSync('role', res.data.role);
						const notice = await request.getSystemNoticeNew();
						_this.notice = notice.data?.noticeTitle;
					}
				 }
			})
		},
		methods: {
			show() {
				clearTimeout(this.timeout);
				this.dhshow = !this.dhshow;
				wx.showTabBar();
			},
			morBtn() {
				uni.switchTab({ url: '/pages/policy/index' });
			},
			illnessBtn(e) {
				const role = uni.getStorageSync('role');
				if (e.isUser && role && role == 'guest') {
					uni.navigateTo({
						url: `/pages/register/index?path=${e.path}`
					})
					return;
				}
				if (!e.path) {
					uni.showToast({
						title: '敬请期待',
						icon: 'error',
						duration: 2000,
					});
					return;
				}
				uni.navigateTo({ url: e.path });
			},
			policyBtn(e) {
				uni.navigateTo({ url: e.path });
			},
			// 查看更多
			getMore() {
				uni.navigateTo({ url: `/pages/notice/index` });
			}
		},
		onShow:function(){
			uni.removeStorageSync('policyItem')
		}
	}
</script>

<style>
	.container {
		background: #fff;
	}
	.swiper {
		height: 45vw;
		overflow: hidden;
	}
	.uni-section-content {
		display: flex;
		flex-wrap: wrap;
	}
	.card {
		margin: 10px;
		width: 29%;
		margin-right: 1%;
		
	}
	.card2 {
		width: 29%;
		margin-right: 1%;
	}
	.cover {
		display: block;
		width: 40px;
		height: 40px;
		margin: 5px auto;
	}
	.sectionBox {
		margin-bottom: 10px;
		display: block;
	}
	.sectionBox  .uni-section-content {
		display: flex;
	}
	.uni-section__content-title {
		font-weight: 600;
	}
	.uni-card {
		padding: 0 !important;
		margin: 0 !important;
	}
	.uni-card__content {
		/* padding: 0 !important; */
	}
	h2 {
		font-weight: 700;
		width: 100%;
		text-align: center;
		font-size: 16px;
	}
	.title {
		display: block;
		margin: 0 auto;
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.cardText {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 12px;
		margin-bottom: 5px;
		color: #999;
	}
	.dhbox {
		position: fixed;
		z-index: 999;
		width: 100vw;
		height: 100vh;
	}
	.dhimg {
		width: 100%;
		height: 100%;
		display: block;
	}
	.to {
		width: 60px;
		height: 20px;
		opacity: 0.8;
		background-color: #000;
		color: #fff;
		position: absolute;
		top: 10px;
		right: 10px;
		text-align: center;
		border-radius: 12px;
		font-size: 12px;
	}
</style>