From c34e2ad6ad3562e3007b82117bbb63d8aa5a0442 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B?= <994041296@163.com>
Date: Wed, 7 Dec 2022 17:00:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A5=BC=E5=B1=82=E4=BB=A3=E7=A0=81=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 buyer/package-lock.json                       | 174 ++--
 .../src/views/page-decoration/floorList.vue   |  65 +-
 seller/src/views/shop/floorList.vue           |  53 +-
 seller/src/views/shop/modelForm.vue           | 784 ++++++++++--------
 seller/src/views/shop/renovation.vue          |  26 +-
 5 files changed, 608 insertions(+), 494 deletions(-)

diff --git a/buyer/package-lock.json b/buyer/package-lock.json
index ba8bf571..b0dcf19e 100644
--- a/buyer/package-lock.json
+++ b/buyer/package-lock.json
@@ -477,70 +477,6 @@
         "webpack-merge": "^4.2.2"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
-          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.3.tgz",
-          "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "postcss-loader": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-3.0.0.tgz",
@@ -585,28 +521,6 @@
             "ajv-errors": "^1.0.0",
             "ajv-keywords": "^3.1.0"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -10278,6 +10192,94 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-piczoom": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/vue-piczoom/-/vue-piczoom-1.0.6.tgz",
diff --git a/manager/src/views/page-decoration/floorList.vue b/manager/src/views/page-decoration/floorList.vue
index 4ebb06f4..9b958c0a 100644
--- a/manager/src/views/page-decoration/floorList.vue
+++ b/manager/src/views/page-decoration/floorList.vue
@@ -25,14 +25,25 @@
         <div class="item" v-for="(item, index) in list" :key="index">
           <div>{{ item.name || "暂无模板昵称" }}</div>
           <div class="item-config">
-            <i-switch v-model="item.pageShow" @on-change="releaseTemplate(item.id)">
+            <i-switch
+              v-model="item.pageShow"
+              @on-change="releaseTemplate(item.id)"
+            >
               <span slot="open">开</span>
               <span slot="close">关</span>
             </i-switch>
-            <Button type="info" placement="right" @click="Template(item)" size="small"
+            <Button
+              type="info"
+              placement="right"
+              @click="Template(item)"
+              size="small"
               >编辑</Button
             >
-            <Button type="success" placement="right" @click="decorate(item)" size="small"
+            <Button
+              type="success"
+              placement="right"
+              @click="decorate(item)"
+              size="small"
               >装修</Button
             >
             <Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)">
@@ -42,7 +53,18 @@
         </div>
         <div class="no-more" v-if="list.length == 0">暂无更多模板</div>
       </div>
-      <Page show-total :total="total" show-sizer size="small" :page-size-opts="[10, 20, 50]" show-elevator style="float:right;overflow:hidden;"  @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size="searchForm.pageSize"/>
+      <Page
+        show-total
+        :total="total"
+        show-sizer
+        size="small"
+        :page-size-opts="[10, 20, 50]"
+        show-elevator
+        style="float: right; overflow: hidden"
+        @on-change="changePageNum"
+        @on-page-size-change="changePageSize"
+        :page-size="searchForm.pageSize"
+      />
     </Card>
     <Modal
       v-model="showModal"
