新增自定义页面

src/components/Ftemplate.vue

@@ -172,7 +172,7 @@
           <li class="menu_item" :class="{'Fchecked':isChecked==2}" @click="isChecked=2">
               <i class="el-icon-menu"></i><span>模板市场</span>
           </li>
-          <li class="menu_item" :class="{'Fchecked':isChecked==3}" @click="isChecked=3">
+          <li class="menu_item" :class="{'Fchecked':isChecked==3}" @click="isChecked=3,CommonJump('CustomPage')">
               <i class="el-icon-menu"></i><span>自定义页面</span>
           </li>
           <li class="menu_item" :class="{'Fchecked':isChecked==4}" @click="isChecked=4">

src/components/sallCenter/CustomPage.vue

+<template>
+  <div class="CustomPage">
+    <template v-if="CustomIsShowAdd">
+      <div class="head-title">
+        页面管理
+        <el-button @click="CustomIsShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">
+          新增页面
+        </el-button>
+      </div>
+      <div class="content">
+        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
+          <el-table-column prop="mall_id" label="ID" width="100">
+          </el-table-column>
+          <el-table-column prop="title" width="436" label="标题">
+          </el-table-column>
+          <el-table-column label="导航与模板" prop="navs" width="750">
+            <template slot-scope="scope">
+              <div class="templat-list">
+                <div class="templat-item">
+                  <div>{{scope.row.navs[0].navs}}</div>
+                  <div style="color: rgb(153, 153, 153);">{{scope.row.navs[0].template}}</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="is_home_page" label="设为首页" width="80">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.is_home_page" active-color="#409EFF" :active-value="1" :inactive-value="0">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column prop="is_disable" label="禁用/启用" width="85">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.is_disable" active-color="#409EFF" :active-value="1" :inactive-value="0">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <img @click="EditCustom(scope.row)" style="width:32px;height:32px;margin:0 10px"
+                src="../../assets/img/userman/edit.png" alt="">
+              <img @click="RemoveCustom(scope.row,6)" style="width:32px;height:32px;margin:0 10px"
+                src="../../assets/img/userman/del.png" alt="">
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
+          :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
+        </el-pagination>
+      </div>
+    </template>
+    <template v-else>
+      <div class="head-title">
+        <span @click="CustomIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">自定义页面</span><span
+          style="margin:0 9px;color:#C0C4CC">/</span><span>编辑</span>
+      </div>
+      <div class="content">
+        <div class="conten_indder">
+          <el-form label-width="150px">
+            <el-form-item label="标题">
+              <el-input type="text" size="small" v-model="addMsg.title"></el-input>
+            </el-form-item>
+            <el-form-item label="启用/禁用">
+              <el-switch v-model="addMsg.is_disable" active-color="#409EFF" :active-value="1" :inactive-value="0">
+              </el-switch>
+            </el-form-item>
+            <el-form-item label="显示导航条">
+              <el-switch v-model="addMsg.show_navs" active-color="#409EFF" :active-value="1" :inactive-value="0">
+              </el-switch>
+            </el-form-item>
+            <el-form-item label="模板和导航">
+              <div style="max-width:480px;">
+                <div class="Custom_item" v-for="(item,index) in addMsg.navs" :key="index">
+                  <div flex="box:last">
+                    <el-form label-width="80px">
+                      <el-form-item label="导航名称" style="margin-bottom:20px;">
+                        <el-input type="text" v-model="item.navs" size="small"></el-input>
+                      </el-form-item>
+                      <el-form-item label="对应模板">
+                        <el-input type="text" size="small" v-model="item.template">
+                          <el-button slot="append">选择模板</el-button>
+                        </el-input>
+                      </el-form-item>
+                    </el-form>
+                    <div style="padding-left: 15px;">
+                      <el-tooltip class="item" effect="dark" content="删除导航" placement="bottom">
+                        <img @click="delModel(index)" style="cursor:pointer;" src="../../assets/img/userman/del.png" alt="">
+                      </el-tooltip>
+                    </div>
+                  </div>
+                </div>
+                <el-button type="text" @click="addModule()">
+                    <i class="el-icon-plus"></i>
+                    <span style="color: rgb(53, 53, 53);">新增模版和导航</span>
+                </el-button>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
+      </el-button>
+    </template>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        CustomIsShowAdd: true,
+        dataList: [{
+          mall_id: '2028',
+          title: '欧洲严选',
+          navs: [{
+            navs: "欧洲严选",
+            navs_id: 4275,
+            template: "欧洲严选",
+            template_id: 3781
+          }],
+          show_navs: 0,
+          is_disable: 1,
+          is_home_page: 0,
+          is_delete: 0
+        }],
+        msg: {
+
+        },
+        addMsg: {
+          title: '',
+          is_disable: 1,
+          show_navs: 0,
+          navs: [{
+            navs: "",
+            navs_id: 0,
+            template: "",
+            template_id: 0
+          }]
+        },
+        total: 0,
+      };
+    },
+    components: {
+
+    },
+    created() {
+
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      getList() {
+        this.apipost("/api/Tenant/GetMiniProgrameNaviconPage", this.msg, res => {
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data.pageData;
+            this.total = res.data.data.count;
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      submitform(addMsg) {
+
+      },
+      //编辑
+      EditCustom() {
+
+      },
+      //删除
+      RemoveCustom() {
+
+      },
+      //新增模板导航
+      addModule(){
+          let obj={
+            navs: "",
+            navs_id: 0,
+            template: "",
+            template_id: 0
+          }
+        this.addMsg.navs.push(obj);
+      },
+      //删除模板
+      delModel(index){
+          this.addMsg.navs.splice(index,1);
+      }
+    },
+    mounted() {
+      //this.getList();
+    }
+  };
+
+</script>
+<style>
+  .CustomPage .templat-list {
+    border: 1px solid #EBEEF5;
+  }
+
+  .CustomPage .templat-item {
+    line-height: 40px;
+    height: 40px;
+    display: flex;
+    font-size: 13px;
+  }
+
+  .templat-item:nth-child(odd) {
+    background-color: #f7f7f7;
+  }
+
+  .templat-item:nth-child(even) {
+    background-color: #fff;
+  }
+
+  .CustomPage .templat-item div {
+    width: 50%;
+    padding-left: 20px;
+  }
+
+  .CustomPage .Custom_item {
+    border: 1px solid #EBEEF5;
+    background-color: #FFF;
+    color: #303133;
+    -webkit-transition: .3s;
+    transition: .3s;
+    margin-bottom: 10px;
+  }
+
+  .CustomPage .Custom_item>div {
+    padding: 20px;
+  }
+
+  .CustomPage .content {
+    background: #fff;
+    margin-top: 10px;
+    padding: 20px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  .CustomPage .conten_indder {
+    padding: 20px;
+    background-color: #fff;
+    padding-right: 50%;
+    min-width: 1100px;
+  }
+
+</style>

src/router/index.js

@@ -80,6 +80,10 @@ export default new Router({
         path:'/templateEdit',
         name: 'templateEdit',
         component: resolve => require(['@/components/sallCenter/templateEdit'], resolve),
+      },{ //自定义页面
+        path:'/CustomPage',
+        name: 'CustomPage',
+        component: resolve => require(['@/components/sallCenter/CustomPage'], resolve),
       }]
     },
     {