uniappshell/pages/myCenter/updatePassword/updatePassword.vue

<template>
	<view class="content">
		<view class="updatePassword-wrap">
			<view class="username item">
				<text>旧密码：</text>
				<uni-easyinput :inputBorder="false" v-model="oldPassword"
					class="input" 
					type="text"  
					placeholder="请输入旧密码" />
			</view>
			<view class="password item">
				<text>新密码：</text>
				<uni-easyinput v-model="password"
				 :inputBorder="false" 
				 class="input"
				 type="text"  placeholder="请输入新密码">
				</uni-easyinput>
			</view>
			<button type="primary" @click="submit" class="submit-BT">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: "",
				password: "",
			}
		},
		methods: {		
			submit() {		
				let oldPassword = (this.oldPassword).trim();
				let password = (this.password).trim();
				if (oldPassword.length < 1) {
					uni.showToast({
						title: '请填写旧密码',
						icon: "error"
					})
					return;
				}
				if (password.length < 1) {
					uni.showToast({
						title: '请填写新密码',
						icon: "error"
					})
					return;
				}
				uni.showToast({
					title:'修改成功',
					complete() {
						uni.reLaunch({
							url:'/pages/login/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.head {
			font-size: 50upx;
			text-align: center;
			padding: 40upx 0;
			letter-spacing: 2upx;
		}
		.updatePassword-wrap {
			margin: 100upx auto 0;
			box-sizing: border-box;
			padding: 20upx 30upx;
			border-radius: 8upx;
			.item {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 90upx;
				font-size: 32upx;
				line-height: 90upx;
				background-color: #fff;
				border-radius: 50upx;
				padding: 0 20upx;
				.input{
					width: 520upx;
					border: none;
				}
				&.password {
					margin-top: 40upx;
				}
			}
			.tip {
				text-align: right;
				padding: 18upx 0;
				font-size: 28upx;
			}
			.submit-BT {
				width: 424rpx;
				height: 72rpx;
				line-height: 72rpx;	
				text-align: center;							
				background:#3D90F4;
				border-radius: 42rpx;	
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				z-index: 999;
				margin: 0 auto;
			}
		}
	}
</style>