pz/pages/index/index.vue

<template>
	<view class="container">
		<view class="banner">
			<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image src="../../static/img/banner.png" />
				</swiper-item>
			</swiper>
			<view class="swiper-dots">
				<view class="swiper-dots-item" :class="{ current: swiperCurrent + 1 === index }"
					v-for="(item, index) in swiperLength"></view>
			</view>
		</view>
		<view class="swiper-btm flex">
			<view class="btm-item flex">
				<image class="image1" src="../../static/icon/index1.png" mode=""></image>
				<view class="">实名认证</view>
			</view>
			<view class="btm-item flex">
				<image class="image2" src="../../static/icon/index2.png" mode=""></image>
				<view class="">专业培训</view>
			</view>
			<view class="btm-item flex">
				<image class="image3" src="../../static/icon/index3.png" mode=""></image>
				<view class="">代办问诊</view>
			</view>
		</view>
		<view class="main flex">
			<view class="main-item" v-for="(item, index) in pzlist" @click="navTo('/pages/index/yypz?type=' + item.id)">
				<view class="main-image">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="main-font">{{ item.name }}</view>
			</view>
		</view>
		<view class="title">
			<view class="xian"></view>
			<view class="title-font">代办服务</view>
		</view>
		<view class="dbfw flex">
			<view class="dbfw-item" v-for="(item, index) in dblist" @click="navTo('/pages/index/yydb?type=' + item.id)">
				<view class="dbfw-left">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="dbfw-right">
					<view class="dbfw-title">{{ item.name }}</view>
					<view class="dbfw-tip">{{ item.info }}</view>
				</view>
			</view>
		</view>
		<!-- <view class="title">
			<view class="xian"></view>
			<view class="title-font">关于我们</view>
		</view>
		<view class="dbfw flex">
			<view class="dbfw-item" @click="navTo('/pages/index/info?id=3')">
				<view class="dbfw-left"><image src="../../static/img/gsjs.png" mode=""></image></view>
				<view class="dbfw-right">
					<view class="dbfw-title">公司介绍</view>
					<view class="dbfw-tip">专业创造价值</view>
				</view>
			</view>
			<view class="dbfw-item" @click="navTo('/pages/index/info?id=2')">
				<view class="dbfw-left"><image src="../../static/img/xgsm.png" mode=""></image></view>
				<view class="dbfw-right">
					<view class="dbfw-title">相关说明</view>
					<view class="dbfw-tip">服务使用指南</view>
				</view>
			</view>
		</view> -->
		<view class="card" @click="navTo('/pages/index/card')">
			<image src="../../static/img/index11.png" mode=""></image>
		</view>
		<view class="title">
			<view class="xian"></view>
			<view class="title-font">新闻资讯</view>
		</view>
		<view v-for="(item, index) in dataList" :key="index" class="list" @click="navto(item)">
			<view class="img">
				<image :src="item.image_input[0]" mode=""></image>
			</view>
			<view class="right">
				<view class="r-title clamp2">{{ item.title }}</view>
				<view class="time">{{ item.add_time }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs,
		cate,
		articleList
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		mapState
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	export default {
		data() {
			return {
				carouselList: [''], //轮播图列表
				height: '',
				swiperCurrent: 0, //当前几张图
				swiperLength: 1, //轮播图总数
				dataList: [], //文章列表
				dblist: [], //代办列表
				pzlist: [] //陪诊列表
			};
		},
		computed: {
			...mapState(['loginInterceptor']),
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onLoad: function(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
		},
		onShow: function() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				interceptor();
			} else {
				this.loadData();
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						this.carouselList = data.banner;
					})
					.catch(e => {});
				cate({
					type: 1
				}).then(({
					data
				}) => {
					this.pzlist = data;
				});
				cate({
					type: 2
				}).then(({
					data
				}) => {
					this.dblist = data;
				});
				articleList({
					page: 1,
					limit: 10000
				}, 1).then(({
					data
				}) => {
					this.dataList = data;
					console.log(data, '123456');
				});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			navTo(url) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			navto(item) {
				uni.navigateTo({
					url: '/pages/index/info?id=' + item.id
				});
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 100%;
		height: auto;
		background: #ffffff;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.banner {
		width: 750rpx;
		height: 375rpx;
		position: relative;

		.carousel {
			width: 750rpx;
			height: 375rpx;

			.carousel-item {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-dots {
			position: absolute;
			bottom: 16rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;

			.swiper-dots-item {
				margin: 0 5rpx;
				width: 10rpx;
				height: 10rpx;
				background: #ffffff;
				border-radius: 50%;
			}

			.current {
				opacity: 0.71;
			}
		}
	}

	.swiper-btm {
		height: 60rpx;
		width: 750rpx;
		background-color: #ebf7f5;
		margin-bottom: 20rpx;
		font-size: 21rpx;
		font-weight: 500;
		color: #7c8584;

		.btm-item {
			flex-grow: 1;
			justify-content: center;

			.image1 {
				width: 28rpx;
				height: 24rpx;
				margin-right: 14rpx;
			}

			.image2 {
				width: 24rpx;
				height: 24rpx;
				margin-right: 14rpx;
			}

			.image3 {
				width: 28rpx;
				height: 24rpx;
				margin-right: 14rpx;
			}
		}
	}

	.main {
		margin: 30rpx auto 0;
		width: 702rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		padding: 30rpx 0 33rpx;

		.main-item {
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.main-image {
				width: 82rpx;
				height: 82rpx;
			}

			.main-font {
				margin-top: 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #262626;
			}
		}
	}

	.title {
		margin: 40rpx 0 0 24rpx;
		display: flex;
		align-items: center;

		.xian {
			width: 9rpx;
			height: 30rpx;
			background: #45bc9a;
			border-radius: 5rpx;
		}

		.title-font {
			margin-left: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #262626;
		}
	}

	.dbfw {
		margin-top: 34rpx;
		flex-wrap: wrap;
		justify-content: space-around;

		.dbfw-item {
			margin-top: 28rpx;
			width: 340rpx;
			height: 116rpx;
			background: #ffffff;
			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
			border-radius: 15rpx;
			padding: 20rpx 18rpx;
			display: flex;
			align-items: center;

			.dbfw-left {
				width: 76rpx;
				height: 76rpx;
			}

			.dbfw-right {
				margin-left: 18rpx;
				line-height: 1;

				.dbfw-title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.dbfw-tip {
					margin-top: 10rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}

	.card {
		margin: 18rpx auto 0;
		width: 750rpx;
		height: 210rpx;
	}

	.listBox {
		margin-top: 28rpx;
	}

	.list {
		margin-top: 20rpx;
		margin-bottom: 50rpx;
		padding-left: 34rpx;
		padding-right: 40rpx;
		display: flex;

		.img {
			background-color: #ffffff;
			width: 200rpx;
			height: 160rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			text-align: left;
			width: 476rpx;
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.r-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}

			.time {
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>