assess-app/page_subpack/system_setting/system_setting.vue

<template>
	<view class="total-page page-box">
		<Nav :type="1" :genre="2" :title="title" :is_fixed="true">
			<view class="sys-background-fff m-30 r-30 p-lr30">
				<view class="from-animation animate__animated animate__fadeIn" v-if="id == 2">
					<view class="p-tb30 bor-bottom-1 row-c" :class="{'apply-shake':phoneShake}">
						<text class="size-28 sys-weight-400 input-text">原密码</text>
						<en-input focus type="number" class="m-l30" placeholder="请输入原密码" v-model="loginData.phone"
							maxlength="11"></en-input>
					</view>
					<view class="p-tb30 row-c">
						<text class="size-28 sys-weight-400 input-text">新密码</text>
						<en-input type="password" class="m-l30" placeholder="请输入新密码"
							v-model="loginData.password"></en-input>
					</view>
					<view class="p-tb30 row-c">
						<text class="size-28 sys-weight-400 input-text">确认密码</text>
						<en-input type="password" class="m-l30" placeholder="请确认密码"
							v-model="loginData.password"></en-input>
					</view>
				</view>
				<view class="from-animation animate__animated animate__fadeIn" v-if="id == 3">
					<view class="p-tb30 bor-bottom-1 row-c" :class="{'apply-shake':phoneShake}">
						<text class="size-28 sys-weight-400">手机号</text>
						<en-input focus type="number" class="m-l30" placeholder="请输入手机号" v-model="loginData.phone"
							maxlength="11"></en-input>
					</view>
					<view class="p-tb30 row-c">
						<text class="size-28 sys-weight-400 p-r30">验证码</text>
						<en-input type="password" class="flex" placeholder="验证码"
							v-model="loginData.password"></en-input>
						<view class="text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode">发送验证码
						</view>
						<!-- <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>s</view> -->
					</view>
				</view>
				<view class="p-tb30 row-c" :class="{'apply-shake':phoneShake}" v-if="id == 4">
					<text class="size-28 sys-weight-400">昵称</text>
					<en-input focus class="m-l30" placeholder="请输入昵称" v-model="loginData.phone"
						maxlength="11"></en-input>
				</view>
				<view class="p-tb30 row-c" :class="{'apply-shake':phoneShake}" v-if="id == 5">
					<text class="size-28 sys-weight-400">姓名</text>
					<en-input focus class="m-l30" placeholder="请输入姓名" v-model="loginData.phone"
						maxlength="11"></en-input>
				</view>
			</view>
			<EnButton :text="'保存'" :is_fixed="false" @onSubmit="onSubmit"></EnButton>
		</Nav>
	</view>
</template>

<script>
	import EnInput from "@/components/en-from/en-input/index.vue";

	export default {
		components: {
			EnInput
		},
		data() {
			return {
				id: 0,
				title: '',
				placeholder: '',
				phoneShake: false,
				loginData: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.title = options.title
		},
		methods: {
			onSubmit() {
				this.phoneShake = true
				setTimeout(() => {
					this.phoneShake = false
					this.passwordShake = false
					this.codedShake = false
				}, 500)
			},
			getVerifiedCode() {}
		}
	}
</script>

<style lang="scss" scoped>
	.input-text {
		display: block;
		width: 120rpx;
		text-align: right;
	}

	.input-item {
		height: 96rpx;
		padding: 28rpx 40rpx;
		box-sizing: border-box;

		.login-input {
			width: 100%;
		}
	}

	.input-item:last-child {
		margin-top: 30rpx;
	}

	.input-send {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.login-input {
			width: calc(100% - 140rpx);
		}

		.login-send {
			width: 140rpx;
			text-align: center;
		}
	}

	.input-but {
		margin-top: 40rpx;
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
	}
</style>