crm-uni/pages/mine/resetPwd.vue

<template>
	<view class="page">
		<view class="leftback">
			<u-icon name="arrow-left" color="#000" size="20" @click="leftClick"></u-icon>
		</view>
		<view class="title">
			<image src="/static/image/lingke.png" mode=""></image>
		</view>

		<view class="form">
			<view class="inputs_button">
				
				<view class="inputs">
					<view class="laber">{{$t('email')}}</view>
					<view class="vcode">
						<u--input
							type="text"
							v-model="email"
						    :placeholder="$t('emailinput')"
						    border="none"
						  ></u--input>
						<text v-if="vcodeTime==0"  @click="getVcode">{{$t('getcode')}}</text>
						<text v-else style="color:#fff">({{vcodeTime}}s)</text>
					</view>
					<view class="password">
						<u--input
							type="text"
							v-model="code"
						    :placeholder="$t('code')"
						    border="none"
						  ></u--input>
					</view>
					<view class="laber">{{$t('resetpassword')}}</view>
					<view class="account">
						<u--input
							type="password"
							v-model="password"
						    :placeholder="$t('newpassword')"
						    border="none"
						  ></u--input>
					</view>
					<view class="password">
						<u--input
							type="password"
							v-model="password1"
						    :placeholder="$t('Confirmpassword')"
						    border="none"
						  ></u--input>
					</view>
				</view>
				<view class="button">
					<view @click="login">
						{{$t('Confirmbtn')}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				email: "",
				code: "",
				password: "",
				password1: "",
				pactChecked: false,
				vcodeTime: 0,
				vcodeTimer: null
			}
		},
		onLoad() {

		},
		methods: {
			leftClick(){
				uni.navigateBack({})
			},
			validateEmail(email) {
				const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				return regex.test(email);
			},
			login() {
				if(this.email==''){
					uni.showToast({
						title:this.$t('emailerr'),
						icon: 'none'
					});
					return false
				}
				if(this.password==''){
					uni.showToast({
						title:this.$t('passworerr'),
						icon: 'none'
					});
					return false
				}
				if(this.password != this.password1){
					uni.showToast({
						title:this.$t('passworerr1'),
						icon: 'none'
					});
					return false
				}
				request({
					url:'user/savePassword',
					method:'POST',
					data:{
						email: this.email,
						password: this.password,
						code: this.code,
					}
				}).then(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
					if(res.data.code ==0){
						uni.clearStorageSync();
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index',// 替换为你要跳转的页面路径
							});
						}, 1000);
					}
				})
			},
			getVcode() {
				console.log(this.email)
				if(this.email==''){
					uni.showToast({
						title:this.$t('emailerr'),
						icon: 'none'
					});
					return false
				}
				if (!this.validateEmail(this.email)) {
					uni.showToast({
						title:this.$t('emailerr1'),
						icon: 'none'
					});
					return false;
				}
				this.vcodeTime = 60
				this.vcodeTimer = setInterval(() => {
					if (this.vcodeTime > 0) {
						this.vcodeTime--
					} else {
						clearInterval(this.vcodeTimer)
						this.vcodeTimer = null
					}
				}, 1000)
				request({
					url:'user/sendCode',
					method:'POST',
					data:{
						email: this.email,
					}
				}).then(res => {
					console.log(res.data.data)
					uni.showToast({
						title:res.data.message,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-image: url("../../static/image/login/loginbg.png");
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.leftback{
			position: fixed;
			/* #ifdef APP-PLUS */
				top: 44px;
			/* #endif */
			top: 30px;
			left: 15px;
		}
		.title {
			padding-top: 220rpx;
			text-align: center;
			image{
				width: 128px;
				height: 47px;
			}
		}

		.form {
			flex: 1;
			margin: 0 76rpx;
			overflow: hidden;

			.inputs_button {
				.inputs {
					padding: 150rpx 0px 0;
					margin-bottom: 20rpx;
					.laber{
						color: #222222;
						font-size: 32rpx;
						line-height: 48px;
						padding-left: 15px;
					}
					.account,
					.vcode,
					.password{
						height: 80rpx;
						border-radius: 50px;
						padding: 0 30rpx;
						display: flex;
						align-items: center;
						background-color: #F6F6F6;

						input {
							flex: 1;
						}
					}

					.account {
						margin-bottom: 48rpx;
					}
					.vcode {
						margin-bottom: 10px;
						padding-right: 0px;
						text {
							text-wrap: nowrap;
							font-size: 26rpx;
							padding: 14rpx 30rpx;
							background-color: #3471FF;
							border-radius: 50px;
							color: #fff;
						}
					}
				}

				.button {
					// padding: 0 32rpx;
					margin-top: 80rpx;
					view {
						line-height: 80rpx;
						border-radius: 50px;
						text-align: center;
						font-size: 32rpx;
						background: linear-gradient(to right, #3471FF, #6776FF);
						color: #fff;
					}
				}
			}
		}
	}
</style>