front-end/mobile-code/src/pages/user/password.vue

<template>
	<div class="app-content">
		<form @submit="formSubmit">
			<div class="module-com">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">旧密码</div>
					<input v-model="form.old" placeholder-class="phcolor" class="tui-input" name="old" placeholder="首次设置不需要填写" maxlength="50" type="password" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">密码</div>
					<input v-model="form.new" placeholder-class="phcolor" class="tui-input" name="new" placeholder="请输入密码" maxlength="50" type="password" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">确认密码</div>
					<input v-model="form.confirm" placeholder-class="phcolor" class="tui-input" name="confirm" placeholder="请输入确认密码" maxlength="50" type="password" />
				</tui-list-cell>
				<div class="prompt-text">提示：余额支付时需要用到支付密码</div>
				<div class="btn-wrap">
					<button class="button-com red big" formType="submit">确认</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
import TuiListCell from '@/components/plugin/list-cell'
const form = require('@/utils/formValidation.js')
// api
import { modifyPassword } from '@/api/member'
export default {
	name: 'password',
	components: {
		TuiListCell
	},
	data() {
		return {
			form: {
				old: '',
				new: '',
				confirm: ''
			}
		}
	},
	methods: {
		// 确认
		confirmFn() {
			modifyPassword(this.form).then(res => {
				this.$msg('修改成功！')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/user'
					})
				}, 1000)
			})
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = [
				{
					name: 'old',
					rule: ['required'],
					msg: ['请输入旧密码']
				},
				{
					name: 'new',
					rule: ['required'],
					msg: ['请输入新密码']
				},
				{
					name: 'confirm',
					rule: ['required'],
					msg: ['请输入确认密码']
				}
			]
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				this.confirmFn()
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	// 公共
	.line-cell {
		.tui-title {
			width: 210px;
			color: $fontColor2;
		}
		.tui-input {
			width: calc(100% - 210px);
			font-size: 28px;
		}
		.tui-placeholder {
			color: #ccc;
		}
		.phcolor {
			color: #ccc;
		}
	}
	.prompt-text {
		color: $fontColor3;
		margin-top: 20px;
		margin-left: 30px;
	}
	.btn-wrap {
		width: 90%;
		margin: 60px auto;
		.button-com {
			width: 100%;
			margin: 0 auto;
		}
	}
</style>