ec.uniapp-master/pages/index/activity/confirm.vue

<template>
	<view>
		<lf-nav title="确认报名" :showIcon="true"></lf-nav>
		<view class="content">
			<view class="title">联系人信息</view>
			<view class="list">
				<view class="label">姓名</view>
				<input v-model="name" class="input" placeholder="请输入您的姓名" />
			</view>
			<view class="list">
				<view class="label">手机号</view>
				<input v-model="phone" class="input" placeholder="请输入您的手机号" maxlength="11" />
			</view>
		</view>
		<view class="fixed-btn" hover-class="lf-opacity" @click="confirm">确认报名（免费）</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				name: '',
				phone: '',
				activity_id: 0,
				clickContinue: true
			}
		},
		onLoad(e){
			this.activity_id = e.activity_id;
			console.log('接受的id',this.activity_id)
		},
		methods: {
			confirm(){
				if(this.clickContinue == true) {
					this.clickContinue = false;
					if(!this.name || !this.phone) return this.$msg('请将信息补充完整');
					
					this.$http
					    .post({
					        api: 'api/activity/apply',
							data: {
								activity_id: this.activity_id,
								name: this.name,
								phone: this.phone
							},
							header: {
							    Authorization: this.$cookieStorage.get('user_token')
							},
					    })
					    .then(res => {
					        if (res.data.code == 200) {
					            if (res.data.status) {
									this.clickContinue = true;
					        		this.$msg('报名成功').then(() => {
					        			this.$toBack();
					        		})
					            } else {
									this.clickContinue = true;
					                wx.showModal({
					                    content: res.data.message || '人数爆满,请稍后重试!',
					                    showCancel: false,
										success: (res) => {
											this.$toBack();
										}
					                });
					            }
					        } else {
								this.clickContinue = true;
					            wx.showModal({
					                content: res.data.message || '人数爆满,请稍后重试!',
					                showCancel: false,
									success: (res) => {
										this.$toBack();
									}
					            });
					        }
					        wx.hideLoading();
					    })
					    .catch(() => {
							this.clickContinue = true;
					        wx.hideLoading();
					        wx.showModal({
					            content: '请求失败',
					            showCancel: false
					        });
					    });
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		width: 750rpx;
		height: max-content;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		.title{
			font-size: 32rpx;
			color: #222222;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.list{
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #e5e5e5;
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			.label{
				width: 130rpx;
				font-size: 28rpx;
				color: #777777;
			}
			.input{
				width: 554rpx;
				font-size: 28rpx;
			}
		}
	}
	.fixed-btn{
		position: fixed;
		bottom: 10vh;
		left: calc(50% - 275rpx);
		width: 550rpx;
		height: 100rpx;
		background-color: #15716E;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
</style>