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="11" 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="15" 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 :disabled="isButtonDisabled" :style="isButtonDisabled ? 'background-color:#87CEFA;' : 'background-colo:#0056a8;'" @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: '',
				isButtonDisabled: false,
			};
		},
		methods: {
			button1Action() {
				this.nickname = ''
				this.telephone = ''
				this.units = ''
			},
			gotoSign() {
				// 这里添加按钮2点击后触发的动作
				if (this.nickname.trim() === '' || this.telephone.trim() === '') {
					uni.showToast({
						title: '请填写完整的表单内容',
						icon: 'none'
					});
					return;
				}
				let data = {
					acId: this.actItemList[0].acId,
					openid: uni.getStorageSync('oId'),
					acName: this.actItemList[0].acName,
					brief: this.actItemList[0].brief,
					pic: this.actItemList[0].pic,
					pers: this.actItemList[0].pers,
					acshape: this.actItemList[0].acshape,
					// create_at:this.actItemList[0].create_at,
					address: this.actItemList[0].address,
					type: this.actItemList[0].type,
					begin_at: this.actItemList[0].begin_at,
					endTime: this.actItemList[0].endTime,
					cost: this.actItemList[0].cost
				}
				console.log(data);
				console.log('1111');
				console.log(this.actItemList[0].acId);
				this.$request('/insertActivityEnroll', "POST", data).then(res => {
					console.log(res);
					uni.navigateTo({
						url: '/pages/Sign/Sign'
					})
				})
				
			},
			mapTypeToText(type) {
				if (type === 0) {
					return "直播活动";
				} else if (type === 1) {
					return "常规教研活动";
				} else {
					return "专题教研活动";
				}
			},
			enrollPublisher(clickedAcId) {
				this.$request('/selectPublisher', "POST", {
					openid: uni.getStorageSync('oId'),
					acId: clickedAcId,
				}).then(res => {
					const openid = uni.getStorageSync('oId')
					console.log(res[0][0].openid);
					if (openid === res[0][0].openid) {
						uni.showToast({
							title: '您是该活动的发布者，不能报名',
							icon: 'none'
						});
						this.isButtonDisabled = true
						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);
					const clickedAcId = this.actItemList[0].acId;
					this.enrollPublisher(clickedAcId)
				})
			},
		},
		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>