hezhiying/pages/ChangePassword/ChangePassword.vue

<template>
	<view class="page">
		<view class="setting-password">
			<view class="inpu-password">
				<text>原始密码</text>
				<input :password='!oldPasswordFlag' v-model="oldPassword" placeholder="请输入原始密码" />
				<text class="iconfont" :class="oldPasswordFlag?'icon-eye-on':'icon-eye-off'" @click="oldPasswordFlag = !oldPasswordFlag"></text>
			</view>
			<view class="inpu-password">
				<text>新密码</text>
				<input :password='!newPasswordFlag' v-model="newPassword"  placeholder="请输入新密码" />
				<text class="iconfont" :class="newPasswordFlag?'icon-eye-on':'icon-eye-off'" @click="newPasswordFlag = !newPasswordFlag"></text>
			</view>
			<view class="inpu-password">
				<text>确认密码</text>
				<input :password='!renewPasswordFlag' v-model="renewPassword" placeholder="确认密码" />
				<text class="iconfont" :class="renewPasswordFlag?'icon-eye-on':'icon-eye-off'" @click="renewPasswordFlag = !renewPasswordFlag"></text>
			</view>
			
			
		</view>
		<view class="btn" :style="oldPassword&&newPassword&&renewPassword?'opacity:1':'opacity:0.4'" @click="oldPassword&&newPassword&&renewPassword?modifyPsw():''">
			<text>确认</text>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {changePassword} from '@/common/api.js'
	export default {
		data() {
			return {
				oldPassword:'',
				newPassword:'',
				renewPassword:'',
				oldPasswordFlag:false,
				newPasswordFlag:false,
				renewPasswordFlag:false,
			};
		},
		methods:{
			modifyPsw(){
				if(this.newPassword!=this.renewPassword){
					this.$refs.uToast.show({
						message:'两次输入密码不一致'
					})
					return;
				}
				changePassword({oldPassword:this.oldPassword,newPassword:this.newPassword}).then(res=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:res.msg
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'ChangePassword.scss';
</style>