ZF sun
059630ba2c
1. 移除页面data中维护的留言表单数据，改为通过computed实时从商品详情数据构建diy-form所需格式 2. 替换ns-newform为diy-form组件，使用raw模式并接管表单提交逻辑 3. 完善平台别名映射，新增更多小程序平台兼容配置 4. 为diy-form新增占位符样式属性绑定 5. 重构商品表单接口处理逻辑，统一所有元数据字段的初始化和兼容处理
112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
/**
|
||
* form-platform-mixin.js
|
||
*
|
||
* 表单组件共用的平台检测 mixin
|
||
*
|
||
* 集中维护 3 个 computed：
|
||
* - platform 当前运行平台 key（与后端 formConfig.terminal 键名对齐）
|
||
* - platformAliases 后端键名 → 内部 platform 名 兼容层
|
||
* - platformConfigKeys 当前平台的有效配置键集合（用于从 formConfig.terminal 查找）
|
||
*
|
||
* 消费方：
|
||
* - components/ns-form/ns-form.vue
|
||
* - components/ns-newform/ns-newform.vue
|
||
* - 任何需要按端读取 formConfig.terminal.{h5|weapp|harmony|app} 的表单组件
|
||
*
|
||
* 设计原则：
|
||
* 1. 单一真值：避免 ns-form / ns-newform 各自维护导致漂移
|
||
* 2. 纯 computed mixin：不依赖 props/data/methods，便于跨组件复用
|
||
* 3. 不依赖 util.js 等其它模块，避免循环依赖
|
||
* 4. 通过 mixins: [...] 引入，组件侧不再写平台判断代码
|
||
*
|
||
* 用法：
|
||
* import formPlatformMixin from '@/common/js/form-platform-mixin.js';
|
||
* export default {
|
||
* mixins: [formPlatformMixin],
|
||
* computed: {
|
||
* config() {
|
||
* const cur = this.platform;
|
||
* const keys = this.platformConfigKeys;
|
||
* // ...
|
||
* }
|
||
* }
|
||
* };
|
||
*/
|
||
|
||
export default {
|
||
computed: {
|
||
/**
|
||
* 当前运行平台标识（与后端 formConfig.terminal 键名对齐）
|
||
* 后端 terminal 键：h5 / weapp / harmony / app / mp-alipay / mp-baidu / mp-toutiao
|
||
*/
|
||
platform() {
|
||
// #ifdef H5
|
||
return 'h5';
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
return 'weapp';
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
return 'mp-alipay';
|
||
// #endif
|
||
// #ifdef MP-BAIDU
|
||
return 'mp-baidu';
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
return 'mp-toutiao';
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
return 'app';
|
||
// #endif
|
||
// #ifdef MP-HARMONY
|
||
return 'harmony';
|
||
// #endif
|
||
// #ifdef QUICKAPP-WEBVIEW
|
||
return 'quickapp';
|
||
// #endif
|
||
return 'h5';
|
||
},
|
||
/**
|
||
* 后端键名 → 内部 platform 名 兼容层
|
||
* canonical 与 platform() 返回值一致；别名为兼容 DB 旧 app_type（upgrade-to-ai-agent.sql）
|
||
* 及 uniapp / 设计器的历史命名。键名严格区分大小写。
|
||
*/
|
||
platformAliases() {
|
||
return {
|
||
'h5': 'h5',
|
||
'weapp': 'weapp',
|
||
'mp-weixin': 'weapp',
|
||
'wechat': 'weapp',
|
||
'harmony': 'harmony',
|
||
'app': 'app',
|
||
'app-plus': 'app',
|
||
'mp-alipay': 'mp-alipay',
|
||
'aliapp': 'mp-alipay',
|
||
'alipay': 'mp-alipay',
|
||
'mp-baidu': 'mp-baidu',
|
||
'baiduapp': 'mp-baidu',
|
||
'baidu': 'mp-baidu',
|
||
'mp-toutiao': 'mp-toutiao',
|
||
'toutiao': 'mp-toutiao'
|
||
};
|
||
},
|
||
/**
|
||
* 当前平台的有效配置键集合
|
||
* 用于 config() 中查找 formConfig.terminal 下的平台差异化配置：
|
||
* - 后端格式：formConfig.terminal = { h5: {...}, weapp: {...}, harmony: {...} }
|
||
* - 旧式扁平：formConfig[platformKey] = { ... }
|
||
* 返回所有映射到当前 platform 的后端键名，方便两种结构都能命中。
|
||
*/
|
||
platformConfigKeys() {
|
||
const cur = this.platform;
|
||
const aliases = this.platformAliases;
|
||
const keys = [];
|
||
Object.keys(aliases).forEach(k => {
|
||
if (aliases[k] === cur) keys.push(k);
|
||
});
|
||
// 加入当前平台名（兼容 formConfig[platform] 这种扁平写法）
|
||
if (keys.indexOf(cur) === -1) keys.push(cur);
|
||
return keys;
|
||
}
|
||
}
|
||
}; |