Onlife/pages/me/editUserInfo.vue

<template>
	<view class="content">
		<view class="title-tip"></view>
		<view class="form-box">
			<view class="row-input">
				<view class="tip">當前密碼:</view>
				<view class="input-box">
					<input v-model="paykey" :password="showPassword1" placeholder="請輸入當前密碼"
						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="paykey1" :password="showPassword2" placeholder="請輸入新密碼"
						placeholder-class="placeholder" />
					<img :src="!showPassword2 ? showpwdImg : hidepwdImg" @tap="changePassword(2)"
						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="showPassword3" placeholder="請輸入確認密碼"
						placeholder-class="placeholder" />
					<img :src="!showPassword3 ? showpwdImg : hidepwdImg" @tap="changePassword(3)"
						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 {
				showPassword1: true,
				showPassword2: true,
				showPassword3: true,
				nickname: "",
				password: "",
				paykey: "",
				paykey1: "",
				paykey2: "",
				showpwdImg: "static/eye_on.png",
				hidepwdImg: "static/eye_off.png",
				userinfos: {}
			}
		},
		onShow() {
			this.getUserInfos();
		},
		methods: {
			async getUserInfos() {
				let res = await _userInfos();
				if (res.code === 1) {
					this.userinfos = res.data.userinfo;
				}
			},
			changePassword(n) {
				switch (n) {
					case 1:
						this.showPassword1 = !this.showPassword1;
						break;
					case 2:
						this.showPassword2 = !this.showPassword2;
						break;
					case 3:
						this.showPassword3 = !this.showPassword3;
						break;
				}

			},
			async submitEdit() {
				let userPaykey = this.userinfos.paykey;
				if (!this.paykey) {
					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.paykey != userPaykey) {
					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;
		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;
			}

			.tip {
				width: 100px;
				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: #ccc;
					font-size: 28rpx;
				}

			}

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