除了数据分析和底边登录其余完成

pages/index/voluteer.vue

@@ -7,17 +7,20 @@
 			@clickItem="togglecurrent"></uni-segmented-control>
 		<view class="content">
 			<view v-show="current === 0">
-				<view class="voluteer_card">
-					<image src="../../static/c1.png"></image>
-					<p>携手防疫志愿服务活动</p>
+				<view class="voluteer_card" v-for="ever in morevalue">
+					<image :src="`http://124.93.196.45:10091/Neusoft/times-model${ever[0]}`"></image>
 					<view class="voluteer_card_bottom">
-						<p>活动时间：2022/04/15 09:00 ~ 2022/04/15 11:30</p>
-						<p>发起方：社区志愿服务队</p>
-						<p>简介：因最近疫情频繁，各大城市相继出现无症状患者，以及无症状患者无症状患者无症状患者无症状患者</p>
+						<p>{{ever[1]}}</p>
+						<p>活动时间：
+							{{ever[2]}}~ {{ever[3]}}
+						</p>
+						<p>发起方：{{ever[4]}}</p>
+						<p>简介：{{ever[5]}}</p>
 					</view>
 					<view>
 						<view>
-							<image src="../../static/component.png"></image>已报名12138人
+							<image src="../../static/baoming_icon.png"></image>
+							<text>已报名{{ever[6]}}人</text>
 						</view>
 						<view>去报名</view>
 					</view>
@@ -35,7 +38,8 @@
 		data() {
 			return {
 				current: 0,
-				value: ["全部活动", "已报名"]
+				value: ["全部活动", "已报名"],
+				morevalue: null
 			}
 		},
 		methods: {
@@ -43,16 +47,53 @@
 				if (this.current != e.currentIndex) {
 					this.current = e.currentIndex
 				}
+			},
+			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
 			}
+		},
+		async mounted() {
+			// await this.requests("down","/activity/app-o/detail?id=1")
+			this.morevalue = (await this.requests("down", "/activity/app-o/list")).rows.map(x => [x.picPath, x.title, x
+				.startDate, x.endDate, x.sponsor, x.content, x.signUpNum
+			])
+			console.log(this.morevalue);
 		}
 	}
 </script>
 
 <style>
-	/* 	.voluteer_card {} */
+	* {
+		padding: 0;
+		margin: 0;
+	}
 
 	.begin {
-		background-color: rgb(244, 244, 244);
+		background-color: rgb(246, 246, 246);
 		height: 95vh;
 		display: flex;
 		flex-direction: column;
@@ -64,4 +105,62 @@
 		text-align: center;
 
 	}
-</style>
+
+	.voluteer_card {
+		height: 40vh;
+		background-color:#fff;
+		margin: 2%;
+		border-radius: 10px;
+	}
+
+	.voluteer_card image {
+		width: 100%;
+		height: 25vh;
+		border-radius: 10px;
+	}
+
+	.voluteer_card_bottom {
+		padding: 0% 4% 2% 4%;
+	}
+
+	.voluteer_card_bottom p:nth-child(1) {
+		font-size: 1.1rem;
+	}
+
+	.voluteer_card_bottom p:not(:nth-child(1)) {
+		font-size: 0.8rem;
+		padding: 1% auto;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.voluteer_card_bottom p:last-child {
+		padding-bottom: 2%;
+		border-bottom: 1px solid rgb(220, 220, 220);
+	}
+	.voluteer_card_bottom+view{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0% 4% 2% 4%;
+	}
+	.voluteer_card_bottom+view>view:first-child{
+		display: flex;
+		justify-content: space-evenly;
+		align-items: center;
+	}
+	.voluteer_card_bottom+view>view:first-child image{
+		width: 20px;
+		height: 20px;
+	}
+	.voluteer_card_bottom+view>view:nth-child(2){
+		text-align: center;
+		line-height: 30px;
+		width: 100px;
+		height: 30px;
+		background-color: red;
+		color: white;
+		border-radius: 15px;
+	}
+</style>