CRMEB多店版diy装修位置偏移修复

CRMEB多店版商城系统，官方已经发布到V4.1版本了，有很多人应该都已经使用上了。小企在使用过程中发现CRMEB多店版从V3.5版本一直到现在的V4.1版本diy装修组件的商品列表组件设置样式的左右边距属性都有bug，设置好后商品展示位置在小程序端发生偏移。以下分享的修复方案针对V3.5到V4.1版本的系统都有效。主要修复代码在uniapp端。

首先，一句话总结，就是左右边距设置的值在uniAPP端被写死了，导致设置左右边距后装修无效甚至是展示商品位置发生偏移。以下是修复步骤

第一步：找到商品列表展示组件，文件路径pages\index\components\goodsList.vue,在该文件中找到两列瀑布流模块，在left侧模块的for循环中添加动态style样式 :style="{ width: itemWidth }" ,该样式是把宽度计算的值赋值给当前view，为什么这样写请自行查阅资料。同理需要在right侧模块添加该style样式。修改好之后的完整代码是<view v-for="(item,index) in rightList" :key="index" class="wf-item" :style="{ width: itemWidth }" @tap="goDetail(item)">。

第二步：在script代码块的data() {}模块中添加字面量prConfigVal:this.dataConfig.prConfig.val,获取到后端接口设置的左右边距的数字值。该字面量添加是为了在computed计算属性中使用。

第三步：在computed:{}属性中，添加计算边距宽度的方法函数，代码如下： ``` itemWidth() { // 1. 获取动态值 // bgConfig 对应原来的 $page-padding (左右边距) const pagePadding = this.bgConfig;

javascript 复制代码

  // prConfig.val 对应原来的 $grid-gap (列间距)
  // 建议增加一个默认值，防止数据未加载时出错
  const gridGap = this.dataConfig.prConfig?.val || 10;

  // 2. 返回计算后的样式字符串
  // 注意：这里假设 bgConfig 和 prConfig.val 的单位是 'rpx'，与项目保持一致
  return `calc((100vw - 2 * ${pagePadding}rpx - ${gridGap}rpx) / 2)`;
}，

```

添加这个代码是为了计算每一个商品模块可以使用的宽度。其中bgConfig是小企自己添加上的。现在的系统中没有只有左右边距，复制代码的时候去掉bgConfig相关的代码就可以。

第四步：修改源码错误的css样式。找到文件中模块，把代码写死的

css 复制代码

//$page-padding: 10px;
//$grid-gap: 10px;

边距值注释掉或者删除掉。其次要找到.wf-item类样式删除掉这个样式定义中的width：calc()这部分宽度计算代码。系统的diy装修左右边距不起作用的原因就是这个类样式计算的是固定值而不是获取后台装修自定义值导致的。修改后的完整代码:

css 复制代码

//$page-padding: 10px;
//$grid-gap: 10px;
.wf-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20rpx;
}
.wf-item {
  //width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
  padding-bottom: 20rpx;
}
小企在这里只是注释掉了，如果嫌弃代码冗余可以直接删除注释掉的代码

经过以上步骤的修改。商品列表组件，样式中左右边距无效的bug就解除了。把小程序重新打包发布后就可以正常使用了。

如果你看到这里，非常感谢您的耐心阅读。专注于CRMEB商城全系列系统开发5年了服务了十几个老板了，如果您有部署商城，二开相关需求可以留言联系小企。敬请关注！