yicangzongtai_app_240321/pages/research/setup/modifyPass.vue

<template>
	<view class="modify-pass">
		<navbar ref="navbar" :config="config" backColor="#666"></navbar>
		<form @submit="formSubmit">
			<view class="middle">
				<view class="password">
					原密码
				</view>
				<input type="text" password="true" name="phone" @input="onPhone"
					placeholder-style="font-size: 28rpx;font-weight: 500;color:#CCCCCC;line-height: 28px;"
					maxlength="13" placeholder="请输入您的原密码" />
			</view>
			<view class="distance">

			</view>
			<view class="box">
				<view class="new-pass">
					<view class="new">
						新密码
					</view>
					<input type="text" password="true" value="" name="newPass" @input="newPass"
						placeholder-style="font-size: 28rpx;font-weight: 500;color:#CCCCCC;line-height: 28px;"
						maxlength="13" placeholder="请输入您的新密码" />
				</view>
				<view class="determine-pass">
					<view class="determine">
						确认密码
					</view>
					<input type="text" password="true" value="" name="confirm" @input="confirm"
						placeholder-style="font-size: 28rpx;font-weight: 500;color:#CCCCCC;line-height: 28px;"
						maxlength="13" placeholder="请再次输入您的新密码" />
				</view>
			</view>
			<view class="button">
				<button class="submit" form-type="submit">
					确认修改
				</button>
			</view>
		</form>

	</view>
</template>

<script>
	import {
		modifyPass
	} from "../../../api/login.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '修改密码',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A',
					// backTabPage: "/pages/index/my"
				},
				phone: "", //原密码
				pass: "", //新密码
				confirmPass: "", //确认密码

			}
		},
		methods: {
			//确认提交
			formSubmit(e) {
				let target = e.detail.value
				if (!target.phone) {
					this.$mUtil.toast("请输入原密码")
					return false
				}
				if (!target.newPass) {
					this.$mUtil.toast("请输入新密码")
					return false
				}
				if (!target.confirm) {
					this.$mUtil.toast("请输入确认密码")
					return false
				}
				if (!(target.newPass.match(target.confirm))) {
					this.$mUtil.toast("两次密码不一致")
					return false
				}
				// if(target.newPass!=target.confirm){
				// 	this.$mUtil.toast("两次密码不一致")
				// 	return false
				// }
				console.log(666)
				let param = {
					password: target.phone,
					new_password: target.newPass,
				}
				this.$http.post(modifyPass, param)
					.then(res => {
						console.log(res)
						if (res.code == 200) {
							this.$mUtil.toast("修改密码成功")
							this.$http.post("/account/logout").then(res => {
								if (res && res.code == 200) {
									setTimeout(() => {
										uni.clearStorageSync()
										uni.reLaunch({
											url: "../register/login"
										})

									}, 2000)
								}
							})
						} else {
							this.$mUtil.toast("原密码不正确")
						}
					})

			},
			//原密码
			onPhone(e) {
				this.phone = e.detail.value
			},
			//新密码
			newPass(e) {
				this.pass = e.detail.value
			},
			//确认密码
			confirm(e) {
				this.confirmPass = e.detail.value
				console.log(this.confirmPass)
			}
		}
	}
</script>

<style scoped lang="scss">
	.button {
		display: flex;
		margin-top: 800rpx;
		justify-content: center;

		.submit {
			font-size: 36rpx;
			font-weight: 400;
			color: #ffffff;
			padding: 0 274rpx;
			background-color: #0B844A;
			border-radius: 43rpx;

		}
	}

	.box {
		padding: 0 30rpx;

		.determine-pass {
			padding: 34rpx 0 30rpx;
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			align-items: center;

			.determine {
				font-size: 28rpx;
				color: #1A1A1A;
				font-weight: 400;
			}

			input {
				margin-left: 60rpx;

			}
		}

		.new-pass {
			padding: 23rpx 0rpx 30rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			.new {
				font-size: 28rpx;
				color: #1A1A1A;
				font-weight: 400;
			}

			input {
				margin-left: 88rpx;

			}
		}
	}

	.distance {
		height: 10rpx;
		background-color: #F5F5F5;
	}

	.middle {
		padding: 26rpx 30rpx 30rpx;
		display: flex;
		align-items: center;

		.password {
			font-size: 28rpx;
			font-weight: 400;
			color: #1A1A1A;
		}

		input {
			margin-left: 88rpx;
		}
	}
</style>