guosen-ldt-mall/pages/login/updatePassword.vue

<template>
	<view style="position: relative;">
		<view class="bg"></view>
		<view class="bg1"></view>
		<view class="back" @click="$back">
			<u-icon name="arrow-left" size="50" color="#919191"></u-icon>
		</view>
		
		<view class="content">
			<view class="top">
				<view class="title">
					<text>修改登录密码</text>
					<text>输入手机号修改密码</text>
				</view>
			</view>
			
			<view  style="width: 76%;margin-top: 80rpx;">
				<u-form ref="uForm"  :model="form"  :error-type="['message']">
					<u-form-item   label="手机号" prop="phone" label-width="150">
						<view style="border-bottom: 1rpx solid #DDDDDD;">
							<u-input disabled :border="false" placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
						</view>
					</u-form-item>
					<u-form-item label="旧密码"  label-width="150" prop="oldPassword">
						<view style="border-bottom: 1rpx solid #DDDDDD;">
							<u-input :border="false" type="password" placeholder="请输入旧密码" v-model="form.oldPassword"></u-input>
						</view>
					</u-form-item>
					<u-form-item    label="新密码" prop="password" label-width="150">
						<view style="border-bottom: 1rpx solid #DDDDDD;">
							<u-input :border="false" type="password" placeholder="请设置新的登录密码" v-model="form.password"></u-input>
						</view>
					</u-form-item>
					<u-form-item    label="确认密码" prop="confirmPassword" label-width="150">
						<view style="border-bottom: 1rpx solid #DDDDDD;">
							<u-input :border="false" type="password" placeholder="请再次输入新密码" v-model="form.confirmPassword" ></u-input>
						</view>
					</u-form-item>
				</u-form>
			</view>
			
			<view  style="width: 86%;margin-top: 80rpx;">
				<view @click="update" class="btn cu-btn round" style="width:100%;height: 90rpx;font-size: 34rpx;">
					确定修改密码
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				customStyle:{
					'backgroundColor':'#d18c42',
					'color':'#ffffff'
				},
				form:{
					phone:this.$cache.get('phone'),
					password:'',
					oldPassword:'',
					confirmPassword:'',
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请设置新的登录密码',
						trigger: ['change', 'blur'],
					}],
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: ['change', 'blur'],
					}],
					confirmPassword: [{
						required: true,
						message: '请再次输入新密码',
						trigger: ['change', 'blur'],
					}]
				},
				codeTips: '',
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			update() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						setTimeout(()=>{
							this.doUpdate()
						},500)
					}
				});
			},
			async doUpdate(){
				if (this.form.password!=this.form.confirmPassword) {
					this.$u.toast('输入的两次新密码不一致')
					return
				}
				let params={
					type:'MALL',
					phone:this.form.phone,
					secret:md5Libs.md5(this.form.password),
					oldSecret:md5Libs.md5(this.form.oldPassword)
				}
				this.$api.appaccount.setPassword(params).then(res=>{
					if (res.success) {
						this.$dialog.showModal('修改成功，请重新登录',false).then(res=>{
							uni.clearStorage()
							uni.reLaunch({
								url:"./account-login"
							})
						})
					}else{
						this.$u.toast(res.msg)
					}
				}).catch(err=>{
					this.$u.toast(err.data.msg)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color:#d18c42;
	
	page{
		background-color: #FFFFFF;
	}
	
	.btn{
		background-color: $color;
		color:#FFFFFF;
	}
	
	.btn{
		background-color: $color;
		color:#FFFFFF;
	}
	
	.bg{
		z-index: 99;
		height: 440rpx;
		width: 440rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: #d18c42;
		border-radius: 50%;
		box-shadow: 0rpx 0rpx 50rpx #c5803b;
	}
	
	.bg1{
		height: 500rpx;
		width: 500rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: #d18c42;
		border-radius: 50%;
		box-shadow: #c6813b;
	}
	
	.back{
		position: absolute;
		top: var(--status-bar-height);
		left: 20rpx;
		padding-top: var(--status-bar-height);
	}
	
	.content{
		height: 90vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.top{
			width: 76%;
			display: flex;
			.title{
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				text-align: left;
				
				text:first-child{
					font-weight: 800;
					font-size: 50rpx;
					color: #000;
					margin-bottom: 20rpx;
				}
				
				text:last-child{
					font-size: 28rpx;
					color: #7f7f7f;
				}
			}
			
			
		}
	}
</style>