szgb-book-wx/pages/activity/book.vue

<template>
	<view>
		<view class="content">
			<view class="box-card">
				<view class="box-card-title">
					预约的活动
				</view>
				<view class="box-card-content">
				</view>

			</view>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
				<view class="box-card">
					<view class="box-card-title">
						参与人员
					</view>
					<view class="box-card-content">
						<u-form-item label="参与人数" labelWidth="120" prop="from.number" ref="number">
							<u-number-box slot="right" inputWidth="44" color="#EF9525" bgColor="#FCF6E3" :min="1"
								:max="100" class="plus"></u-number-box>
						</u-form-item>
						<view class="box-visitor">
							<block v-for="(item,index) in listVistor" :key="index">

								<view class="box-visitor-item">
									<view class="box-visitor-item-left">
										<u-icon name="minus-circle" size="22" color="#828282"></u-icon>
										<view class="box-visitor-info">
											<view>li王小华u</view>
											<view>320505200102050349</view>
										</view>
									</view>
									<view class="box-visitor-item-right">
										<u-icon name="edit-pen" size="24" color="#828282"></u-icon>
									</view>
								</view>
							</block>
						</view>

						<view class="box-footer">
							<view class="box-footer-left">
								<view class="box-button" @click="openAdd">
									<u-icon name="plus" color="#EF9525"></u-icon>
									<text class="box-button-txt">添加参与人员</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box-card">
					<view class="box-card-title">
						联系人信息
					</view>
					<view class="box-card-content">
						<u-form-item label="单位名称" labelWidth="80" prop="from.number" ref="number">
							<u-input placeholder="请输入单位名称"></u-input>
						</u-form-item>
						<u-form-item label="联系人" labelWidth="80" prop="from.number" ref="number">
							<u-input placeholder="请输入联系人"></u-input>
						</u-form-item>
						<u-form-item label="手机号" labelWidth="80" prop="from.number" ref="number">
							<u-input placeholder="请输入手机号"></u-input>
						</u-form-item>
					</view>
				</view>
			</u--form>
			<view class="page-bottom">
				<u-button type="primary">确定</u-button>
			</view>
		</view>
		<u-popup :show="showAdd" mode="bottom" @close="closeAdd" @open="openAdd" :round="10" closeable>
			<view class="mpopup">
				<view class="mpopup-title">
					添加参与人员
				</view>
				<view class="mpopup-content" style="margin-top: 60rpx;">
					<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
						<u-form-item label="姓名" labelWidth="80" prop="from.number" ref="number">
							<u-input placeholder="请输入姓名"></u-input>
						</u-form-item>
						<u-form-item label="证件类型" labelWidth="80" prop="from.number" ref="number">
							<u--input placeholder="选择证件类型" suffixIcon="arrow-down-fill"
								suffixIconStyle="color: #A7A7A7;font-size:24rpx">
							</u--input>
						</u-form-item>
						<u-form-item label="证件号码" labelWidth="80" prop="from.number" ref="number">
							<u-input placeholder="请输入证件号码"></u-input>
						</u-form-item>
						<u-form-item label="手机号" labelWidth="80" prop="from.number" ref="number">
							<u-input placeholder="请输入手机号"></u-input>
						</u-form-item>
					</u--form>

					<u-button type="primary">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				rules: [],
				listVistor: [{}, {}],
				showAdd: false
			}
		},
		methods: {
			closeAdd() {
				this.showAdd = false
			},
			openAdd() {
				this.showAdd = true
			}
		}
	}
</script>

<style>
	@import url("@/static/css/bookbox.css");

	.box-visitor-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.box-visitor-item-left {
		display: flex;
	}

	.box-visitor-info {
		font-size: 24rpx;
		color: #4E4E4E;
		margin-left: 22rpx;
	}

	.box-visitor {
		margin: 32rpx 0rpx 27rpx 0rpx;
	}

	.box-footer {
		display: flex;
		justify-content: space-between;
		padding-top: 28rpx;
		border-top: 2px solid #F7F6F4;
	}

	.box-footer-left {
		display: flex;
		flex: 1;
		margin-right: 8rpx;
	}

	.box-footer-right {
		display: flex;
		flex: 1;
		margin-left: 8rpx;
	}

	.box-button-txt {
		margin-left: 20rpx;
	}

	.box-button {
		display: flex;
		background: #FCF6E3;
		border: 1px solid #EF9525;
		border-radius: 5px;
		padding: 20rpx 0rpx;
		width: 100%;
		justify-content: center;
		color: #4E4E4E;
	}

	.box-tips {
		background-color: #f7f6f4;
		height: 62rpx;
		line-height: 62rpx;
		color: #828282;
		padding: 0rpx 16rpx;
		font-size: 24rpx;
	}

	.page-bottom {
		background: #FFFFFF;
		height: 108rpx;
		box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 15rpx 25rpx;
		box-sizing: border-box;
		z-index: 1024;
	}

	.content {
		background-color: #f7f6f4;
		padding: 31rpx 26rpx;
		min-height: 100vh;
		padding-bottom: 128rpx;
	}

	.box-card {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 31rpx 18rpx;
		margin-bottom: 20rpx;
	}

	.u-form-item__body__left__content__label {

		color: #4E4E4E !important;
	}

	.box-card-title {
		font-size: 32rpx;
		color: #351C1B;
		padding-bottom: 25rpx;
		border-bottom: 2px solid #F7F6F4;
	}

	.box-card-content {}
</style>