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
			}
		},
		onLoad(e){
			this.activity_id = e.activity_id;
			console.log('接受的id',this.activity_id)
		},
		methods: {
			confirm(){
				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.$msg('报名成功').then(() => {
				        			this.$toBack();
				        		})
				            } else {
				                wx.showModal({
				                    content: res.data.message || '人数爆满,请稍后重试!',
				                    showCancel: false,
									success: (res) => {
										this.$toBack();
									}
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message || '人数爆满,请稍后重试!',
				                showCancel: false,
								success: (res) => {
									this.$toBack();
								}
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        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>