jufubao-mall 2.0.29-beta1 → 2.0.31

package/src/components/JfbMallSpecialInfo/cusAttr/style.js

@@ -0,0 +1,459 @@
+import {
+  dataVal,
+  statusDataVal,
+  statusShow,
+  cRaBorShadow,
+  cusDisabled,
+  getCustomAttr,
+  TestCssInfo
+} from "@/utils/AttrTools";
+export default function (data = {}, gValue = {}, gColor = {}, oldData = {}) {
+  //内容边框兼容
+  let productDisabled = cusDisabled({
+    data,
+    key: 'productStyle',
+    fields: { 'contBgColorStatus': ['contBgColor'], 'contBorder': ['contBorder', 'bs'] },
+    gValue
+  });
+  let defContBorder = cRaBorShadow(data, 'contBorder', { disabled: productDisabled, old: ['is_border', 'is_border_w', 'is_border_c', 'solid'] }, gValue);
+  let defContShadow = cRaBorShadow(data, 'contShadow', { old: ['is_shadow', 'is_shadow_w', 'is_shadow_bg'] }, gValue);
+  return [
+    {
+      ele: 'title',
+      label: '商品样式',
+      size: 'small',
+      groupKey: 'style',
+    },
+    {
+      label: '商品名称',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contStyleStatus',
+      value: statusDataVal({ data, key: 'contStyleStatus', fields: ['contStyle', 'contSpacing'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '',
+      ele: 'xd-text-and-bgc',
+      groupKey: 'style',
+      valueKey: 'contStyle',
+      value: dataVal({ data, key: 'contStyle', dValue: {}, gValue }),
+      hidden: !statusShow({ data, key: 'contStyleStatus', fields: ['contSpacing', 'contStyle'], gValue }),
+      setting: {
+        fontSize: false,
+        weight: true,
+        bgColor: false,
+        selected: false,
+        default: {
+          color: '#333',
+          fontWeight: 'normal'
+        },
+        isBorder: false,
+      },
+      handleCustom({ action, data }) {
+        XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_font_size' })
+          .then(res => {
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+            data.cb([])
+          });
+      },
+    },
+    {
+      label: "间距",
+      groupKey: 'style',
+      ele: 'xd-slider',
+      valueKey: "contSpacing",
+      value: dataVal({ data, key: 'contSpacing', dValue: 16, gValue }),
+      hidden: !statusShow({ data, key: 'contStyleStatus', fields: ['contSpacing', 'contStyle'], gValue }),
+      className: "input100",
+      labelInline: true,
+      setting: {
+        min: 0,
+        max: 100,
+        step: 1,
+        showStops: false,
+        showInput: false,
+      }
+    },
+    { ele: 'group_end' },
+    {
+      label: '品牌样式',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contBrandStatus',
+      value: statusDataVal({ data, key: 'contBrandStatus', fields: ['contBrandColor', 'contBrandBgColor'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '文字颜色',
+      ele: 'xd-color',
+      labelInline: true,
+      valueKey: 'contBrandColor',
+      value: dataVal({ data, key: 'contBrandColor', dValue: '#999', gValue }),
+      hidden: !statusShow({ data, key: 'contBrandStatus', fields: ['contBrandColor', 'contBrandBgColor'], gValue }),
+      placeholder: '请选择文字颜色',
+      className: 'input80',
+      groupKey: 'style',
+      setting: {
+        showAlpha: true
+      },
+    },
+    {
+      label: '背景颜色',
+      ele: 'xd-color',
+      labelInline: true,
+      valueKey: 'contBrandBgColor',
+      value: dataVal({ data, key: 'contBrandBgColor', dValue: '', gValue }),
+      hidden: !statusShow({ data, key: 'contBrandStatus', fields: ['contBrandColor', 'contBrandBgColor'], gValue }),
+      placeholder: '请选择背景颜色',
+      className: 'input80',
+      groupKey: 'style',
+      setting: {
+        showAlpha: true
+      },
+    },
+    { ele: 'group_end' },
+    {
+      label: '商品背景',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contBgColorStatus',
+      value: statusDataVal({
+        data,
+        key: 'contBgColorStatus',
+        fields: ['contBgColor'],
+        gValue,
+        cusField: ['productStyle']
+      }),
+      disabled: productDisabled,
+      isRefresh: productDisabled,
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '背景色',
+      ele: 'xd-color',
+      valueKey: 'contBgColor',
+      labelInline: true,
+      value: dataVal({
+        data,
+        key: 'contBgColor',
+        dValue: [getCustomAttr(data['productStyle'], 'backgroundColor'), '#fff'],
+        gValue,
+      }),
+      hidden: !statusShow({ data, key: 'contBgColorStatus', fields: ['contBgColor'], gValue }),
+      disabled: productDisabled,
+      isRefresh: productDisabled,
+      placeholder: '请选择背景颜色',
+      className: 'input80',
+      groupKey: 'style',
+      setting: {
+        showAlpha: true
+      },
+    },
+    { ele: 'group_end' },
+    {
+      label: '商品描边',
+      ele: 'xd-border',
+      labelInline: true,
+      groupKey: 'style',
+      valueKey: 'contBorder',
+      value: defContBorder,
+      disabled: productDisabled,
+      isRefresh: productDisabled,
+      setting: {
+        selected: defContBorder.type,
+        isRadio: true,//启用editx默认
+        isDef: true, //启动默认选项
+        //==设置默认值==
+        color: '#e5e5e5',
+        width: '0',
+        style: 'solid'
+        //==设置默认值==
+      },
+    },
+    {
+      label: '商品圆角',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contRadiusStatus',
+      value: statusDataVal({ data, key: 'contRadiusStatus', cValue: 'N', fields: ['contRadius'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '无圆角', value: 'N' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '',
+      ele: 'xd-site-select-list',
+      labelInline: true,
+      valueKey: 'contRadius',
+      value: dataVal({ data, key: 'contRadius', dValue: '16', gValue }),
+      hidden: !statusShow({ data, key: 'contRadiusStatus', fields: ['contRadius'], gValue }),
+      placeholder: '请选择商品是否设置圆角',
+      multiple: false,
+      className: 'input80',
+      groupKey: 'style',
+      handleCustom({ action, data }) {
+        XdBus.getParentApi('getOptionsSettingList')({
+          setting_id: 'edtix_style_radius',
+          key: Date.now()
+        })
+          .then(res => {
+            res.list = res.list.filter(item => {
+              return item.label !== '无';
+            });
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    { ele: 'group_end' },
+    {
+      label: '商品图圆角',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'imageRadiusStatus',
+      value: statusDataVal({ data, key: 'imageRadiusStatus', fields: ['imageRadius'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '无圆角', value: 'N' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '',
+      ele: 'xd-site-select-list',
+      valueKey: 'imageRadius',
+      labelInline: true,
+      groupKey: 'style',
+      placeholder: '请选择商品图圆角是否设置圆角',
+      multiple: false,
+      className: 'input80',
+      value: dataVal({ data, key: 'imageRadius', dValue: '8', gValue }),
+      hidden: !statusShow({ data, key: 'imageRadiusStatus', fields: ['imageRadius'], gValue }),
+      handleCustom({ action, data }) {
+        XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+          .then(res => {
+            res.list = res.list.filter(item => {
+              return item.label !== '无';
+            });
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    { ele: 'group_end' },
+    {
+      label: '商品投影',
+      ele: 'xd-shadow',
+      labelInline: true,
+      groupKey: 'style',
+      valueKey: 'contShadow',
+      value: defContShadow,
+      className: 'input100',
+      setting: {
+        selected: defContShadow.type,
+        isRadio: true,
+        isDef: true,
+        default: {
+          color: 'rgba(0,0,0,.05)',
+          width: '10',
+        }
+      },
+      handleCustom({ action, data }) {
+        XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+          .then(res => {
+            res.list = res.list.filter(item => {
+              return item.label !== '无';
+            });
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+            data.cb([])
+          });
+      },
+    },
+    {
+      label: '商品间距',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'columnRowStatus',
+      value: statusDataVal({ data, key: 'columnRowStatus', fields: ['mainSpacing', 'rowMainSpacing'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '列间距',
+      ele: 'el-input',
+      type: 'number',
+      labelInline: true,
+      groupKey: 'style',
+      valueKey: 'mainSpacing',
+      value: dataVal({ data, key: 'mainSpacing', dValue: 16, gValue }),
+      hidden: !statusShow({ data, key: 'columnRowStatus', fields: ['mainSpacing', 'rowMainSpacing'], gValue }),
+      inline: false,
+      append: 'px',
+      className: 'input60',
+    },
+    {
+      label: '行间距',
+      ele: 'el-input',
+      type: 'number',
+      labelInline: true,
+      groupKey: 'style',
+      valueKey: 'rowMainSpacing',
+      value: dataVal({ data, key: 'rowMainSpacing', dValue: 16, gValue }),
+      hidden: !statusShow({ data, key: 'columnRowStatus', fields: ['mainSpacing', 'rowMainSpacing'], gValue }),
+      append: 'px',
+      inline: false,
+      className: 'input60',
+    },
+    { ele: 'group_end' },
+    {
+      label: '商品留白',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contPaddingStatus',
+      value: statusDataVal({ data, key: 'contPaddingStatus', fields: ['contPadding'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '',
+      ele: 'xd-margin-padding',
+      groupKey: 'style',
+      valueKey: 'contPadding',
+      value: dataVal({ data, key: 'contPadding', dValue: 16, gValue, isPM: true }),
+      hidden: !statusShow({ data, key: 'contPaddingStatus', fields: ['contPadding'], gValue }),
+      setting: {
+        type: 'padding',
+      },
+    },
+    { ele: 'group_end' },
+    {
+      label: '内容区背景',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contBgStatus',
+      value: statusDataVal({ data, key: 'contBgStatus', fields: ['contBackgroundColor', 'contBackground'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '背景色',
+      ele: 'xd-color',
+      groupKey: 'style',
+      valueKey: 'contBackgroundColor',
+      value: dataVal({ data, key: 'contBackgroundColor', dValue: null, gValue }),
+      hidden: !statusShow({ data, key: 'contBgStatus', fields: ['contBackgroundColor', 'contBackground'], gValue }),
+      placeholder: '请选择背景颜色',
+      labelInline: true,
+      classNmae: 'input80',
+    },
+    {
+      label: '背景图',
+      ele: 'xd-upload',
+      labelInline: true,
+      valueKey: 'contBackground',
+      value: dataVal({
+        data,
+        key: 'contBackground',
+        dValue: null,
+        gValue,
+      }),
+      defaultValue: dataVal({
+        data,
+        key: 'contBackground',
+        dValue: null,
+        gValue,
+      }),
+      slot: true,
+      tipsformet: '上传文件格式：@imageType@，不超过@size@MB.，建议宽度为：<span style="color:red">750</span>像素',
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      hidden: !statusShow({ data, key: 'contBgStatus', fields: ['contBackgroundColor', 'contBackground'], gValue }),
+      oneWidth: 120,
+      oneHeight: 120,
+      size: 5,
+      action: 'aliyun',
+      groupKey: 'style',
+    },
+    { ele: 'group_end' },
+    {
+      label: '内容区边距',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contMarginStatus',
+      value: statusDataVal({ data, key: 'contMarginStatus', fields: ['contMargin'], gValue }),
+      labelInline: true,
+      list: [
+        { label: '默认', value: 'D' },
+        { label: '自定义', value: 'C' },
+      ]
+    },
+    { ele: 'group_start' },
+    {
+      label: '',
+      ele: 'xd-margin-padding',
+      groupKey: 'style',
+      valueKey: 'contMargin',
+      value: dataVal({
+        data,
+        key: 'contMargin',
+        dValue: null,
+        gValue,
+        isPM: true,
+        isCPM: false,
+      }
+      ),
+      setting: {
+        type: 'margin',
+      },
+      hidden: !statusShow({ data, key: 'contMarginStatus', fields: ['contMargin'], gValue }),
+      inline: false,
+      notice: '边距设置，单位：<span style="color: red">像素</span>。默认值：<span style="color: red">0</span> 像素',
+    },
+    { ele: 'group_end' },
+  ].filter(i => i)
+}