@tcly-pangu/visitor-form

<!-- 游客列表 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)
    // ...
}