gsred/pages/index/index.vue

<template>
	<view class="content">
		<!-- 轮播 -->
		<view class="carousel-section">
			<swiper class="carousel" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in carouselList" :key="item.id">
					<image :src="baseURL + item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="cate-section flex">
			<view class="cate-item flex" @click="navTo('/pages/index/aixin')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_1.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">爱心捐款</view>
			</view>
			<view class="cate-item flex"  @click="navTo('/pages/form/applicationForm')" >
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_2.png" mode="" class="img" style="width: 110rpx;"></image>
				</view>
				<view class="item-title clamp2">遗体器官捐献</view>
			</view>
			<view class="cate-item flex"  @click="navTo('/pages/applic/appliSystem')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_3.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">造血干细胞捐献</view>
			</view>
			<view class="cate-item flex" @click="navTo('/pages/applic/info?id=337')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_4.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">志愿者报名</view>
			</view>
			<view class="cate-item flex" @click="navTo('/pages/applic/info?id=337')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_5.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">会员登记</view>
			</view>

			<view class="cate-item flex" @click="navTo('/pages/train/index')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_6.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">普及培训报名</view>
			</view>
			<!-- <view class="cate-item flex" @click="tohelpActi3">
				<view class="img-wrapper flex">
					<image src="../../static/index/index08.png" mode="" class="img"></image>
				</view>
				<view class="item-title">AED智能系统</view>
				<image src="../../static/index/in8.png" mode=""></image>
			</view> -->
			<view class="cate-item flex" @click="navTo('/pages/applic/itemred')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_7.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">红十字会基层组织</view>
			</view>
			<view class="cate-item flex" @click="navTo('/pages/applic/aid')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_8.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">救护站智能系统</view>
			</view>
			<view class="cate-item flex"  @click="navTo('/pages/applic/location')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_9.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">救在身边</view>
			</view>
			<view class="cate-item flex" @click="navTo('/pages/share/card')">
				<view class="img-wrapper flex">
					<image src="../../static/index/index_icon_10.png" mode="" class="img"></image>
				</view>
				<view class="item-title clamp2">电子名片</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				carouselList: [], //轮播
			};
		},
		onShow() {
			saveUrl();
			// let token = uni.getStorageSync('token');
			console.log(11, this);
			if (!this.hasLogin) {
				// 登录拦截
				// interceptor();
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
			} else {

				// this.loadData();
			}
		},
		onLoad() {
			this.loadIndex()
			saveUrl();


		},
		computed: {
			...mapState('user', [ 'hasLogin']),
			...mapState(['baseURL']),
		},
		// 下拉加载
		// onReachBottom() {
		// 	this.loadData();
		// },
		methods: {
			loadIndex() {
				loadIndexs({}).then(({
					data
				}) => {
					console.log(data, 'index')
					this.carouselList = data.banner; //轮播图
				});
			},
			tohelpActi3() {
				uni.navigateTo({
					url: '../applic/aed'
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

<style lang="scss">
	a {
		text-decoration: none;
		color: #5f5f5f;
	}

	.content {
		// line-height: 1;
		background-color: #ffabab;
		// padding-bottom: 60rpx;
	}


	.content {
		background-color: #f8f6f9;
		height: 100%;

		/* 头部 轮播图 */
		.carousel-section {
			// padding-top: 10px;
			overflow: hidden;
			// background-color: #fff;

			.carousel {
				width: 744rpx;
				height: 470rpx;
				margin: 0 auto;
				border-radius: 20rpx;
				overflow: hidden;

				.carousel-item {
					width: 100%;
					height: 100%;
					// padding-left: 30rpx;
					// padding-right: 30rpx;
					overflow: hidden;
				}

				image {
					width: 100%;
					height: 470rpx;
					border-radius: 20rpx;
				}
			}
		}

		// 分类
		.cate-section {
			justify-content: space-between;
			flex-wrap: wrap;
			background-color: #f8f6f9;
			padding: 20rpx 30rpx 20rpx;
			height: 100%;
			font-family: PingFang SC;

			.cate-item {
				width: 335rpx;
				min-height: 190rpx;
				background: #FFFFFF;
				box-shadow: 0 0 20rpx 0 rgba(50, 50, 52, 0.06);
				border-radius: 20rpx;
				flex-direction: column;
				text-align: center;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.img-wrapper {
					padding-top: 20rpx;
					.img {
						width: 102rpx;
						height: 102rpx;
					}
				}

				.item-title {
					margin-top: 6rpx;
					font-weight: bold;
					height:2rem;
				}
			}
		}

	}
</style>