jyred/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" v-for="(item,index) in navList" @click="navTo(item.path)">
				<view class="item-top flex">
					<image :src="'../../static/index/in' + (index + 1) + '.png'" mode=""></image>
				</view>
				<view class="">
					{{item.tit}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAed,
		getAidList,
		getRescuerList,
		sos,
	} from '@/api/category.js'
	import {
		loadIndexs,
		bannerlist,
		getListAED,
		getDistance,
		getListMechanism,
		getdis,
		tocall
	} from '@/api/index.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		userinfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				carouselList: [], //轮播
				navList: [
					{
						tit: "爱心捐款",
						path: '/pages/applic/love',
						img: '',
					},
					{
						tit: "遗体器官捐献",
						path: '/pages/form/applicationForm',
						img: '',
					},
					{
						tit: "造血干细胞捐献",
						path: '/pages/applic/appliSystem',
						img: '',
					},
					{
						tit: "红十字志愿者",
						path: '/pages/form/tovolApply',
						img: '',
					},
					{
						tit: "普及培训报名",
						path: '/pages/train/index',
						img: '',
					},
					{
						tit: "红十字会员",
						path: '/pages/cart/cat1',
						img: '',
					},
					{
						tit: "AED智能系统",
						path: '/pages/applic/aed',
						img: '',
					},
					{
						tit: "关于我们",
						path: '/pages/applic/info?id=344',
						img: '',
					},
					{
						tit: "红会科普",
						path: '/pages/applic/science',
						img: '',
					}
				]
			};
		},
		onShow() {
			saveUrl();
			console.log(11, this);
			if (!this.hasLogin) {
				// 登录拦截
				// interceptor();
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
			} else {

			}
		},
		onLoad() {
			this.loadIndex()
			saveUrl();
		},
		computed: {
			...mapState('user', ['userInfo', 'baseURL', 'hasLogin']),
			...mapState(['baseURL']),
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			loadIndex() {
				loadIndexs({}).then(({
					data
				}) => {
					console.log(data, 'index')
					this.carouselList = data.banner; //轮播图
				});
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			navTo(url) {
				if(url.indexOf('http') != -1) {
					window.location.href = url
				}else {
					uni.navigateTo({
						url,
						fail() {
							uni.switchTab({
								url
							})
						}
					});
				}
			},
		}
	};
</script>

<style lang="scss">
	.content {
		background-color: #fafbfa;
		height: 100%;
	}

	/* 头部 轮播图 */
	.carousel-section {
		overflow: hidden;
		.carousel {
			width: 706rpx;
			height: 375rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;
			image {
				width: 100%;
				height: 375rpx;
				border-radius: 20rpx;
			}
		}
	}
	
	// 分类
	.cate-section {
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 22rpx;
		font-size: 28rpx;
		font-weight: 500;
		.cate-item {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50,50,52,0.06);
			border-radius: 25rpx;
			width: 226rpx;
			margin-bottom: 22rpx;
			text-align: center;
			padding-bottom: 50rpx;
			.item-top {
				padding-top: 20rpx;
				height: 207rpx;
				align-items: center;
				justify-content: center;
				image {
					width: 112rpx;
					height: 112rpx;
				}
			}
			
		}
	}
</style>