<template>
	<view class="my-data">
		<uni-nav-bar  class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="修改密码"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="wrap-view" style="box-shadow: 0 0 15px 5px #eeeeee;padding-bottom: 20upx;">
			<view class="item">
				<view class="title">密码修改：</view>
				<view class="content"></view>
			</view>
			<view class="item item_bottom_border">
				<view class="title"><text class="star">*</text>旧密码</view>
				<view class="content">
					<input class="passwordInput" v-model="formData.old_password" placeholder-style="color: #999999;"
						name="oldPassword" password placeholder="请输入旧密码" />
				</view>
			</view>
			<view class="item item_bottom_border">
				<view class="title"><text class="star">*</text>新密码</view>
				<view class="content">
					<input class="passwordInput" v-model="formData.new_password1" placeholder-style="color: #999999;"
					 name="new_password1" password placeholder="请输入新密码" />
				</view>
			</view>
			<view class="item item_bottom_border">
				<view class="title"><text class="star">*</text>确认新密码</view>
				<view class="content">
					<input class="passwordInput" v-model="formData.new_password2" placeholder-style="color: #999999;"
					 name="new_password2" password placeholder="请再次输入新密码" />
				</view>
			</view>
		</view>
		 <view class="btn">
			<button type="default" class="save-btn" @click="saveInfo">保存</button>
		</view> 
	</view>
</template>

<script>
		import nonNullCheck from '../../utils/nonNullCheck.js';
		export default {
		data() {
			return {
				formData: {
				        old_password: '',
				        new_password1: '',
				        new_password2: '',
				      },
				hasPhoto:false,
			}
		},
		onShow() {
		},
		methods: {
			/* 参数验证 */
			paramsCheck() {
				if (!nonNullCheck(this.formData.old_password)) {
					uni.showToast({
						title: '请填旧密码',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.new_password1)) {
					uni.showToast({
						title: '请填新密码',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.new_password2)) {
					uni.showToast({
						title: '请再次填新密码',
						icon: "none"
					})
					return false;
				}
				return true;
			},
			
			saveInfo(){
					let that = this;
					if (!that.paramsCheck()) {
						return;
					} else {
						if(that.formData.new_password1===that.formData.new_password2){
							uni.showLoading({
								title: '保存中...',
								mask: true
							})
							this.$u.api.passChange(this.formData).then(res=>{
								uni.hideLoading()
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
								uni.reLaunch({
									url: '/pages/login/login_'
								})
							}).catch(e=>{
								uni.hideLoading()
							})
						}else{
							uni.showToast({
								title: '两次填写的新密码不一致，请确认后再提交',
								icon: "none"
							})
						}
						
					}
			},
			backLogin(){
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style scoped>
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(254deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}
>>>uni-image{
	height: 200upx;
	width: 200upx;
}
	.my-data {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}

	.nav-bar>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.wrap-view {
		width: 720rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		line-height: 94rpx;
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
	}
	.wrap-top{
		padding: 20upx 0;
		line-height: 60upx;
	}
	.item {
		margin: 0rpx 32rpx;
		display: flex;
		margin-top: 20rpx;
	}
	
	.item_bottom_border{
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.title {
		color: #212121;
		width: 180upx;
	}

	.content {
		flex: 1;
		color: #414141;

	}

	.content input {
		height: 100%;
	}
.passwordInput{
	color: #2c6fd9;
}
	.save-btn {
		width: 400rpx;
		height: 80rpx;
		background-color: #2c6fd9;
		border-radius: 40rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #f3fbff;
		margin-top: 21rpx;
	}
</style>
