WenWuGuanJia/answer_pages/user/changeCode.vue

<template>
	<view class="wrap">
		<view class="user-info">
			<view class="b-item">
				<view class="s-tit">旧登录码</view>
				<input class="s-input" :value="form.oldCode" maxlength="12" @input="onInput" data-field="oldCode" placeholder="必须输入旧的" />
			</view>
			<view class="b-item">
				<view class="s-tit">新登录码</view>
				<input class="s-input" :value="form.newCode" maxlength="12" @input="onInput" data-field="newCode" placeholder="字符长度3-12" />
			</view>
			<view class="b-item">
				<view class="s-tit">重复输入</view>
				<input class="s-input" :value="form.repeatCode" maxlength="12" @input="onInput" @blur="onBlur" data-field="repeatCode" placeholder="重复新的登录码" />
			</view>
		</view>
		<view class="btn-save" :class="{ disable: disable.submit }" @click="onSave">保存修改</view>
	</view>
</template>

<script>
import { changeCode } from '@/service/api/user.js';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '@/mixins/auth.js';
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			form: {
				oldCode: '',
				newCode: '',
				repeatCode: ''
			},
			disable: {
				submit: false
			}
		};
	},
	onLoad() {},
	methods: {
		onBlur(e) {
			console.log('onBlur', e);
			const field = e.target.dataset.field;
			if (field === 'repeatCode') {
				if (this.newCode) {
					if (this.repeatCode != this.newCode) {
						return this.$logic.showToast('重复输入新的登录码不对');
					}
				}
			}
		},
		onInput(e) {
			console.log('onInput', e);
			const field = e.target.dataset.field;
			this.form[field] = e.detail.value;
		},
		onSave() {
			if (this.disable.submit) {
				return;
			}
			if (!this.form.oldCode) {
				return this.$logic.showToast('旧登录码不能为空');
			}
			if (!this.form.newCode) {
				return this.$logic.showToast('新登录码不能为空');
			}
			if (this.form.newCode.length < 3) {
				return this.$logic.showToast('新登录码长度不能小于3位');
			}
			if (this.form.repeatCode != this.form.newCode) {
				return this.$logic.showToast('重复输入新登录码不对');
			}
			this.disable.submit = true;
			changeCode(this.form.oldCode, this.form.newCode).then(([err, res]) => {
				console.log('changeCode', err, res);
				this.disable.submit = false;
				if (!err) {
					this.$logic.showToast('修改成功').then(([err, res]) => {
						uni.reLaunch({
							url: '/answer_pages/user/mine'
						});
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: env(safe-area-inset-bottom);
	background: $pq-bg-color;
}

.wrap {
	padding: 0 40upx;
}

.user-info {
	margin-top: 40upx;
	background: #fff;
	border-radius: 20upx;

	.b-item {
		padding: 0 40upx;
		border-bottom: 1upx solid $pq-bg-color;
		height: 100upx;
		display: flex;
		align-items: center;
		position: relative;

		.s-tit {
			color: #000000;
			font-size: 26upx;
		}

		.s-input {
			flex: 1;
			color: #808080;
			text-align: right;
			font-size: 26upx;
		}
	}
}

.btn-save {
	margin-top: 50upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	color: #fff;
	font-size: 32upx;
	background: #da5650;
	border-radius: 50upx;
	letter-spacing: 10upx;
}
</style>