@@ -72,19 +94,19 @@ export default {
     return {
       showModal: false, // 添加modal的显示
       selectedIndex: 0, // 首页还是专题选择的index
-      total:0,
+      total: 0,
       formData: {
         // 新建模态框的数据
         status: false, // 模板是否开启
         name: "", // 模板名称
       },
-      searchForm:{
-        pageNumber:1,
-        pageSize:10,
-        sort: 'createTime',
-        order: 'desc',
-        pageType:"INDEX",
-        pageClientType:"PC",
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        pageType: "INDEX",
+        pageClientType: "PC",
       },
       columns: [
         // 列表展示的column
@@ -111,7 +133,7 @@ export default {
         {
           type: "SPECIAL",
           title: "专题",
-        }
+        },
       ],
       list: [], // 模板列表
     };
@@ -128,7 +150,8 @@ export default {
           data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
           delete data.status;
           // (data.pageType = "INDEX"), (data.pageClientType = "PC");
-          (data.pageType = this.searchForm.pageType), (data.pageClientType = "PC");
+          (data.pageType = this.searchForm.pageType),
+            (data.pageClientType = "PC");
           if (data.id) {
             API_floor.updateHome(data.id, data).then((res) => {
               this.$Message.success("编辑模板成功");
@@ -148,8 +171,8 @@ export default {
       });
     },
 
-    clickType(type,index){
-      this.searchForm.pageNumber = 1
+    clickType(type, index) {
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageType = type;
       this.selectedIndex = index;
       this.getTemplateList();
@@ -176,13 +199,13 @@ export default {
       });
     },
 
-     // 分页 修改页码
-    changePageNum (val) {
+    // 分页 修改页码
+    changePageNum(val) {
       this.searchForm.pageNumber = val;
       this.getTemplateList();
     },
-     // 分页 修改页数
-    changePageSize (val) {
+    // 分页 修改页数
+    changePageSize(val) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = val;
       this.getTemplateList();
@@ -198,7 +221,7 @@ export default {
       API_floor.getHomeList(this.searchForm).then((res) => {
         if (res.success) {
           // this.total
-          this.total = res.result.total
+          this.total = res.result.total;
           this.list = res.result.records;
           this.list.forEach((e) => {
             if (e.pageShow === "OPEN") {
diff --git a/seller/src/views/shop/floorList.vue b/seller/src/views/shop/floorList.vue
index a063379a..a54ca033 100644
--- a/seller/src/views/shop/floorList.vue
+++ b/seller/src/views/shop/floorList.vue
@@ -25,14 +25,25 @@
         <div class="item" v-for="(item, index) in list" :key="index">
           <div>{{ item.name || "暂无模板昵称" }}</div>
           <div class="item-config">
-            <i-switch v-model="item.pageShow" @on-change="releaseTemplate(item.id)">
+            <i-switch
+              v-model="item.pageShow"
+              @on-change="releaseTemplate(item.id)"
+            >
               <span slot="open">开</span>
               <span slot="close">关</span>
             </i-switch>
-            <Button type="info" placement="right" @click="Template(item)" size="small"
+            <Button
+              type="info"
+              placement="right"
+              @click="Template(item)"
+              size="small"
               >编辑</Button
             >
-            <Button type="success" placement="right" @click="decorate(item)" size="small"
+            <Button
+              type="success"
+              placement="right"
+              @click="decorate(item)"
+              size="small"
               >装修</Button
             >
             <Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)">
@@ -42,7 +53,17 @@
         </div>
         <div class="no-more" v-if="list.length == 0">暂无更多模板</div>
       </div>
-      <Page show-total :total="total" show-sizer  :page-size-opts="[10, 20, 50]" show-elevator style="float:right;overflow:hidden;"  @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size="searchForm.pageSize"/>
+      <Page
+        show-total
+        :total="total"
+        show-sizer
+        :page-size-opts="[10, 20, 50]"
+        show-elevator
+        style="float: right; overflow: hidden"
+        @on-change="changePageNum"
+        @on-page-size-change="changePageSize"
+        :page-size="searchForm.pageSize"
+      />
     </Card>
     <Modal
       v-model="showModal"
@@ -72,18 +93,18 @@ export default {
     return {
       showModal: false, // 添加modal的显示
       selectedIndex: 0, // 首页还是专题选择的index
-      total:0,
+      total: 0,
       formData: {
         // 新建模态框的数据
         status: false, // 模板是否开启
         name: "", // 模板名称
       },
-      searchForm:{
-        pageNumber:1,
-        pageSize:10,
-        sort: 'createTime',
-        order: 'desc',
-        pageClientType:'PC'
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        pageClientType: "PC",
       },
       columns: [
         // 列表展示的column
@@ -167,13 +188,13 @@ export default {
       });
     },
 
-     // 分页 修改页码
-    changePageNum (val) {
+    // 分页 修改页码
+    changePageNum(val) {
       this.searchForm.pageNumber = val;
       this.getTemplateList();
     },
-     // 分页 修改页数
-    changePageSize (val) {
+    // 分页 修改页数
+    changePageSize(val) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = val;
       this.getTemplateList();
@@ -189,7 +210,7 @@ export default {
       API_floor.getHomeList(this.searchForm).then((res) => {
         if (res.success) {
           // this.total
-          this.total = res.result.total
+          this.total = res.result.total;
           this.list = res.result.records;
           this.list.forEach((e) => {
             if (e.pageShow === "OPEN") {
diff --git a/seller/src/views/shop/modelForm.vue b/seller/src/views/shop/modelForm.vue
index 572f56f6..17984629 100644
--- a/seller/src/views/shop/modelForm.vue
+++ b/seller/src/views/shop/modelForm.vue
@@ -1,385 +1,443 @@
 <template>
-    <div class="model-form">
-        <div class="model-content">
-            <!-- 头部广告，登录信息，不需要拖拽 -->
-            <div class="top-fixed-advert" :style="{backgroundColor:topAdvert.bgColor}">
-                <img :src="topAdvert.img" width="1200" height="80" alt="">
-                <div class="setup-box">
-                    <Button size="small" @click.stop="handleModel('topAdvert')">编辑</Button>
-                </div>
-            </div>
-            <div class="header-con">
-                <div></div>
-                <ul class="detail">
-                    <li>立即注册</li>
-                    <li>请登录</li>
-                    <li>我的订单</li>
-                    <li>我的足迹</li>
-                    <li><Icon size="18" type="ios-cart-outline" ></Icon>购物车</li>
-                    <li>店铺入驻</li>
-                </ul>
-            </div>
-            <div class="search-con">
-                <img :src="require('@/assets/logo.png')" class="logo" alt="">
-                <div class="search">
-                    <i-input  size="large" placeholder="输入你想查找的商品">
-                        <Button slot="append">搜索</Button>
-                    </i-input>
-                </div>
-            </div>
-            <div class="nav-con">
-                <div class="all-categories">全部商品分类</div>
-                <ul class="nav-item">
-                    <li v-for="(item,index) in navList.list" :key="index">
-                        <a href="#">{{item.name}}</a>
-                    </li>
-                </ul>
-                <div class="setup-box">
-                    <Button size="small" @click.stop="handleModel('quickNav')">编辑</Button>
-                </div>
-            </div>
-            <!-- 装修主体 -->
-            <div>
-                <draggable class="model-form-list"
-                    v-model="data.list"
-                    v-bind="{group:'model', ghostClass: 'ghost'}"
-                    @end="handleMoveEnd"
-                    @add="handleModelAdd"
-                >
-                    <template v-for="(element, index) in data.list">
-                        <model-form-item v-if="element && element.key" :key="element.key" :element="element" :index="index" :data="data"></model-form-item>
-                    </template>
-                </draggable>
-            </div>
+  <div class="model-form">
+    <div class="model-content">
+      <!-- 头部广告，登录信息，不需要拖拽 -->
+      <div
+        class="top-fixed-advert"
+        :style="{ backgroundColor: topAdvert.bgColor }"
+      >
+        <!-- <img :src="topAdvert.img" width="1200" height="80" alt="" /> -->
+        <div class="setup-box">
+          <Button size="small" @click.stop="handleModel('topAdvert')"
+            >编辑</Button
+          >
         </div>
-        <Modal
-            v-model="showModal"
-            title="顶部广告"
-            draggable
-            width="800"
-            :z-index="100"
-            :mask-closable="false"
-
-
-            >
-            <!-- 顶部广告 -->
-            <div class="modal-top-advert">
-                <div>
-                    <img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
-                </div>
-                <div class="tips">
-                    建议尺寸：<span>{{ topAdvert.size }}</span>
-                </div>
-                <div>
-                    图片链接：<span>{{ topAdvert.url }}</span><Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
-                </div>
-                <div>
-                    选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
-                </div>
-                <div>
-                    选择背景色：<ColorPicker v-model="topAdvert.bgColor" />
-                </div>
-            </div>
-        </Modal>
-        <Modal
-            v-model="showModalNav"
-            title="快捷导航"
-            draggable
-            width="800"
-            :z-index="100"
-            :mask-closable="false"
-            >
-            <!-- 分类tab栏 -->
-            <div class="modal-tab-bar">
-                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
-                <table cellspacing="0">
-                    <thead>
-                        <tr>
-                            <th width="250">分类名称</th>
-                            <th width="250">链接地址</th>
-                            <!-- <th width="150">排序</th> -->
-                            <th width="250">操作</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(item, index) in navList.list" :key="index">
-                            <td><Input v-model="item.name" /></td>
-                            <td><Input v-model="item.url" disabled /></td>
-                            <!-- <td><Input v-model="item.sort"/></td> -->
-                            <td>
-                                <Button type="primary" size="small" @click="handleSelectLink(item,index)">选择链接</Button>&nbsp;
-                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </Modal>
-        <!-- 选择商品。链接 -->
-        <liliDialog
-            ref="liliDialog"
-            @selectedLink="selectedLink"
-
-        ></liliDialog>
-        <!-- 选择图片 -->
-        <Modal width="1200px" v-model="picModelFlag" footer-hide>
-            <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
-        </Modal>
+      </div>
+      <div class="header-con">
+        <div></div>
+        <ul class="detail">
+          <li>立即注册</li>
+          <li>请登录</li>
+          <li>我的订单</li>
+          <li>我的足迹</li>
+          <li><Icon size="18" type="ios-cart-outline"></Icon>购物车</li>
+          <li>店铺入驻</li>
+        </ul>
+      </div>
+      <div class="search-con">
+        <img :src="require('@/assets/logo.png')" class="logo" alt="" />
+        <div class="search">
+          <i-input size="large" placeholder="输入你想查找的商品">
+            <Button class="soubenStore" slot="append">搜本店</Button>
+            <Button slot="append">搜索</Button>
+          </i-input>
+        </div>
+      </div>
+      <!-- <div class="nav-con">
+        <div class="all-categories">全部商品分类</div>
+        <ul class="nav-item">
+          <li v-for="(item, index) in navList.list" :key="index">
+            <a href="#">{{ item.name }}</a>
+          </li>
+        </ul>
+        <div class="setup-box">
+          <Button size="small" @click.stop="handleModel('quickNav')"
+            >编辑</Button
+          >
+        </div>
+      </div> -->
+      <!-- 装修主体 -->
+      <div>
+        <draggable
+          class="model-form-list"
+          v-model="data.list"
+          v-bind="{ group: 'model', ghostClass: 'ghost' }"
+          @end="handleMoveEnd"
+          @add="handleModelAdd"
+        >
+          <template v-for="(element, index) in data.list">
+            <model-form-item
+              v-if="element && element.key"
+              :key="element.key"
+              :element="element"
+              :index="index"
+              :data="data"
+            ></model-form-item>
+          </template>
+        </draggable>
+      </div>
     </div>
+    <Modal
+      v-model="showModal"
+      title="顶部广告"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <!-- 顶部广告 -->
+      <div class="modal-top-advert">
+        <div>
+          <img
+            class="show-image"
+            width="600"
+            height="40"
+            :src="topAdvert.img"
+            alt
+          />
+        </div>
+        <div class="tips">
+          建议尺寸：<span>{{ topAdvert.size }}</span>
+        </div>
+        <div>
+          图片链接：<span>{{ topAdvert.url }}</span
+          ><Button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</Button
+          >
+        </div>
+        <div>
+          选择图片：<Button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</Button
+          >&nbsp;
+        </div>
+        <div>选择背景色：<ColorPicker v-model="topAdvert.bgColor" /></div>
+      </div>
+    </Modal>
+    <Modal
+      v-model="showModalNav"
+      title="快捷导航"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <!-- 分类tab栏 -->
+      <div class="modal-tab-bar">
+        <Button type="primary" size="small" @click="handleAddNav"
+          >添加分类</Button
+        >
+        <table cellspacing="0">
+          <thead>
+            <tr>
+              <th width="250">分类名称</th>
+              <th width="250">链接地址</th>
+              <!-- <th width="150">排序</th> -->
+              <th width="250">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in navList.list" :key="index">
+              <td><Input v-model="item.name" /></td>
+              <td><Input v-model="item.url" disabled /></td>
+              <!-- <td><Input v-model="item.sort"/></td> -->
+              <td>
+                <Button
+                  type="primary"
+                  size="small"
+                  @click="handleSelectLink(item, index)"
+                  >选择链接</Button
+                >&nbsp;
+                <Button type="error" size="small" @click="handleDelNav(index)"
+                  >删除</Button
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage
+        @callback="callbackSelected"
+        :isComponent="true"
+        ref="ossManage"
+      />
+    </Modal>
+  </div>
 </template>
 <script>
-import Draggable from 'vuedraggable'
-import ModelFormItem from './modelFormItem.vue'
+import Draggable from "vuedraggable";
+import ModelFormItem from "./modelFormItem.vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
-    name:'modelForm',
-    components:{
-        Draggable,
-        ModelFormItem,
-        ossManage
+  name: "modelForm",
+  components: {
+    Draggable,
+    ModelFormItem,
+    ossManage,
+  },
+  props: ["data"],
+  data() {
+    return {
+      picModelFlag: false, // 选择图片模态框
+      showModal: false, // 顶部广告模态框
+      showModalNav: false, // 分类nav模态框
+      selectedNav: null, //当前已选nav
+      // 模拟搜索框下方数据
+      promotionTags: [
+        "买2免1",
+        "领200神券",
+        "199减100",
+        "母婴5折抢",
+        "充100送20",
+      ], // 热词数据
+      topAdvert: {
+        // 头部广告图数据
+        type: "topAdvert",
+        img: "",
+        url: "",
+        bgColor: "#de000d",
+        size: "1200*80",
+      },
+      navList: {
+        // 分类nav数据
+        type: "navBar",
+        list: [
+          { name: "秒杀", url: "" },
+          { name: "闪购", url: "" },
+          { name: "优惠券", url: "" },
+          { name: "拍卖", url: "" },
+          { name: "服装城", url: "" },
+        ],
+      },
+    };
+  },
+  mounted() {
+    document.body.ondrop = function (event) {
+      let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+      if (isFirefox) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+  },
+  methods: {
+    handleSelectLink(item, index) {
+      // 调起选择链接弹窗
+      if (item) this.selectedNav = item;
+      this.$refs.liliDialog.open("link");
     },
-    props:['data'],
-    data(){
-        return{
-            picModelFlag: false, // 选择图片模态框
-            showModal: false, // 顶部广告模态框
-            showModalNav: false, // 分类nav模态框
-            selectedNav:null, //当前已选nav
-            // 模拟搜索框下方数据
-            promotionTags: [ "买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"], // 热词数据
-            topAdvert:{ // 头部广告图数据
-                type:'topAdvert',
-                img:'',
-                url:'',
-                bgColor:'#de000d',
-                size:'1200*80'
-            },
-            navList:{ // 分类nav数据
-                type:'navBar',
-                list:[
-                    {name:'秒杀', url:''}, {name:'闪购', url:''}, {name:'优惠券', url:''}, {name:'拍卖', url:''}, {name:'服装城', url:''},
-                ]
-            }
-        }
+    // 已选链接
+    selectedLink(val) {
+      console.log(val);
+      if (this.showModalNav) {
+        this.selectedNav.url = this.$options.filters.formatLinkType(val);
+      } else {
+        this.topAdvert.url = this.$options.filters.formatLinkType(val);
+      }
     },
-    mounted(){
-        document.body.ondrop = function (event) {
-            let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
-            if (isFirefox) {
-                event.preventDefault()
-                event.stopPropagation()
-            }
-        }
+    handleDelNav(index) {
+      // 删除导航
+      this.navList.list.splice(index, 1);
     },
-    methods:{
-        handleSelectLink(item,index) { // 调起选择链接弹窗
-            if(item) this.selectedNav = item;
-            this.$refs.liliDialog.open('link')
-        },
-        // 已选链接
-        selectedLink(val) {
-            console.log(val);
-            if(this.showModalNav){
-                this.selectedNav.url = this.$options.filters.formatLinkType(val);
-            }else {
-                this.topAdvert.url = this.$options.filters.formatLinkType(val);
-            }
-        },
-        handleDelNav(index){ // 删除导航
-            this.navList.list.splice(index,1)
-        },
-        handleAddNav(){ // 添加导航
-            this.navList.list.push(
-                {name:'',url:''}
-            )
-            console.log(this.navList.list)
-        },
-        // 拖动结束回调
-        handleMoveEnd ({newIndex, oldIndex}) {
-            console.log('index', newIndex, oldIndex)
-        },
-        // 修改顶部广告
-        handleModel (type) {
-            if(type == 'topAdvert'){
-                this.showModal = true;
-            } else {
-                this.showModalNav = true;
-            }
-        },
-        // 选择图片
-        handleSelectImg() {
-            this.$refs.ossManage.selectImage = true;
-            this.picModelFlag = true;
-        },
-        callbackSelected (item) { // 选择图片回调
-            this.picModelFlag = false;
-            this.topAdvert.img = item.url;
-        },
-        handleModelAdd (evt) { // 拖拽，添加模块
-            const newIndex = evt.newIndex
+    handleAddNav() {
+      // 添加导航
+      this.navList.list.push({ name: "", url: "" });
+      console.log(this.navList.list);
+    },
+    // 拖动结束回调
+    handleMoveEnd({ newIndex, oldIndex }) {
+      console.log("index", newIndex, oldIndex);
+    },
+    // 修改顶部广告
+    handleModel(type) {
+      if (type == "topAdvert") {
+        this.showModal = true;
+      } else {
+        this.showModalNav = true;
+      }
+    },
+    // 选择图片
+    handleSelectImg() {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    callbackSelected(item) {
+      // 选择图片回调
+      this.picModelFlag = false;
+      this.topAdvert.img = item.url;
+    },
+    handleModelAdd(evt) {
+      // 拖拽，添加模块
+      const newIndex = evt.newIndex;
 
-            // 为拖拽到容器的元素添加唯一 key
-            this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]))
-            const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
-            this.$set(this.data.list, newIndex, {
-                ...this.data.list[newIndex],
-                options: {
-                    ...this.data.list[newIndex].options,
-                },
-                key,
-                // 绑定键值
-                model: this.data.list[newIndex].type + '_' + key
-            })
+      // 为拖拽到容器的元素添加唯一 key
+      this.data.list[newIndex] = JSON.parse(
+        JSON.stringify(this.data.list[newIndex])
+      );
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+      this.$set(this.data.list, newIndex, {
+        ...this.data.list[newIndex],
+        options: {
+          ...this.data.list[newIndex].options,
         },
-    }
-}
+        key,
+        // 绑定键值
+        model: this.data.list[newIndex].type + "_" + key,
+      });
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-    @import './modelList/setup-box.scss';
-    .model-form {
-        width: 1500px;
-    }
-    .model-content {
-        width: 1200px;
-        margin: 0 auto;
-        background: #fff;
-        min-height: 1200px;
-    }
-    .model-form-list{
-        min-height: 500px;
-    }
-    /**  顶部广告，头部，搜索框 start */
-    .top-fixed-advert{
-        display: flex;
-        width:1500px;
-        margin-left: -150px;
-        background: $theme_color;
-        justify-content: center;
-    }
+@import "./modelList/setup-box.scss";
+.model-form {
+  width: 1500px;
+}
+.model-content {
+  width: 1200px;
+  margin: 0 auto;
+  background: #fff;
+  min-height: 1200px;
+}
+.model-form-list {
+  min-height: 500px;
+}
+/**  顶部广告，头部，搜索框 start */
+.top-fixed-advert {
+  display: flex;
+  width: 1500px;
+  margin-left: -150px;
+  background: $theme_color;
+  justify-content: center;
+}
 
-    .header-con {
-        display: flex;
-        justify-content: space-between;
-        height: 35px;
-        padding: 0 15px;
-        line-height: 35px;
+.header-con {
+  display: flex;
+  justify-content: space-between;
+  height: 35px;
+  padding: 0 15px;
+  line-height: 35px;
+  color: #999;
+  font-weight: bold;
+  div,
+  li {
+    &:hover {
+      color: $theme_color;
+      cursor: pointer;
+    }
+  }
+  .detail {
+    display: flex;
+    > li {
+      margin-left: 10px;
+      &::after {
+        content: "|";
+        padding-left: 10px;
+      }
+      &:last-child::after {
+        content: "";
+        padding-left: 0;
+      }
+      &:hover::after {
         color: #999;
-        font-weight: bold;
-        div,li{
-            &:hover{
-                color: $theme_color;
-                cursor: pointer;
-            }
-        }
-        .detail{
-            display: flex;
-            >li{
-                margin-left: 10px;
-                &::after{
-                    content: "|";
-                    padding-left: 10px;
-                }
-                &:last-child::after{
-                    content:'';
-                    padding-left: 0;
-                }
-                &:hover::after{
-                    color: #999;
-                }
-            }
-        }
+      }
     }
-    /** 搜索框 */
-    .search-con {
-        padding-top: 15px;
-        margin: 0px auto;
-        margin-bottom: 10px;
-        width: 1200px;
-        position: relative;
-        .logo{
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            width: 150px;
-            height: 50px;
-        }
-        .search {
-            width: 460px;
-            margin: 0 auto;
-            /deep/ .ivu-input.ivu-input-large {
-                border: 2px solid $theme_color;
-                font-size: 12px;
-                height: 34px;
-                &:focus {
-                    box-shadow: none;
-                }
-            }
-            /deep/ .ivu-input-group-append {
-                border: 1px solid $theme_color;
-                border-left: none;
-                height: 30px;
-                background-color: $theme_color;
-                color: #ffffff;
-                button {
-                    font-size: 14px;
-                    font-weight: 600;
-                    line-height: 1;
-                }
-            }
-        }
+  }
+}
+/** 搜索框 */
+.search-con {
+  padding-top: 15px;
+  margin: 0px auto;
+  margin-bottom: 10px;
+  width: 1200px;
+  position: relative;
+  .logo {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 150px;
+    height: 50px;
+  }
+  .search {
+    width: 460px;
+    margin: 0 auto;
+    /deep/ .ivu-input.ivu-input-large {
+      border: 2px solid $theme_color;
+      font-size: 12px;
+      height: 34px;
+      &:focus {
+        box-shadow: none;
+      }
     }
-    /** 商品分类 */
-    .nav-con{
-       width:1200px;
-       height: 40px;
-       background: #eee;
-       display: flex;
-       .all-categories{
-           width: 200px;
-           line-height: 40px;
-           color: #fff;
-           background-color: $theme_color;
-           text-align: center;
-           font-size: 16px;
-       }
-       .nav-item {
-            width: 1000px;
-            height: 40px;
-            line-height: 40px;
-            overflow: hidden;
-            list-style: none;
-            background-color: #eee;
-            display: flex;
-            li{
-                font-size: 16px;
-                font-weight: bold;
-                margin-left: 20px;
-                a{
-                    color:rgb(89, 88, 88);
-                    font-size: 15px;
-                    &:hover{color:$theme_color}
-                }
-            }
-        }
+    /deep/ .ivu-input-group-append {
+      border: 1px solid $theme_color;
+      border-left: none;
+      height: 30px;
+      background-color: $theme_color;
+      color: #ffffff;
+      button {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1;
+      }
     }
-    /**  顶部广告，头部，搜索框 end */
+    .soubenStore {
+      font-size: 14px;
+      font-weight: 600;
+      background-color: #f90;
+    }
+  }
+}
+/** 商品分类 */
+.nav-con {
+  width: 1200px;
+  height: 40px;
+  background: #eee;
+  display: flex;
+  .all-categories {
+    width: 200px;
+    line-height: 40px;
+    color: #fff;
+    background-color: $theme_color;
+    text-align: center;
+    font-size: 16px;
+  }
+  .nav-item {
+    width: 1000px;
+    height: 40px;
+    line-height: 40px;
+    overflow: hidden;
+    list-style: none;
+    background-color: #eee;
+    display: flex;
+    li {
+      font-size: 16px;
+      font-weight: bold;
+      margin-left: 20px;
+      a {
+        color: rgb(89, 88, 88);
+        font-size: 15px;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+    }
+  }
+}
+/**  顶部广告，头部，搜索框 end */
 
-    .top-fixed-advert, .nav-con{
-        position: relative;
-        &:hover{
-            .setup-box{
-                display: block;
-            }
-        }
-    }
-    /** 装修模态框 内部样式start */
-    .modal-top-advert{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        >*{
-            margin-bottom: 10px;
-        }
+.top-fixed-advert,
+.nav-con {
+  position: relative;
+  &:hover {
+    .setup-box {
+      display: block;
     }
+  }
+}
+/** 装修模态框 内部样式start */
+.modal-top-advert {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  > * {
+    margin-bottom: 10px;
+  }
+}
 </style>
diff --git a/seller/src/views/shop/renovation.vue b/seller/src/views/shop/renovation.vue
index 59a73f9e..a4649c0d 100644
--- a/seller/src/views/shop/renovation.vue
+++ b/seller/src/views/shop/renovation.vue
@@ -3,10 +3,18 @@
     <!-- 左侧模块列表 -->
     <div class="model-list">
       <div class="classification-title">基础模块</div>
-      <draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"   >
+      <draggable
+        tag="ul"
+        :list="modelData"
+        v-bind="{
+          group: { name: 'model', pull: 'clone', put: false },
+          sort: false,
+          ghostClass: 'ghost',
+        }"
+      >
         <li v-for="(model, index) in modelData" :key="index" class="model-item">
           <Icon :type="model.icon" />
-          <span>{{model.name}}</span>
+          <span>{{ model.name }}</span>
         </li>
       </draggable>
     </div>
@@ -16,7 +24,9 @@
     </div>
     <!-- 操作按钮 -->
     <div class="btn-bar">
-      <Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
+      <Button type="primary" :loading="submitLoading" @click="saveTemplate"
+        >保存模板</Button
+      >
       <Button class="ml_10" @click="resetTemplate">还原模板</Button>
     </div>
   </div>
@@ -44,21 +54,21 @@ export default {
   methods: {
     saveTemplate() {
       // 保存模板
-      this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
+      this.submitTemplate(this.$route.query.pageShow ? "OPEN" : "CLOSE");
     },
     // 提交模板
     submitTemplate(pageShow) {
-      this.submitLoading = true
-      const modelForm = JSON.parse(JSON.stringify(this.modelForm)) 
+      this.submitLoading = true;
+      const modelForm = JSON.parse(JSON.stringify(this.modelForm));
       modelForm.list.unshift(this.$refs.modelForm.navList);
       modelForm.list.unshift(this.$refs.modelForm.topAdvert);
       const data = {
         id: this.$route.query.id,
         pageData: JSON.stringify(modelForm),
-        pageShow
+        pageShow,
       };
       API_floor.updateHome(this.$route.query.id, data).then((res) => {
-        this.submitLoading = false
+        this.submitLoading = false;
         if (res.success) {
           this.$Message.success("保存模板成功");
         }