UNIVPLMDataIntegration/App/pages/password/password.vue

<template>
	<view class="content">
		<view class="pd-lr-20">
			<view class="oldpsd mg-t-20" style="display: flex;align-items: baseline;">
				<up-icon name="lock-fill" size="15" />
				<span style="margin-left: 4rpx;">原密码</span>
			</view>
			<input class="oldpsdinp" type="text" v-model="state.formData.paswOld" placeholder="输入原密码" />

			<view class="oldpsd mg-t-20" style="display: flex;align-items: baseline;">
				<up-icon name="lock-fill" size="15" />
				<span style="margin-left: 4rpx;">新密码</span>
			</view>
			<input class="newpsdinp bottom" type="password" v-model="state.passwordNew" placeholder="请输入新的密码" @blur="newCode" />
			<input class="newpsdinp" type="password" v-model="state.formData.paswNew" placeholder="再次输入确认密码" @blur="newCode2" />
			<view class="txt">
				<view :class="state.isTrue?'red':''">{{ state.tstxt }}</view>
			</view>

			<up-button class="mg-t-20" text="提交" @click="onsubmit"></up-button>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { sm2 } from 'sm-crypto'
	import { env } from '@/utils/.env.js'
	import { changePwdApi } from '@/api/auth.js'

	const state = reactive({
		isTrue: false,
		tstxt: '请正确输入',
		passwordNew: '',
		formData: {} as any,
	})

	const newCode = () => {
		if (state.passwordNew.length >= 6 && state.passwordNew.length <= 15) {
			state.tstxt = '99999'
			state.isTrue = true
		} else {
			state.isTrue = false
			state.tstxt = '请输入6-15位，字母或数字'
		}
	}

	const newCode2 = () => {
		if (state.formData.paswNew != state.passwordNew) {
			state.isTrue = false
			state.tstxt = '两次密码不一致'
		}
	}

	const onsubmit = () => {
		if (!state.isTrue) return uni.showToast({ title: state.tstxt, icon: 'none' })

		state.formData.passwordOld = sm2.doEncrypt(state.formData.paswOld, env.smKey, 1)
		state.formData.passwordNew = sm2.doEncrypt(state.formData.paswNew, env.smKey, 1)
		changePwdApi(state.formData).then((res : any) => {
			console.log(res);
			if (res.code == 200) {
				uni.showToast({ title: '修改成功', icon: 'none' })
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.pd-lr-20 {
		padding: 0 20rpx;
	}

	.mg-t-20 {
		margin-top: 16rpx;
	}

	.red {
		color: #ff0000 !important;
	}

	.oldpsdinp {
		height: 104rpx;
		margin-bottom: 40rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding-left: 24rpx;
		font-size: 28rpx;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F5F6F8;

		.oldpsd {
			padding-left: 24rpx;
			height: 92rpx;
			line-height: 92rpx;
			font-size: 30rpx;
			color: #656565;
		}

		.newpsdinp {
			height: 104rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding-left: 24rpx;
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.bottom {
			border-bottom: 1rpx solid #F2F2F2;
		}

		.txt {
			margin-top: 16rpx;
			display: flex;
			padding: 0rpx 24rpx;
			align-items: center;
			justify-content: space-between;

			view:first-child {
				font-size: 20rpx;
				color: #9A9A9A;
			}

			view:last-child {
				font-size: 20rpx;
				color: #FF2442;
			}
		}

		.success {
			width: 90%;
			margin: 190rpx auto 0rpx;
		}

		::v-deep.u-icon__icon {
			margin-top: 2px;
			margin-right: 5px !important;
			font-size: 35rpx !important;
		}
	}

	::v-deep.u-button--info {
		color: white !important;
		width: 90%;
		border-radius: 30px !important;
		background: $uni-color-primary !important;
	}
</style>