0.0.24

官方保存

src/utils/request.js

@@ -7,8 +7,8 @@ import URL from '@/utils/baseUrl';
 // create an axios instance
 const service = axios.create({
   //千万不能在这里使用绝对地址，这会导致webpack的devserve不生效
-  baseURL: URL.testUrl, //老刘服务器
-  //baseURL: URL.baseUrl, //测试服务器
+  //baseURL: URL.testUrl, //老刘服务器
+  baseURL: URL.baseUrl, //测试服务器
   //baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   //withCredentials: true, // send cookies when cross-domain requests
   timeout: 50000 // request timeout

src/views/website/creatWebsite.vue

@@ -1,6 +1,56 @@
 <template>
   <div class="mainBox">
     <div class="layerBox">
+      <tableTitle :name="headerTitle"/>
+      <div class="menuTopBox">
+        <div class="menuItem" @click="addModule(1)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          顶部菜单（含登录）
+        </div>
+        <div class="menuItem" @click="addModule(2)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          Logo栏
+        </div>
+        <div class="menuItem" @click="addModule(3)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          导航菜单
+        </div>
+        <div class="menuItem" @click="addModule(4)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          轮播图
+        </div>
+        <div class="menuItem" @click="addModule(5)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          多分类列表
+        </div>
+        <div class="menuItem" @click="addModule(6)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          多图列表
+        </div>
+        <div class="menuItem" @click="addModule(7)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          纯文本列表
+        </div>
+        <div class="menuItem" @click="addModule(8)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          图文列表
+        </div>
+        <div class="menuItem" @click="addModule(9)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          排行榜列表
+        </div>
+        <div class="menuItem" @click="addModule(10)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          友情链接
+        </div>
+        <div class="menuItem" @click="addModule(11)">
+          <img src="@/assets/public/sidebar/default/index.png">
+          纯文本
+        </div>
+      </div>
+    </div>
+    <div class="layerBox">
+      <tableTitle :name="websiteTitle"/>
       <!-- 栅格布局 start ---------------------------------------->
       <div class="grid-layout-demo">
         <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
@@ -13,12 +63,36 @@
             :w="item.w"
             :h="item.h"
           >
-            <div class="grid-item-content">{{ item.content }}</div>
+            <div class="grid-item-content">
+
+              {{ item.content }}
+              <button @click="openWindow(item)">编辑</button>
+            </div>
           </grid-item>
         </grid-layout>
       </div>
       <!-- 栅格布局 end ---------------------------------------->
     </div>
+
+    <!--弹出框 start------------------------------------------------------------>
+    <el-dialog title="编辑模块" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" autocomplete="off" label-position="left">
+        <div class="formDiv">
+          <el-form-item label="内容" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
+            <el-input v-model="form.content" autocomplete="off"></el-input>
+            <input type="hidden" v-model="form.seo_title">
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="primary" @click="editGridItem">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框 end------------------------------------------------------------>
+
   </div>
 </template>
 
@@ -27,23 +101,84 @@
 import '@/styles/global.less';
 //引入vue-grid-layout
 import { GridLayout, GridItem } from 'vue-grid-layout';
+//标题
+import tableTitle from './components/tableTitle';
 
 export default {
   components: {
     GridLayout,
-    GridItem
+    GridItem,
+    tableTitle
   },
   data() {
     return {
+      //页面 start------------------------------------------------------------>
+      headerTitle: '模块',
+      websiteTitle: '预览',
+      windowStatus: false,
+      //页面 end------------------------------------------------------------>
+
+      //弹出框 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      form: {
+        content: '',
+      },
+      //弹出框 end------------------------------------------------------------>
+
+      //预览 start------------------------------------------------------------>
       layout: [
-        { i: "0", x: 0, y: 0, w: 3, h: 2, content: "Box 1" },
-        { i: "1", x: 3, y: 0, w: 3, h: 2, content: "Box 2" },
-        { i: "2", x: 6, y: 0, w: 3, h: 2, content: "Box 3" }
+        // i = id 
+        // w = 最大宽度是12
+        // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
+        // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
+        // { i: "2", x: 3, y: 0, w: 3, h: 2, content:""},
+        // { i: "3", x: 6, y: 0, w: 3, h: 2, content:""}
       ]
+      //预览 end------------------------------------------------------------>
     }
   },
   methods: {
-    
+    //添加模块
+    addModule(type) {
+      console.log(type);
+      this.layout.push({
+         i: this.layout.length, 
+         x: 0, 
+         y: 0, 
+         w: 12, 
+         h: 1, 
+         content:""});
+    },
+
+
+
+
+
+    //打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+
+    //编辑栅格布局
+    editGridItem() {
+      console.log(this.editModule);
+      //找对在栅栏中对应的窗口，把编辑的值放进去
+      for(let i = 0; i < this.layout.length; i++) {
+        if(this.layout[i].i == this.editModule) {
+          this.layout[i].content = this.form.content;
+        }
+      }
+      //关闭窗口
+      this.windowStatus = false;
+    },
+
+    //关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+
   },
   mounted(){
     const id = this.$route.query.id;
@@ -53,6 +188,33 @@ export default {
 </script>
 
 <style scoped lang="less">
+
+
+  //菜单 start------------------------------------------------------------> 
+  .layerBox {
+    padding-bottom: 10px;
+  }
+  .menuTopBox{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .menuItem{
+    display: flex;
+    align-items: center;
+    border-radius:10px;
+    padding: 5px 10px;
+    cursor: pointer;
+    background: #f0f2f5;
+    font-size: 14px;
+    color: #666;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    img {
+      margin-right: 5px;
+    }
+  }
+
+  //栅格布局 start------------------------------------------------------------> 
   .grid-layout-demo {
     background-color: #f0f2f5;
     padding: 20px;
@@ -65,6 +227,8 @@ export default {
     border: 1px solid #d9d9d9;
     height: 100%;
   }
+  //栅格布局 end------------------------------------------------------------> 
+
   //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
   ::v-deep .custom-form-item > .el-form-item__label {
     line-height: 140px !important;