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: any = defineStore('pcdiy', {
  state: () => {
    return {
      name: '',
      type: 1,
      backgroundColor: '#f2f2f2',
      hoverColor: '#E7000B',
      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 // 左右边距
          },
          margin: {
            top: 0, // 上边距
            bottom: 10 // 下边距
          },
          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 && item.id == 1) {
        const headBoo = this.componentList.some((item2) => item2.id == 1);
        if (headBoo) {
          ElMessage.error('头部组件只能添加一次~');
          return;
        }
      }
      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 = 1;
        newItem.carouselRadius = 10;
        newItem.carouselInterval = 3000;
        newItem.carouselPosition = 2;
        newItem.carouselStyleType = 1;
        newItem.carouselStyleColor = '#ffffff';

        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()
          },
          {
            imageUrl: '',
            title: '导航名称',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '导航名称',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '导航名称',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '导航名称',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            imageUrl: '',
            title: '导航名称',
            url: '',
            imgType: 1,
            id: Date.now()
          }
        ];
        newItem.rightRadius = 5;
        newItem.login = 1;
      } 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()
          },
          {
            imageUrl: '',
            title: '标题名称',
            subtitle: '副标题名称',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            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 == 5) {
        // 活动魔方
        newItem.styleType = 1;
        newItem.title = '超值爆款';
        newItem.titleUrl = '';
        newItem.titleImg = '';
        newItem.titleImgType = 1;
        newItem.titleColor = '#101828';
        newItem.subtitle = '为您精选爆款';
        newItem.subtitleUrl = '';
        newItem.subtitleColor = '#ffffff';
        newItem.subtitleColor1 = '#FA742C';
        newItem.subtitleColor2 = '#F91C02';
        newItem.navType = 1;
        newItem.navWeight = 'bold';
        newItem.navBtnType = 1;
        newItem.navtopRounded = 10;
        newItem.navBtnbottomRounded = 10;
        newItem.navlList = [
          {
            imageUrl: '',
            imgType: 1,
            title: '标题名称',
            subtitle: '副标题名称',
            color1: '#ffffff',
            color2: '',
            btnText: '去看看',
            btncolor1: '#FA742C',
            btncolor2: '#F91C02',
            url: '',
            id: Date.now()
          },
          {
            imageUrl: '',
            imgType: 1,
            title: '标题名称',
            subtitle: '副标题名称',
            color1: '#ffffff',
            color2: '',
            btnText: '去看看',
            btncolor1: '#FA742C',
            btncolor2: '#F91C02',
            url: '',
            id: Date.now()
          },
          {
            imageUrl: '',
            imgType: 1,
            title: '标题名称',
            subtitle: '副标题名称',
            color1: '#ffffff',
            color2: '',
            btnText: '去看看',
            btncolor1: '#FA742C',
            btncolor2: '#F91C02',
            url: '',
            id: Date.now()
          },
          {
            imageUrl: '',
            imgType: 1,
            title: '标题名称',
            subtitle: '副标题名称',
            color1: '#ffffff',
            color2: '',
            btnText: '去看看',
            btncolor1: '#FA742C',
            btncolor2: '#F91C02',
            url: '',
            id: Date.now()
          }
        ];
      } else if (item.id == 6) {
        //轮播图
        newItem.imageHeight = 200;
        newItem.imagelList = [
          {
            imageUrl: '',
            imgType: 1,
            id: Date.now(),
            url: ''
          }
        ];
        newItem.interval = 3000;
        newItem.styleType = 1;
        newItem.position = 2;
        newItem.imageRadius = 10;
        newItem.carouselStyleColor = '#ffffff';
        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()
          },
          {
            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()
          },
          {
            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()
          },
          {
            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()
          },
          {
            imageUrl: '',
            title: '品牌名称',
            subtitle: '品牌介绍',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            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()
          },
          {
            imageUrl: '',
            title: '标题名称',
            subtitle: '副标题名称',
            url: '',
            imgType: 1,
            id: Date.now()
          },
          {
            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.url = '';
        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.categoryIds = [];
        newItem.goodsClassify = '';
        newItem.topCategoryId = '';
        newItem.mediumCategoryId = '';
        newItem.bottomCategoryId = '';
        newItem.goodsNumber = 5;
        newItem.goodsSort = 1;
        newItem.brandIds = [];

        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: [],
            categoryIds: [],
            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 = [];
      } else if (item.id == 14) {
        // 热区
        newItem.imageUrl = '';
        newItem.imgWidth = 0;
        newItem.imgHeight = 0;
        newItem.heatMapData = [];
      } else if (item.id == 15) {
        // 富文本
        newItem.detail = '';
        newItem.pageStartBgColor = '#ffffff';
        newItem.padding.top = 10;
        newItem.padding.bottom = 10;
        newItem.padding.both = 10;
      } else if (item.id == 16) {
        // 辅助空白
        newItem.boxHeight = 20;
      } else if (item.id == 17) {
        // 辅助线
        newItem.boxHeight = 1;
        newItem.boxColor = '#000000';
      }

      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;
      }
      if (this.componentList[this.currentIndex].id == 1) {
        ElMessage.error('头部组件不可移动~');
        return;
      }
      if (this.currentIndex == 1 && this.componentList[0].id == 1) {
        ElMessage.error('头部组件不可移动~');
        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;
      }
      if (this.componentList[this.currentIndex].id == 1) {
        ElMessage.error('头部组件不可移动~');
        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);
      this.currentIndex = -99;
    },
    //点击组件
    onComponent(item: any, index: any) {
      this.currentKey = item.itemKey;
      this.currentIndex = index;
    },
    // 修改index值
    onIndex(index: any) {
      this.currentIndex = index;
    },
    resetComponent() {
      this.currentIndex = -99;
    }
  }
});

export default usePcdiyStore;