hitap-chat/pages/mine/password.vue

<template>
	<view id="page" class="password-box">
		<view class="Width100 Box BorderBox">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" class="form" labelWidth="80">
				<!-- <u-form-item label="原密码" prop="password" borderBottom>
          <u--input v-model="form.password" border="none"></u--input>
        </u-form-item> -->
				<u-form-item label="新密码" prop="password" borderBottom style="position: relative;">
					<uni-easyinput type="password" v-model="form.password" :clearable="false"></uni-easyinput>
					<!-- <u--input v-model="form.password" border="none" :password="isPassword">
						
					</u--input> -->
					<!-- <u-icon size="20" name="eye-off" v-if="isPassword" @click.native="isPassword=!isPassword" style="position: absolute;right: 30rpx;"></u-icon>
					<u-icon size="20" name="eye-fill" v-else @click.native="isPassword=!isPassword" style="position: absolute;right: 30rpx;"></u-icon> -->
				</u-form-item>
				<u-form-item label="确认密码" prop="confirmPassword" borderBottom style="position: relative;">
					<uni-easyinput type="password" v-model="form.confirmPassword" :clearable="false"></uni-easyinput>
					<!-- <u--input v-model="form.confirmPassword" border="none" :password="isPassword">
						
					</u--input> -->
					<!-- <u-icon size="20" name="eye-off" v-if="isPassword" @click.native="isPassword=!isPassword" style="position: absolute;right: 30rpx;"></u-icon>
					<u-icon size="20" name="eye-fill" v-else @click.native="isPassword=!isPassword" style="position: absolute;right: 30rpx;"></u-icon> -->
				</u-form-item>
				<text class="tip"> 密码需要包含数字、大小写字母、特殊符号中3种以上组合。</text>
			</u--form>

			<view @click="submit"
				class="Unit FontBold BorderBox TextCenter Width100 MarginT_30rpx BorderR_30rpx submit">
				提交
			</view>
			<!-- <uni-forms :modelValue="formData" border>
        <uni-forms-item label="道路类型">
          <input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadType"
            placeholder="请输入道路类型" />
          <text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{
            formData.roadType
          }}</text>
        </uni-forms-item>
      </uni-forms > -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 公用的js
				$: this.$,
				rules: {
					// 'password': {
					//   type: 'string',
					//   required: true,
					//   message: '请填写原密码',
					//   trigger: ['blur', 'change']
					// },

				},
				form: {
					confirmPassword: "",
					password: ""
				},
				isPassword: true
			}
		},
		// 页面加载
		onLoad(e) {

		},
		// 页面显示
		onShow() {},
		// 计算属性
		computed: {},
		// 方法
		methods: {
			// sexSelect(e) {
			//   this.model1.userInfo.sex = e.name
			//   this.$refs.uForm.validateField('userInfo.sex')
			// },
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		// 页面卸载
		onUnload() {

		},
		methods: {
			isValidPassword(password) {
				// 定义正则表达式  
				const hasDigit = /\d/.test(password);
				const hasUpper = /[A-Z]/.test(password);
				const hasLower = /[a-z]/.test(password);
				const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password); // 示例特殊字符集  

				// 计算满足条件的类型数量  
				let count = 0;
				if (hasDigit) count++;
				if (hasUpper) count++;
				if (hasLower) count++;
				if (hasSpecial) count++;

				// 返回是否满足至少3种组合  
				return count >= 3;
			},
			//修改密码
			submit() {
				if (!this.form.password) {
					this.$.toast('请输入密码')
				} else if (!this.isValidPassword(this.form.password)) {
					this.$.toast('密码格式不正确')
				} else if (this.form.password != this.form.confirmPassword) {
					this.$.toast('两次密码不一致')
				} else {
					this.$request
						.globalRequest(
							"/hiddenDanger/auth/updatePwd", {
								cusername: this.$.getData('userInfo').username,
								nuserid: this.$.getData("token"),
								nuserpwd: this.form.password,
								sessionId: this.$.getData("sessionId"),
								timestamp: this.$.getData("timestamp")
							},
							"POST",
							true
						)
						.then((res) => {

							if (res.code === 200) {
								this.$.toast('密码修改成功~')
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									});
								}, 2000);
							} else {
								this.$.toast(res.message)
							}

						});
				}

			},
		},
		// 触发下拉刷新
		onPullDownRefresh() {

		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {},
	}
</script>

<style>
</style>
<style lang="scss" scoped>
	page {
		background: #F6F8FA;
	}

	.password-box {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #F6F8FA;
		padding: 10rpx 30rpx;

		.form {
			width: 690rpx;
		}

		.tip {
			font-size: 24rpx;
			top: 10rpx;
			position: relative;
			color: #e01515;
		}

		/deep/ .u-form-item__body {
			padding: 30rpx 10rpx;
		}

		.submit {
			/* background: #E1EDFF; */
			background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%);
			color: #ffffff;
			width: 690rpx !important;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 13rpx;
			margin-top: 70rpx;
			font-weight: 500;
			margin-left: 0;
			font-size: 32rpx;
			letter-spacing: 4rpx;
		}
	}
</style>