/**
|
* CForm
|
* @author Tevin
|
*/
|
|
<template>
|
<form
|
class="c-form"
|
@submit="evt=>handleSubmit()"
|
>
|
<slot :formRes="formRes" />
|
</form>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import './cForm.scss';
|
|
export default {
|
name: 'CForm',
|
props: {
|
formData: Object,
|
onChange: Function,
|
onFinish: Function,
|
},
|
data() {
|
return {
|
formRes: {
|
formData: this.formData,
|
},
|
validators: {},
|
};
|
},
|
methods: {
|
handleSubmit() {
|
const checklist = [];
|
Object.keys(this.validators).forEach((key) => {
|
// 仍有效的验证器
|
if (this.validators[key]) {
|
checklist.push(this.validators[key]());
|
}
|
});
|
Promise.all(checklist).then((validations) => {
|
for (let validation of validations) {
|
// 第一个不通过项提示
|
if (!validation.passed) {
|
Taro.showToast({
|
title: validation.msg,
|
icon: 'none',
|
mask: false,
|
duration: 2000,
|
});
|
return;
|
}
|
}
|
// 所有检查通过
|
this.onFinish && this.onFinish();
|
});
|
},
|
preCheckValidators(callback) {
|
const checklist = [];
|
Object.keys(this.validators).forEach((key) => {
|
// 仍有效的验证器
|
if (this.validators[key]) {
|
checklist.push(this.validators[key]('msgOnly'));
|
}
|
});
|
Promise.all(checklist).then((validations) => {
|
for (let validation of validations) {
|
// 跳过同意协议
|
if (validation.name === '$agreement') {
|
continue;
|
}
|
if (!validation.passed) {
|
Taro.showToast({
|
title: validation.msg,
|
icon: 'none',
|
mask: false,
|
duration: 2000,
|
});
|
// 检查失败
|
callback && callback(false);
|
return;
|
}
|
}
|
// 检查通过
|
callback && callback(true);
|
});
|
},
|
},
|
mounted() {
|
// 当表单项变化时
|
this.formRes.$handleChange = (evt = []) => {
|
Object.keys(evt).forEach((key) => {
|
// 直接改值
|
if (typeof this.formRes.formData[key] === 'undefined') {
|
this.$set(this.formRes.formData, key, evt[key]);
|
} else {
|
this.formRes.formData[key] = evt[key];
|
}
|
});
|
this.onChange && this.onChange(evt);
|
};
|
// 注册表单验证器
|
this.formRes.$regItemValidator = (name, cb) => {
|
this.validators[name] = cb;
|
};
|
},
|
beforeDestroy() {
|
this.validators = {};
|
},
|
};
|
</script>
|
