fourPayProject/51uni/MyPages/my/ChangePassword.vue

<template>
	<view class="content">
		<view class="container">
			<view class="my-header">
				<view class="my-icons" @click="goback">
					<uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons>
				</view>
				<view class="my-text">{{titles}}</view>
				<view class="my-icons" @click="submit()" style="text-align: right;">完成</view>
			</view>
			<view class="input-box">
				<view class="">旧密码</view>
				<view class="">
					<!-- <input :type="onetype" v-model="formData.oldPassword" placeholder="请输入旧密码" /> -->
					<input type="password" v-model="formData.oldPassword" v-if="one == true" placeholder="请输入旧密码" />
					<input type="text" v-model="formData.oldPassword" v-else placeholder="请输入旧密码" />
				</view>
				<view class="r-icon" @click="getxy()">
					<image src="../../static/home/yc.png" v-if="one == true" mode=""></image>
					<image src="../../static/home/xs.png" v-else mode=""></image>
				</view>
			</view>
			<view class="input-box">
				<view class="">新密码</view>
				<view class="">
					<input v-model="formData.newPassword" type="password" v-if="two == true" placeholder="请输入新密码" />
					<input v-model="formData.newPassword" type="text" v-else placeholder="请输入新密码" />
				</view>
				<view class="r-icon" @click="two =! two">
					<image src="../../static/home/yc.png" v-if="two == true" mode=""></image>
					<image src="../../static/home/xs.png" v-else mode=""></image>
				</view>
			</view>
			<view class="input-box">
				<view class="">确认密码</view>
				<view class="">
					<input v-model="formData.confirmPassword" type="password" v-if="three == true"
						placeholder="请再次输入新密码" />
					<input v-model="formData.confirmPassword" type="text" v-else placeholder="请再次输入新密码" />
				</view>
				<view class="r-icon" @click="three =! three">
					<image src="../../static/home/yc.png" v-if="three == true" mode=""></image>
					<image src="../../static/home/xs.png" v-else mode=""></image>
				</view>
			</view>
			<u-modal :show="show" :title="title" :content='content' @confirm="show = false"></u-modal>
		</view>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				one: true,
				two: true,
				three: true,
				onetype: 'password',
				titles: "修改密码",
				show: false,
				title: '标题',
				content: "(1)密码必须符合复杂性要求，包含数字(0-9)字母(a-z/A-Z)或其他字符(例如!、S.#、%)，数字、字母、特殊字符每个必须最少有一个(2)密码长度8-16位(3)密码不得使用超过5位重复或简单递增递减的数字",
				formData: {
					oldPassword: "",
					newPassword: "",
					confirmPassword: ""
				}

			}
		},
		onShow() {
			this.show = true
		},
		components: {
			headers
		},
		methods: {
			isValidPassword(password) {
				// 规则 1: 密码长度必须是8到16位
				if (password.length < 8 || password.length > 16) {
					return false;
				}

				// 规则 2: 必须包含数字、字母和特殊字符
				const hasDigit = /[0-9]/.test(password);
				const hasLetter = /[a-zA-Z]/.test(password);
				const hasSpecialChar = /[!#%&'()*+,\-.\/:;<=>?@\[\]^_`{|}~]/.test(password);
				if (!hasDigit || !hasLetter || !hasSpecialChar) {
					return false;
				}

				// 规则 3: 不能包含超过5位连续递增或递减的数字
				for (let i = 0; i <= password.length - 6; i++) {
					let consecutiveDigits = '';
					for (let j = i; j < i + 5; j++) {
						if (/\d/.test(password[j])) {
							consecutiveDigits += password[j];
						} else {
							break;
						}
					}
					if (consecutiveDigits.length === 5) {
						const numbers = consecutiveDigits.split('').map(Number);
						if (this.isConsecutiveSequence(numbers, true) || this.isConsecutiveSequence(numbers, false)) {
							return false;
						}
					}
				}

				return true;
			},

			// 辅助函数，用于检查数字数组是否是递增或递减序列
			isConsecutiveSequence(numbers, isIncreasing) {
				for (let i = 1; i < numbers.length; i++) {
					const diff = numbers[i] - numbers[i - 1];
					if ((isIncreasing && diff !== 1) || (!isIncreasing && diff !== -1)) {
						return false;
					}
				}
				return true;
			},


			submit() {
				if (!this.formData.newPassword || !this.formData.confirmPassword || !this.formData.oldPassword) {
					uni.showModal({
						title: '不能为空'
					})
					return
				}
				if (this.formData.newPassword != this.formData.confirmPassword) {
					uni.showModal({
						title: '两次密码输入不一致'
					})
					return
				}
				if (!this.isValidPassword(this.formData.newPassword)) {
					this.show = true
					return
				}

				request({
					url: 'app/uaLogin/changeInfo?roleType=mer',
					method: 'post',
					data: this.formData

				}).then(res => {
					uni.navigateBack()
				})
			},
			getxy() {
				this.one = !this.one
				if (this.one == true) {
					this.onetype = 'password'
				} else {
					this.onetype = 'text'
				}
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/input {
		border: none !important;
		outline: none !important;
		padding: 0;
		margin: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: none;
		background-color: transparent;
		font-size: inherit;
	}

	/deep/input:focus {
		outline: none !important;
	}

	.content {
		background: #fff;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		// background: linear-gradient(180deg, #B2D2FC 0%, rgba(255, 255, 255, 0.84) 100%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;
		z-index: 99999;
		background: #E4612E;
		position: fixed;
		top: 0px;

		.my-icons {
			height: 20px;
			width: 20%;

		}

		.my-text {
			font-weight: bold;
		}


	}

	.input-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #ededee;
	}

	.r-icon {
		width: 25px;
		height: 15px;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>