jinhhanhan
c26280a4d3
diy-form 组件将提交事件机制改为函数 prop (onSubmit) 接管，避免 $listeners 在 MP 端不可用的问题。 formdata 页面使用 bind 预绑定 this，防止子组件调用时上下文漂移。 新增防重复提交标记复位逻辑，优化网络失败时的重试体验。
257 lines
7.8 KiB
Vue
257 lines
7.8 KiB
Vue
<template>
|
||
<view :style="themeColor">
|
||
<block v-if="detail">
|
||
<view class="page">
|
||
<view class="system-form-wrap">
|
||
<!-- 复用 diy-form：banner / tip / 表单字段 / 提交按钮 全部由其内部渲染，样式（bannerPaddingX/tipColor/submitBgColor 等）由 form_config 控制。
|
||
:onSubmit 接管提交逻辑（带 uniacid + showModal）；跨 H5 / MP 一致，不依赖 $listeners。
|
||
注意：create 重度依赖本组件 this（id/uniacid/memberInfo/$api 等），必须在 created 阶段 bind this，
|
||
否则 diy-form 通过 this.onSubmit(formData) 调用时 this 会漂移到子组件实例 -->
|
||
<diy-form
|
||
ref="form"
|
||
:value="diyValue"
|
||
dataMode="raw"
|
||
:onSubmit="handleSubmit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<ns-empty :text="complete ? $lang('form.formdata.submitSuccess') : $lang('form.formdata.noFormInfo')" :isIndex="false"></ns-empty>
|
||
</block>
|
||
<loading-cover ref="loadingCover"></loading-cover>
|
||
<ns-login ref="login"></ns-login>
|
||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import diyForm from '@/components-diy/diy-form.vue';
|
||
import scroll from '@/common/js/scroll-view.js';
|
||
|
||
export default {
|
||
components: {
|
||
diyForm
|
||
},
|
||
mixins: [scroll],
|
||
data() {
|
||
return {
|
||
id: 0,
|
||
detail: null,
|
||
isRepeat: false,
|
||
complete: false,
|
||
scroll: true,
|
||
uniacid: 0,
|
||
isFromMpWebView: false, // 是否是从微信小程序的WebView跳转过来的
|
||
hideNavbar: false, // 查询参数中支持隐藏Navbar
|
||
urlParams: {}, // 通用 URL 透传参数收集
|
||
handleSubmit: null, // create 的 this 绑定版本，作为 :onSubmit 传给 diy-form（见 created）
|
||
|
||
// #ifdef H5
|
||
formTitle: '', // 查询参数传入的Title
|
||
enableSetTitle: false, // 查询参数传入的是否可以强制设置Title
|
||
// #endif
|
||
}
|
||
},
|
||
created() {
|
||
// 预绑定 this：create 重度依赖本组件 this（id/uniacid/memberInfo/$api/$lang/$util 等）。
|
||
// 若直接传 :onSubmit="create"，diy-form 通过 this.onSubmit(formData) 调用时，
|
||
// 普通函数调用的 this 会指向调用者（子组件实例），导致字段全部读不到。
|
||
// bind 后无论子组件如何调用，this 始终是 formdata 实例。
|
||
this.handleSubmit = this.create.bind(this);
|
||
},
|
||
computed: {
|
||
// 构造 diy-form raw 模式期望的 value 形态：
|
||
// - jsonData：透传给 ns-newform（已是 ns-newform 期望的 [{ controller, value, val }]）
|
||
// - formConfig：后端返回 camelCase（如 formPaddingX / formBgColor / labelFontSize），
|
||
// diy-form 内部 mergedFormConfig 同时兼容 snake_case 后再交给 ns-newform
|
||
// - show_banner / form_banner：交给 diy-form 渲染 banner，样式走 form_config.bannerPaddingX；form_banner 给保底图
|
||
// - show_tip / form_tip：交给 diy-form 渲染 tip，样式走 form_config；form_tip 给保底文案
|
||
// 注：本 computed 只在 <block v-if="detail"> 内被消费，无需 null 守卫
|
||
diyValue() {
|
||
return {
|
||
jsonData: this.detail.json_data,
|
||
formConfig: this.detail.form_config,
|
||
show_banner: this.detail.show_banner,
|
||
form_banner: this.detail.form_banner || 'public/uniapp/form/banner.png',
|
||
show_tip: this.detail.show_tip,
|
||
form_tip: this.detail.form_tip || this.$lang('form.formdata.formTipPlaceholder')
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
console.log("=====表单页面====",options)
|
||
if (!options.uniacid) {
|
||
uni.showModal({
|
||
title: this.$lang('form.formdata.tip'),
|
||
content: this.$lang('form.formdata.paramError'),
|
||
showCancel: false,
|
||
success: () => { }
|
||
})
|
||
return false
|
||
}
|
||
|
||
uni.setStorageSync('skipPrivacyCheck', true);
|
||
|
||
// #ifdef H5
|
||
this.formTitle = options?.title ?? '';
|
||
this.enableSetTitle = options?.enable_set_title == 1;
|
||
// #endif
|
||
|
||
this.uniacid = options.uniacid
|
||
this.id = options.id || 0
|
||
this.isFromMpWebView = options.from === 'mp-webview';
|
||
this.hideNavbar = Boolean(options?.hide_navbar);
|
||
|
||
// 通用 URL 参数收集：除业务保留字段外，其余全部透传给后端
|
||
// 后端会做卫生过滤并广播事件，供 recommend 等插件消费
|
||
const reservedKeys = ['uniacid', 'id', 'scene', 'from', 'hide_navbar', 'title', 'enable_set_title'];
|
||
this.urlParams = {};
|
||
for (let key in options) {
|
||
if (reservedKeys.indexOf(key) !== -1) continue;
|
||
this.urlParams[key] = options[key];
|
||
}
|
||
|
||
if (options.scene) {
|
||
const scene = decodeURIComponent(options.scene)
|
||
const params = scene.split('&')
|
||
params.length && params.forEach(item => {
|
||
if (item.indexOf('id') != -1) {
|
||
this.id = item.split('-')[1]
|
||
}
|
||
// scene 中也可能携带其他参数
|
||
let pair = item.split('=');
|
||
if (pair.length === 2 && pair[0] !== 'id') {
|
||
this.urlParams[pair[0]] = pair[1];
|
||
}
|
||
})
|
||
}
|
||
|
||
// #ifdef H5
|
||
if (this.isFromMpWebView || this.hideNavbar) {
|
||
this.$nextTick(() => {
|
||
const navbar = document.querySelector('uni-page-head')
|
||
if (navbar) navbar.style.display = 'none'
|
||
})
|
||
}
|
||
// #endif
|
||
|
||
this.getData()
|
||
},
|
||
|
||
watch: {
|
||
storeToken(newVal, oldVal) {
|
||
newVal && this.getData()
|
||
}
|
||
},
|
||
onShow() {
|
||
this.updateNavbarTitle();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.$api.sendRequest({
|
||
url: '/form/api/form/info',
|
||
data: {
|
||
form_id: this.id,
|
||
uniacid: this.uniacid
|
||
},
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.detail = res.data
|
||
this.updateNavbarTitle();
|
||
}
|
||
this.$refs.loadingCover && this.$refs.loadingCover.hide()
|
||
},
|
||
fail: () => {
|
||
this.$refs.loadingCover && this.$refs.loadingCover.hide()
|
||
}
|
||
})
|
||
},
|
||
updateNavbarTitle() {
|
||
if (!this.detail?.form_name) return;
|
||
let formName = this.detail.form_name;
|
||
// #ifdef H5
|
||
if (this.enableSetTitle && this.formTitle) {
|
||
formName = this.formTitle;
|
||
}
|
||
// #endif
|
||
uni.setNavigationBarTitle({ title: formName });
|
||
},
|
||
// 由 diy-form 内置提交按钮触发：diy-form handleSubmit 已先做 verify()，
|
||
// 仅在通过时才通过 :onSubmit 函数 prop 调用本方法（跨 H5 / MP 一致，不走 $emit / $listeners）。
|
||
// 注意：本方法通过 created 中 this.handleSubmit = this.create.bind(this) 预绑定 this，
|
||
// 因此内部所有 this.xxx 都指向 formdata 实例，不会漂移到子组件。
|
||
create(formData) {
|
||
// 防重复提交：console 在拦截之前，避免日志噪声；拦截后立即置位
|
||
if (this.isRepeat) return
|
||
|
||
const data = {
|
||
form_id: this.id,
|
||
form_data: typeof formData === 'string' ? formData : JSON.stringify(formData),
|
||
uniacid: this.uniacid,
|
||
url_params: JSON.stringify(this.urlParams),
|
||
member_id: this.memberInfo ? this.memberInfo.id : 0
|
||
}
|
||
console.log(`=====表单提交====`, data);
|
||
|
||
|
||
this.isRepeat = true
|
||
this.$api.sendRequest({
|
||
url: '/form/api/form/create',
|
||
data,
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
this.complete = true
|
||
uni.showModal({
|
||
title: this.$lang('form.formdata.tip'),
|
||
content: this.$lang('form.formdata.submitSuccess'),
|
||
showCancel: false,
|
||
success: () => { }
|
||
})
|
||
} else {
|
||
this.isRepeat = false
|
||
this.$util.showToast({
|
||
title: res.message
|
||
})
|
||
}
|
||
},
|
||
fail: () => {
|
||
// 网络失败时复位防重复标记，允许用户重试
|
||
this.isRepeat = false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #fff;
|
||
}
|
||
|
||
.system-form-wrap {
|
||
overflow: hidden;
|
||
margin: 0 0 60rpx 0;
|
||
}
|
||
|
||
// 穿透 diy-form 包装层：消除其自带的 10rpx 圆角与白色背景，
|
||
// 让 form 内容区域保持与原始 ns-newform 接入时一致的视觉
|
||
.system-form-wrap ::v-deep .diy-from {
|
||
background: transparent;
|
||
border-radius: 0;
|
||
}
|
||
|
||
::v-deep .mescroll-totop {
|
||
/* #ifdef H5 */
|
||
right: 27rpx !important;
|
||
bottom: 120rpx !important;
|
||
/* #endif */
|
||
/* #ifdef MP */
|
||
right: 27rpx !important;
|
||
bottom: 180rpx !important;
|
||
/* #endif */
|
||
}
|
||
</style>
|