teaching-uniapp/pages/hd/hd.vue

<template>
	<view class="hd">
		<statusBar :item="navBarData"></statusBar>
		
		<view class="top" v-for="(item,index) in actItemList" :key="index">
				<view class="card">
					<image class="image" :src="item.pic" mode="aspectFill"></image>
					<view class="text">
						
						<view class="text_title">
							<view class="manage bqZ-font">类型</view>
							<view class="t1 bmTit-font">{{ item.acName }}</view>
						</view>
						<view class="col sZw-font">
							活动日期：{{ item.begin_at }}~{{ item.endTime }}
						</view>
						<view class="col sZw-font">
							招募人数：0/{{ item.pers }}
						</view>
					</view>
				</view>
		</view>
		
		<!-- <uni-card :is-shadow="false"> -->
			<view class="xinxi">
				<view class="card2">
					<view class="hdxx">
						<view class="xxTit btn-font">活动信息</view>
						<view class="textcolor">
							<view class="name  sZw-font">
								姓名:
								<input type="text" style=" text-align: right;" maxlength="10" placeholder="请输入姓名"
									placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" v-model="nickname" />
							</view>
							<view class="name  sZw-font">
								联系方式:
								<input type="text" style=" text-align: right;" maxlength="10" placeholder="请输入联系方式"
									placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" v-model="telephone" />
							</view>
							<view class="name  sZw-font">
								单位:
								<input type="text" style=" text-align: right;" maxlength="10" placeholder="请输入单位"
									placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" v-model="units" />
							</view>
						</view>
					</view>
				</view>
			</view>
		<!-- </uni-card> -->
		<view class="buttons">
			<view class="button-container">
				<button @click="button1Action" class="btn1 sZw-font">清空填写信息</button>
				<!-- <text class="button-spacing"></text> -->
				<!-- 添加间距 -->
				<button @click="gotoSign" class="btn2 sZw-font">申请加入</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBarData: {
				title: '活动报名',
				btn: 1
			},
			nickname: '',
			telephone: '',
			units: '',
			actItemList:[]
		};
	},
	methods: {
		button1Action() {
			this.nickname = ''
			this.telephone = ''
			this.units = ''
		},
		gotoSign() {
			// 这里添加按钮2点击后触发的动作
			if(this.nickname.trim() === '' || this.telephone.trim() === '') {
				uni.showToast({
					title: '请填写完整的表单内容',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/Sign/Sign'
			})
		},
		getActivity() {
			// 获取当前页面的URL
			const routes = getCurrentPages();
			console.log(routes);
			const acId = routes[2].options.acId
			let data = {
				acId: acId,
				ty: 1
			}
			this.$request('/selectActivityID', "POST", data).then(res => {
				console.log(res[0]);
				// this.activeList=[...this.activeList,...res[0]]
				this.actItemList = res[0]
			})
		},
	},
	onShow() {
		this.getActivity()
	}
};
</script>

<style lang="scss" scoped>
.hd {
	.top{
		width: 690rpx;
		height: 192rpx;
		background-color: #ffffff;
		margin: auto;
		margin-top: 30rpx;
		// padding: 24rpx;
		padding: 16rpx 24rpx;
		border-radius: 10rpx;
		.col{
			color: #999999;
		}
	}
	.card {
		// margin-top: 40rpx;
		display: flex;
		.image {
			flex-shrink: 0;
			width: 160rpx;
			height: 160rpx;
			border-radius: 4px;
		}
		
		.text {
			margin-left: 10px; // 增加一点空间
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.text_title {
				display: flex;
				align-items: center;
				.manage {
					// padding:4rpx 12rpx 4rpx 12rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 68rpx;
					height: 36rpx;
					border-radius: 5rpx;
					color: #00b2b6;
					border: 1px solid #00b2b6;
					// border-radius: 10rpx;
					margin-right: 10rpx;
				}
				.t1 {
					color: black;
					width: 350rpx;
					font-weight: 550;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
				}
			}

		}
	}
	.xinxi{
		background-color: #ffffff;
		width: 690rpx;
		// height: 272rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 20rpx 24rpx;
		border-radius: 12rpx;
	}
	.hdxx {
		.xxTit {
			color: black;
			// font-size: 18px;
			// font-weight: 400px;
			line-height: 42px;
		}
		.textcolor {
			color: #999999;
			line-height: 42px;
			.name {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.nickname {
					width: 350rpx;
					text-align: end;
					// padding-right: 10rpx;
					// margin-right: 10rpx;
					font-size: 28rpx;
					color: rgb(153, 153, 153);
				}
			}
		}
	}
	.buttons {
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 137rpx;
		// padding-bottom: 50rpx;
		// font-size: 30rpx;
		.button-container {
			width: 100%;
			display: flex;
			justify-content: space-around;
			.btn1{
				width: 326rpx;
				height: 71rpx;
				border: 1px solid #666666;
				border-radius: 50px;
				height: 70rpx;
				line-height: 70rpx;
				// font-size: 35rpx;
				color: #666666;
			}
			.btn2{
				width: 326rpx;
				height: 71rpx;
				background-color: #0056a8;
				border-radius: 50px;
				height: 70rpx;
				line-height: 70rpx;
				color: #ffffff;
			}
		}
		
		
	}
}
</style>