Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: 重构商品留言表单逻辑，替换为diy-form组件

Browse Source 
1.  移除页面data中维护的留言表单数据，改为通过computed实时从商品详情数据构建diy-form所需格式
2.  替换ns-newform为diy-form组件，使用raw模式并接管表单提交逻辑
3.  完善平台别名映射，新增更多小程序平台兼容配置
4.  为diy-form新增占位符样式属性绑定
5.  重构商品表单接口处理逻辑，统一所有元数据字段的初始化和兼容处理
This commit is contained in:
ZF Sun
2026-07-18 10:55:39 +08:00
parent 1ac0fb2484
commit 059630ba2c
5 changed files with 75 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
common/js/goods_detail_base.js
View File

@@ -321,12 +321,10 @@ export default {
},
/**
* 获取商品表单
* 后端与 /form/api/form/info 对齐：res.data = {json_data:[...组件], form_config:{...样式(camelCase)}}
* - 把组件数组塞进 goodsSkuDetail.goods_form（保持下游 <ns-form :data> 用法不变）
* - 把 form_config 单独存到 goodsSkuDetail.goods_form_config，下游 <ns-form :formConfig="..."> 消费
* 历史扁平数组兼容：若后端还是返回 list 形态（旧实现），form_config 留空，走 ns-form 默认值。
* 数据兜底：res.data 为 null（商品没绑表单）时也初始化为空数组 + 空对象，
* 避免下游 v-bind 把 undefined 传给 ns-newform 的 Array-typed :data prop。
* 后端 goodsform 接口与 info() 对齐，返回 {json_data, form_config(camelCase),
* form_name, form_tip, form_banner, show_banner, show_tip}。
* 全部字段都落到 goodsSkuDetail 上：表单字段 / 样式 / banner / tip 元数据，
* 给 detail.vue 的 diy-form 直接消费。所有分支都做兜底初始化，避免下游拿到 undefined。
*/
async getGoodsForm() {
const res = await this.$api.sendRequest({
@@ -336,20 +334,41 @@ export default {
},
async: false
});
if (!res || res.code != 0 || !res.data) {
// 商品没绑表单 / 接口报错：保持 goods_form 是空数组，避免下游 type 警告
const empty = () => {
this.$set(this.goodsSkuDetail, 'goods_form', []);
this.$set(this.goodsSkuDetail, 'goods_form_config', {});
this.$set(this.goodsSkuDetail, 'goods_form_name', '');
this.$set(this.goodsSkuDetail, 'goods_form_tip', '');
this.$set(this.goodsSkuDetail, 'goods_form_banner', '');
this.$set(this.goodsSkuDetail, 'goods_form_show_banner', false);
this.$set(this.goodsSkuDetail, 'goods_form_show_tip', false);
};
if (!res || res.code != 0 || !res.data) {
empty();
return;
}
if (Array.isArray(res.data)) {
// 旧版扁平数组兼容
empty();
this.$set(this.goodsSkuDetail, 'goods_form', res.data);
this.$set(this.goodsSkuDetail, 'goods_form_config', {});
} else {
this.$set(this.goodsSkuDetail, 'goods_form', res.data.json_data || []);
this.$set(this.goodsSkuDetail, 'goods_form_config', res.data.form_config || {});
return;
}
this.$set(this.goodsSkuDetail, 'goods_form', res.data.json_data || []);
this.$set(this.goodsSkuDetail, 'goods_form_config', res.data.form_config || {});
this.$set(this.goodsSkuDetail, 'goods_form_name', res.data.form_name || '');
this.$set(this.goodsSkuDetail, 'goods_form_tip', res.data.form_tip || '');
this.$set(this.goodsSkuDetail, 'goods_form_banner', res.data.form_banner || '');
// show_banner/show_tip 后端存 0/1，归一化 boolean
this.$set(
this.goodsSkuDetail,
'goods_form_show_banner',
res.data.show_banner == 1 ? true : (res.data.show_banner === 0 ? false : true)
);
this.$set(
this.goodsSkuDetail,
'goods_form_show_tip',
res.data.show_tip == 1 ? true : (res.data.show_tip === 0 ? false : true)
);
}
},
/**