index页面的楷模列表

components/index_page.vue

@@ -1,12 +1,11 @@
 <template>
 	<view>
-		<text class="title">楷模列表</text>
+		<view class="page" v-for="i in processedResult">
-		<view class="page" v-for="i in result">
 			<view>
 				<image :src="`http://124.93.196.45:10091/Neusoft/times-model${i[2]}`"></image>
 			</view>
 			<view>
-				<p>中宣部授予{{i[0]}}“时代楷模”楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模</p>
+				<p>中宣部授予{{i[0]}}“时代楷模”</p>
 				<p>模特姓名：{{i[0]}}</p>
 				<p>{{i[1]}}</p>
 			</view>
@@ -16,25 +15,32 @@
 
 <script>
 	export default {
+		props: {
+			end: {
+				type: Number,
+				default: 5
+			}
+		},
 		data() {
 			return {
 				result: []
 			}
 		},
-		async onLoad() {
+		computed: {
-			for (let i = 1; i < 4; i++) {
+			processedResult(){
-				this.result.push(this.requests("down", `appNotice/app-o/loopMapDetail?id=${i}`))
+				return this.result.slice(0,this.end)
 			}
-			this.result = await Promise.all(this.result);
+		},
-			this.result = this.result.map(x => [x.data.modelName, x.data.content, x.data.picPath])
+		async mounted() {
-			console.log(this.result.splice(this.result.length))
+			this.result = (await this.requests("down", `/appModel/app-o/list`)).rows
+			this.result = this.result.map(x => [x.modelName, x.content, x.picPath])
 			console.log(this.result);
 		},
 		methods: {
-			async requests(updown, path) {
+			async requests(updown = "down", path) {
 				let response
 				if (updown == "up") {
-					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model/${path}`, {
+					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
 						method: "POST",
 						headers: {
 							"Content-Type": "application/json",
@@ -45,7 +51,7 @@
 						})
 					})
 				} else if (updown == "down") {
-					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model/${path}`, {
+					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
 						method: "GET",
 						headers: {
 							"Content-Type": "application/json",
@@ -63,14 +69,6 @@
 </script>
 
 <style>
-	.title {
-		display: block;
-		border-left: 5px firebrick solid;
-		font-weight: bold;
-		font-size: 1.3rem;
-		margin-bottom: 10px;
-	}
-
 	.page {
 		border-radius: 15px;
 		background-color: #fff;
@@ -81,8 +79,8 @@
 	}
 
 	.page view:first-of-type {
-		width: 25%;
+		width: 30%;
-		height: 75%;
+		height: 95%;
 		margin: 3%;
 
 	}

pages/index/index.vue

@@ -2,12 +2,23 @@
 	<view class="begin">
 		<view class="headers">
 			<text class="text1">时代楷模</text>
-			<view class="div">
+			<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-if="banner_content">
+						<view class="swiper-item">
 
 						</view>
+					</swiper-item>
+					<swiper-item>
+						<view class="swiper-item">
+
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
 
 			<view class="headers_bottom">
 				<view class="bottom_left">
@@ -27,15 +38,9 @@
 		</view>
 		<view>
 			<text class="title">楷模列表</text>
-			<view class="page">
+			<indexpage ref="as" :end="part_nums"></indexpage>
-				<view></view>
-				<view>
-					<p>中宣部授予肖文儒“时代楷模”楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模</p>
-					<p>模特姓名：肖文儒</p>
-					<p>38年来，国家安全生产应急救援中心副主任兼工程师肖文儒参与过多次重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程</p>
-				</view>
-			</view>
 		</view>
+		<button @click="showmore()">显示更多</button>
 		<view class="index_end">
 			<view class="nav_bottom" v-for="path_image in endbottom">
 				<image :src="path_image[0]"></image>
@@ -47,9 +52,11 @@
 
 <script>
 	import card from "../../components/card.vue"
+	import indexpage from "../../components/index_page.vue"
 	export default {
 		components: {
-			card
+			card,
+			indexpage
 		},
 		data() {
 			const imagepath = Array.from({
@@ -58,8 +65,10 @@
 			const textarray = ["首页", "公益", "心得", "我的"]
 			const endbottom = imagepath.map((value, index) => [value, textarray[index]])
 			return {
-				isRed: false,
+				endbottom,
-				endbottom
+				banner_title: null,
+				part_nums: 5,
+				banner_content:null
 			}
 		},
 		computed: {
@@ -74,11 +83,43 @@
 				}))
 			}
 		},
+
 		methods: {
-			toggleColor() {
+			showmore() {
-				this.isRed = !this.isRed
+				this.part_nums = 10
+			},
+			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": "eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImJjYtrrMxSx0OvYuqZ_0UL738RhVLuq-IxBIyHH1kt0gXAANbdsg"
+						},
+					})
+			
 				}
+				const data = await response.json()
+				console.log(data)
+				return data
 			}
+		},
+		async mounted() {
+			this.banner_title = await this.requests("down","/appNotice/app-o/modelSpirit")
+			this.banner_content =await this.requests("down","/appNotice/app-o/modelSpirit")
+		},
 	}
 </script>
 
@@ -190,50 +231,6 @@
 		margin-bottom: 10px;
 	}
 
-	.page {
-		border-radius: 15px;
-		background-color: #fff;
-		height: 12vh;
-		display: flex;
-		border-radius: 15px;
-		align-items: center;
-	}
-
-	.page view:first-of-type {
-		width: 25%;
-		height: 75%;
-		margin: 3%;
-		background-color: red;
-	}
-
-
-	.page view:nth-child(2) {
-		width: 75%;
-	}
-
-	.page view:nth-child(2) p:first-of-type {
-		font-size: 1.2rem;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.page view:nth-child(2) p:nth-child(2) {
-		font-size: 0.9rem;
-
-	}
-
-	.page view:nth-child(2) p:nth-child(3) {
-		width: 100%;
-		font-size: 0.9rem;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		word-break: break-word;
-	}
-
 	.index_end {
 		display: flex;
 		justify-content: space-around;