aiot-app/pages/systemSettings/components/password-modal.vue

<template>
	<u-popup :show="popShow" @close="cancel" mode="center" :is-mask-click="false">
		<view class="popup-wrapper">
			<view class="title">服务器设置</view>

			<u-form labelPosition="left" labelAlign="right" :model="formData" :rules="rules" ref="formRef"
				label-width="150">

				<u-form-item label="旧密码" prop="oldPassword" class="form-required">
					<u-input v-model="formData.oldPassword" placeholder="输入" type="password">
					</u-input>
				</u-form-item>

				<u-form-item label="新密码" prop="newPassword" class="form-required">
					<u-input v-model="formData.newPassword" placeholder="输入" type="password">
					</u-input>
				</u-form-item>

				<u-form-item label="确认密码" prop="newPassword1" class="form-required">
					<u-input v-model="formData.newPassword1" placeholder="输入" type="password">
					</u-input>
				</u-form-item>
			</u-form>
			<view class="footer">
				<u-button size="small" @click="cancel">取消</u-button>
				<u-button size="small" type="success" @click="confirm">确定</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		updatePassword
	} from '@/api/common.js'
	export default {
		data() {
			return {

				popShow: false,
				formData: {
					oldPassword: '',
					newPassword: '',
					newPassword1: ''
				},
				rules: {
					oldPassword: {
						type: 'string',
						required: true,
						message: '请输入旧密码',
						trigger: ['blur']
					},
					newPassword: {
						type: 'string',
						required: true,
						message: '请输入新密码',
						trigger: ['blur']
					},
					newPassword1: [{
						required: true,
						type: 'string',
						trigger: ['blur'],
						validator: (_rule, value, callback) => {
							if (!value) {
								return callback(new Error('请再次输入新密码'));
							}
							if (value !== this.formData.newPassword) {
								return callback(new Error('两次输入密码不一致'));
							}
							callback();
						}
					}]
				}
			}
		},
		created() {

		},
		methods: {
			open() {
				this.popShow = true
			},

			cancel() {
				this.popShow = false
			},
			loginOut() {

				uni.showModal({
					title: '提示',
					content: '确认退出登录',
					success: res => {
						console.log(res, res.confirm, '-----确认退出登录');
						if (res.confirm) {
							console.log('-----确认退出登录9999999');

							try {
								postJ(this.apiUrl + '/main/user/logout')
									.then(res => {

										uni.showToast({
											title: '退出成功',
											icon: 'success',
											duration: 500
										})


										setTimeout(() => {
											uni.clearStorage()
											uni.removeStorageSync('token')
											uni.removeStorageSync('userInfo')
											uni.removeStorageSync('treeList')
											uni.reLaunch({
												url: '/pages/login/login'
											})

										}, 500)

									})
									.catch(err => {
										console.log(err);
										uni.showToast({
											title: '退出失败',
											icon: 'none'
										})
									})

							} catch (error) {
								console.log(error, 'error----')
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			confirm() {
				const userInfo = uni.getStorageSync("userInfo");
				this.$refs.formRef
					.validate()
					.then(res => {
						// Vue.prototype.apiWebUrl =
						// 	`${this.formData.protocal}${this.formData.hostname}:${this.formData.port}/web`
						// Vue.prototype.apiUrl =
						// 	`${this.formData.protocal}${this.formData.hostname}:${this.formData.port}/api`
						// Vue.prototype.webviewUrl =
						// 	`${this.formData.protocal}${this.formData.hostname}:${this.formData.port}`

						// uni.setStorageSync('apiInfo', this.formData)
						// this.$emit('setServerStatus', true)
						// this.cancel()
						this.formData.id = userInfo.userId
						updatePassword(this.formData).then(res => {
							if (res == 1) {
								uni.$u.toast('密码修改成功')
								setTimeout(() => {
									uni.removeStorageSync('token')
									uni.removeStorageSync('userInfo')
									uni.removeStorageSync('treeList')
									uni.reLaunch({
										url: '/pages/login/login'
									})

								}, 500)

							}
						})

					})
					.catch(errors => {
						uni.$u.toast('校验失败')
					})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup-wrapper {
		padding: 0 20rpx;

		.title {
			text-align: center;
			font-weight: bold;
			padding: 20rpx;
		}

		/deep/.u-form {
			.u-input__content__field-wrapper__field,
			.u-form-item__body__left__content__label {
				font-size: 28rpx !important;
			}

			.u-form-item__body__right__content__slot {}
		}

		/deep/.uni-stat__select {
			// height: 76rpx !important;
			width: 150rpx;
			flex: 0;

			.uni-select {
				width: 150rpx;
				font-size: 28rpx !important;
			}

			.uni-stat-box,
			.uni-select__input-box {
				// height: 76rpx !important;
			}
		}

		/deep/.u-input {
			flex: 1;
			padding: 12rpx 18rpx !important;
			border: 1px solid #e5e5e5;
		}

		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;

			.u-button+.u-button {
				margin-left: 20rpx;
			}
		}
	}
</style>