courier_mobile_front/src/pages/forgetpassword.vue

<template>
	<div class="content">
		<back :title="titlename"></back>
		<div class="login">
			<!-- <div class="item">
				<van-cell-group>
			       <van-field v-model="name"  placeholder="请输入用户名或邮箱" />
			    </van-cell-group>
			</div> -->
			<div class="item">
				<van-cell-group>
					<van-field v-model="password" type="password" placeholder="请输入密码" />
				</van-cell-group>
			</div>
			<div class="item">
				<van-cell-group>
					<van-field v-model="password2" type="password" placeholder="请再次输入密码" />
				</van-cell-group>
			</div>
			<div class="btn">
				<van-button type="primary" @click="save()" color="#00c4b8">保存</van-button>
			</div>
			<!-- <div class="register">
				<router-link to="">新用户注册</router-link>
				<router-link to="">忘记密码</router-link>
			</div> -->
		</div>
	</div>
</template>

<script>
import { LJYforgetPassword } from '../api/index'
import { Toast, Dialog } from 'vant'
export default {

	data() {
		return {
			titlename: "修改密码",
			name: "",
			password: "",
			password2: "",
			yzm: "",
			userId: "",
		}
	},
	created: function () {
		this.isLogin();
		this.userId = localStorage.getItem('userId');
	},
	methods: {
		async save() {
			if (this.password == '' || this.password == undefined) {
				Toast('请输入密码！');
				return;
			}
			if (this.password2 == '' || this.password2 == undefined) {
				Toast('请再次输入密码！');
				return;
			}
			if (this.password2 != this.password) {
				Toast('两次输入密码不相同！');
				return;
			}
			const res = await LJYforgetPassword({
				userId: this.userId,
				password: this.password
			})
			if (res.msg == 'success') {
				localStorage.removeItem("userId");
				this.$router.push({ path: '/' });
			} else {
				Toast('修改失败！');
			}
		}
	}
}
</script>
<style scoped lang="less">
.content {
	.loginimg {
		width: 3.48rem;
		margin: 0 auto;
		display: block;
		padding: 2.15rem .8rem;
	}

	.login {
		width: 5.8rem;
		margin: 0.3rem auto 0px;

		.item {
			border: .01rem solid #bfbfbf;
			border-radius: .1rem;
			margin-bottom: .3rem;
			background: white;
			overflow: hidden;
			color: #999999;
		}

		.item:nth-of-type(3) {
			margin-bottom: .2rem;
		}

		.btn {
			button {
				width: 100%;
			}
		}

		.register {
			font-size: .24rem;
			display: flex;
			justify-content: space-between;
			margin-top: .2rem;

			a {
				color: #999999;
			}

			a:nth-of-type(1) {
				color: #02bfb3;
			}
		}
	}
}
</style>