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: ''
			}
		},
		onLoad(){
			
		},
		methods: {
			confirm(){
				if(!this.name || !this.phone) return this.$msg('请将信息补充完整');
				this.$msg('报名成功').then(() => {
					this.$toBack();
				})
			}
		}
	}
</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>