OpenDoorManageMini/pages/globalPages/setting.vue

<template>
	<view class="container">
		<u-navbar titleStyle="color:#333;fontSize:36rpx;" :autoBack="true" bgColor="#fff" :placeholder="true"
			title="设置"></u-navbar>
		<view class="content">
			<u-cell-group :border="false">
				<u-cell title="修改密码" :isLink="true" @click="pwdShow=true">
				</u-cell>
				<u-cell title="退出登录" :isLink="true" @click="loginOut">
				</u-cell>
			</u-cell-group>
		</view>

		<xpopup :show="pwdShow" @close="pwdClose" @confirm="pwdSubmit" :showBtn="true" title="修改密码">
			<view class="pwd-popup-content flex align-center">
				<view>新密码：</view>
				<view>
					<u--input placeholder="请输入新密码" type="password" border="surround" v-model="newpassword"></u--input>
				</view>
			</view>
		</xpopup>
	</view>
</template>

<script>
	import {
		updateUserInfo
	} from "@/api/system/user.js"
	export default {
		data() {
			return {
				newpassword: '',
				pwdShow: false,
			}
		},
		methods: {
			changePwd() {
				this.pwdShow = true
			},

			pwdSubmit() {
				if (this.newpassword) {
					updateUserInfo({
						password: this.newpassword
					}).then(res => {
						this.$modal.showToast('修改成功~')
					})
					this.pwdClose()
				} else {
					this.$modal.msg('请输入新密码！')
				}
			},
			
			pwdClose() {
				this.pwdShow = false
			},

			loginOut() {
				this.$store.dispatch('LogOut').then(res => {
					this.$tab.reLaunch('/pages/login')
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.container {

		.content {
			min-height: 100vh;
			background-color: #fff;
			padding:24rpx;

			/deep/ .u-cell__body {
				padding: 30rpx 6rpx;
			}
		}
		
		.pwd-popup-content {
			padding: 24rpx;
		
			>view:nth-child(1) {
				width: 160rpx;
			}
		
			>view:nth-child(2) {
				width: 100%;
			}
		}
	}
</style>