Onlife/pages/me/resetPwd.vue

<template>
	<view class="content">
		<view class="title-tip"></view>
		<view class="form-box">
			<view class="row-input">
				<view class="input-textarea">
					<text class="tip" style="width: 124rpx;">新密碼:</text>
					<textarea v-model="inputMnemonic" placeholder="請輸入您的助記詞" class="input textarea" />
				</view>
			</view>
			<view class="row-input">
				<text class="tip">新密碼:</text>
				<view class="input-box">
					<input v-model="paykey1" :password="showPassword1" placeholder="新密碼(6~12位數)"
						placeholder-class="placeholder" />
					<img :src="!showPassword1 ? showpwdImg : hidepwdImg" @tap="changePassword(1)"
						style="width: 50rpx;height: 50rpx;"></img>
				</view>
			</view>
			<view class="row-input">
				<text class="tip">確認密碼:</text>
				<view class="input-box">
					<input v-model="paykey2" :password="showPassword2" placeholder="確認密碼"
						placeholder-class="placeholder" />
					<img :src="!showPassword2 ? showpwdImg : hidepwdImg" @tap="changePassword(2)"
						style="width: 50rpx;height: 50rpx;"></img>
				</view>
			</view>
			<view class="login-btn" @tap="submitEdit">
				確認
			</view>
		</view>
	</view>
</template>

<script>
	import {
		_profile,
		_userInfos
	} from "@/request/api.js"
	export default {
		data() {
			return {
				userInfos: {},
				inputMnemonic: "",
				nickname: "",
				paykey1: "",
				paykey2: "",
				showPassword1: true,
				showPassword2: true,
				showpwdImg: "static/eye_on.png",
				hidepwdImg: "static/eye_off.png",
			}
		},
		mounted() {
			this.getUserInfos();
		},
		methods: {
			changePassword(n) {
				switch (n) {
					case 1:
						this.showPassword1 = !this.showPassword1;
						break;
					case 2:
						this.showPassword2 = !this.showPassword2;
						break;
				}
			},
			async getUserInfos() {
				let res = await _userInfos();
				if (res.code === 1) {
					this.userInfos = res.data.userinfo;
				}
			},
			async submitEdit() {
				let userMnemonic = uni.getStorageSync(`user_mnemonic_${this.userInfos.id}`)
				if (!this.inputMnemonic) {
					uni.showToast({
						title: '請輸入您的助記詞',
						icon: "none"
					})
					return
				}
				if (!this.paykey1 || !this.paykey2) {
					uni.showToast({
						title: '請輸入新密碼',
						icon: "none"
					})
					return
				}
				if (this.paykey1 != this.paykey2) {
					uni.showToast({
						title: '兩次輸入密碼不一致',
						icon: "none"
					})
					return
				}
				if (this.inputMnemonic != userMnemonic) {
					uni.showToast({
						title: '您的助記詞不正確',
						icon: "none"
					})
					return
				}
				const params = {
					nickname: "",
					newpassword: "",
					newpaykey: this.paykey2
				};
				let res = await _profile(params);
				if (res.code === 1) {
					uni.showToast({
						title: '重置成功',
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/me/index'
						})
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: linear-gradient(to bottom, #000033, #51599b);
		padding: 120rpx 60rpx 0 60rpx;
		box-sizing: border-box;
		min-height: 100vh;
		width: 100vw;

		.title-tip {
			width: 100%;
			line-height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 700;
			font-size: 40rpx;
			color: #fff;
		}

		.form-box {

			.row-input {
				display: flex;
				// flex-direction: column;
				// border-bottom: 1rpx solid #e2e3eb;
				margin-bottom: 20rpx;
				align-items: center;
			}

			.input-textarea {
				width: 100%;
				display: flex;
				.input{
					background-color: #383D84;
					flex: 1;
					padding: 20rpx;
					border-radius: 30rpx;
					box-sizing: border-box;
					height: 220rpx;
					color: #e2e3eb;
					font-size: 32rpx;
				}
			}

			.tip {
				width: 150rpx;
				height: 40rpx;
				padding-top: 20rpx;
				font-size: 26rpx;
				color: #e2e3eb;
			}

			.input-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 600rpx;
				height: 120rpx;
				color: #e2e3eb;
				font-size: 20rpx;
				background-color: #383D84;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.placeholder {
					color: gery;
					font-size: 28rpx;
				}

			}

			.login-btn {
				margin-top: 350rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
				font-size: 35rpx;
				background: #4F5AD8;
				box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(98, 92, 236, 0.4);
			}
		}
	}
</style>