first/pages/login/resetPassword/index.vue

<template>
	<view class="">
		<navigation>Reset Password</navigation>
		<view class="login-body">
			<view class="input-item flex">
				<view class="login-sigh flex">
					<view class="imgcon">
						<image src="../../../static/login/[email protected]" mode=""></image>
					</view>
					<span class="quhao">+{{areacode}}</span>
				</view>
				<input type="text" value="" placeholder="mobile number"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;" v-model="mobile" />
			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../../static/login/[email protected]" mode=""></image>
					</view>
				</view>
				<input class="input_pcod" value="" placeholder="Picture Code"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;" v-model="picCode" />
				<view class="login-sigh3 flex">
					<image :src="imgcodeUrl" mode="scaleToFill" class="img1"></image>
					<image src="../../../static/login/[email protected]" mode="" class="img2" @click="getPicCode()">
					</image>
				</view>

			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../../static/login/[email protected]" mode=""></image>
					</view>
				</view>
				<input @focus="btnNum=1" @blur="btnNum=0" value="" placeholder="Verification code"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
					v-model="infoCode" />
				<view class="otp" @click="getInfoCode()">
					OTP
				</view>
			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../../static/login/[email protected]" mode=""></image>
					</view>
				</view>
				<input type="password" value="" placeholder="new password"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
					v-model="newPassword" />
			</view>
			<view class="login-btn" @click="resetPassword()">
				Continue
			</view>

		</view>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import cont from "@/components/navigation/navigation.vue"
	export default {
		data() {
			return {
				mark: 'sms_user_forget_password',
				mobile: '',
				imgcodeUrl: '',
				newPassword: '',
				infoCode: '',
				picCode: '',
				areacode: '',
			}
		},

		onLoad() {
			this.getPicCode();
			this.areacode = uni.getStorageSync('siteInfo').areaCode;


		},
		methods: {
			getInfoCode() {
				if (this.picCode == '') {
					uni.showToast({
						title: 'The graphic verification code is empty',
						icon: 'none',
						duration: 1500
					})
					return;
				}


				uni.request({
					url: '/start/api/home/sendSmsCode',
					data: {
						"mobile": this.mobile,
						"mark": this.mark,
						"countryCode": uni.getStorageSync('siteInfo').countryCode,
						"code": this.picCode
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
					},
					method: 'POST', //请求方式  或GET，必须为大写
					success: (res) => {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none',
							duration: 2500
						})
						console.log(res.data);
					},
					fail: (res) => {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none',
							duration: 2500
						})
						console.log(res.data);
					}
				});


			},
			getPicCode() {
				this.imgcodeUrl = "/start/api/home/imgCode?uuid=" + this.$u.guid(20);
				console.log();
				console.log(this.imgcodeUrl)
			},

			resetPassword() {
				var a= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/;
		
			if (this.mobile == '') {
				uni.showToast({
					title: ' Please enter the login Phone Number',
					icon: 'none',
					duration: 1500
				})
				return;
			}
			if (this.infoCode == '') {
				uni.showToast({
					title: ' Please enter the SMS verification code',
					icon: 'none',
					duration: 1500
				})
				return;
			}
	
				if (this.picCode == '') {
					uni.showToast({
						title: ' Please enter the Graphic verification code',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				if(!a.test(this.newPassword)){
					uni.showToast({
						title: 'Incorrect password format,a password requires a combination of numbers and letters',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				   
				
				uni.request({
					url: '/start/api/user/forgotPassword',
					data: {
						//    "ticket":uni.getStorageSync('logInfo').data, 
						// "oldPassword": uni.getStorageSync('logInfo').password,
						// "newPassword":this.nwePassword,
						// "confirmNewPassword": this.nwePassword
						'mobile': this.mobile,
						'code': this.infoCode,
						'newPassword': this.newPassword,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
					},
					method: 'POST', //请求方式  或GET，必须为大写
					success: (res) => {
						if(res.data.errCode=='SUCCESS'){
						uni.showToast({
							title: 'Password modified successfully',
							icon: 'success',
							duration: 1500
						})
						}else{
						uni.showToast({
							title: res.data.errMsg,
							icon: '',
							duration: 1500
						})	
						}
						console.log(res.data);
						},
						
					fail: (res) => {
						uni.showToast({
							title: res.errMsg,
							icon: '',
							duration: 1500
						})
					}
				});
			}
		},
	}
</script>

<style>
	@import './index.css';
</style>