admin_home/src/views/template/public/componentWindow.vue

<template>
  <div class="componentWindowBox">
    <!--开发助手-->
    <div class="testAssistant">
      <div class="testAssistantTitle">
        开发助手：当前窗口在正式版本中将被移除。
      </div>
      <div class="testAssistantContent">
        <div class="testAssistantContentItem"><span>板块:</span>{{this.$store.state.template.editSectorId}}</div>
        <div class="testAssistantContentItem"><span>组件位置:</span>{{this.$store.state.template.editComponentSort}}</div>
        <div class="testAssistantContentItem"><span>组件种类:</span>{{this.$store.state.template.editComponentType}}</div>
        <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editSectorId].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div>
        <div class="testAssistantContentItem"><span>当前组件样式:</span>{{this.$store.state.template.editComponentStyle}}</div>
      </div>
    </div>
    <div class="componentStyleBox">
      <div class="componentStyleBoxContent">
        <!--1.网站核心大标题组件 start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/mainStyle1.png"/>
                </div>
              </td>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
                  <img src="@/assets/template/component/mainStyle2.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--1.网站核心大标题组件 end---------------------------------------->
        <!--2.板块文字标题 start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 2" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/title1.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--2.板块文字标题 end---------------------------------------->
        <!--3.广告组件 start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/style1imgTitle.png"/>
                </div>
              </td>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
                  <img src="@/assets/template/component/style2imgTitle.png"/>
                </div>
              </td>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
                  <img src="@/assets/template/component/style3imgTitle.png"/>
                </div>
              </td>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
                  <img src="@/assets/template/component/style4imgTitle.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--4.banner组件 start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 4" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/banner_pic1.png"/>
                </div>
              </td>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
                  <img src="@/assets/template/component/banner_pic2.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--4.banner组件 end---------------------------------------->
        <!--5.tabs start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 5" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/tabsList1.png"/>
                </div>
              </td>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
                  <img src="@/assets/template/component/tabsList2.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--5.tabs end---------------------------------------->
        <!--6.list列表组件 start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 6" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/list1.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--6.list列表组件 end---------------------------------------->
        <!--7.staticHtml静态组件 start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 7" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/fivePicture.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--7.staticHtml静态组件 end---------------------------------------->
        <!--8.表单组件 start---------------------------------------->
        <div v-if="this.$store.state.template.editComponentType == 8" class="componentScrollBox">
          <table>
            <tr>
              <td>
                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
                  <img src="@/assets/template/component/form1.png"/>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--8.表单组件 end---------------------------------------->


      </div>
    </div>
    <div class="componentWindowBoxFooter">
      <el-button type="info" @click="closeEditWindow">取消</el-button>
      <el-button type="primary" @click="submitData">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    
  },
  data() {
    return {
      //选择的组件样式
      useStyleNumber:0,
    }
  },
  methods: {
    //选择组件样式
   selectUseStyleNumber(number){
      this.$store.commit('template/selectComponentStyleNumber',number);
    },
    //关闭选择组件样式弹出框
    closeEditWindow(){
      this.$store.commit('template/closeComponentStyleStatus');
    },
    //提交编辑的数据
    submitData(){
      //提交修改
      this.$store.commit('template/setComponentStyleNumber');
      //关闭窗口
      this.$store.commit('template/closeComponentStyleStatus');
      //当前保存完了的数据
      //console.log(this.$store.state.template.pageData);
    }
  },
  mounted() {
    
  },
};
</script>

<style scoped lang="less">
  .componentWindowBox {
    .componentStyleBox {
      height: 220px;
      margin-bottom: 20px;
      overflow-x: auto;
      overflow-y: hidden;
      clear: both;
      .componentScrollBox {
        height: 200px;
        display: flex; /* 使用 flex */
        flex-wrap: wrap; /* 换行 */
        .componentScrollBoxItem {
          width: 200px;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          background: #F5F7FB;
          border:1px solid #F5F7FB;
          img {
            width: 100%;
          }
          &:hover {
            border:1px solid #19499F;
            background: #e5e5ff;
            cursor: pointer;
          }
          transition: all 0.3s;
        }
        .active {
          border:1px solid #19499F;
          background: #e5e5ff;
        }
      }
    }
    .componentWindowBoxFooter {
      text-align: right;
    }
  }
</style>