files/pages/index/index.vue

<template>
	<view class="begin">
		<view class="headers">
			<text class="text1">时代楷模</text>
			<view class="div" v-if="banner_title">
				{{banner_title.data.topicContent}}
			</view>
			<view class="headers_middle">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="path in banner_content">
						<view class="swiper-item">
							<image :src="`http://124.93.196.45:10091/Neusoft/times-model${path}`"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="headers_bottom">
				<view class="bottom_left">
					<text>楷模</text>
					<br>公告
				</view>
				<view class="bottom_right">
					<p>2021年河北省“最美基层高校毕业生”先进事迹发布</p>
					<p>河北省委宣传部、省人社局在“最美河北最美河北最美河北最美河北最美河北最美河北最美河北最美河北</p>
				</view>
				>
			</view>
		</view>
		<view>
			<card class="card" v-for="imagepath of imagepaths" :image_path="imagepath.path" :value="imagepath.value">
			</card>
		</view>
		<view>
			<text class="title">楷模列表</text>
			<indexpage ref="as" :end="part_nums"></indexpage>
			<button @click="showmore()">显示更多</button>
		</view>
		<view class="index_end">
			<view class="nav_bottom" v-for="(path_image,index) in endbottom" @click="gowhere(index)">
				<image :src="path_image[0]"></image>
				<p>{{path_image[1]}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import card from "../../components/card.vue"
	import indexpage from "../../components/index_page.vue"
	export default {
		components: {
			card,
			indexpage
		},
		data() {
			const imagepath = Array.from({
				length: 4
			}).map((_, x) => `../../static/a${x+1}.png`)
			const textarray = ["首页", "公益", "心得", "我的"]
			const endbottom = imagepath.map((value, index) => [value, textarray[index]])
			return {
				endbottom,
				banner_title: null,
				part_nums: 5,
				banner_content: null
			}
		},
		computed: {
			imagepaths() {
				let Path = Array.from({
					length: 6
				}, (_, x) => `../../static/c${x+1}.png`);
				let value = ["楷模列表", "英雄故事", "身边英雄", "物资捐赠", "数据分析", "更多"]
				return Path.map((path, index) => ({
					path: path,
					value: value[index]
				}))
			}
		},

		methods: {
			showmore() {
				this.part_nums = Math.min(this.part_nums + 5, 42)
			},
			async requests(updown, path) {
				let response
				if (updown == "up") {
					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
						method: "POST",
						headers: {
							"Content-Type": "application/json",
						},
						body: JSON.stringify({
							"password": "0CYdq6Hn",
							"username": "6dOMIgIU"
						})
					})
				} else if (updown == "down") {
					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
						method: "GET",
						headers: {
							"Content-Type": "application/json",
							"Authorization": (await this.requests("up", "/app/login")).token
						},
					})

				}
				const data = await response.json()
				console.log(data)
				return data
			},
			gowhere(index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: '/pages/index/voluteer'
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/index/student'
						});
						break;
				}
			}
		},
		async mounted() {
			this.banner_title = await this.requests("down", "/appNotice/app-o/modelSpirit")
			let datavalue = []
			for (let i = 1; i < 4; i++) {
				datavalue.push(this.requests("down", `/appNotice/app-o/loopMapDetail?id=${i}`))
			}
			datavalue = (await Promise.all(datavalue)).map(x => x.data.picPath)
			this.banner_content = datavalue
			console.log(datavalue)
		},
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.begin {
		background-color: rgb(221,221,221);
	}

	.text1 {
		display: block;
		text-align: center;
		font-size: 1.4rem;
		color: rgb(195, 5, 15);
		font-weight: bold;
		padding-bottom: 3%;
		background-color: #fff !important;
	}

	.headers .div {
		color: #ffffff;
		background-color: rgb(195, 5, 15);
		text-align: center;
		padding: 3%;
		font-size: 1.1rem;
	}

	.headers_middle {
		height: 25vh;
		border: 1px red solid;
		background-color: #fff !important;
	}

	.headers_middle swiper {
		height: 100%;
	}

	.headers_middle swiper .swiper-item image {
		width: 100%;
		height: 25vh;
	}

	.headers_bottom {
		height: 10vh;
		display: flex;
		margin: 5px 15px;
		align-items: center;
		border-radius: 15px;
		background-color: #fff !important;
	}

	.bottom_left {
		width: 20%;
		font-weight: bold;
		font-size: 1.3rem;
		text-align: center;
		border-right: 2px #999999 solid;

	}

	.bottom_left text {
		color: rgb(195, 5, 15);
		margin-bottom: 1%;

	}

	.bottom_right {
		width: 80%;
		height: 10vh;
		border-radius: 0px 15px 15px 0px;
	}

	.bottom_right p {
		margin-left: 5%;
	}

	.bottom_right p:first-child {
		font-size: 1.2rem;
		margin-bottom: 2%;
	}

	.bottom_right p:nth-child(2) {
		font-size: 0.9rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.headers+view {
		background-color: #fff;
		margin: 10px 15px;
		border-radius: 15px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		justify-items: center;
	}

	.card {
		width: 55%;
		text-align: center;
	}

	.headers+view+view {
		margin: 10px 15px;
		padding-bottom: 65px;
	}

	.title {
		display: block;
		border-left: 5px firebrick solid;
		font-weight: bold;
		font-size: 1.3rem;
		margin-bottom: 10px;
	}

	.index_end {
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		height:65px;
	}

	.nav_bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.nav_bottom image {
		width: 40px;
		height: 40px;
	}
	
	.nav_bottom:nth-child(1) p {
		color: #C2050F;
	}
</style>