Applet/pages/index/index.vue

<template>
	<view class="container">
		<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 list" :key="index" :border="false" @click="illnessBtn(item)">
				<image style="width: 100%; height: 90px" :src="item.url"></image>
				<text class="title">{{ item.title }}</text>
			</view>
		</uni-section>
		<uni-section titleFontSize="16px"  class="mb-10 sectionBox" title="办事指南" type="line">
			<template v-slot:right>
				<text @click="morBtn">更多>></text>
			</template>
			<uni-card class="card card2" v-for="(item, index) in policyList" :key="index" @click="policyBtn(item)">
				<image class="cover" :src="item.url"></image>
				<h2>{{ item.title }}</h2>
				<text class="cardText">{{ item.text }}</text>
			</uni-card>
		</uni-section>
	</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 {
				list: [],
				policyList: [],
				notice: '通知公告',
				autoplay: true,
				interval: 3000,
				duration: 500,
				indicatorDots: false,
				bannerList: []
			}
		},
		async mounted() {
			const config = await requestLogin.getJson();
			const { list, bannerList, policyList } = config.data;
			this.list = list;
			this.bannerList = bannerList;
			this.policyList = policyList;
			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: {
			morBtn() {
				uni.switchTab({ url: '/pages/policy/index' });
			},
			illnessBtn(e) {
				const role = uni.getStorageSync('role');
				if (e.isUser && role && role == 'guest') {
					uni.navigateTo({
						url: `/pages/user/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>
	.swiper {
		height: 150px;
		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: 16px;
	}
	.cardText {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 12px;
		margin-bottom: 5px;
		color: #999;
	}
</style>