teaching-uniapp/pages/jys/jys.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.username }}
					</view>
					<view class="col sZw-font">
						教研室标签：{{ typetext }}
					</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: [],
				typetext: ''
			};
		},
		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'
				})
			},
			mapTypeToText(type) {
				if (type === 0) {
					return "直播活动";
				} else if (type === 1) {
					return "常规教研活动";
				} else {
					return "专题教研活动";
				}
			},
			getActivity() {
				// 获取当前页面的URL
				const routes = getCurrentPages();
				console.log(routes);
				const acId = routes[2].options.acId
				let data = {
					acId: acId,
					ty: 2
				}
				this.$request('/selectActivityID', "POST", data).then(res => {
					console.log(res[0]);
					// this.activeList=[...this.activeList,...res[0]]
					this.actItemList = res[0]
					this.typetext = this.mapTypeToText(this.actItemList.type);
				})
			},
		},
		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>