jp-education-student/pages/parents/activity/add.vue

<template>
	<view>
		<u-navbar title="2025迎新春活动" :is-back="false"></u-navbar>
		
		<view class="infos">
			<u-form :model="form" ref="uForm" label-width="200">
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="年龄" prop="age">
					<u-input v-model="form.age" placeholder="请输入年龄" />
				</u-form-item>
				<u-form-item label="是否为青少年宫学员" label-width="400">
					<u-radio-group v-model="radioValue" slot="right">
						<u-radio name="1">是</u-radio>
						<u-radio name="0">否</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="所在项目" prop="categoryN">
					<view style="width: 100%;" @click="show=true">
						<u-input style="pointer-events: none" type="select" v-model="form.categoryN"
							placeholder="请选择所在项目" />
					</view>
					<!-- <u-input v-model="form.categoryN" type="select" placeholder="请选择所在项目" @click="show=true" /> -->
				</u-form-item>
				<u-form-item label="家长联系方式" prop="contact">
					<u-input v-model="form.contact" placeholder="请输入家长联系方式" />
				</u-form-item>
			</u-form>
		</view>
		
		<u-select v-model="show" mode="single-column" :list="activityList" label-name="name"
			@confirm="confirm"></u-select>
			
		<view>
			<u-toast ref="uToast" />
		</view>
		
		<view class="btn">
			<button @click="submit">提 交</button>
		</view>
	</view>
</template>

<script>
	import * as activityApi from '@/apis/parents/activity.js'
	
	export default {
		data() {
			return {
				activityId: '',
				radioValue: '1',
				show: false,
				activityList: [],
				form: {
					id: '',
					name: '',
					age: '',
					isStudent: '',
					category: '',
					categoryN: '',
					contact: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					age: [{
						required: true,
						message: '请输入年龄',
						trigger: ['change', 'blur'],
					}],
					categoryN: [{
						required: true,
						message: '请选择所在项目',
						trigger: ['change', 'blur'],
					}],
					contact: [{
						required: true,
						message: '请输入家长联系方式',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onLoad(op) {
			if(op.id) {
				this.activityId = op.id;
				this.getEdit();
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			
			this.getActivityList();
		},
		methods: {
			getEdit() {
				activityApi.edit(this.activityId).then((response) => {
					this.form = response.data;
					if(this.form.isStudent) {
						this.radioValue = '1';
					} else {
						this.radioValue = '0';
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getActivityList() {
				activityApi.itemList().then((response) => {
					this.activityList = response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.radioValue == '1') {
							this.form.isStudent = true;
						} else {
							this.form.isStudent = false;
						}
						activityApi.add(this.form).then((response) => {
							this.$refs.uToast.show({
								title: '报名成功',
								type: 'success'
							})
						}).catch(error => {
							uni.showToast({
								title: error,
								icon: "none"
							})
						})
					}
				});
			},
			confirm(e) {
				this.form.category = e[0].value;
				this.form.categoryN = e[0].label;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.infos {
		padding: 0px 30rpx;
		background-color: #fff;
		margin-bottom: 24rpx;

		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
			padding: 24rpx 0;

			.title {
				color: #333333;
				font-weight: bold;

				.asterisk {
					color: rgba(244, 68, 68, 1);
				}
			}

			.value {
				color: rgba(51, 51, 51, 1);
				font-weight: bold;

				.icon {
					margin-left: 8rpx;
				}

				.add {
					color: #FF3D00;
				}

				.placeholder {
					color: #CCCCCC;
				}
			}
		}
	}

	.btn {
		padding: 20rpx 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		button {
			width: 91.4%;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
			line-height: 80rpx;

		}
	}

	/deep/uni-input {
		width: 300rpx;
		text-align: right !important;

	}

	/deep/.uni-input-placeholder {
		color: #cccccc !important;
	}
</style>