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

<!-- 修改密码 -->
<template>
	<view id="editPassword">
		<view class="page-title">修改密码</view>
		<view class="input-disabled-box">
			<view>手机号</view>
			<view>{{form.data1}}</view>
		</view>
		<view class="input-max-box">
			<view>学/工号</view>
			<input v-model="form.data2" maxlength="30" focus placeholder="请输入学/工号"/>
		</view>
		<view class="input-button-max-box">
			<view>手机验证码</view>
			<view class="input-button-box">
				<input maxlength="6" v-model="form.data3" 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" v-model="form.data4" focus placeholder="请输入新密码"/>
		</view>
		<view class="input-max-box">
			<view>确认新密码</view>
			<input type="password" maxlength="16" v-model="form.data5" focus placeholder="请再次输入确认密码"/>
		</view>
		<view class="bottom-button-box">
			<view @click="outButton()">稍后修改</view>
			<view @click="submitButton()">确定修改</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					data1:"13333333333",
				},
				codeType:false,
				seconds:0,
				timer:null,
			}
		},

		onLoad(option) {
			
		},
		onShow() {
			
		},
		methods: {
			//返回上级页面
			outButton(){
				uni.navigateBack();
			},
			//获取验证码
			getCode(){
				let self = this;
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				if(this.codeType){
					uni.showToast({
						title: '请稍后再试',
						icon: "none",
						duration: 3000
					});
					return
				}
				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(){
				const reg = /^1[3|4|5|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.data1){
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}else if (!reg.test(this.form.data1)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!this.form.data2){
					uni.showToast({
						title: '请输入学/工号',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!this.form.data3){
					uni.showToast({
						title: '请输入手机验证码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!this.form.data4){
					uni.showToast({
						title: '请输入新密码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!this.form.data5){
					uni.showToast({
						title: '请再次输入确认密码',
						icon: "none",
						duration: 3000
					});
					return
				}else if(this.form.data4!=this.form.data5){
					uni.showToast({
						title: '新密码与确认新密码不一致',
						icon: "none",
						duration: 3000
					});
					return
				}else if(!password.test(this.form.data4)||!password.test(this.form.data5)){
					uni.showToast({
						title: '密码长度最少10位 最多16位，必须同时包含一个大写字母、一个小写字母、一个数字和一个特殊字符!@#*?&',
						icon: "none",
						duration: 5000
					});
					return
				}
				uni.showModal({
					title: '确认提交?',
					cancelColor: '#999999',
					confirmColor: '#0183FA',
					content: '',
					success(res) {
						if (res.confirm) {
							console.log('确定')
						} else if (res.cancel) {
							console.log('取消')
						}
					}
				})
			},
		},

	}
</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>