<template>

	<view style="width: 100%;height: 100%;">
		<view style="margin-top: 20rpx;background-color: #FFFFFF;">
			<view style="padding: 45rpx 28rpx;">
				<input placeholder="请输入原密码" style="height: 30rpx" @blur="blur1" />
			</view>
			<view style="padding: 45rpx 28rpx;">
				<input placeholder="请输入新密码" style="height: 30rpx" @blur="blur2" />
			</view>
			<view style="padding: 45rpx 28rpx;">
				<input placeholder="请再次输入密码" style="height: 30rpx" @blur="blur3" />
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottomButton" @click="bc">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				//原密码
				value1: '',
				//新密码
				value2: '',
				//二次新密码
				value3: ''
			}
		},
		methods: {
			//失去焦点事件
			blur1({detail}) {
				console.log(detail.value)
				this.value1 = detail.value
			},
			blur2({detail}) {
				console.log(detail.value)
				this.value2 = detail.value
			},
			blur3({detail}) {
				console.log(detail.value)
				this.value3 = detail.value
			},
			//保存按钮
			bc(e) {
				console.log(this.value1)
				console.log(this.value2)
				console.log(this.value3)
				if(this.value2!=this.value3){
					console.log('密码不相同')
					uni.showToast({
						title:'密码不相同',
						icon:'none'
					})
				}else{
					uni.switchTab({
					url: '/pages/index/index'
				})
				}
				
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #e1e1e1;
	}

	.bottomButton {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0B73B9;
		color: #FFFFFF;
		font-size: 32rpx;
		z-index: 1;
	}
</style>
