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">
						教研室标签：{{ 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="applyname" />
						</view>
						<view class="name  sZw-font">
							联系方式:
							<input 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: '',
				
				
				
				
				// 获取的渲染数据
				actItemList: {},
				
				typetext: '',
				isButtonDisabled: false,
			};
		},
		methods: {
			button1Action() {
				this.applyname = ''
				this.phone = ''
				this.stations = ''
			},
			// 确定按钮显示弹窗
			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'})
				
				this.showPopup=true
			},
			// 确定报名
			gotoSign() {
				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.showPopup=false
					uni.navigateTo({
						url:'/pages/Sign/Sign'
					})
				})	
			},

			// 获取页面数据
			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>