v3-lab-xcx/pages_supplier/mine/changePassword.vue

<!-- 修改密码 -->
<template>
    <view id="register">
		<view class="register_li">
			<view class="register_li_min">
				<view>原密码：</view>
				<input v-model="form.oldPassword" @blur="verifyOldPassword()"  type="text" placeholder="请输入原密码">
			</view>
			<view class="register_li_min">
				<view>新密码：</view>
				<input v-model="form.newPassword" @blur="verify()"    type="text" placeholder="请输入原密码">
			</view>
			<view class="register_li_min" style="border-bottom:0;">
				<view>确认密码：</view>
				<input  @blur="affirm()" v-model="repassword"   type="text" placeholder="请再次确认密码">
			</view>
		</view>
		<view class="sub_btn" @click="submitForm()">提交</view>
	</view>
</template>

<script>
    import {updatePwd} from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				form:{
					oldPassword:'',
					newPassword:'',
				},
				repassword:'',
            }
        },
        onLoad(option) {

        },
        onShow(){



        },

        methods: {
			//校验特殊字符
			verify(){
				if(!this.form.oldPassword){
					uni.showToast({
						title: '请先输入原密码',
						icon:"none",
						mask:true,
						duration: 2000
					});
					this.form.newPassword='';
					return
				}
				if(this.form.newPassword.length<6 || this.form.newPassword.length>16){
					uni.showToast({
						title: '原密码不能超出16位、不能低于6位',
						icon:"none",
						mask:true,
						duration: 2000
					});
					this.form.newPassword='';
					return
				}
				let reg=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，。、\s+]/;
				let aa= reg.test(this.form.newPassword)
				if(reg.test(this.form.newPassword)){
					uni.showToast({
						title: '密码中有中文，空格或特殊字符，请重新输入',
						icon:"none",
						mask:true,
						duration: 2000
					});
					this.form.newPassword='';
				}

			},
			affirm(){
				if(this.form.newPassword===this.repassword){

				}else{
					uni.showToast({
						title: '两次密码不一样，请重新输入',
						icon:"none",
						mask:true,
						duration: 2000
					});
					this.repassword='';
					return
				}
			},
			//校验老的密码
			async verifyOldPassword(){
				if(!this.form.oldPassword){
					uni.showToast({
						title: '请输入原密码',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}

			},
			async submitForm(){
				if(!this.form.oldPassword){
					uni.showToast({
						title: '请输入原密码',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.newPassword){
					uni.showToast({
						title: '请输入新密码',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.repassword){
					uni.showToast({
						title: '请输入确认密码',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}

				const {data} = await updatePwd(this.form);
				if(data.code == 200){
				    uni.showToast({
				        title: '修改成功!',
				        icon:"none",
				        mask:true,
				        duration: 2000
				    });
				    setTimeout(function(){
				       uni.redirectTo({
				       	url: '/pages/login',
				       });
				    },2000);
				}
			},
        }
    }
</script>

<style lang="stylus" scoped>
    #register{
        height:100%;
        width:100%;
        display flex
        flex-direction column;
		.register_li{
			background #fff;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				margin:0 26rpx;
				display flex;
				align-items center;
				border-bottom: 1px solid #F5F5F5;
				view{
					line-height:100rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #CCCCCC;
				}
			}
		}
		/* 按钮 */
		.sub_btn{
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50rpx;
			position: fixed;
			bottom:30rpx;
			z-index: 1000;
		}
	}
	/deep/.input-value-border{
		display :none !important;
	}
</style>