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 form.details_list" :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>{{item.name}}</view>
											<view>{{item.idcard}}</view>
										</view>
									</view>
									<view class="box-visitor-item-right">
										<u-icon @click="editDetails(index)" 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.unit" ref="unit">
							<u-input placeholder="请输入单位名称"></u-input>
						</u-form-item>
						<u-form-item label="联系人" labelWidth="80" prop="from.leader" ref="leader">
							<u-input placeholder="请输入联系人"></u-input>
						</u-form-item>
						<u-form-item label="手机号" labelWidth="80" prop="from.mobile" ref="mobile">
							<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="details_form" :rules="details_rule" ref="details_form">
						<u-form-item label="姓名" labelWidth="80" prop="details_form.name" ref="details_form.name">
							<u-input v-model="details_form.name" placeholder="请输入姓名"></u-input>
						</u-form-item>
						<u-form-item @click="showCardType=true" label="证件类型" labelWidth="80" prop="details_form.card_name" ref="details_form.card_type">
							<u--input v-model="details_form.card_name" placeholder="选择证件类型" disabled suffixIcon="arrow-down-fill"
								suffixIconStyle="color: #A7A7A7;font-size:24rpx">
							</u--input>
						</u-form-item>
						<u-form-item label="证件号码" labelWidth="80" prop="details_form.idcard" ref="details_form.idcard">
							<u-input v-model="details_form.idcard" placeholder="请输入证件号码"></u-input>
						</u-form-item>
						<u-form-item label="手机号" labelWidth="80" prop="details_form.mobile" ref="details_form.mobile">
							<u-input v-model="details_form.mobile" placeholder="请输入手机号"></u-input>
						</u-form-item>
					</u--form>
					<u-action-sheet
						:show="showCardType"
						:actions="cardType"
						title="请选择证件类型"
						@close="showCardType = false"
						@select="sexSelect"
					>
					</u-action-sheet>
					<u-button type="primary" @click="pushDetails(isedit)">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					activity_id:"",
					unit:"",
					leader:"",
					card_type:"",
					idcard:"",
					total:"",
					type:"",
					details_list:[]
				},
				details_form:{
					name:"",
					card_type:"",
					card_name:"",
					idcard:"",
					mobile:""
				},
				rules: [],
				details_rule:{
					name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					]
				},
				cardType: [{
						id:1,
						name: '身份证',
					},
					{
						id:2,
						name: '护照',
					}
				],
				showAdd: false,
				showCardType:false
			}
		},
		methods: {
			closeAdd() {
				this.showAdd = false
				this.details_form={
					name:"",
					card_type:"",
					idcard:"",
					mobile:""
				}
			},
			openAdd() {
				this.showAdd = true
			},
			sexSelect(e) {
				console.log(e);
				this.details_form.card_name = e.name;
				this.details_form.card_type = e.id;
			},
			editDetails(obj){
				this.showAdd = true;
				this.details_form = this.form.details_list[obj];
				// this.pushDetails(obj);
			},
			pushDetails(obj){
				var that = this;
				this.$refs.details_form.validate().then(res => {
					uni.$u.toast('校验通过')
					if(res){
						that.form.details_list.push(that.details_form);
						this.details_form={
							name:"",
							card_type:"",
							idcard:"",
							mobile:""
						}
						this.showAdd = false;
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</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>