OA/pages/oaLogin/editpwd.vue

<template>
	<view class="login">
		<!-- <image class="bg-iamge" src="../../static/img/login/login_back_img.png"></image> -->
		<hx-lottie :options="options" ref="lottie"
			style="width: 100vw;height: 100vh;transform: scale(1.3);background-color: #3274F9;" />
		<u-navbar v-if="uniMP" @leftClick="leftClick" bgColor="rgba(0,0,0,0)" leftIconColor=" #fff" :autoBack="false">
		</u-navbar>

		<!-- #ifdef APP-PLUS||H5 -->
		<!-- <view style="height: var(--status-bar-height)"></view> -->
		<!-- #endif -->
		<view class="body">
			<view class="title">欢迎进入OA！</view>
			<view class="login-card">
				<view class="top">
					<view class="text item">
						<u-tabs :list="tabList" @click="changeTabs" lineColor="#3274F9"
							itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;font-size: 32rpx;"></u-tabs>
					</view>

					<input class="mobile item" v-model="formData.old_pwd" maxlength="26" placeholder="输入旧密码" password
						type="safe-password" />
					<input class="mobile item" v-model="formData.pwd" maxlength="26" placeholder="输入新密码" password
						type="safe-password" />

					<input class="mobile item" v-model="formData.pwd_confirm" maxlength="26" placeholder="确认密码" password
						type="safe-password" />
				</view>

				<button class="edit_btn" @click="login">修改密码</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		changePassword,

	} from "@/api/oaUser.js"

	import {
		Toast
	} from "../../libs/uniApi";




	export default {
		data() {
			return {
				options: {
					data: '',
				},
				uniMP: false,
				APP_token: '',
				tabList: [{
						name: '密码修改'
					},
					// {name:'手机登录'},
				],
				current: 0,
				formData: {
					pwd_confirm: '',
					pwd: '',
					old_pwd: '',
				},


			};
		},
		onLoad() {
			this.APP_token = uni.getStorageSync('APP_token');


		},
		onShow() {
			if (uni.getStorageSync('uniMP')) this.uniMP = true;
		},

		methods: {
			changeTabs(e) {
				this.current = e.index;
				this.formData.scene = e.index + 1;
			},
			leftClick(e) {
				uni.sendHostEvent('closeApp', e, (ret) => {
					//发送消息成功回调
					console.log('关闭应用' + JSON.stringify(ret));
				});
			},

			async login() {
	            console.log(this.formData)
				if (this.formData.scene == 1 && !this.formData.old_pwd) return Toast('旧密码不能为空');
				if (this.formData.scene == 1 && !this.formData.pwd) return Toast('新密码不能为空');
				if (this.formData.scene == 1 && !this.formData.pwd_confirm) return Toast('确认密码不能为空');
				if (this.formData.scene == 1 && !this.formData.old_pwd == this.formData.pwd && !this.formData.pwd == this.formData.pwd_confirm &&
					!this.formData.old_pwd == this.formData.pwd_confirm) return Toast('密码不一致，请确认后重新输入');
				// 密码验证不通过，给出错误提示或其他处理

			
			
				uni.showLoading({
					title: '正在修改中'
				})
				let res = await changePassword(this.formData);

				// console.log(res, '11111111')
				Toast(res.msg)
				if(res.code==0){
					uni.switchTab({
						url:'/pages/user/user'
					})
				}

				uni.hideLoading()

			},




		},
	}
</script>

<style lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
		background-color: $theme-oa-color;
		/* #ifdef H5 */
		// background-image: url("../../static/img/login/login_back_img.png");
		background-color: $theme-oa-color;

		/* #endif */
		// .bg-iamge {
		// 	width: 100vw;
		// 	height: 100vh;
		// 	position: absolute;
		// 	z-index: -99;
		// }

		.body {
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 694rpx;
				height: 74rpx;
				margin-top: 200rpx;
				margin-bottom: 51rpx;
				font-size: 53rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 68rpx;
				-webkit-background-clip: text;
			}

			::v-deep uni-input {
				min-height: 0 !important;
			}

			.login-card {
				width: 694rpx;
				height: 723rpx;
				background: #ffffff;
				border-radius: 21rpx 21rpx 21rpx 21rpx;
				opacity: 1;
				box-sizing: border-box;
				padding: 38.5rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.top {
					display: flex;
					justify-content: space-evenly;
					flex-direction: column;

					.item {
						margin-bottom: 35rpx;
					}

					.text {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.8);
						line-height: 35rpx;
					}

					.mobile,
					.code {
						width: 613rpx;
						height: 112rpx;
						background: #f5f5f5;
						border-radius: 56rpx 56rpx 56rpx 56rpx;
						opacity: 1;
						padding: 0 45.56rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						font-weight: 400;
						color: #333;
						line-height: 35rpx;
					}

					.code {
						display: flex;
						justify-content: space-between;
						align-items: center;

						input {
							font-size: 28rpx;
						}

						.get-code {
							color: $theme-oa-color;
						}
					}

					.btn {
						display: flex;
						justify-content: space-between;
					}
				}

				.submit_btn {
					width: 613rpx;
					height: 112rpx;
					background: $theme-oa-color;
					border-radius: 56rpx 56rpx 56rpx 56rpx;
					opacity: 1;
					text-align: center;
					line-height: 112rpx;
					color: #ffffff;
					font-size: 35rpx;
					font-weight: 500;
				}

				.edit_btn {
					width: 613rpx;
					height: 112rpx;
					background: #f5f5f5;
					border-radius: 56rpx 56rpx 56rpx 56rpx;
					opacity: 1;
					text-align: center;
					line-height: 112rpx;
					color: #333;
					font-size: 35rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>