newEdition/pages/mine/Changehepassword.vue

<template>
	<view style="background: #F8F8F8;width: 100%;height: 100vh;">
		<view class="inpText" style="margin-top: 20rpx;">
			<view class="inpTextBox">
				<view class="inpTextLable">
					<view class="inpTextName">原密码</view>
				</view>
				<input placeholder="请输入原密码" placeholder-class="placeInpTextBox" class="inpTextBox1" maxlength="12"
				v-model="password"	type="text"/>
			</view>
		</view>
		<view class="inpText">
			<view class="inpTextBox">
				<view class="inpTextLable">
					<view class="inpTextName">新密码</view>
				</view>
				<input placeholder="请输入6-12位新密码" placeholder-class="placeInpTextBox" class="inpTextBox1" maxlength="12"
				v-model="newPassword"	type="password"/>
			</view>
		</view>
		<view class="inpText" style="padding-bottom: 8rpx;" >
			<view class="inpTextBox" style="border: none;">
				<view class="inpTextLable">
					<view class="inpTextName">确认密码</view>
				</view>
				<input placeholder="请确认密码" placeholder-class="placeInpTextBox" class="inpTextBox1" maxlength="12"
				v-model="queryPassword"	type="password"/>
			</view>
		</view>
		<button class="save" @tap="savePassword">确定</button>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../utils/util.js");
	var config = require("../../config");

	export default {
		data() {
			return {
				password: "",
				newPassword: "",
				queryPassword: ""
			};
		},
		methods: {
			// 修改密码
			savePassword() {
				if (this.newPassword == "" || this.queryPassword == "" || this.password == "") {
					uni.showModal({
						cancelColor: "#999999",
						title: '提示',
						content: '输入框不能为空',
						showCancel: false
					});
				} else if (this.newPassword.length < 6) {
					uni.showModal({
						cancelColor: "#999999",
						title: '提示',
						content: '新密码不能小于6位',
						showCancel: false
					});

				} else if (this.newPassword == this.queryPassword) {
					var params = {
						password: this.password,
						newpassword: this.newPassword,
						newpassword1: this.queryPassword
					};
					util.getRequestPromise(config.service.updatePassword, params).then(data => {
						uni.clearStorage();
						uni.navigateTo({
							url: '/pages/login/index'
						});
					});
				} else {
					uni.showModal({
						title: '提示',
						cancelColor: "#999999",
						content: '两次密码不一致',
						showCancel: false
					});
				}
			}

		}
	};
</script>
<style lang="scss">
	.inpText {
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.inpTextBox {
		padding: 36rpx 0 28rpx;
		color: #BBBFC8;
		text-align: left;
		border-bottom: 1px solid #EEEEEE;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.placeInpTextBox {
		color: #999;
		font-size: 30rpx;
	}

	.inpTextLable {
		position: relative;
		width: 155rpx;
		display: flex;
		align-items: center;
		
		&::before {
			content: '';
			display: block;
			position: absolute;
			right: 0;
			width: 2rpx;
			height: 30rpx;
			background: #999999;
		}
	}

	.inpTextName {
		color: #020F28;
		font-size: 32rpx;
	}

	.inpTextBox1 {
		width: 410rpx;
		font-size: 32rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #333;
	}

	.save {
		width: 640rpx;
		height: 87rpx;
		text-align: center;
		line-height: 87rpx;
		color: #fff;
		font-size: 32rpx;
		background: #0A6EE9;
		margin: 0 auto;
		margin-top: 120rpx;
	}
</style>