learn_applet/pagesMy/account/path/student.vue

<template>
	<view class="teacher">
		<view class="one">
			<form @submit="formSubmit">
				<view class="value other" style="display: none;">
					<view class="title">id</view>
					<view class="label">
						<input name="_id" class="input" :value="form._id" placeholder="请输入id" />
					</view>
				</view>
				<view class="value icon">
					<view class="title">头像</view>
					<view class="label">
						<up-upload :fileList="form.icon" @afterRead="afterRead" @delete="deletePic" name="icon" multiple
							:maxCount="1"></up-upload>
					</view>
				</view>
				<view class="value other">
					<view class="title">昵称</view>
					<view class="label">
						<input name="nick_name" class="input" :value="form.nick_name" placeholder="请输入昵称" />
						<span v-if="errors.nick_name" class="error-message">{{ errors.nick_name }}</span>
					</view>
				</view>
				<view class="value other margin">
					<view class="title">性别</view>
					<view class="label">
						<up-radio-group v-model="form.gender" placement="row">
							<up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in genderList"
								:key="index" :label="item.label" :name="item.value">
							</up-radio>
						</up-radio-group>
						<span v-if="errors.gender" class="error-message">{{ errors.gender }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">年龄</view>
					<view class="label">
						<input name="age" class="input" :value="form.age" placeholder="请输入年龄" />
						<span v-if="errors.age" class="error-message">{{ errors.age }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">手机号</view>
					<view class="label">
						<input name="phone" class="input" :value="form.phone" placeholder="请输入手机号" />
						<span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
					</view>
				</view>
				<view class="value other margin">
					<view class="title">年级</view>
					<view class="label">
						<picker @change="gradeChange" :range="gradeList" range-key='label'>
							<view class="picker">{{form.grade_name||'请选择年级'}}</view>
						</picker>
					</view>
				</view>
				<view class="brief other margin">
					<view class="title">家庭住址</view>
					<view class="label">
						<textarea name='address' :value="form.address" placeholder="请输入家庭住址" auto-height />
					</view>
				</view>
				<view class="button">
					<button type="warn" size="mini" form-type="submit">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { inject } from 'vue';
	const form = inject('form');
	const errors = inject('errors');
	// 字典表
	const genderList = inject('genderList')
	const gradeList = inject('gradeList')

	const deletePic = inject('deletePic');
	const afterRead = inject('afterRead');
	const formSubmit = inject('formSubmit');
	const gradeChange = inject('gradeChange');
</script>
<style lang="scss" scoped>
	.teacher {
		display: flex;
		flex-direction: column;
		background-color: var(--footColor);

		.one {
			.icon {
				padding: 2vw;
			}

			.margin {
				margin: 3vw 0 0 0;
			}

			.other {
				padding: 3vw 2vw;
				border-bottom: 1px solid var(--footColor);
			}

			.value {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: var(--mainColor);

				.label {
					text-align: right;

					.input {
						text-align: right;
					}

					.image {
						width: 15vw;
						height: 15vw;
						border-radius: 20vw;
					}

					.error-message {
						margin: 5px 0 0 0;
						color: var(--ff0Color);
						font-size: var(--font12Size);
					}
				}
			}

			.brief {
				background-color: var(--mainColor);

				.title {
					margin: 0 0 2vw 0;
				}
			}

			.button {
				margin: 2vw 0 0 0;
				text-align: center;

				button {
					color: var(--mainColor);
					background-color: var(--3c9Color);
					font-size: var(--font14Size);
					border-radius: 2vw;
				}
			}
		}
	}
</style>