@tcly-pangu/visitor-form
v1.2.0
Published
游客列表
Downloads
8
Keywords
Readme
<!-- 游客列表 HTML -->
<visitor-form
ref="visitorForm"
v-model="visitorList"
:visitor-template-version="templateVersion"
:price-list="priceList"
:order-category="orderCategory"
@ok="handleVisitorVerification">
<template v-slot:button>
<!-- 按钮插槽 -->
</template>
</visitor-form>
/**
* 保存方法
*/
save() {
// 记录请求参数
this.requestParams = {}
// 开启loading
this.btnLoading = true
// 游客信息前端校验
this.$refs.visitorForm.validate()
.then(res => {
// 游客信息
this.requestParams.visitorInfos = res || []
// 证件要素校验
return this.$refs.visitorForm.documentVerification()
})
.then(() => {
// 调用保存接口
return visitiorsSave(this.requestParams)
})
.then(() => {
// 保存成功提示
this.$message.success('保存成功')
// 成功后续处理
// ...
})
.catch(err => {
// 错误校验提示
err.message && this.$message.error(err.message || '保存失败')
// 滚动到错误字段
this.$nextTick(() => { scrollToErrorField() })
})
.finally(() => {
// 关闭loading
this.btnLoading = false
})
}
/**
* 游客信息后端校验成功回调
* @param {Array} visitorList 游客列表
*/
handleVisitorVerification(visitorList) {
// 成功或跳过校验的完整游客列表数据
this.requestParams.visitorInfos = visitorList || []
// 通过之前记录的请求参数进行保存操作
// ...
// visitiorsSave(this.requestParams)
// ...
}