yoe-opm-web/src/store/modules/pcdiy.ts

import { defineStore } from 'pinia';
import { toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { cloneDeep } from 'lodash-es';
import { fa } from 'element-plus/es/locale/index.mjs';

const usePcdiyStore = defineStore('pcdiy', {
  state: () => {
    return {
      componentList: [],
      uniqueIdCounter: 0,
      currentIndex: -99, // 当前正在编辑的组件下标
      currentKey: '',
      editTab: 'content', // 编辑页面
      predefineColors: [
        '#F4391c',
        '#ff4500',
        '#ff8c00',
        '#FFD009',
        '#ffd700',
        '#19C650',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#FF407E',
        '#CFAF70',
        '#A253FF',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      global: {
        title: '页面',
        // 公共模板属性，所有组件都继承，无需重复定义，组件内部根据业务自行调用
        template: {
          textColor: '#303133', // 文字颜色
          pageStartBgColor: '', // 组件底部背景颜色（开始）
          pageEndBgColor: '', // 组件底部背景颜色（结束）
          pageGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）

          componentStartBgColor: '', // 组件背景颜色（开始）
          componentEndBgColor: '', // 组件背景颜色（结束）
          componentGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）

          topRounded: 0, // 组件上圆角
          bottomRounded: 0, // 组件下圆角

          padding: {
            top: 0, // 上边距
            bottom: 0, // 下边距
            both: 0 // 左右边距
          },
          isHidden: false // 是否隐藏该组件 true：是，false：否，增加问号说明：勾选后该组件将隐藏，适用于你不希望看到该组件字段又不希望删除的情况；
        }
      }
    };
  },
  getters: {
    editComponent: (state) => {
      if (state.currentIndex == -99) {
        return state.global;
      } else {
        return state.componentList[state.currentIndex];
      }
    }
  },
  actions: {
    // 添加组件
    addComponent(item: any, key: any) {
      if (this.componentList.length == 0) {
        this.uniqueIdCounter = 0;
      }
      this.uniqueIdCounter++;
      const template = cloneDeep(this.global.template);
      const newItem = {
        ...item,
        ...template,
        itemKey: this.uniqueIdCounter,
        ignore: []
      };
      // 头部组件
      if (item.id == 1) {
        newItem.ignore = ['pageBgColor', 'componentBgUrl', 'componentBgColor', 'componentBgColor', 'topRounded', 'bottomRounded', 'marginBoth'];
        newItem.settings = 1;
        newItem.carousel = 1;
        newItem.topStyle = 1;
        newItem.logo = '';
        newItem.code = '';
        newItem.classifyShow = true;
        newItem.topType = 1;
        newItem.topNav = [
          {
            title: '导航名称',
            url: '',
            id: Date.now()
          }
        ];
        newItem.toplabel = [
          {
            title: '标签名称',
            url: '',
            id: Date.now()
          }
        ];

        newItem.leftStyle = 1;
        newItem.leftBackground = '#ffffff';
        newItem.leftColor1 = '#101828';
        newItem.leftColor2 = '#364153';

        newItem.carouselStyle = false;
        newItem.carouselType = 0;
        newItem.carouselRadius = 10;
        newItem.carouselInterval = 3000;

        newItem.centreType = 1;
        newItem.carouselList = [
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            show: true,
            id: Date.now()
          }
        ];
        newItem.advertNum = 0;
        newItem.advertList = [
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now(),
            show: false
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now(),
            show: false
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now(),
            show: false
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now(),
            show: false
          }
        ];
        newItem.realType = 1;
        newItem.realDataType = 1;
        newItem.realNumber = 5;
        newItem.realIds = [];
        newItem.navlList = [
          {
            imageUrl: '',
            title: '导航名称',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];
        newItem.rightRadius = 5;
      } else if (item.id == 2) {
        // 文本标题
        newItem.styleType = 1;

        newItem.title = '标题名称';
        newItem.titleUrl = '';
        newItem.titleAlign = 'left';
        newItem.titleSize = 18;
        newItem.titleColor = '#101828';
        newItem.titleWeight = 'bold';

        newItem.subtitle = '副标题';
        newItem.subtitleSize = 16;
        newItem.subtitleColor = '#b7bcd2';

        newItem.more = '更多';
        newItem.moreShow = true;
        newItem.moreSize = 14;
        newItem.moreColor = '#b7bcd2';
        newItem.moreUrl = '';

        newItem.pageStartBgColor = '#ffffff';
        newItem.padding.top = 10;
        newItem.padding.bottom = 10;
        newItem.padding.both = 20;
      } else if (item.id == 3) {
        //图文导航
        newItem.styleType = 1;
        newItem.number = 3;
        newItem.count = 1;
        newItem.navlList = [
          {
            imageUrl: '',
            title: '标题名称',
            subtitle: '副标题名称',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];

        newItem.titleSize = 16;
        newItem.titleColor = '#101828';
        newItem.titleWeight = 'bold';
        newItem.subtitleSize = 12;
        newItem.subtitleColor = '#364153';
        newItem.imageRadius = 10;
        newItem.componentStartBgColor = '#ffffff';
        newItem.topRounded = 10;
        newItem.bottomRounded = 10;
      } else if (item.id == 4) {
        // 图片魔方
        newItem.number = 1;
        newItem.imageHeight = 150;
        newItem.imagelList = [
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];
        newItem.gap = 10;
        newItem.imageTopRounded = 10;
        newItem.imageBottomRoundedRounded = 10;
      } else if (item.id == 6) {
        //轮播图
        newItem.imageHeight = 200;
        newItem.imagelList = [
          {
            imageUrl: '',
            imgType: 1,
            id: Date.now()
          }
        ];
        newItem.interval = 3000;
        newItem.styleType = 1;
        newItem.position = 2;
        newItem.imageRadius = 10;
        newItem.ignore = ['componentBgColor', 'topRounded', 'bottomRounded'];
      } else if (item.id == 7) {
        //文章咨询
        newItem.dataType = 1;
        newItem.dataNumber = 4;
        newItem.dataIds = [];
        newItem.border = 1;
        newItem.borderColor = '#ffffff';
        newItem.backgroundColor = '#ffffff';
        newItem.boxTopRounded = 10;
        newItem.boxBottomRounded = 10;
      } else if (item.id == 8) {
        //品牌组件
        newItem.settings = 1;
        newItem.imageUrl = '';
        newItem.url = '';
        newItem.imgType = 1;
        newItem.brandList = [
          {
            imageUrl: '',
            title: '品牌名称',
            subtitle: '品牌介绍',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];
        newItem.titleSize = 14;
        newItem.titleColor = '#101828';
        newItem.titleWeight = 'bold';
        newItem.subtitleSize = 12;
        newItem.subtitleColor = '#364153';
        newItem.imageRadius = 10;
        newItem.boxRadius = 5;
      } else if (item.id == 9) {
        //图文广告
        newItem.styleType = 1;
        newItem.number = 3;
        newItem.count = 1;
        newItem.navlList = [
          {
            imageUrl: '',
            title: '标题名称',
            subtitle: '副标题名称',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];

        newItem.titleSize = 16;
        newItem.titleColor = '#101828';
        newItem.titleWeight = 'bold';
        newItem.subtitleSize = 12;
        newItem.subtitleColor = '#364153';
        newItem.imageRadius = 10;
        newItem.componentStartBgColor = '#ffffff';
        newItem.topRounded = 10;
        newItem.bottomRounded = 10;
      } else if (item.id == 10) {
        //楼层组件
        newItem.styleType = 1;
        newItem.imageUrl = '';
        newItem.imgType = 1;
        newItem.imageRadius = 10;
        newItem.goodsIds = [];
        newItem.goodsShow = [1, 2, 3];
        newItem.btnShow = true;
        newItem.btnStyle = 1;
        newItem.btnText = '购买';
        newItem.btnColor = '#ffffff';
        newItem.btnbackgroundColor = '#E7000B';
        newItem.moreTitle = '更多';
        newItem.moreUrl = '';
        newItem.moreColor = '#E7000B';
        newItem.moreShow = true;
        newItem.brandList = [
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];
      } else if (item.id == 11) {
        // 商品组件
        newItem.styleType = 1;
        newItem.btnShow = true;
        newItem.btnStyle = 1;
        newItem.btnText = '购买';
        newItem.goodsShow = [1, 2, 3];
        newItem.goodsType = 1;
        newItem.goodsIds = [];
        newItem.goodsClassify = '';
        newItem.topCategoryId = '';
        newItem.mediumCategoryId = '';
        newItem.bottomCategoryId = '';
        newItem.goodsNumber = 5;
        newItem.goodsSort = 1;
        newItem.goodsBrand = '';

        newItem.goodsbackgroundColor = '#ffffff';
        newItem.goodsTitleType = 1;
        newItem.goodsTitleColor = '#101828';
        newItem.imageRadius = 10;
        newItem.goodstopRounded = 10;
        newItem.goodsbottomRounded = 10;
        newItem.priceColor = '#E7000B';
        newItem.btnColor = '#ffffff';
        newItem.btnbackgroundColor = '#E7000B';
      } else if (item.id == 12) {
        //多商品组件
        newItem.btnShow = true;
        newItem.btnStyle = 1;
        newItem.btnText = '购买';
        newItem.goodsShow = [1, 2, 3];
        newItem.goodsNumber = 5;
        newItem.goodsSort = 1;

        newItem.goodsbackgroundColor = '#ffffff';
        newItem.goodsTitleType = 1;
        newItem.goodsTitleColor = '#101828';
        newItem.imageRadius = 10;
        newItem.goodstopRounded = 10;
        newItem.goodsbottomRounded = 10;
        newItem.priceColor = '#E7000B';
        newItem.btnColor = '#ffffff';
        newItem.btnbackgroundColor = '#E7000B';

        newItem.tabColor1 = '#333333';
        newItem.tabColor2 = '#ffffff';
        newItem.tabbackgroundColor1 = '#ffffff';
        newItem.tabbackgroundColor2 = '#E7000B';
        newItem.tabRadius = 10;
        newItem.tabIndex = 0;
        newItem.tabList = [
          {
            title: '选项卡',
            goodsType: 1,
            goodsIds: [],
            goodsClassify: '',
            topCategoryId: '',
            mediumCategoryId: '',
            bottomCategoryId: '',
            id: Date.now()
          }
        ];
      } else if (item.id == 13) {
        // 发现组件
        newItem.settings = 1;
        newItem.title = '标题';
        newItem.titleUrl = '';
        newItem.titleSize = 18;
        newItem.titleColor = '#101828';
        newItem.titleWeight = 'bold';
        newItem.subtitle = '副标题';
        newItem.subtitleSize = 14;
        newItem.subtitleColor = '#364153';
        newItem.imgType = 1;

        newItem.tabList = [
          {
            title: '导航名称',
            url: '',
            id: Date.now()
          }
        ];

        newItem.imageUrl = '';
        newItem.imageRadius = 10;
        newItem.boxRadius = 5;
        newItem.boxColor = '#E7000B';

        newItem.planList = [
          {
            imageUrl: '',
            title: '',
            subtitle: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '',
            subtitle: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '',
            subtitle: '',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];

        newItem.detectList = [
          {
            imageUrl: '',
            title: '',
            subtitle: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '',
            subtitle: '',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '',
            subtitle: '',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];

        newItem.labelList = [
          {
            title: '标签名称',
            url: '',
            id: Date.now()
          }
        ];
        newItem.goodsIds = [];
      }

      this.componentList.push(newItem);
      this.currentIndex = this.componentList.length - 1;
      this.currentKey = newItem.itemKey;

      console.log(this.componentList, '4564654');
    },
    // 上移组件
    moveUpComponent() {
      if (this.currentIndex <= 0 || this.currentIndex >= this.componentList.length) {
        return;
      }
      [this.componentList[this.currentIndex], this.componentList[this.currentIndex - 1]] = [
        this.componentList[this.currentIndex - 1],
        this.componentList[this.currentIndex]
      ];
    },
    // 下移组件
    moveDownComponent() {
      if (this.currentIndex < 0 || this.currentIndex >= this.componentList.length - 1) {
        return;
      }
      [this.componentList[this.currentIndex], this.componentList[this.currentIndex + 1]] = [
        this.componentList[this.currentIndex + 1],
        this.componentList[this.currentIndex]
      ];
    },
    // 复制
    copyComponent() {
      // const datas = structuredClone(this.componentList[this.currentIndex]);
      // const datas = JSON.parse(JSON.stringify(this.componentList[this.currentIndex]));
      // // console.log(datas, '???????')
      // this.componentList.splice(this.currentIndex + 1, 0, datas);
    },
    //删除
    delComponent() {
      this.componentList.splice(this.currentIndex, 1);
    },
    //点击组件
    onComponent(item: any, index: any) {
      this.currentKey = item.itemKey;
      this.currentIndex = index;
    }
  }
});

export default usePcdiyStore;