supervise/supervise-uniapp/pages/index/ChangePassword.vue

<template>
	<view class="pages">
		<view style="background: #fff;">


			<view style="margin-top: 30rpx;">
				<view class="inputRow">
					<image src="../../static/baseIcon/code.png" mode="aspectFill" class="drawableLeft"></image>
					<input type="number" maxlength="6" @input="paswordInput1" :password="showPassword1" placeholder="原密码"
						class="input" />
					<image class="showImage" :src="img1" mode="aspectFill" @click="showPas('1')"></image>
				</view>
			</view>

			<view class="inputRow">
				<image src="../../static/baseIcon/code.png" mode="aspectFill" class="drawableLeft"></image>
				<input type="number" maxlength="6" @input="paswordInput2" :password="showPassword2" placeholder="新密码"
					class="input" />
				<image :src="img2"  class="showImage" mode="aspectFill" @click="showPas('2')"></image>
			</view>

			<view class="inputRow" style="border-bottom: none;">
				<image src="../../static/baseIcon/code.png" mode="aspectFill" class="drawableLeft"></image>
				<input type="number" maxlength="6" @input="paswordInput3" :password="showPassword3" placeholder="确认新密码"
					class="input" />
				<image :src="img3"   class="showImage" mode="aspectFill" @click="showPas('3')"></image>

			</view>

		</view>

		<view class="btn" @click="next">
			<text class="btnText">确定</text>
		</view>
		
		<view v-show="errorsMsg!=''" style="width: 100%;margin-top: 50px;color: #f00; font-size: 18px;text-align: center;">{{errorsMsg}}</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					original:"",
					password:"",
					confirmPassword:"",
					userSid:""
				},
				showPassword1: true,
				showPassword2: true,
				showPassword3: true,
				img1: "/static/loginIcon/notShow.png",
				img2: "/static/loginIcon/notShow.png",
				img3: "/static/loginIcon/notShow.png",
				errorsMsg:"",
			}
		},
		methods: {
			showPas(index) {

				switch (index) {
					case "1":
						this.showPassword1 = !this.showPassword1
						this.img1 = this.showPassword1 ? "/static/loginIcon/notShow.png" : "/static/loginIcon/isShow.png"
						break;
					case "2":
						this.showPassword2 = !this.showPassword2
						this.img2 = this.showPassword2 ? "/static/loginIcon/notShow.png" : "/static/loginIcon/isShow.png"
						break;
					case "3":
						this.showPassword3 = !this.showPassword3
						this.img3 = this.showPassword3 ? "/static/loginIcon/notShow.png" : "/static/loginIcon/isShow.png"
						break;
					default:
						break;
				}
			},
			
			paswordInput1(event) {
				this.formData.original = event.target.value
			},
			paswordInput2(event) {
				this.formData.password = event.target.value;
			},
			paswordInput3(event) {
				this.formData.confirmPassword = event.target.value;
			},
			next(){
				this.formData.userSid = getApp().globalData.sid
				console.log('formData>>>', this.formData)
				this.$api.updatePassword(this.formData).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
				this.errorsMsg = ""
				
				}).catch(e => {
					console.log('eeeee', e)
					
					this.errorsMsg = e.msg
				})
			},

		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.inputRow {
			flex-direction: row;
			display: flex;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 10rpx;
			margin-top: 10rpx;
			padding-bottom: 10rpx;
			border-bottom: 0.1px #F1F1F1 solid;
			align-items: center;

			.input {
				margin-left: 20rpx;
				height: 70rpx;
				flex: 1;
				font-size: 32rpx;
			}

			.drawableLeft {
				width: 40rpx;
				height: 40rpx;
				margin: 20rpx;
			}

			.showImage {
				width: 20px;
				height: 20px;
				margin-left: 10px;

			}
		}

		.btn {
			display: flex;
			width: 90%;
			height: 80rpx;
			flex-direction: column;
			background-color: #007AFF;
			margin-top: 80rpx;
			margin-left: auto;
			margin-right: auto;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;

			.btnText {
				color: #ffffff;
				font-size: 33rpx;
			}
		}
	}
</style>