teaching-uniapp/pages/jys/jys.vue

<template>
	<view class="jys">
		<statusBar :item="navBarData"></statusBar>

		<view class="top">
			<view class="card">
				<image class="image" :src="actItemList.pic" mode="aspectFill"></image>
				<view class="text">

					<view class="text_title">
						<view class="manage bqZ-font">类型</view>
						<view class="t1 bmTit-font">{{ actItemList.acName }}</view>
					</view>
					<view class="col sZw-font">
						负责人：{{ actItemList.username }}
					</view>
					<view class="col sZw-font">
						教研室标签：暂无
					</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="applyname" />
						</view>
						<view class="name  sZw-font">
							联系方式:
							<input @input="handleInput" type="number" style=" text-align: right;" maxlength="11"
								placeholder="请输入联系方式" placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);"
								v-model="phone" />
						</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="stations" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="buttons">
			<view class="button-container">
				<button @click="button1Action" class="btn1 sZw-font">清空填写信息</button>
				<!-- <text class="button-spacing"></text> -->
				<!-- 添加间距 -->
				<button style="background-colo:#0056a8;" @click="showPop" class="btn2 sZw-font">申请加入</button>
			</view>
		</view>

		<!-- 弹窗 -->
		<view>
			<view class="mask" v-show="showPopup" @click="closePopup"></view>
			<view class="popup-container" v-show="showPopup">
				<view class="popup">
					<view class="header">
						<text>确认报名</text>
					</view>
					<view class="footer">
						<view class="cancel-btn" @click="showPopup=false">取消</view>

						<view class="confirm-btn" @click="gotoSign">确认</view>
					</view>
				</view>
			</view>
		</view>

		<view>
			<view class="mask" v-show="showPopupConfirm" @click="closePopup"></view>
			<view class="popup-container" style="height: 175px;" v-show="showPopupConfirm">
				<view class="popup">
					<view class="header" style="margin-top: 15px;">
						<image src="https://teacherapi.cocorobo.cn/teaching-file/static//gou1.png" mode="aspectFill">
						</image>
						<text style="margin-bottom: 24px;">报名成功</text>
					</view>

				</view>
			</view>
		</view>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '活动报名',
					btn: 1
				},

				//控制弹窗
				showPopup: false,
				// 成功弹窗
				showPopupConfirm: false,

				// 用户名
				applyname: '',
				// 联系方式
				phone: '',
				// 单位
				stations: '',

				// 决定你能不能报名
				isApply: false,

				// 获取的渲染数据
				actItemList: {},
			};
		},
		methods: {
			// 清空填写信息
			button1Action() {
				this.applyname = ''
				this.phone = ''
				this.stations = ''
			},
			handleInput(e) {
				const {value} = e.target
				
				const newValue = value.replace(/[^\d]/g, '') // 只允许输入数字
				
				if (newValue.length <= 11) {
					this.phone = newValue
				}
			},
			// 确定按钮显示弹窗
			showPop() {
				if (this.applyname == '') return uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				})
				if (this.phone == '') return uni.showToast({
					title: '请输入联系方式',
					icon: 'none'
				})
				if (this.stations == '') return uni.showToast({
					title: '请输入单位',
					icon: 'none'
				})
				if (this.phone.length != 11) return uni.showToast({
					title: '号码不足11位，请检查',
					icon: 'none'
				})
				this.showPopup = true
			},
			// 确定报名
			gotoSign() {
				// 做最后判断防止同一时间进入报名页面都报名成功
				this.$request('/selectIntercept', "POST", {
					oid: this.$store.state.user.openid,
					acid: this.acId
				}).then(res => {
					let c = res[0][0]
					console.log(res[0][0]);
					console.log(c.bnum >= c.pers * 1);
					if (c.bnum >= c.pers * 1) {
						return uni.showToast({
							title: '已有人先您一步报名，名额已满',
							icon: "none"
						})
					} else {
						let data = {
							oid: this.$store.state.user.openid, //用户id
							acid: this.acId,
							ty: 2,
							ume: this.applyname,
							pho: this.phone,
							sta: this.stations
						}
						this.$request('/insertSignup', "POST", data).then(res => {
							// console.log(res);

							// 添加消息页面系统通知提示报名成功
							this.addMessage()


							// 弹窗关闭
							this.showPopup = false
							uni.navigateTo({
								url: '/pages/Sign/Sign'
							})
						})
					}
				})
			},
			// 添加消息页面系统通知提示报名成功
			addMessage() {
				let data = {
					oid: this.$store.state.user.openid,
					acid: this.acId,
					type: 0,
				}
				this.$request('/insertMessage', "POST", data).then(res => {
					console.log(res);
				})
			},
			// 获取页面数据
			getActivity() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					acId: this.acId,
				}
				this.$request('/selectActivityID', "POST", data).then(res => {
					console.log(res[0]);
					this.actItemList = res[0][0]
				})
			},
		},
		onLoad(e) {
			console.log('进来了', e);
			// 接受参数
			this.acId = e.acId
			// 导航栏显示教研室报名还是活动报名
			this.navBarData.title = e.tit

			this.getActivity()
		}
	};
</script>

<style lang="scss" scoped>
	.jys {
		.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;
				}
			}


		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 999;
			overflow: hidden;
			// display: none;
		}

		.popup-container {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 520rpx;
			height: 260rpx;
			z-index: 1000;
			// display: none;

			.popup {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				background-color: #fff;
				border-radius: 16rpx;
				overflow: hidden;

				.header {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-top: 24px;
					font-size: 34rpx;
					font-weight: 600;

					image {
						width: 150rpx;
						height: 150rpx;
						margin-top: 15px;
						margin-bottom: 15px;
					}
				}

				.footer {
					width: 100%;
					display: flex;
					overflow: hidden;

					.cancel-btn {
						width: 50%;
						height: 100rpx;
						background-color: #F7F7F7;
						color: #000;
						font-size: 34rpx;
						text-align: center;
						border-bottom-left-radius: 16rpx;
						line-height: 50px;
					}

					.confirm-btn {
						width: 50%;
						height: 100rpx;
						background-color: #0081FE;
						color: #fff;
						font-size: 34rpx;
						text-align: center;
						line-height: 50px;
					}
				}
			}
		}
	}
</style>