uav-uniapp-demo-24-8-18/pages/modifyUser/modifyUser.vue

<!-- 修改用户信息(二合一) -->
<template>
	<view class="modify-user">
		<navbar :leftClick="leftClick" :title="$t(`page.modifyUser.${titles[$route.query.type]}`)"></navbar>
		
		<!-- 修改pin -->
		<view class="edit-user content">
			<view class="edit-list">
				<view class="edit-item">
					<view class="title">{{ $t('page.modifyUser.oldPassword') }}</view>
					<input type="text" :placeholder="$t('page.modifyUser.oldPasswordPlaceholder')" v-model="form.oldPassword"/>
				</view>
				
				<view class="edit-item">
					<view class="title">{{ $t('page.modifyUser.newPassword') }}</view>
					<input type="text" :placeholder="$t('page.modifyUser.newPasswordPlaceholder')" v-model="form.newPassword"/>
				</view>
				
				<view class="edit-item">
					<view class="title">{{ $t('page.modifyUser.confirmNewPassword') }}</view>
					<input type="text" :placeholder="$t('page.modifyUser.newPassword')" v-model="form.confirmNewPassword"/>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="confirm content" @click="submit">{{ $t('page.modifyUser.confirm') }}</view>
		
		<!-- 提示信息 -->
		<view class="tips content">{{ $t(`page.modifyUser.${tips[$route.query.type]}`) }}</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/m-navbar.vue'
	
	export default {
		components : { navbar },
		data(){
			return {
				titles : ['editPinTitle','editPasswordTitle'],
				tips : ['pinTips','passwordTips'],
				form : {
					oldPassword : '',
					newPassword : '',
					confirmNewPassword : '',
				}
			}
		},
		methods : {
			leftClick() {
				uni.navigateTo({
					url: '/pages/personalInfo/personalInfo'
				})
			},
			
			//提交
			submit(){
				this.$play()
				if (this.form.oldPassword.trim() === '') return uni.$u.toast(this.$t('page.modifyUser.oldPasswordToast'))
				else if (this.form.newPassword.trim() === '') return uni.$u.toast(this.$t('page.modifyUser.newPasswordToast'))
				else if (this.form.confirmNewPassword.trim() === '') return uni.$u.toast(this.$t('page.modifyUser.confirmNewPasswordToast'))
				else if (this.form.confirmNewPassword.trim() != this.form.newPassword.trim()) return uni.$u.toast(this.$t('page.modifyUser.notPasswordToast'))
				
				
				if(this.$route.query.type == 0){	//修改pin逻辑
					this.request('editPayPass', {}, {
						oldPayPass : this.form.oldPassword,
						payPass : this.form.newPassword,
						okPayPass : this.form.confirmNewPassword,
					}).then(res => {
						if(res.code == 200){
							console.log(res.message);
							uni.$u.toast(this.$t(`message.${res.message}`))
							setTimeout(() => uni.navigateTo({
								url: '/pages/personalInfo/personalInfo'
							}), 1000)
						}
					})
				}else{		//修改密码逻辑
					this.request('editPass', {}, {
						oldPass : this.form.oldPassword,
						password : this.form.newPassword,
						okPassword : this.form.confirmNewPassword,
					}).then(res => {
						if(res.code == 200){
							uni.$u.toast(this.$t(`message.${res.message}`))
							setTimeout(() => uni.navigateTo({
								url: '/pages/personalInfo/personalInfo'
							}), 1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modify-user{
		width: 750rpx;
		min-height: 100vh;
		// background-color: black;
		margin: 0 auto;
		background-size: 100%;
		background-repeat: no-repeat;
		
		.content {
			width: 96%;
			margin: 0 auto;
		}
		
		
		.edit-user{
			padding-top: 20rpx;
			
			.edit-list{
				border: 1px solid #ccc;
				
				.edit-item{
					box-sizing: border-box;
					padding: 15rpx;
					border-bottom: 1px solid #ccc;
					
					&:last-child{
						border: none;
					}
					
					.title{
						color: $uni-text-color;
						font-size: 28rpx;
					}
					
					input{
						color: $uni-text-color;
						text-indent: 1em;
						height: 60rpx;
						font-size: 28rpx;
						margin-top: 15rpx;
					}
				}
			}
		}
		
		.confirm{
			display: flex;
			align-items: center;
			justify-content: center;
			background: $uni-bg-color-app;
			margin: 30rpx auto;
			border-radius: 20rpx;
			height: 80rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: $uni-text-color-inverse;
		}
		
		.tips{
			color: rgb(191, 118, 112);
			text-align: center;
			font-size: 26rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
		}
	}
</style>