refactor(goods-detail): 升级商品留言表单组件与接口适配
1. 将原有的同步调用改为异步处理handleGoodsSkuData和getGoodsForm方法 2. 重构getGoodsForm接口请求逻辑,兼容新旧版接口返回格式 3. 新增goods_form_config字段支持新表单组件样式配置 4. 替换旧版ns-form为ns-newform组件,完善空数据兜底处理 5. 优化商品留言初始化的可选链操作避免空指针报错
This commit is contained in:
@@ -79,7 +79,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 处理商品详情数据
|
// 处理商品详情数据
|
||||||
handleGoodsSkuData() {
|
async handleGoodsSkuData() {
|
||||||
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
||||||
//设置标题
|
//设置标题
|
||||||
// this.$langConfig.title(this.navbarData.title);
|
// this.$langConfig.title(this.navbarData.title);
|
||||||
@@ -186,7 +186,7 @@ export default {
|
|||||||
|
|
||||||
// this.getBarrageData();
|
// this.getBarrageData();
|
||||||
if (this.addonIsExist.form) {
|
if (this.addonIsExist.form) {
|
||||||
this.getGoodsForm();
|
await this.getGoodsForm();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -321,17 +321,35 @@ 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。
|
||||||
*/
|
*/
|
||||||
getGoodsForm() {
|
async getGoodsForm() {
|
||||||
this.$api.sendRequest({
|
const res = await this.$api.sendRequest({
|
||||||
url: "/form/api/form/goodsform",
|
url: "/form/api/form/goodsform",
|
||||||
data: {
|
data: {
|
||||||
goods_id: this.goodsSkuDetail.goods_id
|
goods_id: this.goodsSkuDetail.goods_id
|
||||||
},
|
},
|
||||||
success: res => {
|
async: false
|
||||||
if (res.code == 0 && res.data) this.$set(this.goodsSkuDetail, 'goods_form', res.data);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
if (!res || res.code != 0 || !res.data) {
|
||||||
|
// 商品没绑表单 / 接口报错:保持 goods_form 是空数组,避免下游 type 警告
|
||||||
|
this.$set(this.goodsSkuDetail, 'goods_form', []);
|
||||||
|
this.$set(this.goodsSkuDetail, 'goods_form_config', {});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (Array.isArray(res.data)) {
|
||||||
|
// 旧版扁平数组兼容
|
||||||
|
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 || {});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -411,7 +411,11 @@
|
|||||||
</view> -->
|
</view> -->
|
||||||
<!-- v-if="goodsSkuDetail.goodsForm" -->
|
<!-- v-if="goodsSkuDetail.goodsForm" -->
|
||||||
<view style="padding: 0 30rpx;">
|
<view style="padding: 0 30rpx;">
|
||||||
<ns-form :data="informationform" ref="form"></ns-form>
|
<ns-newform
|
||||||
|
:data="informationform"
|
||||||
|
:form-config="goodsSkuDetail.goods_form_config"
|
||||||
|
ref="form"
|
||||||
|
></ns-newform>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="button-box"><button type="primary" @click="saveubfirnation()">{{ $lang('goods.detail.confirm') }}</button></view>
|
<view class="button-box"><button type="primary" @click="saveubfirnation()">{{ $lang('goods.detail.confirm') }}</button></view>
|
||||||
|
|||||||
@@ -156,7 +156,7 @@ export default {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 处理商品数据
|
// 处理商品数据
|
||||||
this.handleGoodsSkuData();
|
await this.handleGoodsSkuData();
|
||||||
|
|
||||||
// 限时折扣
|
// 限时折扣
|
||||||
if (this.goodsSkuDetail.promotion_type == 1 && this.addonIsExist.discount) {
|
if (this.goodsSkuDetail.promotion_type == 1 && this.addonIsExist.discount) {
|
||||||
@@ -221,7 +221,7 @@ export default {
|
|||||||
|
|
||||||
//商品留言打开
|
//商品留言打开
|
||||||
showinformation(){
|
showinformation(){
|
||||||
this.informationform = this.goodsSkuDetail.goods_form
|
this.informationform = this.goodsSkuDetail?.goods_form ?? [];
|
||||||
this.$refs.informationPopup.open();
|
this.$refs.informationPopup.open();
|
||||||
},
|
},
|
||||||
//商品留言关闭
|
//商品留言关闭
|
||||||
|
|||||||
Reference in New Issue
Block a user