FE-lab-xcx/pages_basics/views/editPassword/editPassword.vue

<!-- 修改密码 -->
<template>
	<view id="editPassword">
		<view class="page-title">修改密码</view>
		<view class="input-disabled-box" v-if="showType">
			<view>手机号</view>
			<view>{{form.mobile}}</view>
		</view>
		<view class="input-button-max-box" v-if="showType">
			<view>手机验证码</view>
			<view class="input-button-box">
				<input maxlength="6" :always-embed="true" :cursor-spacing="10"
				v-model="form.captcha" focus placeholder="请输入手机验证码"/>
				<view @click="getCode()"
				:class="codeType?'checkButton':'noCheckButton'">
					{{codeType?seconds+'秒后重试':'获取验证码'}}
				</view>
			</view>
		</view>
		<view class="input-max-box">
			<view>新密码</view>
			<input type="password" maxlength="16" :always-embed="true" :cursor-spacing="10"
			v-model="form.newPassword" focus placeholder="请输入新密码"/>
		</view>
		<view class="input-max-box">
			<view>确认新密码</view>
			<input type="password" maxlength="16" :always-embed="true" :cursor-spacing="10"
			v-model="form.confirmPassword" focus placeholder="请再次输入确认密码"/>
		</view>
		<view class="bottom-button-box">
			<view @click="outButton()">稍后修改</view>
			<view @click="submitButton()">确定修改</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	import {
		systemUserDetail,
		authNumCaptcha,
		authForgetPassword,
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				form:{
					mobile:"",
					captcha:"",
					newPassword:"",
					confirmPassword:"",
				},
				codeType:false,
				seconds:0,
				timer:null,
				showType:false,
			}
		},

		onLoad(option) {
			
		},
		onShow() {
			if(uni.getStorageSync('weChatProgramVersion')){
				this.$set(this,'showType',true);
			}else{
				this.$set(this,'showType',false);
			}
			this.systemUserDetail();
		},
		methods: {
			//获取用户信息
			async systemUserDetail(){
				const {
					data
				} = await systemUserDetail({userId:uni.getStorageSync('userId')});
				if (data.code == 200) {
					this.$set(this.form,'mobile',data.data.mobile);
				}
			},
			//返回上级页面
			outButton(){
				uni.navigateBack();
			},
			//获取验证码
			getCode(){
				let self = this;
				const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				if(this.codeType){
					uni.showToast({
						title: '请稍后再试',
						icon: "none",
						duration: 3000
					});
					return
				}
				this.authNumCaptcha();
			},
			//获取验证码
			async authNumCaptcha() {
				let self = this;
				const {
					data
				} = await authNumCaptcha({mobile:this.form.mobile});
				if (data.code == 200) {
					uni.showToast({
						title: '发送成功',
						mask: true,
						icon: "none",
						duration: 2000
					});
					const TIME_COUNT = 60;
					this.$set(this, 'codeType', true);
					if (!this.timer) {
						this.$set(this, 'seconds', TIME_COUNT);
						this.timer = setInterval(() => {
							if (this.seconds > 1 && this.seconds <= TIME_COUNT) {
								this.seconds -= 1;
							} else {
								this.$set(this, 'codeType', false);
								clearInterval(this.timer);
								this.$set(this, 'timer', null);
							}
						}, 1000);
					}
				}
			},
			//提交
			submitButton(){
				let self = this;
				const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				const password = /^(?=(?:.*[A-Z]){1})(?=(?:.*[a-z]){1})(?=(?:.*[0-9]){1})(?=(?:.*[!@#*?&]){1})(?!(.)\1)(.{10,16})$/
				if(!this.form.mobile){
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}else if (!reg.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!this.form.captcha){
					uni.showToast({
						title: '请输入手机验证码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!this.form.newPassword){
					uni.showToast({
						title: '请输入新密码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!this.form.confirmPassword){
					uni.showToast({
						title: '请再次输入确认密码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(this.form.newPassword!=this.form.confirmPassword){
					uni.showToast({
						title: '新密码与确认新密码不一致',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!password.test(this.form.newPassword)||!password.test(this.form.confirmPassword)){
					uni.showModal({
						title: '',
						content: '密码长度最少10位 最多16位，必须同时包含一个大写字母、一个小写字母、一个数字和一个特殊字符!@#*?&',
						showCancel:false,
						confirmColor: '#0183FA',
					})
					return
				}
				uni.showModal({
					title: '确认提交?',
					cancelColor: '#999999',
					confirmColor: '#0183FA',
					content: '',
					success(res) {
						if (res.confirm) {
							// console.log('确定')
							self.authForgetPassword();
						} else if (res.cancel) {
							// console.log('取消')
						}
					}
				})
			},
			async authForgetPassword(){
				let self = this;
				let obj = {
					mobile:this.form.mobile,
					captcha:this.form.captcha,
					newPassword:md5.hex_md5(this.form.newPassword),
					confirmPassword:md5.hex_md5(this.form.confirmPassword),
				};
				const {
					data
				} = await authForgetPassword(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function(){
						uni.navigateBack();
					},2000);
				}
			},
		},

	}
</script>


<style lang="stylus" scoped>
	#editPassword {
		height:100%;
		display: flex;
		flex-direction: column;
		flex:1;
		background-color: #FFFFFF;
		overflow-y: scroll;
		overflow-x: hidden;
		.page-title{
			line-height:120rpx;
			font-weight: 700;
			font-size: 34rpx;
			margin-left:30rpx;
		}
		.input-disabled-box{
			padding:0 30rpx;
			view:nth-child(1){
				line-height: 80rpx;
				font-size:30rpx;
				font-weight:700;
			}
			view:nth-child(2){
				font-size:30rpx;
				width:630rpx;
				height:100rpx;
				line-height:100rpx;
				border-radius:10rpx;
				background-color: #F5F5F5;
				color:#666;
				padding:0 30rpx;
			}
		}
		.input-max-box{
			padding:0 30rpx;
			view{
				line-height: 80rpx;
				font-size:30rpx;
				font-weight:700;
			}
			input{
				width:630rpx;
				height:100rpx;
				line-height:100rpx;
				border-radius:10rpx;
				border:1px solid #D8D8D8;
				padding:0 30rpx;
			}
		}
		.input-button-max-box{
			padding:0 30rpx;
			view:nth-child(1){
				line-height: 80rpx;
				font-size:30rpx;
				font-weight:700;
			}
			.input-button-box{
				display: flex;
				input{
					width:412rpx;
					height:100rpx;
					line-height:100rpx;
					border-radius:10rpx;
					border:1px solid #D8D8D8;
					padding:0 30rpx;
					margin-right:18rpx;
				}
				view{
					width:200rpx;
					line-height:100rpx;
					text-align: center;
					font-size:30rpx;
					border-radius:10rpx;
				}
				.checkButton{
					color:#333;
					background-color: #E8E8E8;
				}
				.noCheckButton{
					color:#fff;
					background-color: #0183FA;
				}
			}
		}
		.bottom-button-box{
			display: flex;
			margin:43rpx 0;
			view{
				font-size:30rpx;
				line-height:100rpx;
				text-align: center;
			}
			view:nth-child(1){
				width:220rpx;
				margin:0 33rpx 0 30rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 1rpx solid #E0E0E0;
			}
			view:nth-child(2){
				width:437rpx;
				color:#fff;
				background: #0183FA;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}
		}
	}
</style>