learn_applet/pagesMy/account/path/teacher.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">
						<picker mode="date" @change="bindDateChange">
							<view class="picker">{{form.birth||'请选择出生日期'}}</view>
						</picker>
						<span v-if="errors.birth" class="error-message">{{ errors.birth }}</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="educationChange" :range="educationList" range-key='label'>
							<view class="picker">{{form.education_name||'请选择学历'}}</view>
						</picker>
						<span v-if="errors.education" class="error-message">{{ errors.education }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">院校</view>
					<view class="label">
						<input name="college" class="input" :value="form.college" placeholder="请输入院校" />
						<span v-if="errors.college" class="error-message">{{ errors.college }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">学业状态</view>
					<view class="label">
						<picker @change="learnStatusChange" :range="learnStatusList" range-key='label'>
							<view class="picker">{{form.learnStatus_name||'请选择学业状态'}}</view>
						</picker>
					</view>
				</view>
				<view class="value other">
					<view class="title">是否公开</view>
					<view class="label">
						<up-radio-group v-model="form.is_show" placement="row">
							<up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in showList"
								:key="index" :label="item.label" :name="item.value">
							</up-radio>
						</up-radio-group>
						<span v-if="errors.is_show" class="error-message">{{ errors.is_show }}</span>
					</view>
				</view>
				<view class="brief other margin">
					<view class="title">证件照片(身份证正反面)</view>
					<view class="label">
						<up-upload :fileList="form.card" @afterRead="afterRead" @delete="deletePic" name="card" multiple
							:maxCount="2" width="250" height="150">
							<image src="/static/positive.png" mode="widthFix"
								style="width: 250px;height: 150px;"></image>
						</up-upload>
						<span v-if="errors.card" class="error-message">{{ errors.card }}</span>
					</view>
				</view>
				<view class="brief other margin">
					<view class="title">简介</view>
					<view class="label">
						<textarea name='brief' :value="form.brief" placeholder="请输入简介" auto-height />
					</view>
				</view>
				<view class="button">
					<button type="default" 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 educationList = inject('educationList')
	const learnStatusList = inject('learnStatusList')
	const showList = inject('showList')

	const deletePic = inject('deletePic');
	const afterRead = inject('afterRead');
	const formSubmit = inject('formSubmit');
	const educationChange = inject('educationChange');
	const learnStatusChange = inject('learnStatusChange');
	const bindDateChange = inject('bindDateChange');
</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;
				}
				.error-message {
					margin: 5px 0 0 0;
					color: var(--ff0Color);
					font-size: var(--font12Size);
				}
			}

			.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>