升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本

seller/src/views/shop/bill/accountStatementBill.vue

@@ -1,230 +1,180 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="开始时间" prop="startDay">
-            <DatePicker
-              type="date"
-              v-model="searchForm.startDate"
-              format="yyyy-MM-dd HH:mm:ss"
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            ></DatePicker>
-          </Form-item>
-          <Form-item label="结束时间" prop="endDate">
-            <DatePicker
-              type="date"
-              v-model="searchForm.endDate"
-              format="yyyy-MM-dd HH:mm:ss"
-              di
-              placeholder="请选择"
-              clearable
-              style="width: 240px"
-            ></DatePicker>
-          </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        class="mt_10"
-        :columns="columns"
-        :data="data"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="开始时间" prop="startDate">
+          <el-date-picker
+            v-model="searchForm.startDate"
+            type="date"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endDate">
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button class="search-btn" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table
         ref="table"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column prop="sn" label="账单号" min-width="250" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" min-width="120" />
+        <el-table-column label="结算时间段" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.startTime }}~{{ row.endTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结算金额" min-width="100">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.billPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="billStatusTagType(row.billStatus)">
+              {{ billStatusText(row.billStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="detail(row)">查看</a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import * as API_Shop from "@/api/shops";
+import * as API_Shop from "@/api/shops";
 
-  export default {
-    name: "accountStatementBill",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-        },
-        columns: [
-          {
-            title: "账单号",
-            key: "sn",
-            minWidth: 250,
-            tooltip: true
-          },
-          {
-            title: "生成时间",
-            key: "createTime",
-            minWidth: 120,
-          },
-          {
-            title: "结算时间段",
-            key: "startTime",
-            width: 200,
-            tooltip: true,
-            render: (h, params) => {
-              return h('div', params.row.startTime +"~"+params.row.endTime)
-            }
-          },
-          {
-            title: "结算金额",
-            key: "billPrice",
-            minWidth: 100,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-            },
-          },
-
-
-          {
-            title: "状态",
-            key: "billStatus",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.billStatus == "OUT") {
-                return h("Tag", {props: {color: "blue",},},"已出账");
-              } else if (params.row.billStatus == "CHECK") {
-                return h("Tag", {props: {color: "geekblue",},},"已对账");
-              } else if (params.row.billStatus == "EXAMINE") {
-                return h("Tag", {props: {color: "purple",},},"已审核");
-              } else {
-                return h("Tag", {props: {color: "green",},},"已付款");
-              }
-            }
-          },
-
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: 'right',
-            width: 200,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            },
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
+export default {
+  name: "accountStatementBill",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    billStatusText(v) {
+      const map = { OUT: "已出账", CHECK: "已对账", EXAMINE: "已审核", COMPLETE: "已付款" };
+      return map[v] || "已付款";
+    },
+    billStatusTagType(v) {
+      const map = { OUT: "primary", CHECK: "", EXAMINE: "warning", COMPLETE: "success" };
+      return map[v] || "success";
+    },
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    handleReset() {
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       };
+      this.getDataList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 重置
-      handleReset() {
-        this.searchForm = {}
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        this.searchForm.billStatus = "OUT"
-        API_Shop.getBillPage(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    getDataList() {
+      this.loading = true;
+      this.searchForm.billStatus = "OUT";
+      API_Shop.getBillPage(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      // 查看详情
-      detail(v) {
-        let id = v.id;
-        this.$router.push({
-          name: "bill-detail",
-          query: { id: id },
-        });
-
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
+    detail(v) {
+      this.$router.push({
+        name: "bill-detail",
+        query: { id: v.id },
+      });
     },
-    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-    beforeRouteLeave(to, from, next) {
-      from.meta.keepAlive = false
-      next()
-    }
-  };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeRouteLeave(to, from, next) {
+    from.meta.keepAlive = false;
+    next();
+  },
+};
 </script>
 <style lang="scss" scoped>
-  // 建议引入通用样式 可删除下面样式代码
-   @import "@/styles/table-common.scss";
-   ::v-deep .ivu-col{
-     min-height: 100vh;
-   }
+@import "@/styles/table-common.scss";
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>

seller/src/views/shop/bill/storeBill.vue

@@ -1,231 +1,170 @@
 <template>
   <div class="store-bill">
-    <Card>
-      <Form ref="searchForm"
+    <el-card>
+      <el-form
+        ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70" class="search-form" @keydown.enter.native="handleSearch"
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="开始时间" prop="startDay">
-          <DatePicker
-            type="date"
+        <el-form-item label="开始时间" prop="startDate">
+          <el-date-picker
             v-model="searchForm.startDate"
-            format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择"
-            clearable
-            style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Form-item label="结束时间" prop="endDate">
-          <DatePicker
             type="date"
-            v-model="searchForm.endDate"
-            format="yyyy-MM-dd HH:mm:ss"
-            di
+            value-format="YYYY-MM-DD HH:mm:ss"
             placeholder="请选择"
             clearable
             style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Form-item label="状态" prop="orderStatus">
-          <Select v-model="searchForm.billStatus" placeholder="请选择" clearable style="width: 240px">
-            <Option value="OUT">已出账</Option>
-            <Option value="CHECK">已对账</Option>
-            <Option value="COMPLETE">已完成</Option>
-          </Select>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-        <Button @click="handleReset" class="search-btn">重置</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        class="mt_10"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endDate">
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="billStatus">
+          <el-select v-model="searchForm.billStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="已出账" value="OUT" />
+            <el-option label="已对账" value="CHECK" />
+            <el-option label="已完成" value="COMPLETE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button class="search-btn" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
+        <el-table-column prop="sn" label="账单号" min-width="250" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" min-width="120" />
+        <el-table-column label="结算时间段" width="200" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.startTime }}~{{ row.endTime }}</template>
+        </el-table-column>
+        <el-table-column label="结算金额" min-width="100">
+          <template #default="{ row }">
+            <priceColorScheme :value="row.billPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row.billStatus === 'OUT'" type="primary">已出账</el-tag>
+            <el-tag v-else-if="row.billStatus === 'CHECK'" type="info">已对账</el-tag>
+            <el-tag v-else-if="row.billStatus === 'EXAMINE'" type="warning">已审核</el-tag>
+            <el-tag v-else type="success">已付款</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" fixed="right" width="100">
+          <template #default="{ row }">
+            <a class="link-text" @click="detail(row)">查看</a>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[10, 20, 50]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import * as API_Shop from "@/api/shops";
+import * as API_Shop from "@/api/shops";
 
-  export default {
-    name: "storeBill",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 10, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-        },
-        columns: [
-          {
-            title: "账单号",
-            key: "sn",
-            minWidth: 250,
-            tooltip: true
-          },
-          {
-            title: "生成时间",
-            key: "createTime",
-            minWidth: 120,
-          },
-          {
-            title: "结算时间段",
-            key: "startTime",
-            width: 200,
-            tooltip: true,
-            render: (h, params) => {
-              return h('div', params.row.startTime +"~"+params.row.endTime)
-            }
-          },
-          {
-            title: "结算金额",
-            key: "billPrice",
-            minWidth: 100,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-            },
-
-          },
-
-
-          {
-            title: "状态",
-            key: "billStatus",
-            width: 100,
-            render: (h, params) => {
-              if (params.row.billStatus == "OUT") {
-                return h("Tag", {props: {color: "blue",},},"已出账");
-              } else if (params.row.billStatus == "CHECK") {
-                return h("Tag", {props: {color: "geekblue",},},"已对账");
-              } else if (params.row.billStatus == "EXAMINE") {
-                return h("Tag", {props: {color: "purple",},},"已审核");
-              } else {
-                return h("Tag", {props: {color: "green",},},"已付款");
-              }
-            }
-          },
-
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            fixed: 'right',
-            width: 200,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.detail(params.row);
-                      },
-                    },
-                  },
-                  "查看"
-                ),
-              ]);
-            },
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
+export default {
+  name: "storeBill",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+    },
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    handleReset() {
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       };
+      this.getDataList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 重置
-      handleReset() {
-        this.searchForm = {}
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        API_Shop.getBillPage(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    getDataList() {
+      this.loading = true;
+      API_Shop.getBillPage(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      // 跳转结算详情
-      detail(v) {
-        let id = v.id;
-        this.$options.filters.customRouterPush({
-          name: "bill-detail",
-          query: { id: id },
-        })
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted () {
-      this.init();
+    detail(v) {
+      this.$filters.customRouterPush({
+        name: "bill-detail",
+        query: { id: v.id },
+      });
     },
-    // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
-    beforeRouteLeave(to, from, next) {
-      from.meta.keepAlive = false
-      next()
-    }
-  };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeRouteLeave(to, from, next) {
+    from.meta.keepAlive = false;
+    next();
+  },
+};
 </script>
-<style lang="scss" scoped>
-  // 建议引入通用样式 可删除下面样式代码
-   @import "@/styles/table-common.scss";
 
+<style lang="scss" scoped>
+@import "@/styles/table-common.scss";
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
 </style>

seller/src/views/shop/floorList.vue

@@ -1,83 +1,84 @@
 <template>
-  <div class="wrapper">
-    <!-- <Card class="category">
-      <div
-        :class="{ active: i == selectedIndex }"
-        class="category-item"
-        v-for="(typeItem, i) in pageTypes"
-        :key="typeItem.type"
-      >
-        <div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
+  <div class="search">
+    <el-card shadow="never">
+      <el-tabs v-model="searchForm.pageType" class="page-type-tabs" @tab-change="handleTabChange">
+        <el-tab-pane
+          v-for="typeItem in pageTypes"
+          :key="typeItem.type"
+          :name="typeItem.type"
+          :label="typeItem.title"
+        />
+      </el-tabs>
+      <div class="operation mb_10">
+        <el-button type="primary" @click="createTemp">添加页面</el-button>
       </div>
-    </Card> -->
-    <Card class="content">
-      <Button type="primary" @click="createTemp">添加页面</Button>
-      <div class="list">
-        <Spin size="large" fix v-if="loading"></Spin>
-        <div class="item item-title">
-          <div>页面名称</div>
-          <div class="item-config">
-            <div>状态</div>
-            <div>操作</div>
-          </div>
-        </div>
-
-        <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)"
-            >
-              <span slot="open">开</span>
-              <span slot="close">关</span>
-            </i-switch>
-            <a
-              style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-              @click="Template(item)"
-            >编辑</a>
-            <span style="margin: 0 8px; color: #dcdee2">|</span>
-            <a
-              style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-              @click="decorate(item)"
-            >装修</a>
-            <span style="margin: 0 8px; color: #dcdee2">|</span>
-            <Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)">
-              <a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
-            </Poptip>
-          </div>
-        </div>
-        <div class="no-more" v-if="list.length == 0">暂无更多模板</div>
+      <el-table v-loading="loading" :data="list" style="width: 100%">
+        <el-table-column prop="name" label="页面名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.name || "暂无模板昵称" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="searchForm.pageType !== 'SPECIAL'"
+          label="状态"
+          width="120"
+          align="center"
+        >
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              v-model="row.pageShow"
+              inline-prompt
+              active-text="开"
+              inactive-text="关"
+              @change="releaseTemplate(row.id)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="Template(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="decorate(row)">装修</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="confirmDel(row.id)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :total="total"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          background
+          @current-change="changePageNum"
+          @size-change="changePageSize"
+        />
       </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"
-      />
-    </Card>
-    <Modal
+    </el-card>
+    <el-dialog
       v-model="showModal"
       title="模板设置"
-      draggable
-      width="600"
-      :z-index="100"
-      :loading="loading"
-      :mask-closable="false"
-      @on-ok="newTemplate"
-      @on-cancel="showModal = false"
+      width="600px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
-      <Form ref="form" :model="formData" :label-width="80">
-        <FormItem label="模板名称" prop="name">
-          <Input v-model="formData.name" placeholder="请输入模板名称" />
-        </FormItem>
-      </Form>
-    </Modal>
+      <el-form ref="form" :model="formData" label-width="80px">
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入模板名称" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showModal = false">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="newTemplate">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -87,49 +88,26 @@ export default {
   name: "floorList",
   data() {
     return {
-      showModal: false, // 添加modal的显示
-      selectedIndex: 0, // 首页还是专题选择的index
+      showModal: false,
       total: 0,
       formData: {
-        // 新建模态框的数据
-        status: false, // 模板是否开启
-        name: "", // 模板名称
+        status: false,
+        name: "",
       },
       searchForm: {
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 20,
         sort: "createTime",
         order: "desc",
+        pageType: "INDEX",
         pageClientType: "PC",
       },
-      columns: [
-        // 列表展示的column
-        {
-          title: "页面名称",
-          key: "name",
-        },
-        {
-          title: "状态",
-        },
-        {
-          title: "操作",
-          key: "action",
-        },
-      ],
-
-      loading: false, // 加载状态
+      loading: false,
       pageTypes: [
-        // 那种类别的模板
-        {
-          type: "INDEX",
-          title: "首页",
-        },
-        // {
-        //   type: "SPECIAL",
-        //   title: "专题",
-        // },
+        { type: "INDEX", title: "首页" },
+        { type: "SPECIAL", title: "专题" },
       ],
-      list: [], // 模板列表
+      list: [],
     };
   },
   mounted() {
@@ -137,13 +115,13 @@ export default {
   },
   methods: {
     newTemplate() {
-      // 添加，编辑模板
       this.$refs.form.validate((valid) => {
         if (valid) {
           const data = this.formData;
           data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
           delete data.status;
-          (data.pageType = "STORE"), (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("编辑模板成功");
@@ -163,49 +141,47 @@ export default {
       });
     },
 
+    handleTabChange(type) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageType = type;
+      this.getTemplateList();
+    },
+
     createTemp() {
-      // 新建表单
-      this.$refs.form.resetFields();
+      this.$refs.form?.resetFields();
+      this.formData = { status: false, name: "" };
       this.showModal = true;
     },
 
     Template(item) {
-      // 编辑表单
       item.status = item.pageShow;
-      this.formData = item;
+      this.formData = { ...item };
       this.showModal = true;
     },
 
     decorate(val) {
-      // 装修
+      const data = { id: val.id, pageShow: val.pageShow, pageType: this.searchForm.pageType };
+
       this.$router.push({
         name: "renovation",
-        query: { id: val.id, pageShow: val.pageShow },
+        query: data,
       });
     },
 
-    // 分页 修改页码
     changePageNum(val) {
       this.searchForm.pageNumber = val;
       this.getTemplateList();
     },
-    // 分页 修改页数
     changePageSize(val) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = val;
       this.getTemplateList();
     },
     getTemplateList() {
-      //模板列表
-      // let params = {
-      //   pageNumber: 1,
-      //   pageSize: 999,
-      //   pageType: "INDEX",
-      //   pageClientType: "PC",
-      // };
+      this.loading = true;
       API_floor.getHomeList(this.searchForm).then((res) => {
+        this.loading = false;
         if (res.success) {
-          // this.total
           this.total = res.result.total;
           this.list = res.result.records;
           this.list.forEach((e) => {
@@ -220,7 +196,6 @@ export default {
     },
 
     releaseTemplate(id) {
-      //发布模板
       API_floor.releasePageHome(id).then((res) => {
         if (res.success) {
           this.$Message.success("发布模板成功");
@@ -228,7 +203,13 @@ export default {
         }
       });
     },
-    // 删除模板
+    confirmDel(id) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "删除此模板？",
+        onOk: () => this.delTemplate(id),
+      });
+    },
     delTemplate(id) {
       API_floor.removePageHome(id).then((res) => {
         if (res.success) {
@@ -242,62 +223,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.category-item {
-  cursor: pointer;
-  padding: 4px;
-}
-.active {
-  background: #ededed;
-}
-.item-title {
-  background: #d7e7f5 !important;
-  height: 54px;
-}
-.no-more {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wrapper {
-  background: #fff;
-  padding: 20px;
-  display: flex;
-}
-.category {
-  flex: 2;
-}
-.content {
-  flex: 8;
-}
-* {
-  margin: 5px;
-}
-.list {
-  min-height: 600px;
-  position: relative;
-}
-.item:nth-of-type(2) {
-  margin: 0 5px;
-}
-.item {
-  width: 100% !important;
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  > .item-config {
-    width: 250px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    div:nth-child(2) {
-      margin-right: 80px;
-    }
-  }
-}
-.item:nth-of-type(2n + 1) {
-  background: #f5f7fa;
+.page-type-tabs {
+  margin-bottom: 16px;
 }
 </style>

seller/src/views/shop/hotzone/components/Zone.vue

@@ -51,44 +51,41 @@
       <li class="hz-u-square hz-u-square-br" data-pointer="dealBR"></li>
     </ul>
    
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="编辑热区"
-      draggable
-      scrollable
-      :mask="false"
-      ok-text="保存"
-      @on-ok="saveZone"
-      @on-cancel="cancelZone"
+      :close-on-click-modal="false"
+      append-to-body
+      @close="cancelZone"
     >
       <div>
         <div class="hz-edit-img">
           <img class="show-image" :src="zoneForm.img" alt />
         </div>
 
-        <Form :model="zoneForm" :label-width="80">
-          <!-- <FormItem label="图片链接：">
-            <Input v-model="zoneForm.img"></Input>
-            <Button size="small" type="primary" @click="handleSelectImg"
-              >选择图片</Button
+        <el-form :model="zoneForm" label-width="80px">
+          <!-- <el-form-item label="图片链接：">
+            <el-input v-model="zoneForm.img"></el-input>
+            <el-button size="small" type="primary" @click="handleSelectImg"
+              >选择图片</el-button
             >
             :v-model="zoneForm.type === 'goods' ? zoneForm.goodsName : zoneForm.link"
-          </FormItem> -->
-          <FormItem label="跳转链接：">
-            <Input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" ></Input>
-            <Button size="small" type="primary" @click="handleSelectLink"
-              >选择链接</Button
+          </el-form-item> -->
+          <el-form-item label="跳转链接：">
+            <el-input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" ></el-input>
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
             >
-          </FormItem>
-        </Form>
+          </el-form-item>
+        </el-form>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+    <el-dialog width="1200px" v-model="picModelFlag" :show-footer="false">
       <ossManage @callback="callbackSelected" :isComponent="true"  :initialize="picModelFlag" ref="ossManage"/>
-    </Modal>
+    </el-dialog>
   </li>
 </template>
 
@@ -175,7 +172,7 @@ export default {
     },
     // 已选链接
     selectedLink(val) {
-      this.zoneForm.link = this.$options.filters.formatLinkType(val);
+      this.zoneForm.link = this.$filters.formatLinkType(val);
       this.settingZone(val);
       this.changeInfo(this.zoneForm);
     },

seller/src/views/shop/hotzone/index.vue

@@ -1,23 +1,27 @@
 <template>
-  <Modal
-    :styles="{ top: '120px' }"
-    width="800"
-    @on-cancel="clickClose"
-    @on-ok="clickOK"
+  <el-dialog
     v-model="flag"
-    :mask-closable="false"
     title="绘制热区"
-    scrollable
+    width="800px"
+    top="8vh"
+    :close-on-click-modal="false"
+    append-to-body
+    destroy-on-close
+    @close="clickClose"
   >
     <template v-if="flag">
       <hotzone
         ref="hotzone"
-        @change="changeHotzone"
         :zonesInit="res.zoneInfo"
         :image="res.img"
-      ></hotzone>
+        @change="changeHotzone"
+      />
     </template>
-  </Modal>
+    <template #footer>
+      <el-button @click="clickClose">取消</el-button>
+      <el-button type="primary" @click="clickOK">确定</el-button>
+    </template>
+  </el-dialog>
 </template>
 <script>
 import hotzone from "./components/Hotzone.vue";
@@ -28,28 +32,24 @@ export default {
   },
   data() {
     return {
-      flag: false, // modal显隐
+      flag: false,
     };
   },
   props: ["res"],
-  mounted() {},
   methods: {
     changeHotzone(info) {
       this.$emit("changeZone", info);
     },
-    // 关闭弹窗
     clickClose() {
+      this.flag = false;
       this.$emit("closeFlag", false);
     },
-    // 点击确认
     clickOK() {
       this.clickClose();
     },
-    // 打开组件方法
-    open(type, mutiple) {
+    open() {
       this.flag = true;
     },
-    // 关闭组件
     close() {
       this.flag = false;
     },
@@ -57,13 +57,8 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-::v-deep .ivu-modal {
+:deep(.el-dialog__body) {
   overflow: hidden;
-  height: 650px !important;
-}
-::v-deep .ivu-modal-body {
-  width: 100%;
   height: 500px;
-  overflow: hidden;
 }
 </style>

seller/src/views/shop/modelForm.vue

@@ -1,16 +1,13 @@
 <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="" /> -->
+        <img :src="topAdvert.img" width="1200" height="80" alt="" />
         <div class="setup-box">
-          <Button size="small" @click.stop="handleModel('topAdvert')"
-            >编辑</Button
-          >
+          <el-button size="small" @click.stop="handleModel('topAdvert')">编辑</el-button>
         </div>
       </div>
       <div class="header-con">
@@ -20,20 +17,24 @@
           <li>请登录</li>
           <li>我的订单</li>
           <li>我的足迹</li>
-          <li><Icon size="18" type="ios-cart-outline"></Icon>购物车</li>
+          <li>
+            <el-icon :size="18"><ShoppingCart /></el-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>
+          <el-input size="large" placeholder="输入你想查找的商品">
+            <template #append>
+              <el-button>搜索</el-button>
+            </template>
+          </el-input>
         </div>
       </div>
-      <!-- <div class="nav-con">
+      <div class="nav-con" v-if="$route.query.pageType !== 'SPECIAL'">
         <div class="all-categories">全部商品分类</div>
         <ul class="nav-item">
           <li v-for="(item, index) in navList.list" :key="index">
@@ -41,12 +42,9 @@
           </li>
         </ul>
         <div class="setup-box">
-          <Button size="small" @click.stop="handleModel('quickNav')"
-            >编辑</Button
-          >
+          <el-button size="small" @click.stop="handleModel('quickNav')">编辑</el-button>
         </div>
-      </div> -->
-      <!-- 装修主体 -->
+      </div>
       <div>
         <draggable
           class="model-form-list"
@@ -55,149 +53,129 @@
           @end="handleMoveEnd"
           @add="handleModelAdd"
         >
-          <template v-for="(element, index) in data.list">
+          <template v-for="(element, index) in data.list" :key="element.key || index">
             <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
+    <el-dialog
       v-model="showModal"
       title="顶部广告"
-      draggable
-      width="800"
-      :z-index="100"
-      :mask-closable="false"
+      width="800px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
-      <!-- 顶部广告 -->
       <div class="modal-top-advert">
         <div>
-          <img
-            class="show-image"
-            width="600"
-            height="40"
-            :src="topAdvert.img"
-            alt
+          <img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
+        </div>
+        <div class="tips">建议尺寸：<span>{{ topAdvert.size }}</span></div>
+        <div>
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="topAdvert.url"
+            :disabled="!!topAdvert.type && topAdvert.type !== 'link'"
+            placeholder="https://"
           />
-        </div>
-        <div class="tips">
-          建议尺寸：<span>{{ topAdvert.size }}</span>
+          <el-button size="small" type="primary" @click="handleSelectLink">选择链接</el-button>
         </div>
         <div>
-          图片链接：<span>{{ topAdvert.url }}</span
-          ><Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
-          >
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg">选择图片</el-button>
         </div>
-        <div>
-          选择图片：<Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
-          >&nbsp;
-        </div>
-        <div>选择背景色：<ColorPicker v-model="topAdvert.bgColor" /></div>
+        <div>选择背景色：<el-color-picker v-model="topAdvert.bgColor" /></div>
       </div>
-    </Modal>
-    <Modal
+    </el-dialog>
+    <el-dialog
       v-model="showModalNav"
       title="快捷导航"
-      draggable
-      width="800"
-      :z-index="100"
-      :mask-closable="false"
+      width="800px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
-      <!-- 分类tab栏 -->
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAddNav"
-          >添加分类</Button
-        >
+        <el-button type="primary" size="small" @click="handleAddNav">添加分类</el-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><el-input v-model="item.name" /></td>
               <td>
-                <Button
-                  type="primary"
-                  size="small"
-                  @click="handleSelectLink(item, index)"
-                  >选择链接</Button
-                >&nbsp;
-                <Button type="error" size="small" @click="handleDelNav(index)"
-                  >删除</Button
-                >
+                <el-input
+                  v-model="item.url"
+                  :disabled="!item.title || item.title !== '外部链接'"
+                />
+              </td>
+              <td>
+                <el-button type="primary" size="small" @click="handleSelectLink(item, index)">选择链接</el-button>
+                <el-button type="danger" size="small" @click="handleDelNav(index)">删除</el-button>
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
-    <!-- 选择商品。链接 -->
+    </el-dialog>
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
-    <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage"/>
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
+import { ShoppingCart } from "@element-plus/icons-vue";
 import Draggable from "vuedraggable";
 import ModelFormItem from "./modelFormItem.vue";
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelForm",
   components: {
     Draggable,
     ModelFormItem,
     ossManage,
+    ShoppingCart,
   },
   props: ["data"],
   data() {
     return {
-      picModelFlag: false, // 选择图片模态框
-      showModal: false, // 顶部广告模态框
-      showModalNav: false, // 分类nav模态框
-      selectedNav: null, //当前已选nav
-      // 模拟搜索框下方数据
-      promotionTags: [
-        "买2免1",
-        "领200神券",
-        "199减100",
-        "母婴5折抢",
-        "充100送20",
-      ], // 热词数据
+      picModelFlag: false,
+      showModal: false,
+      showModalNav: false,
+      selectedNav: null,
+      promotionTags: ["买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"],
       topAdvert: {
-        // 头部广告图数据
         type: "topAdvert",
         img: "",
         url: "",
         bgColor: "#de000d",
         size: "1200*80",
       },
+      currentIndex: 0,
       navList: {
-        // 分类nav数据
         type: "navBar",
         list: [
-          { name: "秒杀", url: "" },
-          { name: "闪购", url: "" },
-          { name: "优惠券", url: "" },
-          { name: "拍卖", url: "" },
-          { name: "服装城", url: "" },
+          { name: "秒杀", url: "", title: "" },
+          { name: "闪购", url: "", title: "" },
+          { name: "优惠券", url: "", title: "" },
+          { name: "拍卖", url: "", title: "" },
+          { name: "服装城", url: "", title: "" },
         ],
       },
     };
@@ -213,33 +191,32 @@ export default {
   },
   methods: {
     handleSelectLink(item, index) {
-      // 调起选择链接弹窗
       if (item) this.selectedNav = item;
       this.$refs.liliDialog.open("link");
+      this.currentIndex = index;
     },
-    // 已选链接
     selectedLink(val) {
-      console.log(val);
       if (this.showModalNav) {
-        this.selectedNav.url = this.$options.filters.formatLinkType(val);
+        this.selectedNav.url = this.$filters.formatLinkType(val);
+        this.selectedNav.type = val.___type === "other" && val.url === "" ? "link" : "other";
       } else {
-        this.topAdvert.url = this.$options.filters.formatLinkType(val);
+        this.topAdvert.url = this.$filters.formatLinkType(val);
+        this.topAdvert.type = val.___type === "other" && val.url === "" ? "link" : "other";
       }
+      this.navList.list[this.currentIndex].title = val.title;
     },
     handleDelNav(index) {
-      // 删除导航
       this.navList.list.splice(index, 1);
     },
     handleAddNav() {
-      // 添加导航
-      this.navList.list.push({ name: "", url: "" });
-      console.log(this.navList.list);
+      this.navList.list.push({ name: "", url: "", title: "" });
+      this.$nextTick(() => {
+        this.selectedNav.title = val.title;
+      });
     },
-    // 拖动结束回调
     handleMoveEnd({ newIndex, oldIndex }) {
       console.log("index", newIndex, oldIndex);
     },
-    // 修改顶部广告
     handleModel(type) {
       if (type == "topAdvert") {
         this.showModal = true;
@@ -247,35 +224,27 @@ export default {
         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] = JSON.parse(JSON.stringify(this.data.list[newIndex]));
+      const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+      this.data.list[newIndex] = {
         ...this.data.list[newIndex],
         options: {
           ...this.data.list[newIndex].options,
         },
         key,
-        // 绑定键值
         model: this.data.list[newIndex].type + "_" + key,
-      });
+      };
     },
   },
 };
@@ -294,7 +263,6 @@ export default {
 .model-form-list {
   min-height: 500px;
 }
-/**  顶部广告，头部，搜索框 start */
 .top-fixed-advert {
   display: flex;
   width: 1500px;
@@ -336,7 +304,6 @@ export default {
     }
   }
 }
-/** 搜索框 */
 .search-con {
   padding-top: 15px;
   margin: 0px auto;
@@ -353,34 +320,27 @@ export default {
   .search {
     width: 460px;
     margin: 0 auto;
-    ::v-deep .ivu-input.ivu-input-large {
+    :deep(.el-input--large .el-input__wrapper) {
       border: 2px solid $theme_color;
       font-size: 12px;
       height: 34px;
-      &:focus {
-        box-shadow: none;
-      }
+      box-shadow: none;
     }
-    ::v-deep .ivu-input-group-append {
+    :deep(.el-input-group__append) {
       border: 1px solid $theme_color;
       border-left: none;
       height: 30px;
       background-color: $theme_color;
       color: #ffffff;
-      button {
+      .el-button {
         font-size: 14px;
         font-weight: 600;
         line-height: 1;
+        color: #fff;
       }
     }
-    .soubenStore {
-      font-size: 14px;
-      font-weight: 600;
-      background-color: #f90;
-    }
   }
 }
-/** 商品分类 */
 .nav-con {
   width: 1200px;
   height: 40px;
@@ -416,7 +376,6 @@ export default {
     }
   }
 }
-/**  顶部广告，头部，搜索框 end */
 
 .top-fixed-advert,
 .nav-con {
@@ -427,14 +386,8 @@ export default {
     }
   }
 }
-/** 装修模态框 内部样式start */
 .modal-top-advert {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  > * {
-    margin-bottom: 10px;
-  }
+  align-items: start;
+  padding: 0 30px;
 }
 </style>

seller/src/views/shop/modelFormItem.vue

@@ -24,10 +24,10 @@
         />
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(element.options.list[0])"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -43,8 +43,8 @@
             <img :src="item.img" width="230" height="190" alt="" />
             <div class="setup-box">
               <div>
-                <Button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</Button
+                <el-button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</el-button
                 >
               </div>
             </div>
@@ -56,6 +56,10 @@
     <template v-if="element.type == 'seckill'">
       <seckill :data="element"></seckill>
     </template>
+    <!-- 限时秒杀 待完善 -->
+    <template v-if="element.type == 'seckill-only-album'">
+      <seckill-only-album :data="element"></seckill-only-album>
+    </template>
     <!-- 折扣广告 -->
     <template v-if="element.type == 'discountAdvert'">
       <div
@@ -74,8 +78,8 @@
             <img :src="item.img" width="190" height="210" alt="" />
             <div class="setup-box">
               <div>
-                <Button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</Button
+                <el-button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</el-button
                 >
               </div>
             </div>
@@ -90,8 +94,8 @@
             <img :src="item.img" width="240" height="105" alt="" />
             <div class="setup-box">
               <div>
-                <Button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</Button
+                <el-button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</el-button
                 >
               </div>
             </div>
@@ -111,6 +115,26 @@
     <template v-if="element.type == 'firstAdvert'">
       <first-page-advert :data="element"></first-page-advert>
     </template>
+    <!-- 商品模块 -->
+    <template v-if="element.type == 'goodsType'">
+      <goodsType :data="element" class="mb_20 width_1200_auto"></goodsType>
+    </template>
+    <!-- 商品模块2 -->
+    <template v-if="element.type == 'onlyGoodsModel'">
+      <onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
+    </template>
+    <!-- 混合模块 -->
+    <template v-if="element.type == 'mixModel'">
+      <mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
+    </template>
+    <!-- 为你推荐 -->
+    <template v-if="element.type == 'forYour'">
+      <forYour :data="element" class="mb_20 width_1200_auto"></forYour>
+    </template>
+    <!-- 一行三列 -->
+    <template v-if="element.type == 'oneRowThreeColumns'">
+      <oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
+    </template>
     <!-- 横幅广告 -->
     <template v-if="element.type == 'bannerAdvert'">
       <div class="horizontal-advert setup-content">
@@ -126,10 +150,10 @@
         </div>
         <div class="setup-box">
           <div>
-            <Button
+            <el-button
               size="small"
               @click.stop="handleSelectModel(element.options)"
-              >编辑</Button
+              >编辑</el-button
             >
           </div>
         </div>
@@ -139,15 +163,15 @@
       <not-enough :data="element"></not-enough>
     </template>
     <div class="del-btn">
-      <Button size="small" type="error" @click="handleModelDelete">删除</Button>
+      <el-button size="small" type="danger" @click="handleModelDelete">删除</el-button>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
-      width="800"
-      :z-index="100"
-      :mask-closable="false"
+      width="800px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
     >
       <div class="modal-top-advert">
         <div>
@@ -198,41 +222,55 @@
           建议尺寸：<span>{{ selected.size }}</span>
         </div>
         <div>
-          图片链接：<span>{{ selected.url }}</span>
-          <Button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</Button
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
           >
         </div>
         <div>
-          选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
+          >
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
-    <liliDialog
-      ref="liliDialog"
-      @selectedLink="selectedLink"
-  
-    ></liliDialog>
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage"/>
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import ModelCarousel from "./modelList/carousel.vue";
-import ModelCarousel1 from './modelList/carousel1.vue';
-import ModelCarousel2 from './modelList/carousel2.vue';
+import ModelCarousel1 from "./modelList/carousel1.vue";
+import ModelCarousel2 from "./modelList/carousel2.vue";
 import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
 import NewGoodsSort from "./modelList/newGoodsSort.vue";
 import Recommend from "./modelList/recommend.vue";
 import NotEnough from "./modelList/notEnough.vue";
 import Seckill from "./modelList/seckill.vue";
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import goodsType from "./modelList/goodsAndType.vue";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 
+import mixModel from "./modelList/mixModel.vue";
+import forYour from "./modelList/forYour.vue";
+import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
+
+import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
+import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
 export default {
   name: "modelFormItem",
   props: ["element", "select", "index", "data"],
@@ -245,7 +283,13 @@ export default {
     FirstPageAdvert,
     NotEnough,
     Seckill,
+    goodsType,
     ossManage,
+    oneRowThreeColumns,
+    "seckill-only-album":seckillOnlyAlbum,
+    onlyGoodsModel,
+    mixModel,
+    forYour
   },
   data() {
     return {
@@ -278,9 +322,11 @@ export default {
     },
     // 确定选择链接
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
-    
+
     handleSelectImg() {
       // 选择图片
       this.$refs.ossManage.selectImage = true;
@@ -433,7 +479,7 @@ export default {
         height: inherit;
         font-size: 12px;
         font-weight: bold;
-        .ivu-icon {
+        .el-icon {
           position: absolute;
           right: 10px;
           top: 10px;
@@ -457,14 +503,14 @@ export default {
       align-items: center;
       flex-direction: column;
       justify-content: center;
-      .ivu-icon {
+      .el-icon {
         font-size: 18px;
         transition: all 0.3s ease-out;
       }
       &:hover {
         background-color: $theme_color;
         color: #fff;
-        .ivu-icon {
+        .el-icon {
           transform: rotateZ(360deg);
         }
       }

seller/src/views/shop/modelList/carousel.vue

@@ -5,55 +5,60 @@
       <div class="nav-side">分类占位区</div>
       <div class="nav-content setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay>
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+        <el-carousel autoplay height="340px">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="790" height="340" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
       <div class="nav-right">
         <div class="person-msg">
           <img :src="userInfo.face" v-if="userInfo.face" alt />
-          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
-          <div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
+          <el-avatar class="mb_10" v-else :size="80" />
+          <div>
+            Hi，{{ userInfo.nickName || "欢迎来到管理后台"  }}
+          </div>
           <div v-if="userInfo.id">
-            <Button type="error" shape="circle">会员中心</Button>
+            <el-button type="danger" circle>会员中心</el-button>
           </div>
           <div v-else>
-            <Button type="error" shape="circle">请登录</Button>
+            <el-button type="danger" circle>请登录</el-button>
           </div>
         </div>
         <div class="shop-msg">
           <div>
             <span>常见问题</span>
             <ul class="article-list">
-              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
-                {{article.title}}
+              <li
+                class="ellipsis"
+                :alt="article.title"
+                v-for="(article, index) in articleList"
+                :key="index"
+              >
+                {{ article.title }}
               </li>
             </ul>
           </div>
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="快捷导航"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
       
-      
-    >
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        <el-button type="primary" size="small" @click="handleAdd">添加轮播</el-button>
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
         <div style="color: #999" class="fz_12">点击缩略图替换图片</div>
@@ -78,87 +83,91 @@
                   alt=""
                 />
               </td>
-              <td><Input v-model="item.url" disabled /></td>
-              <!-- <td><Input v-model="item.sort"/></td> -->
               <td>
-                <Button
-                    type="primary"
-                    size="small"
-                    @click="handleSelectImg(item)"
-                    >选择图片</Button
-                >&nbsp;
-                <Button
-                  type="info"
+                <el-input
+                  class="outsideUrl"
+                  v-model="item.url"
+                  :disabled="!!item.type && item.type !== 'link'"
+                />
+              </td>
+              <!-- <td><el-input v-model="item.sort"/></td> -->
+              <td>
+                <el-button
+                  type="primary"
                   size="small"
-                  @click="handleSelectLink(item)"
-                  >选择链接</Button
+                  @click="handleSelectImg(item)"
+                  >选择图片</el-button
                 >&nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
+                >&nbsp;
+                <el-button
+                  type="danger"
+                  plain
                   size="small"
                   @click="handleDel(index)"
-                  >删除</Button
+                  >删除</el-button
                 >
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
-    <liliDialog
-      ref="liliDialog"
-      @selectedLink="selectedLink"
-    
-    ></liliDialog>
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelCarousel",
   props: ["data"],
   components: {
-    ossManage
+    ossManage,
   },
   data() {
     return {
       showModal: false, // modal显隐
       selected: null, // 已选数据
       picModelFlag: false, // 选择图片modal
-      userInfo:{},
-      articleList:[
-        {title:'促销计算规则'},
-        {title:'商家申请开店'},
-        {title:'商家账号注册'},
-        {title:'促销计算规则'}
-      ]
+      userInfo: {},
+      articleList: [
+        { title: "促销计算规则" },
+        { title: "商家申请开店" },
+        { title: "商家账号注册" },
+        { title: "促销计算规则" },
+      ],
     };
   },
 
   methods: {
-    handleSelectModel () {
+    handleSelectModel() {
       // 编辑模块
       this.showModal = true;
     },
     // 添加轮播图
-    handleAdd () {
-      this.data.options.list.push({ img: "", url: "" });
+    handleAdd() {
+      this.data.options.list.push({ img: "", url: "", type: "" });
       this.$forceUpdate();
     },
-    handleSelectLink (item) {
+    handleSelectLink(item) {
       // 选择链接
-      this.$refs.liliDialog.open('link')
+      this.$refs.liliDialog.open("link");
       this.selected = item;
     },
-    callbackSelected (item) { // 选择图片回调
+    callbackSelected(item) {
+      // 选择图片回调
       this.picModelFlag = false;
       this.selected.img = item.url;
     },
@@ -166,10 +175,11 @@ export default {
       // 删除图片
       this.data.options.list.splice(index, 1);
     },
-    selectedLink(val) { // 选择链接回调
-      console.log(val);
-      this.selected.url = this.$options.filters.formatLinkType(val);
-      console.log(this.selected.url);
+    selectedLink(val) {
+      // 选择链接回调
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 选择图片
     handleSelectImg(item) {
@@ -241,7 +251,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-btn-default {
       color: $theme_color;
       border-color: $theme_color;
     }

seller/src/views/shop/modelList/carousel1.vue

@@ -1,39 +1,39 @@
 <template>
-  <div class="model-carousel1" :style="{background: bgColor}">
+  <div class="model-carousel1" :style="{ background: bgColor }">
     <div class="nav-body clearfix">
       <!-- 侧边导航 -->
       <div class="nav-side">分类占位区</div>
       <div class="nav-content setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay @on-change="autoChange">
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index" >
+        <el-carousel autoplay @change="autoChange">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="1200" height="470" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="快捷导航"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
       
-      
-    >
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        <el-button type="primary" size="small" @click="handleAdd">添加轮播</el-button>
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
-        <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片、点击颜色选择器选择背景色</span>
+        <span style="color: red" class="fz_12 ml_10"
+          >点击缩略图替换图片、点击颜色选择器选择背景色</span
+        >
         <table cellspacing="0">
           <thead>
             <tr>
@@ -54,82 +54,81 @@
                   alt=""
                 />
               </td>
-              <td><Input v-model="item.url" disabled /></td>
               <td>
-                <Button
-                  type="info"
-                  size="small"
-                  @click="handleSelectLink(item)"
-                  >选择链接</Button
+                <el-input
+                  class="outsideUrl"
+                  v-model="item.url"
+                  :disabled="!!item.type && item.type !== 'link'"
+                />
+              </td>
+              <td>
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
                 >&nbsp;
-                <ColorPicker size="small" v-model="item.bgColor" />
+                <el-color-picker size="small" v-model="item.bgColor" />
                 &nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-button
+                  type="danger"
+                  plain
                   size="small"
                   @click="handleDel(index)"
-                  >删除</Button
+                  >删除</el-button
                 >
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
-    <liliDialog
-      ref="liliDialog"
-      @selectedLink="selectedLink"
-    
-    ></liliDialog>
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelCarousel",
   props: ["data"],
   components: {
-    ossManage
+    ossManage,
   },
   data() {
     return {
       showModal: false, // modal显隐
       selected: null, // 已选数据
       picModelFlag: false, // 选择图片modal
-      bgColor:'#fff'  // 轮播背景色
+      bgColor: "#fff", // 轮播背景色
     };
   },
-  mounted () {
-    this.bgColor = this.data.options.list[0].bgColor
+  mounted() {
+    this.bgColor = this.data.options.list[0].bgColor;
   },
   methods: {
-    handleSelectModel () {
+    handleSelectModel() {
       // 编辑模块
       this.showModal = true;
     },
     // 自动切换时改变背景色
-    autoChange (oVal,val) {
-      this.bgColor = this.data.options.list[val].bgColor
+    autoChange(oVal, val) {
+      this.bgColor = this.data.options.list[val].bgColor;
     },
     // 添加轮播图片和链接
-    handleAdd () {
-      this.data.options.list.push({ img: "", url: "", bgColor: '#fff' });
+    handleAdd() {
+      this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
       this.$forceUpdate();
     },
     // 打开选择链接modal
-    handleSelectLink (item) {
-      this.$refs.liliDialog.open('link')
+    handleSelectLink(item) {
+      this.$refs.liliDialog.open("link");
       this.selected = item;
     },
-    callbackSelected (item) { // 选择图片回调
+    callbackSelected(item) {
+      // 选择图片回调
       this.picModelFlag = false;
       this.selected.img = item.url;
     },
@@ -137,15 +136,18 @@ export default {
     handleDel(index) {
       this.data.options.list.splice(index, 1);
     },
-    selectedLink(val) { // 选择链接回调
-      this.selected.url = this.$options.filters.formatLinkType(val);
+    selectedLink(val) {
+      // 选择链接回调
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 打开选择图片modal
     handleSelectImg(item) {
       this.selected = item;
       this.$refs.ossManage.selectImage = true;
       this.picModelFlag = true;
-    }
+    },
   },
 };
 </script>
@@ -164,14 +166,13 @@ export default {
   width: 1200px;
   height: 470px;
   margin: 0px auto;
-  
 }
 .nav-side {
   height: 100%;
   width: 200px;
   padding: 0px;
   color: #fff;
-  background-color:rgba(0,0,0,.5);
+  background-color: rgba(0, 0, 0, 0.5);
   line-height: 470px;
   text-align: center;
   position: absolute;

seller/src/views/shop/modelList/carousel2.vue

@@ -5,23 +5,26 @@
       <div class="nav-side">分类占位区</div>
       <div class="nav-content setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay>
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+        <el-carousel autoplay height="340px">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="590" height="470" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
       <div class="nav-content1 setup-content">
         <!-- 轮播图 -->
-        <Carousel autoplay :autoplay-speed="5000">
-          <CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
+        <el-carousel autoplay :autoplay-speed="5000">
+          <el-carousel-item
+            v-for="(item, index) in data.options.listRight"
+            :key="index"
+          >
             <div class="mb_10">
               <img :src="item[0].img" width="190" height="150" />
             </div>
@@ -31,49 +34,56 @@
             <div>
               <img :src="item[2].img" width="190" height="150" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+            <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
           </div>
         </div>
       </div>
       <div class="nav-right">
         <div class="person-msg">
           <img :src="userInfo.face" v-if="userInfo.face" alt />
-          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
-          <div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
+          <el-avatar class="mb_10" v-else :size="80" />
+          <div>
+            Hi，{{ userInfo.nickName || "欢迎来到管理后台"  }}
+          </div>
           <div v-if="userInfo.id">
-            <Button type="error" shape="circle">会员中心</Button>
+            <el-button type="danger" circle>会员中心</el-button>
           </div>
           <div v-else>
-            <Button type="error" shape="circle">请登录</Button>
+            <el-button type="danger" circle>请登录</el-button>
           </div>
         </div>
         <div class="shop-msg">
           <div>
             <span>常见问题</span>
             <ul class="article-list">
-              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
-                {{article.title}}
+              <li
+                class="ellipsis"
+                :alt="article.title"
+                v-for="(article, index) in articleList"
+                :key="index"
+              >
+                {{ article.title }}
               </li>
             </ul>
           </div>
         </div>
-      </div>)
+      </div>
     </div>
     <!-- 左侧轮播装修 -->
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="快捷导航"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        <el-button type="primary" size="small" @click="handleAdd">添加轮播</el-button>
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
         <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
@@ -97,42 +107,57 @@
                   alt=""
                 />
               </td>
-              <td><Input v-model="item.url" disabled /></td>
               <td>
-                <Button
-                  type="info"
-                  size="small"
-                  @click="handleSelectLink(item)"
-                  >选择链接</Button>&nbsp;
-                <Button
-                  type="error"
-                  ghost
+                <el-input
+                  class="outsideUrl"
+                  v-model="item.url"
+                  :disabled="!!item.type && item.type !== 'link'"
+                />
+              </td>
+              <td>
+                <el-button type="info" size="small" @click="handleSelectLink(item)"
+                  >选择链接</el-button
+                >&nbsp;
+                <el-button
+                  type="danger"
+                  plain
                   size="small"
                   @click="handleDel(index)"
-                  >删除</Button
+                  >删除</el-button
                 >
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 右侧轮播装修 -->
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="右侧装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
-    >
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-tab-bar">
-        <Button type="primary" size="small" @click="handleAddGroup">添加组</Button>
+        <el-button type="primary" size="small" @click="handleAddGroup"
+          >添加组</el-button
+        >
         &nbsp;
         <span class="ml_10">图片尺寸:{{ data.size }}</span>
         <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
-        <Tabs type="card" closable @on-tab-remove="handleTabRemove" class="mt_10">
-          <TabPane :label="'图片组'+(gIndex+1)" v-for="(group, gIndex) in data.options.listRight" :key="gIndex">
+        <el-tabs
+          type="card"
+          closable
+          @tab-remove="handleTabRemove"
+          class="mt_10"
+        >
+          <el-tab-pane
+            :label="'图片组' + (gIndex + 1)"
+            v-for="(group, gIndex) in data.options.listRight"
+            :key="gIndex"
+          >
             <table cellspacing="0">
               <thead>
                 <tr>
@@ -153,85 +178,89 @@
                       alt=""
                     />
                   </td>
-                  <td><Input v-model="item.url" disabled /></td>
                   <td>
-                    <Button
+                    <el-input
+                      class="outsideUrl"
+                      v-model="item.url"
+                      :disabled="!!item.type && item.type !== 'link'"
+                    />
+                  </td>
+                  <td>
+                    <el-button
                       type="info"
                       size="small"
                       @click="handleSelectLink(item)"
-                      >选择链接</Button>
+                      >选择链接</el-button
+                    >
                   </td>
                 </tr>
               </tbody>
             </table>
-          </TabPane>
-        </Tabs>
+          </el-tab-pane>
+        </el-tabs>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
-    <liliDialog
-      ref="liliDialog"
-      @selectedLink="selectedLink"
-    ></liliDialog>
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   name: "modelCarousel",
   props: ["data"],
   components: {
-    ossManage
+    ossManage,
   },
   data() {
     return {
       showModal: false, // modal显隐
       selected: null, // 已选数据
       picModelFlag: false, // 选择图片modal
-      userInfo:{},
-      articleList:[
-        {title:'促销计算规则'},
-        {title:'商家申请开店'},
-        {title:'商家账号注册'},
-        {title:'促销计算规则'}
-      ]
+      userInfo: {},
+      articleList: [
+        { title: "促销计算规则" },
+        { title: "商家申请开店" },
+        { title: "商家账号注册" },
+        { title: "促销计算规则" },
+      ],
     };
   },
 
   methods: {
-    handleSelectModel () {
+    handleSelectModel() {
       // 编辑模块
       this.showModal = true;
     },
     // 添加轮播
-    handleAdd () {
+    handleAdd() {
       this.data.options.list.push({ img: "", url: "" });
       this.$forceUpdate();
     },
     // 添加图片组
-    handleAddGroup () {
+    handleAddGroup() {
       this.data.options.listRight.push([
-        {img:'',url:''},
-        {img:'',url:''},
-        {img:'',url:''}
-      ])
+        { img: "", url: "" },
+        { img: "", url: "" },
+        { img: "", url: "" },
+      ]);
     },
     // 删除图片组
-    handleTabRemove  (index) {
-      this.data.options.listRight.splice(index, 1)
+    handleTabRemove(index) {
+      this.data.options.listRight.splice(index, 1);
     },
     // 打开图片链接
-    handleSelectLink (item) {
-      this.$refs.liliDialog.open('link')
+    handleSelectLink(item) {
+      this.$refs.liliDialog.open("link");
       this.selected = item;
     },
-    callbackSelected (item) { // 选择图片回调
+    callbackSelected(item) {
+      // 选择图片回调
       this.picModelFlag = false;
       this.selected.img = item.url;
     },
@@ -239,10 +268,11 @@ export default {
     handleDel(index) {
       this.data.options.list.splice(index, 1);
     },
-    selectedLink(val) { // 选择链接回调
-      console.log(val);
-      this.selected.url = this.$options.filters.formatLinkType(val);
-      console.log(this.selected.url);
+    selectedLink(val) {
+      // 选择链接回调
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 打开选择图片modal
     handleSelectImg(item) {
@@ -293,7 +323,8 @@ export default {
 }
 
 /*导航内容*/
-.nav-content,.nav-content1 {
+.nav-content,
+.nav-content1 {
   width: 590px;
   height: 470px;
   overflow: hidden;
@@ -301,7 +332,7 @@ export default {
   position: relative;
   margin-left: 10px;
 }
-.nav-content1{
+.nav-content1 {
   width: 190px;
 }
 .nav-right {
@@ -319,7 +350,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-btn-default {
       color: $theme_color;
       border-color: $theme_color;
     }

seller/src/views/shop/modelList/firstPageAdvert.vue

@@ -1,163 +1,199 @@
 <template>
-    <div class="first-page-advert">
-        <div class="item setup-content" :style="{backgroundImage:`linear-gradient(to right, ${item.fromColor}, ${item.toColor})`}" v-for="(item, index) in options.list" :key="index">
-            <div>
-                <span class="line top-line"></span>
-                <p>{{item.name}}</p>
-                <span class="line btm-line"></span>
-                <p>{{item.describe}}</p>
-            </div>
-            <img :src="item.img" width="170" height="170" alt="">
-            <div class="setup-box">
-                <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
-            </div>
+  <div class="first-page-advert">
+    <div
+      class="item setup-content"
+      :style="{
+        backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
+      }"
+      v-for="(item, index) in options.list"
+      :key="index"
+    >
+      <div>
+        <span class="line top-line"></span>
+        <p>{{ item.name }}</p>
+        <span class="line btm-line"></span>
+        <p>{{ item.describe }}</p>
+      </div>
+      <img :src="item.img" width="170" height="170" alt="" />
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel(item)"
+            >编辑</el-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="170" height="170"  :src="selected.img" alt />
-                </div>
-                <div>
-                    <span>图片主标题：</span><Input v-model="selected.name" />
-                </div>
-                <div>
-                    <span>图片描述：</span><Input v-model="selected.describe" />
-                </div>
-                <div class="tips">
-                    建议尺寸：<span>{{ selected.size }}</span>
-                </div>
-                <div>
-                    图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
-                </div>
-                <div>
-                    <span>渐变背景色：</span><Input v-model="selected.fromColor" /> <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
-                </div>
-                <div>
-                    <span>渐变背景色：</span><Input v-model="selected.toColor" /> <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
-                </div>
-                <div :style="{backgroundImage:`linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`}" class="exhibition"></div>
-                <div>
-                    选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
-                </div>
-            </div>
-        </Modal>
-        <!-- 选择商品。链接 -->
-        <liliDialog
-            ref="liliDialog"
-            @selectedLink="selectedLink"
-
-        ></liliDialog>
-        <!-- 选择图片 -->
-        <Modal width="1200px" v-model="picModelFlag" footer-hide>
-            <ossManage @callback="callbackSelected" :isComponent="true"  :initialize="picModelFlag" ref="ossManage" />
-        </Modal>
+      </div>
     </div>
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-top-advert">
+        <div>
+          <img
+            class="show-image"
+            width="170"
+            height="170"
+            :src="selected.img"
+            alt
+          />
+        </div>
+        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
+        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
+        <div class="tips">
+          建议尺寸：<span>{{ selected.size }}</span>
+        </div>
+        <div>
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
+          >
+        </div>
+        <div>
+          <span>渐变背景色：</span><el-input v-model="selected.fromColor" />
+          <el-color-picker v-if="selected.fromColor" v-model="selected.fromColor" />
+        </div>
+        <div>
+          <span>渐变背景色：</span><el-input v-model="selected.toColor" />
+          <el-color-picker v-if="selected.toColor" v-model="selected.toColor" />
+        </div>
+        <div
+          :style="{
+            backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
+          }"
+          class="exhibition"
+        ></div>
+        <div>
+          选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
+          >&nbsp;
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 选择商品。链接 -->
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <!-- 选择图片 -->
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
+  </div>
 </template>
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
-    props:{
-        data: {
-            type: Object,
-            default: null
-        }
+  props: {
+    data: {
+      type: Object,
+      default: null,
     },
-    components: {ossManage},
-    data() {
-        return {
-            options: this.data.options, // 当前类型数据
-            showModal: false, // modal显隐
-            selected: {}, // 已选数据
-            picModelFlag: false // 图片选择器
-        }
+  },
+  components: { ossManage },
+  data() {
+    return {
+      options: this.data.options, // 当前类型数据
+      showModal: false, // modal显隐
+      selected: {}, // 已选数据
+      picModelFlag: false, // 图片选择器
+    };
+  },
+  methods: {
+    // 打开装修modal
+    handleSelectModel(item, type) {
+      this.selected = item;
+      this.showModal = true;
     },
-    methods:{
-        // 打开装修modal
-        handleSelectModel (item,type) {
-            this.selected = item;
-            this.showModal = true
-        },
-        handleSelectLink(item,index) { // 调起选择链接弹窗
-            this.$refs.liliDialog.open('link')
-        },
-        // 选择链接回调
-        selectedLink(val) {
-            this.selected.url = this.$options.filters.formatLinkType(val);;
-        },
-        handleSelectImg(){ // 选择图片
-            this.$refs.ossManage.selectImage = true;
-            this.picModelFlag = true;
-        },
-        // 选择图片回调
-        callbackSelected (val) {
-            this.picModelFlag = false;
-            this.selected.img = val.url;
-        }
-    }
-}
+    handleSelectLink(item, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    handleSelectImg() {
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    // 选择图片回调
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected.img = val.url;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import './setup-box.scss';
-.first-page-advert{
+@import "./setup-box.scss";
+.first-page-advert {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  // margin-top: -10px;
+  .item {
+    width: 393px;
+    height: 170px;
+    margin-top: 10px;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    // margin-top: -10px;
-    .item{
-        width: 393px;
-        height: 170px;
-        margin-top: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        img{margin-left: 20px;}
-
-        &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
-
-        p:nth-of-type(1){
-            margin: 3px 0;
-            font-size: 18px;
-            color: #fff;
-        }
-        p:nth-of-type(2){
-            margin-top: 3px;
-            color: #fff;
-        }
-
-    }
-    .line{
-        position: relative;
-        display: block;
-        height: 2px;
-        background: url('../../../assets/festival_icon.png');
-        z-index: 1;
-    }
-    .top-line{
-        width: 78px;
-        background-position: -1px -3px;
-    }
-    .btm-line{
-        background-position: 0 -11px;
-        width: 154px;
+    align-items: center;
+    justify-content: center;
+    img {
+      margin-left: 20px;
     }
 
+    &:nth-of-type(1),
+    &:nth-of-type(2),
+    &:nth-of-type(3) {
+      margin-top: 0;
+    }
+
+    p:nth-of-type(1) {
+      margin: 3px 0;
+      font-size: 18px;
+      color: #fff;
+    }
+    p:nth-of-type(2) {
+      margin-top: 3px;
+      color: #fff;
+    }
+  }
+  .line {
+    position: relative;
+    display: block;
+    height: 2px;
+    background: url(../../../assets/festival_icon.png);
+    z-index: 1;
+  }
+  .top-line {
+    width: 78px;
+    background-position: -1px -3px;
+  }
+  .btm-line {
+    background-position: 0 -11px;
+    width: 154px;
+  }
 }
-.modal-top-advert{
-    align-items: start;
-    padding: 0 30px;
-    .exhibition{
-        width: 300px;
-        height: 50px;
-    }
+.modal-top-advert {
+  align-items: start;
+  padding: 0 30px;
+  .exhibition {
+    width: 300px;
+    height: 50px;
+  }
 }
 </style>

seller/src/views/shop/modelList/forYour.vue

@@ -0,0 +1,445 @@
+<template>
+  <div class="model" v-if="data">
+    <div class="for-your">{{ data.options.title }}</div>
+
+    <div class="flex card">
+      <div class="left">
+        <img :src="data.options.data.image.src" alt="" />
+      </div>
+      <div class="right flex">
+        <!-- 商品区 -->
+        <div class="goods-list">
+          <div
+            class="goods-item"
+            :key="index"
+            v-for="(item, index) in data.options.data.list"
+          >
+            <div>
+              <div class="goods-name">{{ item.title }}</div>
+              <div class="goods-desc">{{ item.desc }}</div>
+            </div>
+            <img class="goods-img" :src="item.img" alt="" />
+          </div>
+        </div>
+        <!-- 热卖区 -->
+        <div class="hot-list">
+          <div class="hot-title">{{ data.options.data.hot.title }}</div>
+          <div
+            class="hot-item flex flex-a-c"
+            v-for="(item, index) in data.options.data.hot.list"
+            :key="index"
+          >
+            <img :src="item.img" alt="" />
+            <div class="hot-goods">
+              <div class="hot-goods-title">{{ item.title }}</div>
+              <div>
+                <div class="hot-price">￥{{ $filters.unitPrice(item.price) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel()">编辑 </el-button>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div>
+        <div class="modal-tab-bar">
+          <div>
+            主标题:
+            <el-input style="width: 200px" v-model="data.options.title" />
+          </div>
+          <el-divider content-position="left">左侧商品部分</el-divider>
+          <div class="flex">
+            <div>图片 :</div>
+            <div>
+              <img class="image" :src="data.options.data.image.src" alt="" />
+              <div>
+                <div>推荐尺寸：{{ data.options.data.image.size }}</div>
+                <div class="link-src">
+                  链接地址：
+                  <el-input
+                    style="width: 200px"
+                    v-model="data.options.data.image.url"
+                    disabled
+                  />
+                </div>
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="handleSelectImg('image')"
+                  >选择图片
+                </el-button>
+                <el-button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  @click="handleSelectLink('image')"
+                  >选择链接
+                </el-button>
+              </div>
+            </div>
+          </div>
+
+          <el-divider content-position="left">中间商品部分</el-divider>
+          <div class="flex column-list">
+            <div
+              v-for="(item, index) in data.options.data.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="column-goods-list">
+                  <div><el-input v-model="item.title" /></div>
+                  <div><el-input v-model="item.desc" /></div>
+                  <div><el-input disabled v-model="item.url" /></div>
+                  <div>{{ item.size }}</div>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    @click="handleSelectLink('list', index)"
+                    >选择链接
+                  </el-button>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    @click="handleSelectImg('list', index)"
+                    >选择图片
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-divider content-position="left">右侧商品部分</el-divider>
+          <div class="flex">
+            <div>右侧标题 :</div>
+            <el-input
+              style="width: 200px"
+              v-model="data.options.data.hot.title"
+             />
+          </div>
+          <div class="flex column-list">
+            <div
+              v-for="(item, index) in data.options.data.hot.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="column-goods-list">
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    @click="handleSelectGoods('hot', index)"
+                    >选择商品
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+
+    <!-- 选择图片 -->
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage.vue";
+
+export default {
+  name: "forYour",
+  data() {
+    return {
+      showModal: false,
+
+      picModelFlag: false,
+      selectedData: "", //选中的数据
+      goodsIndex: 0, // 商品索引
+      align: "",
+      defaultCallbackImageType: "",
+      current: "",
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  components: {
+    ossManage,
+  },
+  mounted() {
+   },
+  methods: {
+    handleSelectImg(type, index) {
+      this.defaultCallbackImageType = type;
+      this.goodsIndex = index;
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+
+    handleSelectGoods(val, index) {
+      this.$refs.liliDialog.open("goods");
+      this.$refs.liliDialog.singleGoods();
+      this.selectedData = val;
+      this.goodsIndex = index;
+    },
+    handleSelectLink(val, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.selectedData = val;
+
+      this.goodsIndex = index;
+    },
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      if (this.defaultCallbackImageType == "image") {
+        this.data.options.data.image.src = val.url;
+      } else {
+        this.data.options.data[this.defaultCallbackImageType][
+          this.goodsIndex
+        ].img = val.url;
+      }
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      this.data.options.data.hot.list[this.goodsIndex].img = val[0].thumbnail;
+      this.data.options.data.hot.list[this.goodsIndex].title = val[0].goodsName;
+      this.data.options.data.hot.list[this.goodsIndex].price = val[0].price;
+      this.data.options.data.hot.list[this.goodsIndex].url =
+        this.$filters.formatLinkType(val[0]);
+
+      console.log(val, this.selectedData, this.goodsIndex);
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      console.log(val,this.selectedData)
+      if (this.selectedData == "image") {
+        this.data.options.data.image.url =
+          this.$filters.formatLinkType(val);
+      } else {
+        console.log(this.data.options.data.list,this.goodsIndex)
+        this.data.options.data.list[
+          this.goodsIndex
+        ].url =  this.$filters.formatLinkType(val);
+      }
+    },
+    /*
+     * 点击不同模块进行编辑
+     * 判断也很简单，就是第一个第二个模块进行判断
+     *
+     * */
+    handleSelectModel() {
+      this.showModal = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-list {
+  display: flex;
+  width: 558px;
+  flex-wrap: wrap;
+}
+.goods-item {
+  width: 278px;
+  height: 277px;
+  text-align: center;
+  box-sizing: border-box;
+  border-right: 1.4px solid #e2e2e2;
+  &:nth-of-type(3) {
+    border-top: 1.4px solid #e2e2e2;
+  }
+  &:nth-of-type(4) {
+    border-top: 1.4px solid #e2e2e2;
+  }
+}
+.active {
+  color: #f31947;
+}
+
+.goods-name {
+  margin-top: 23px;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.goods-img {
+  width: 190px;
+  height: 156px;
+  border-radius: 10px;
+  margin-top: 19px;
+}
+.goods-desc {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  text-align: center;
+  margin-top: 11px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.for-your {
+  font-size: 35px;
+  font-weight: normal;
+  line-height: 42px;
+  text-align: center;
+  letter-spacing: 0px;
+  margin-bottom: 32px;
+
+  color: #333333;
+}
+.column-goods-list {
+  > div {
+    margin: 10px;
+  }
+}
+.link-src {
+  margin: 10px 0;
+}
+
+.card,
+.right-card {
+  opacity: 1;
+  background: #ffffff;
+
+  position: relative;
+
+  &:hover {
+    .setup-box {
+      display: block;
+    }
+  }
+}
+
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+
+.column-list {
+  flex-wrap: wrap;
+
+  > div {
+    width: 50%;
+  }
+}
+
+.image {
+  max-width: 100px;
+}
+
+.modal-tab-bar {
+  > .flex {
+    align-items: center;
+    margin: 10px 0;
+  }
+}
+
+.draggable {
+  margin: 10px 0;
+  > .flex {
+    align-items: center;
+  }
+}
+.left {
+  width: 346px;
+  height: 554px;
+  border-radius: 9.8px 0px 0px 9.8px;
+  > img {
+    max-width: 100%;
+    height: 100%;
+  }
+}
+.right {
+  width: 839px;
+  height: 554px;
+  border-radius: 0px 9.8px 9.8px 0px;
+}
+.hot-list {
+  width: 279px;
+}
+.hot-title {
+  margin-left: 25px;
+  line-height: 63px;
+  font-size: 17px;
+  font-weight: normal;
+
+  letter-spacing: 0px;
+  color: #333333;
+  height: 63px;
+}
+.hot-item {
+  box-sizing: border-box;
+  border-top: 1.4px solid #e2e2e2;
+  height: 122px;
+  padding-left: 14px;
+  align-items: center;
+  > img {
+    width: 76.3px;
+    height: 77.7px;
+  }
+}
+.hot-goods {
+  margin-left: 14px;
+}
+.hot-goods-title {
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.hot-price {
+  margin-top: 10.3px;
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 29px;
+  letter-spacing: 0px;
+
+  color: #f31947;
+}
+</style>

seller/src/views/shop/modelList/goodsAndType.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="goods-type-wrapper">
+    <div class="flex goods-type-line">
+      <div class="goods-type-title">{{ data.options.title }}</div>
+      <div class="flex goods-type-labels">
+        <div
+          @click="tabCurrentlyIndex = index"
+          :class="{ active: tabCurrentlyIndex === index }"
+          class="goods-type-item"
+          v-for="(item, index) in data.options.labels"
+          :key="index"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 商品部分 -->
+    <div class="goods-list flex">
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list.filter((subset) => {
+          return subset.___index == tabCurrentlyIndex;
+        })"
+        :key="index"
+      >
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-price">
+          {{ $filters.unitPrice(item.price, "￥") }}
+        </div>
+      </div>
+      <div class="setup-box">
+        <div>
+          <el-button
+            size="small"
+            @click.stop="handleSelectModel(data.options.list)"
+            >编辑</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-tab-bar">
+        <div class="tab-bar">
+          标题
+          <el-input style="width: 300px" v-model="data.options.title" />
+        </div>
+        <div class="tab-bar" v-if="data.options.labels[tabCurrentlyIndex]">
+          标签
+          <el-input
+            style="width: 300px"
+            v-model="data.options.labels[tabCurrentlyIndex].label"
+           />
+        </div>
+        <el-button @click="handleTabsAdd" size="small" class="mb_10">增加</el-button>
+        <el-tabs
+          type="card"
+          v-model="tabIndex"
+          @tab-click="handleClickTab"
+        >
+          <el-tab-pane
+            v-for="(tab,tabIndex) in data.options.labels"
+            :key="tabIndex"
+            :label="tab.label"
+            :name="tab.___index + ''"
+          >
+            <div class="flex flex-a-c">
+              <el-button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</el-button>
+              <el-button class="add-goods" @click="addCurrentGoods">
+                添加商品
+              </el-button>
+            </div>
+
+            <div
+              v-for="(item, index) in data.options.list.filter((subset) => {
+                return subset.___index == tabCurrentlyIndex;
+              })"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="flex column-goods-config">
+                  <div class="column-config">
+                    <div>
+                      标题：
+                      <el-input v-model="item.title" />
+                    </div>
+                    <div>
+                      描述：
+                      <el-input v-model="item.desc" />
+                    </div>
+                  </div>
+                  <el-button @click="delGoods(item)">删除</el-button>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "goods",
+
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      tabIndex:0,
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+      tabCurrentlyIndex: 0, // 选项卡索引
+    };
+  },
+  mounted(){
+    this.tabIndex = this.data.options.labels[0].___index
+  },
+  methods: {
+    /**
+     * 算出最大的index 然后索引叠加
+     */
+    handleTabsAdd() {
+      let findAllIndex = this.data.options.labels.map((item) => {
+        return item.___index;
+      });
+      let max = Math.max.apply(null, findAllIndex);
+
+      this.data.options.labels.push({
+        label: "标签" + (max + 1),
+        ___index: max + 1,
+      });
+    },
+    // 删除标签
+    handleContextMenuDelete(item,index) {
+      // 删除标签下关联的商品
+      this.data.options.list.forEach((lab,currently)=>{
+        if(lab.___index == item.___index){
+           this.data.options.list.splice(currently,1)
+        }
+      })
+      // 删除当前标签
+      this.data.options.labels.splice(index,1)
+    },
+    // 删除商品
+    delGoods(val) {
+      this.data.options.list.forEach((item, i) => {
+        if (
+          item.title == val.title &&
+          item.___index == this.tabCurrentlyIndex
+        ) {
+          this.data.options.list.splice(i, 1);
+        }
+      });
+    },
+    // 切换选项卡
+    handleClickTab(name) {
+      console.log(name)
+      this.tabCurrentlyIndex = name;
+    },
+    // 添加当前选项卡中的商品
+    addCurrentGoods() {
+
+      this.$refs.liliDialog.clearGoodsSelected();
+      this.$refs.liliDialog.open("goods");
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      console.log(item);
+      this.selected = item;
+      this.showModal = true;
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      if (val.length) {
+        val.forEach((item) => {
+          const pushGoodsDetail = {
+            img: item.thumbnail,
+            price: item.price,
+            title: item.goodsName,
+            desc: "",
+            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+            ___index: this.tabCurrentlyIndex,
+          };
+          this.data.options.list.push(pushGoodsDetail);
+        });
+      }
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected[this.current].url =
+        this.$filters.formatLinkType(val);
+      this.selected[this.current].type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+
+      console.log(this.selected[this.current]);
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-type-wrapper {
+  position: relative;
+}
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
+      display: block;
+    }
+  }
+}
+.column-goods-config {
+  flex: 2;
+  align-items: center;
+  justify-content: space-between;
+}
+.goods-list-item {
+  margin-bottom: 14.3px;
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #ffffff;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  &:hover {
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+  }
+}
+.goods-img {
+  text-align: center;
+  > img {
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name {
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 22px;
+  text-align: center;
+  letter-spacing: 0px;
+  width: 200px;
+  margin: 0 auto 12.4px auto;
+  color: #333333;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  text-align: center;
+  letter-spacing: 0px;
+  margin-bottom: 12.4px;
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price {
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #f31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title {
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active {
+  color: #f31947;
+}
+.goods-type-labels {
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+.goods-type-item {
+  margin-left: 28px;
+}
+</style>

seller/src/views/shop/modelList/mixModel.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="mix-model">
+    <!-- 左侧 -->
+    <div class="left-card">
+      <left :data="data" />
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel('left')"
+            >编辑
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧 -->
+    <div class="right-card">
+      <right :data="data" />
+      <div class="setup-box">
+        <div>
+          <el-button size="small" @click.stop="handleSelectModel('right')"
+            >编辑
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div v-if="current">
+        <div class="modal-tab-bar">
+          <div>
+            当前模块 :
+            <el-button-group>
+              <el-button :type="current.model == 'goods' ? 'primary' : 'default'"
+                >商品</el-button
+              >
+              <el-button :type="current.model == 'brand' ? 'primary' : 'default'"
+                >品牌</el-button
+              >
+            </el-button-group>
+          </div>
+
+          <div class="flex">
+            <div>图片 :</div>
+            <div>
+              <img class="image" :src="current.data.image.src" alt="" />
+              <div>
+                <div>推荐尺寸：{{ current.data.image.size }}</div>
+                <div class="link-src">
+                  链接地址：
+                  <el-input
+                    style="width: 200px"
+                    v-model="current.data.image.url"
+                    disabled
+                  />
+                </div>
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="handleSelectImg('default')"
+                  >选择图片
+                </el-button>
+                <el-button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  @click="handleSelectLink('image')"
+                  >选择链接
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <div class="flex" v-if="current.model == 'goods'">
+            <div>标签 :</div>
+            <el-input
+              style="width: 200px"
+              type="text"
+              v-model="current.data.badge.label"
+            />
+            <el-input
+              style="width: 100px; margin-left: 10px"
+              disabled
+              type="text"
+              v-model="current.data.badge.url"
+            />
+            <el-button
+              size="small"
+              class="ml_10"
+              type="primary"
+              @click="handleSelectLink('badge')"
+              >选择链接
+            </el-button>
+          </div>
+          <div class="flex column-list">
+            <div
+              v-for="(item, index) in current.data.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <el-button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  v-if="current.model == 'goods'"
+                  @click="handleSelectGoods('list', index)"
+                  >选择商品
+                </el-button>
+                <div>
+                  <div  v-if="current.model == 'brand'" style="margin-bottom: 10px">
+                    <el-input disabled v-model="item.url" />
+                  </div>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    v-if="current.model == 'brand'"
+                    @click="handleSelectLink('list', index)"
+                  >
+                    选择链接
+                  </el-button>
+                  <el-button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    v-if="current.model == 'brand'"
+                    @click="handleSelectImg('list', index)"
+                    >选择图片
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+
+    <!-- 选择图片 -->
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import left from "./mixs/mix-goods";
+import right from "./mixs/mix-brand";
+import ossManage from "@/views/sys/oss-manage/ossManage.vue";
+
+export default {
+  name: "mixModel",
+  data() {
+    return {
+      showModal: false,
+      current: "", //当前选择的模块
+      picModelFlag: false,
+      selectedData: "", //选中的数据
+      goodsIndex: 0, // 商品索引
+      align: "",
+      defaultCallbackImageType: "",
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  components: {
+    left,
+    right,
+    ossManage,
+  },
+  mounted() {},
+  methods: {
+    handleSelectImg(type, index) {
+      this.defaultCallbackImageType = type;
+      this.goodsIndex = index;
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+
+    handleSelectGoods(val, index) {
+      this.$refs.liliDialog.open("goods");
+      this.$refs.liliDialog.singleGoods();
+      this.selectedData = val;
+      this.goodsIndex = index;
+    },
+    handleSelectLink(val, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.selectedData = val;
+      this.goodsIndex = index;
+    },
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      if (this.defaultCallbackImageType == "default") {
+        console.log(this.current.data.image);
+        this.current.data.image.src = val.url;
+      } else {
+        console.log(this.goodsIndex, this.data.options[this.align].data.list);
+        this.data.options[this.align].data.list[this.goodsIndex].img = val.url;
+
+        // this.data.options[this.align].data[this.selectedData][this.goodsIndex].url = val.img
+      }
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val);
+      this.$nextTick(() => {
+        this.data.options[this.align].data.list[this.goodsIndex].img =
+          val[0].thumbnail;
+        this.data.options[this.align].data.list[this.goodsIndex].title =
+          val[0].goodsName;
+        this.data.options[this.align].data.list[this.goodsIndex].price =
+          val[0].price;
+        this.data.options[this.align].data.list[this.goodsIndex].url =
+          val[0].url;
+      });
+      console.log(this.data.options[this.align].data.list[this.goodsIndex]);
+      this.$forceUpdate();
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      if (this.selectedData != "list") {
+        this.data.options[this.align].data[this.selectedData].url = this.$filters.formatLinkType(val);
+        console.log(this.data.options[this.align].data[this.selectedData])
+      }
+      if (this.selectedData == "list") {
+         this.data.options[this.align].data[this.selectedData][this.goodsIndex]
+        .url = this.$filters.formatLinkType(val);
+      }
+    },
+    /*
+     * 点击不同模块进行编辑
+     * 判断也很简单，就是第一个第二个模块进行判断
+     *
+     * */
+    handleSelectModel(align) {
+      this.align = align;
+      this.current = this.data.options[align];
+      console.log(this.data.options[align]);
+      this.showModal = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+
+.link-src {
+  margin: 10px 0;
+}
+
+.mix-model {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-card,
+.right-card {
+  width: 584px;
+  height: 344px;
+  border-radius: 10px;
+  opacity: 1;
+  background: #ffffff;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  position: relative;
+
+  &:hover {
+    .setup-box {
+      display: block;
+    }
+  }
+}
+
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+
+.column-list {
+  flex-wrap: wrap;
+
+  > div {
+    width: 50%;
+  }
+}
+
+.image {
+  max-width: 100px;
+}
+
+.modal-tab-bar {
+  > .flex {
+    align-items: center;
+    margin: 10px 0;
+  }
+}
+
+.draggable {
+  > .flex {
+    align-items: center;
+  }
+}
+</style>

seller/src/views/shop/modelList/mixs/mix-brand.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="flex" v-if="data.options.right.model == 'brand'">
+    <div class="left-side" >
+      <img :src="data.options.right.data.image.src" alt="">
+    </div>
+    <div>
+      <div class="badge-box flex">
+        <div class="round">
+          <el-icon><ArrowRight /></el-icon>
+        </div>
+
+
+      </div>
+      <div class="flex goods-list">
+        <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
+          <div class="goods-thumbnail">
+            <img :src="item.img" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ArrowRight } from "@element-plus/icons-vue";
+export default {
+  name: "mix-goods",
+  components: { ArrowRight },
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+  margin-top: 33px;
+  justify-content:right;
+  >.round{
+    width: 17.5px;
+    height: 17.5px;
+    opacity: 1;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 17.5px;
+    border: 0.7px solid #333333;
+    margin-right: 17.5px;
+  }
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width:50%;
+  height: 85px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+
+
+}
+.left-side {
+  >img{
+    width: 254px;
+    height: 344px;
+    border-radius: 9.8px 0px 0px 9.8px;
+    opacity: 1;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>

seller/src/views/shop/modelList/mixs/mix-goods.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="flex" v-if="data.options.left.model == 'goods'">
+      <div class="left-side" >
+        <img :src="data.options.left.data.image.src" alt="">
+      </div>
+      <div>
+          <div class="badge-box flex">
+            <div class="badge">
+              {{data.options.left.data.badge.label}}
+            </div>
+          </div>
+          <div class="flex goods-list">
+            <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
+              <div class="goods-thumbnail">
+                <img :src="item.img" alt="">
+              </div>
+              <div class="goods-detail">
+                <div class="goods-detail-title">{{item.title}}</div>
+                <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "mix-goods",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+
+  justify-content:right;
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  width: 173.6px;
+  height: 119px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+  &:hover{
+    box-shadow: 0px 1px 6px 0px #E5E5E5;
+  }
+
+}
+.left-side {
+  >img{
+    border-radius: 10px 0px 0px 10px;
+    display: block;
+    width: 196.7px;
+    height: 343.7px;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>

seller/src/views/shop/modelList/newGoodsSort.vue

@@ -1,340 +1,447 @@
 <template>
-    <div class="new-goods">
-
-        <div class="left">
-            <div class="top-header setup-content" :style="{background:options.left.bgColor}">
-                <span>{{options.left.title}}</span>
-                <span>{{options.left.secondTitle}} &gt;</span>
-                <div class="setup-box">
-                    <div><Button size="small" @click.stop="handleSelectModel(options.left,true)">编辑</Button></div>
-                </div>
-            </div>
-            <div class="content">
-                <div class="con-item setup-content" v-for="(item, index) in options.left.list" :key="index">
-                    <div>
-                        <p>{{item.name}}</p>
-                        <p class="describe">{{item.describe}}</p>
-                    </div>
-                    <img :src="item.img" alt="">
-                    <div class="setup-box">
-                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="middle">
-            <div class="top-header setup-content" :style="{background:options.middle.bgColor}">
-                <span>{{options.middle.title}}</span>
-                <span>{{options.middle.secondTitle}} &gt;</span>
-                <div class="setup-box">
-                    <div><Button size="small" @click.stop="handleSelectModel(options.middle,true)">编辑</Button></div>
-                </div>
-            </div>
-            <div class="content">
-                <div class="con-item setup-content" v-for="(item, index) in options.middle.list" :key="index">
-                    <div>
-                        <p>{{item.name}}</p>
-                        <p class="describe">{{item.describe}}</p>
-                    </div>
-                    <img :src="item.img" alt="">
-                    <div class="setup-box">
-                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="right">
-            <div class="top-header setup-content" :style="{background:options.right.bgColor}">
-                <span>{{options.right.title}}</span>
-                <span>{{options.right.secondTitle}} &gt;</span>
-                <div class="setup-box">
-                    <div><Button size="small" @click.stop="handleSelectModel(options.right,true)">编辑</Button></div>
-                </div>
-            </div>
-            <div class="content">
-                <div class="setup-content" v-for="(item, index) in options.right.list" :key="index">
-                    <img :src="item.img" alt="">
-                    <p>{{item.name}}</p>
-                    <p>{{item.price | unitPrice('￥')}}</p>
-                    <div class="jiaobiao" :class="'jiaobiao'+(index+1)">{{index+1}}</div>
-                    <div class="setup-box">
-                        <div><Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- 装修内容 -->
-        <Modal
-            v-model="showModal"
-            title="装修"
-            draggable
-            width="800"
-            :z-index="100"
-            :mask-closable="false"
-
-
+  <div class="new-goods">
+    <div class="left">
+      <div
+        class="top-header setup-content"
+        :style="{ background: options.left.bgColor }"
+      >
+        <span>{{ options.left.title }}</span>
+        <span>{{ options.left.secondTitle }} &gt;</span>
+        <div class="setup-box">
+          <div>
+            <el-button
+              size="small"
+              @click.stop="handleSelectModel(options.left, true)"
+              >编辑</el-button
             >
-            <div class="modal-top-advert">
-                <div>
-                    <img class="show-image" width="160" height="160" v-if="selected.size && selected.size.indexOf('160*160')>=0" :src="selected.img" alt />
-                    <img class="show-image" width="80" height="80" v-if="selected.size && selected.size.indexOf('90*90')>=0" :src="selected.img" alt />
-                </div>
-                <div>
-                    <span>图片主标题：</span><Input v-model="selected.name" />
-                </div>
-                <div>
-                    <span>图片描述：</span><Input v-model="selected.describe" />
-                </div>
-                <div class="tips">
-                    建议尺寸：<span>{{ selected.size }}</span>
-                </div>
-                <div>
-                    图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
-                </div>
-                <div>
-                    <Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
-
-                    <Button size="small" type="primary" @click="handleSelectGoods('')">选择商品</Button>
-                </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div
+          class="con-item setup-content"
+          v-for="(item, index) in options.left.list"
+          :key="index"
+        >
+          <div>
+            <p>{{ item.name }}</p>
+            <p class="describe">{{ item.describe }}</p>
+          </div>
+          <img :src="item.img" alt="" />
+          <div class="setup-box">
+            <div>
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
+              >
             </div>
-        </Modal>
-        <!-- 装修标题 -->
-        <Modal
-            v-model="showModal1"
-            title="装修"
-            draggable
-            width="800"
-            :z-index="100"
-            :mask-closable="false"
-
-
-            >
-            <div class="modal-top-advert">
-                <div>
-                    <span>主标题：</span><Input v-model="selected.title" />
-                </div>
-                <div>
-                    <span>副标题：</span><Input v-model="selected.secondTitle" />
-                </div>
-                <div>
-                    <span>副标题链接：{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink">选择链接</Button>
-                </div>
-                <div>
-                    <span>背景色：</span><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
-                </div>
-            </div>
-        </Modal>
-        <!-- 选择商品。链接 -->
-        <liliDialog
-            ref="liliDialog"
-            @selectedLink="selectedLink"
-            @selectedGoodsData="selectedGoodsData"
-        ></liliDialog>
-        <!-- 选择图片 -->
-        <Modal width="1200px" v-model="picModelFlag" footer-hide>
-            <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-        </Modal>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <div class="middle">
+      <div
+        class="top-header setup-content"
+        :style="{ background: options.middle.bgColor }"
+      >
+        <span>{{ options.middle.title }}</span>
+        <span>{{ options.middle.secondTitle }} &gt;</span>
+        <div class="setup-box">
+          <div>
+            <el-button
+              size="small"
+              @click.stop="handleSelectModel(options.middle, true)"
+              >编辑</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div
+          class="con-item setup-content"
+          v-for="(item, index) in options.middle.list"
+          :key="index"
+        >
+          <div>
+            <p>{{ item.name }}</p>
+            <p class="describe">{{ item.describe }}</p>
+          </div>
+          <img :src="item.img" alt="" />
+          <div class="setup-box">
+            <div>
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="right">
+      <div
+        class="top-header setup-content"
+        :style="{ background: options.right.bgColor }"
+      >
+        <span>{{ options.right.title }}</span>
+        <span>{{ options.right.secondTitle }} &gt;</span>
+        <div class="setup-box">
+          <div>
+            <el-button
+              size="small"
+              @click.stop="handleSelectModel(options.right, true)"
+              >编辑</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div
+          class="setup-content"
+          v-for="(item, index) in options.right.list"
+          :key="index"
+        >
+          <img :src="item.img" alt="" />
+          <p>{{ item.name }}</p>
+          <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
+          <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
+            {{ index + 1 }}
+          </div>
+          <div class="setup-box">
+            <div>
+              <el-button size="small" @click.stop="handleSelectGoods(item)"
+                >编辑</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 装修内容 -->
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-top-advert">
+        <div>
+          <img
+            class="show-image"
+            width="160"
+            height="160"
+            v-if="selected.size && selected.size.indexOf('160*160') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <img
+            class="show-image"
+            width="80"
+            height="80"
+            v-if="selected.size && selected.size.indexOf('90*90') >= 0"
+            :src="selected.img"
+            alt
+          />
+        </div>
+        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
+        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
+        <div class="tips">
+          建议尺寸：<span>{{ selected.size }}</span>
+        </div>
+        <div>
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <el-button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</el-button
+          >
+        </div>
+        <div>
+          <el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
+          >&nbsp;
+
+          <el-button size="small" type="primary" @click="handleSelectGoods('')"
+            >选择商品</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 装修标题 -->
+    <el-dialog
+      v-model="showModal1"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-top-advert">
+        <div><span>主标题：</span><el-input v-model="selected.title" /></div>
+        <div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
+        <div>
+          <span
+            >副标题链接：<el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://" /></span
+          ><el-button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectLink"
+            >选择链接</el-button
+          >
+        </div>
+        <div>
+          <span>背景色：</span
+          ><el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
+  </div>
 </template>
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
-    props:{
-        data:{
-            type:Object,
-            default:null
-        }
+  props: {
+    data: {
+      type: Object,
+      default: null,
     },
-    components:{
-      ossManage
+  },
+  components: {
+    ossManage,
+  },
+  data() {
+    return {
+      options: this.data.options, // 当前数据
+      showModal: false, // modal显隐
+      showModal1: false, // modal显隐
+      selected: {}, // 已选数据
+      picModelFlag: false, // 选择图片modal
+    };
+  },
+  methods: {
+    // 装修modal
+    handleSelectModel(item, type) {
+      this.selected = item;
+      console.warn(item);
+      if (type) {
+        this.showModal1 = true;
+      } else {
+        this.showModal = true;
+      }
     },
-    data() {
-        return {
-            options:this.data.options, // 当前数据
-            showModal:false, // modal显隐
-            showModal1:false, // modal显隐
-            selected: {}, // 已选数据
-            picModelFlag: false // 选择图片modal
-        }
+    handleSelectLink() {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
     },
-    methods:{
-        // 装修modal
-        handleSelectModel (item, type) {
-            this.selected = item;
-            console.warn(item);
-            if(type){
-                this.showModal1 = true
-            } else {
-                this.showModal = true
-            }
-
-        },
-        handleSelectLink() { // 调起选择链接弹窗
-            this.$refs.liliDialog.open('link')
-        },
-        handleSelectGoods(item) { // 调起选择商品
-            console.warn(item);
-            if (item) this.selected = item;
-            this.$refs.liliDialog.open('goods', 'single')
-            setTimeout(() => {
-                this.$refs.liliDialog.goodsData = [this.selected]
-            }, 500);
-        },
-        // 选择链接回调
-        selectedLink (val) {
-            this.selected.url = this.$options.filters.formatLinkType(val);
-        },
-        // 选择商品回调
-        selectedGoodsData (val) {
-            console.log(val);
-            let goods = val[0]
-            console.log(this.selected);
-            this.selected.img = goods.thumbnail
-            this.selected.price = goods.price
-            this.selected.name = goods.goodsName
-            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
-        },
-        handleSelectImg(){ // 选择图片
-            this.$refs.ossManage.selectImage = true;
-            this.picModelFlag = true;
-        },
-        // 选择图片回显
-        callbackSelected (val) {
-            this.picModelFlag = false;
-            this.selected.img = val.url;
-        }
-    }
-}
+    handleSelectGoods(item) {
+      // 调起选择商品
+      console.warn(item);
+      if (item) this.selected = item;
+      this.$refs.liliDialog.open("goods", "single");
+      setTimeout(() => {
+        this.$refs.liliDialog.goodsData = [this.selected];
+      }, 500);
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      let goods = val[0];
+      console.log(this.selected);
+      this.selected.img = goods.thumbnail;
+      this.selected.price = goods.price;
+      this.selected.name = goods.goodsName;
+      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+    },
+    handleSelectImg() {
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    // 选择图片回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected.img = val.url;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import './setup-box.scss';
-.new-goods{
+@import "./setup-box.scss";
+.new-goods {
+  display: flex;
+  justify-content: space-between;
+  > div {
+    width: 393px;
+    height: 440px;
+  }
+
+  .left > .content {
+    > div:nth-child(1) {
+      height: 240px;
+      flex-direction: column;
+      border: 1px solid #eee;
+      border-top: none;
+      border-left: none;
+      justify-content: space-between;
+      img {
+        width: 160px;
+        height: 160px;
+      }
+      .describe {
+        margin-top: 10px;
+      }
+    }
+    > div:nth-child(2) {
+      border-right: 1px solid #eee;
+    }
+    > div:nth-child(3),
+    > div:nth-child(4) {
+      border-bottom: 1px solid #eee;
+    }
+  }
+
+  .middle > .content {
+    > div {
+      border-style: solid;
+      border-color: #eee;
+      border-width: 0;
+      border-bottom-width: 1px;
+    }
+    > div:nth-child(1),
+    > div:nth-child(2),
+    > div:nth-child(3) {
+      border-right-width: 1px;
+    }
+    > div:nth-child(6),
+    > div:nth-child(3) {
+      border-bottom-width: 0;
+    }
+  }
+
+  .right > .content {
     display: flex;
-    justify-content: space-between;
-    >div{
-        width: 393px;
-        height: 440px;
-    }
-
-    .left>.content{
-        >div:nth-child(1){
-            height: 240px;
-            flex-direction: column;
-            border: 1px solid #eee;
-            border-top: none;
-            border-left: none;
-            justify-content: space-between;
-            img{
-                width: 160px;
-                height: 160px;
-            }
-            .describe{margin-top: 10px;}
-        }
-        >div:nth-child(2){border-right: 1px solid #eee;}
-        >div:nth-child(3),>div:nth-child(4){border-bottom: 1px solid #eee;}
-    }
-
-    .middle>.content{
-        >div{
-            border-style:solid;
-            border-color: #eee;
-            border-width: 0;
-            border-bottom-width: 1px;
-        }
-        >div:nth-child(1),>div:nth-child(2),>div:nth-child(3){border-right-width: 1px;}
-        >div:nth-child(6), >div:nth-child(3){border-bottom-width: 0;}
-    }
-
-    .right>.content{
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        font-size: 12px;
-        >div{
-            position: relative;
-            width: 120px;
-            padding: 5px 10px 0 10px;
-            img{
-                width: 100px;
-                height: 100px;
-            }
-            border-bottom: 1px solid #eee;
-            :nth-child(2){
-                height: 38px;
-                overflow: hidden;
-            }
-            :nth-child(3){
-                color: $theme_color;
-                margin-top: 5px;
-            }
-            .jiaobiao{
-                position: absolute;
-                width: 23px;
-                height: 23px;
-                top: 10px;
-                right: 16px;
-                background: url('../../../assets/festival_icon.png');
-                color: #FFF;
-                text-align: center;
-            }
-            .jiaobiao1,.jiaobiao4{
-                background-position: -2px -30px;
-            }
-            .jiaobiao2,.jiaobiao5{
-                background-position: -31px -30px;
-            }
-            .jiaobiao3,.jiaobiao6{
-                background-position: -60px -30px;
-            }
-        }
-        >div:nth-child(4),>div:nth-child(5),>div:nth-child(6){border: none;}
-    }
-
-    .top-header{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 50px;
-        padding: 0 10px;
-        background: #c43d7e;
+    flex-wrap: wrap;
+    flex-direction: row;
+    font-size: 12px;
+    > div {
+      position: relative;
+      width: 120px;
+      padding: 5px 10px 0 10px;
+      img {
+        width: 100px;
+        height: 100px;
+      }
+      border-bottom: 1px solid #eee;
+      :nth-child(2) {
+        height: 38px;
+        overflow: hidden;
+      }
+      :nth-child(3) {
+        color: $theme_color;
+        margin-top: 5px;
+      }
+      .jiaobiao {
+        position: absolute;
+        width: 23px;
+        height: 23px;
+        top: 10px;
+        right: 16px;
+        background: url("../../../assets/festival_icon.png");
         color: #fff;
-        span:nth-child(1){
-            font-size: 20px;
-        }
-        span:nth-child(2){
-            font-size: 12px;
-        }
+        text-align: center;
+      }
+      .jiaobiao1,
+      .jiaobiao4 {
+        background-position: -2px -30px;
+      }
+      .jiaobiao2,
+      .jiaobiao5 {
+        background-position: -31px -30px;
+      }
+      .jiaobiao3,
+      .jiaobiao6 {
+        background-position: -60px -30px;
+      }
     }
-    .content{
-        padding: 10px 12px 0;
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        height: 370px;
+    > div:nth-child(4),
+    > div:nth-child(5),
+    > div:nth-child(6) {
+      border: none;
     }
-    .con-item{
-        width: 185px;
-        height: 120px;
-        display: flex;
-        padding-left: 10px;
-        padding-top: 10px;
-        img{
-            width: 90px;
-            height: 90px;
-            margin-top: 10px;
-        }
+  }
+
+  .top-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 0 10px;
+    background: #c43d7e;
+    color: #fff;
+    span:nth-child(1) {
+      font-size: 20px;
     }
-    .describe{
-        color: #999;
-        font-size: 12px;
-        margin-top: 15px;
+    span:nth-child(2) {
+      font-size: 12px;
     }
+  }
+  .content {
+    padding: 10px 12px 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 370px;
+  }
+  .con-item {
+    width: 185px;
+    height: 120px;
+    display: flex;
+    padding-left: 10px;
+    padding-top: 10px;
+    img {
+      width: 90px;
+      height: 90px;
+      margin-top: 10px;
+    }
+  }
+  .describe {
+    color: #999;
+    font-size: 12px;
+    margin-top: 15px;
+  }
 }
-.modal-top-advert{
-    align-items: start;
-    padding: 0 30px;
+.modal-top-advert {
+  align-items: start;
+  padding: 0 30px;
 }
 </style>

seller/src/views/shop/modelList/notEnough.vue

@@ -7,7 +7,7 @@
             </li>
             <div class="setup-box" style="width:100px;left:1100px;">
                 <div>
-                    <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+                    <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
                 </div>
             </div>
         </ul>
@@ -16,26 +16,26 @@
                 <img :src="item.img" width="210" height="210" :alt="item.name">
                 <p>{{item.name}}</p>
                 <p>
-                    <span>{{item.price | unitPrice('￥')}}</span>
-                    <!-- <span>{{item.price | unitPrice('￥')}}</span> -->
+                    <span>{{ $filters.unitPrice(item.price, '￥') }}</span>
+                    <!-- <span>{{ $filters.unitPrice(item.price, '￥') }}</span> -->
                 </p>
                 <div class="setup-box">
                     <div>
-                        <Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button>
+                        <el-button size="small" @click.stop="handleSelectGoods(item)">编辑</el-button>
                     </div>
                 </div>
             </div>
         </div>
-        <Modal
+        <el-dialog
             v-model="showModal"
             title="装修"
-            draggable
+            
             width="800"
-            :z-index="100"
-            :mask-closable="false"
-            >
+            
+            :close-on-click-modal="false"
+             append-to-body destroy-on-close>
             <div class="modal-tab-bar">
-                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
+                <el-button type="primary" size='small' @click="handleAddNav">添加分类</el-button>
                 <table cellspacing="0">
                     <thead>
                         <tr>
@@ -46,16 +46,16 @@
                     </thead>
                     <tbody>
                         <tr v-for="(item, index) in conData.options.navList" :key="index">
-                            <td><Input v-model="item.title" /></td>
-                            <td><Input v-model="item.desc" /></td>
+                            <td><el-input v-model="item.title" /></td>
+                            <td><el-input v-model="item.desc" /></td>
                             <td v-if="index!=0">
-                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
+                                <el-button type="danger" size="small" @click="handleDelNav(index)">删除</el-button>
                             </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
-        </Modal>
+        </el-dialog>
         <!-- 选择商品。链接 -->
         <liliDialog
             ref="liliDialog"
@@ -100,10 +100,10 @@ export default {
         },
         handleSelectGoods(item) { // 调起选择商品弹窗
             if(item) this.selected = item;
-            this.$refs.liliDialog.flag = true;
-            this.$refs.liliDialog.goodsFlag = true;
-            this.$refs.liliDialog.singleGoods();
-
+            this.$refs.liliDialog.open('goods', 'single')
+            setTimeout(() => {
+                this.$refs.liliDialog.goodsData = [this.selected]
+            }, 500);
         },
         // 选择商品回调
         selectedGoodsData(val){
@@ -175,16 +175,16 @@ export default {
             cursor: pointer;
         }
         border-right: 1px solid #eee;
-
+        
     }
     li:last-of-type{
         border: none;
     }
-
+   
     .curr{
         p:nth-child(1){
             background-color: $theme_color;
-
+            
             color: #fff;
         }
         p:nth-child(2){
@@ -223,4 +223,4 @@ export default {
         }
     }
 }
-</style>
+</style>

seller/src/views/shop/modelList/oneRowThreeColumns.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="line flex flex-j-sb">
+    <div class="column" v-for="(item,index) in data.options.list" :key="index">
+      <div v-if="!item.img" class="placeholder">占位符</div>
+      <img v-else :src="item.img" class="three-column-img">
+    </div>
+    <div class="setup-box">
+      <div>
+        <el-button
+          size="small"
+          @click.stop="handleSelectModel(data.options.list)"
+        >编辑</el-button
+        >
+      </div>
+    </div>
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-tab-bar">
+        <div v-for="(item,index) in data.options.list" :key="index">
+          <img :src="item.img" class="three-column-img">
+          <div>推荐尺寸：{{item.size}}</div>
+          <el-button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectImg(index)"
+          >选择图片</el-button
+          >
+          <el-button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectLink(index)"
+          >选择链接</el-button
+          >
+        </div>
+
+      </div>
+    </el-dialog>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "oneRowThreeColumns",
+  components:{ossManage},
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  data () {
+    return {
+      showModal:false,
+      selected: {}, // 已选数据
+      picModelFlag:false,
+      current:0,
+    };
+  },
+  methods: {
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected[this.current].img = val.url;
+      console.log(this.selected)
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      this.selected = item;
+      this.showModal = true;
+
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val);
+      let goods = val[0];
+      this.selected.img = goods.thumbnail;
+      this.selected.price = goods.price;
+      this.selected.name = goods.goodsName;
+      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+    handleSelectImg(index){
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+      this.current = index;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.three-column-img{
+  width:385px;
+  height: 165px
+}
+.line:hover{
+  >.setup-box{
+    display: block;
+  }
+}
+.placeholder{
+  background: #666;
+  width: 100%;
+  height: 100%;
+}
+.line{
+  position: relative;
+  justify-content: space-between;
+}
+.column{
+  width: 385px;
+  height: 165px;
+
+  >img{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

seller/src/views/shop/modelList/onlyGoodsModel.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="goods-type-wrapper">
+    <!-- 商品部分 -->
+    <div class="goods-list flex">
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list"
+        :key="index"
+      >
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+      </div>
+      <div class="setup-box">
+        <div>
+          <el-button
+            size="small"
+            @click.stop="handleSelectModel(data.options.list)"
+          >编辑</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="showModal"
+      title="装修"
+      
+      width="800"
+      
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
+      <div class="modal-tab-bar">
+            <div class="flex flex-a-c">
+              <el-button class="add-goods" @click="addCurrentGoods">
+                添加商品
+              </el-button>
+            </div>
+
+            <div
+              v-for="(item, index) in data.options.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="flex column-goods-config">
+                  <div class="column-config">
+                    <div>
+                      标题：
+                      <el-input v-model="item.title" />
+                    </div>
+                    <div>
+                      描述：
+                      <el-input v-model="item.desc" />
+                    </div>
+                  </div>
+                  <el-button @click="delGoods(item,index)">删除</el-button>
+                </div>
+              </div>
+            </div>
+
+      </div>
+    </el-dialog>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "onlyGoodsList",
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      flag:false,
+      tabIndex:0,
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+    };
+  },
+  mounted(){
+
+  },
+  methods: {
+    // 删除商品
+    delGoods(val,i) {
+      this.data.options.list.splice(i, 1);
+    },
+    // 添加当前选项卡中的商品
+    addCurrentGoods() {
+      this.$refs.liliDialog.open("goods");
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      console.log(item);
+      this.selected = item;
+      this.showModal = true;
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      if (val.length) {
+        val.forEach((item) => {
+          const pushGoodsDetail = {
+            img: item.thumbnail,
+            price: item.price,
+            title: item.goodsName,
+            desc: "",
+            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+          };
+          this.data.options.list.push(pushGoodsDetail);
+        });
+      }
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected[this.current].url =
+        this.$filters.formatLinkType(val);
+      this.selected[this.current].type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+
+      console.log(this.selected[this.current]);
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-type-wrapper {
+  position: relative;
+}
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
+      display: block;
+    }
+  }
+}
+.column-goods-config {
+  flex: 2;
+  align-items: center;
+  justify-content: space-between;
+}
+.goods-list-item {
+  padding-top: 34.8px;
+  margin-bottom: 14.3px;
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #ffffff;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  &:hover {
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+  }
+}
+.goods-img {
+  text-align: center;
+  > img {
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name {
+  margin-bottom: 11.9px;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #333333;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc {
+  margin-bottom: 30px;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 19px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price {
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #f31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title {
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active {
+  color: #f31947;
+}
+.goods-type-labels {
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+.goods-type-item {
+  margin-left: 28px;
+}
+</style>

seller/src/views/shop/modelList/recommend.vue

@@ -9,8 +9,8 @@
         <span>{{ msgLeft.secondTitle }}&gt;</span>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel(msgLeft, true)"
-              >编辑</Button
+            <el-button size="small" @click.stop="handleSelectModel(msgLeft, true)"
+              >编辑</el-button
             >
           </div>
         </div>
@@ -20,18 +20,18 @@
           <img :src="msgLeft.list[0].img" width="160" height="160" alt="" />
           <div class="margin-left">{{ msgLeft.list[0].name }}</div>
           <div class="margin-left">{{ msgLeft.list[0].describe }}</div>
-          <Button
+          <el-button
             size="small"
             :style="{ background: msgLeft.bgColor }"
             class="fz_12 view-btn"
-            >点击查看</Button
+            >点击查看</el-button
           >
           <div class="setup-box">
             <div>
-              <Button
+              <el-button
                 size="small"
                 @click.stop="handleSelectModel(msgLeft.list[0])"
-                >编辑</Button
+                >编辑</el-button
               >
             </div>
           </div>
@@ -46,8 +46,8 @@
               </div>
               <div class="setup-box">
                 <div>
-                  <Button size="small" @click.stop="handleSelectModel(item)"
-                    >编辑</Button
+                  <el-button size="small" @click.stop="handleSelectModel(item)"
+                    >编辑</el-button
                   >
                 </div>
               </div>
@@ -65,8 +65,8 @@
         <span>{{ msgRight.secondTitle }}&gt;</span>
         <div class="setup-box">
           <div>
-            <Button size="small" @click.stop="handleSelectModel(msgRight, true)"
-              >编辑</Button
+            <el-button size="small" @click.stop="handleSelectModel(msgRight, true)"
+              >编辑</el-button
             >
           </div>
         </div>
@@ -93,24 +93,22 @@
           </div>
           <div class="setup-box">
             <div>
-              <Button size="small" @click.stop="handleSelectModel(item)"
-                >编辑</Button
+              <el-button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</el-button
               >
             </div>
           </div>
         </div>
       </div>
     </div>
-    <Modal
+    <el-dialog
       v-model="showModal"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
       
-      
-    >
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-top-advert">
         <div>
           <img
@@ -138,60 +136,68 @@
             alt
           />
         </div>
-        <div><span>图片主标题：</span><Input v-model="selected.name" /></div>
-        <div><span>图片描述：</span><Input v-model="selected.describe" /></div>
+        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
+        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
         <div class="tips">
           建议尺寸：<span>{{ selected.size }}</span>
         </div>
         <div>
-          图片链接：<span>{{ selected.url }}</span>
-          <Button
+          图片链接：<el-input
+            class="outsideUrl"
+            v-model="selected.url"
+            :disabled="!!selected.type && selected.type !== 'link'"
+            placeholder="https://"
+          />
+          <el-button
             size="small"
             class="ml_10"
             type="primary"
             @click="handleSelectLink"
-            >选择链接</Button
+            >选择链接</el-button
           >
         </div>
         <div>
-          <Button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</Button
+          <el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
           >&nbsp;
-          <Button size="small" type="primary" @click="handleSelectGoods"
-            >选择商品</Button
+          <el-button size="small" type="primary" @click="handleSelectGoods"
+            >选择商品</el-button
           >
         </div>
       </div>
-    </Modal>
-    <Modal
+    </el-dialog>
+    <el-dialog
       v-model="showModal1"
       title="装修"
-      draggable
+      
       width="800"
-      :z-index="100"
-      :mask-closable="false"
       
-      
-    >
+      :close-on-click-modal="false"
+     append-to-body destroy-on-close>
       <div class="modal-top-advert">
-        <div><span>主标题：</span><Input v-model="selected.title" /></div>
-        <div><span>副标题：</span><Input v-model="selected.secondTitle" /></div>
+        <div><span>主标题：</span><el-input v-model="selected.title" /></div>
+        <div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
         <div>
-          <span>副标题链接：{{ selected.url }}</span
-          ><Button
+          <span
+            >副标题链接：<el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://" /></span
+          ><el-button
             size="small"
             class="ml_10"
             type="primary"
             @click="handleSelectLink"
-            >选择链接</Button
+            >选择链接</el-button
           >
         </div>
         <div>
-          <span>背景色：</span><Input v-model="selected.bgColor" />
-          <ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
+          <span>背景色：</span><el-input v-model="selected.bgColor" />
+          <el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
         </div>
       </div>
-    </Modal>
+    </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
       ref="liliDialog"
@@ -199,14 +205,18 @@
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
     <!-- 选择图片 -->
-    <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="callbackSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        ref="ossManage"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 export default {
   props: {
     data: {
@@ -243,11 +253,13 @@ export default {
     },
     handleSelectGoods(item) {
       // 调起选择商品
-      this.$refs.liliDialog.open('goods', 'single')
+      this.$refs.liliDialog.open("goods", "single");
     },
     // 选择链接回调
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.url = this.$filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 选择商品回调
     selectedGoodsData(val) {

seller/src/views/shop/modelList/seckill-only-album.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="seckill">
+    <div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
+    <div class="aside">
+      <div class="title">{{ actName }}</div>
+      <div class="hour">
+        <span>{{ currHour }}:00</span>点场 倒计时
+      </div>
+      <div class="count-down" v-if="actStatus === 1">
+        <span>{{ hours }}</span
+        ><span>{{ minutes }}</span
+      ><span>{{ seconds }}</span>
+      </div>
+      <div class="act-status" v-else>
+        {{ actStatus == 0 ? "未开始" : "已结束" }}
+      </div>
+    </div>
+    <div class="section">
+      <swiper ref="mySwiper" :options="swiperOptions">
+        <swiper-slide
+          v-for="(item, index) in options.list[0].goodsList"
+          :key="index"
+        >
+          <div class="content">
+            <img :src="item.img" width="140" height="140" :alt="item.name" />
+            <div class="ellipsis">{{ item.name }}</div>
+            <div>
+              <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import "swiper/swiper-bundle.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      options: this.data.options, // 当前数据
+      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      actName: "限时秒杀",
+      currHour: "00", // 当前秒杀场
+      diffSeconds: 0, // 倒地时
+      hours: "00", // 小时
+      minutes: "00", // 分钟
+      seconds: "00", // 秒
+      interval: undefined, // 定时器
+      swiperOptions: {
+        // 轮播图参数
+        slidesPerView: 5,
+        autoplay: true,
+        loop: true,
+      },
+    };
+  },
+  watch: {
+    diffSeconds(val) {
+      const hours = Math.floor(val / 3600);
+      // 当前秒数 / 60，向下取整
+      // 获取到所有分钟数 3600 / 60 = 60分钟
+      // 对60取模，超过小时数的分钟数
+      const minutes = Math.floor(val / 60) % 60;
+      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+      const seconds = val % 60;
+      this.hours = hours < 10 ? "0" + hours : hours;
+      this.minutes = minutes < 10 ? "0" + minutes : minutes;
+      this.seconds = seconds < 10 ? "0" + seconds : seconds;
+
+      if (val === 0) {
+        clearInterval(this.interval);
+        this.hours = 0;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.countDown(this.options.list);
+      }
+    },
+  },
+  mounted() {
+    this.countDown(this.options.list);
+  },
+  beforeUnmount() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    // 倒计时
+    countDown(list) {
+      /**
+       * 默认倒计时两小时
+       * 如果没有开始，则显示未开始
+       * 进行中显示倒计时
+       * 今天的秒杀结束则显示已结束
+       */
+      let nowHour = new Date().getHours();
+      if (nowHour < Number(list[0].time)) {
+        // 活动未开始
+        this.currHour = list[0].time;
+        this.actStatus = 0;
+      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+        // 活动已结束
+        this.actStatus = 2;
+        this.currHour = list[list.length - 1].time;
+      } else {
+        // 活动进行中
+        this.actStatus = 1;
+        for (let i = 0; i < list.length; i++) {
+          if (nowHour == Number(list[i].time)) {
+            this.currHour = list[i].time;
+          }
+          if (
+            nowHour > Number(list[i].time) &&
+            nowHour < Number(list[i].time + 2)
+          ) {
+            this.currHour = list[i].time;
+          }
+        }
+        // 当前0点时间戳
+        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+        // 活动倒计时
+        this.diffSeconds = Math.floor(
+          (zeroTime +
+            3600 * 1000 * (this.currHour + 2) -
+            new Date().getTime()) /
+          1000
+        );
+        const that = this;
+        this.interval = setInterval(() => {
+          this.diffSeconds--;
+        }, 1000);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.seckill {
+  width: 100%;
+  height: 260px;
+  display: flex;
+  position: relative;
+  .desc{
+    position: absolute;
+    color: $theme_color;
+    left: 200px;
+    top: 5px;
+  }
+  .aside {
+    overflow: hidden;
+    width: 190px;
+    height: 100%;
+    color: #fff;
+    background-image: url("../../../assets/seckillBg.png");
+
+    .title {
+      width: 100%;
+      text-align: center;
+      font-size: 28px;
+      margin-top: 31px;
+    }
+
+    .hour {
+      margin-top: 90px;
+      text-align: center;
+      span {
+        font-size: 18px;
+      }
+    }
+
+    .count-down {
+      margin: 10px 0 0 30px;
+      > span {
+        position: relative;
+        float: left;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        background-color: #2f3430;
+        margin-right: 20px;
+        color: white;
+        font-size: 20px;
+        &::after {
+          content: ":";
+          display: block;
+          position: absolute;
+          right: -20px;
+          font-weight: bolder;
+          font-size: 18px;
+          width: 20px;
+          height: 100%;
+          top: 0;
+        }
+      }
+      > span:last-child::after {
+        content: "";
+      }
+    }
+
+    .act-status {
+      margin: 10px 0 0 65px;
+      font-size: 20px;
+    }
+  }
+
+  .section {
+    width: 1000px;
+    // background: #efefef;
+    .swiper-slide {
+      height: 260px;
+      .content {
+        width: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: 200px;
+          transform: translateY(-50%);
+          background: linear-gradient(180deg, white, #eeeeee, white);
+        }
+        img {
+          margin-top: 30px;
+        }
+        > div {
+          width: 160px;
+          margin-top: 10px;
+          font-size: 12px;
+          position: relative;
+        }
+        > div:nth-of-type(1):hover {
+          color: $theme_color;
+          cursor: pointer;
+        }
+        > div:nth-of-type(2) {
+          border: 1px solid $theme_color;
+          line-height: 24px;
+          display: flex;
+          text-align: center;
+
+          span:nth-child(1) {
+            color: #fff;
+            font-size: 16px;
+            width: 92px;
+            background-color: $theme_color;
+            position: relative;
+            &::before {
+              content: " ";
+              width: 0;
+              height: 0;
+              border-color: transparent white transparent transparent;
+              border-style: solid;
+              border-width: 24px 8px 0 0;
+              position: absolute;
+              top: 0;
+              left: 84px;
+            }
+          }
+
+          span:nth-child(2) {
+            color: #999;
+            width: 66px;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

seller/src/views/shop/modelList/seckill.vue

@@ -25,8 +25,8 @@
             <img :src="item.img" width="140" height="140" :alt="item.name" />
             <div class="ellipsis">{{ item.name }}</div>
             <div>
-              <span>{{ item.price | unitPrice("￥") }}</span>
-              <span>{{ item.originalPrice | unitPrice("￥") }}</span>
+              <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
             </div>
           </div>
         </swiper-slide>
@@ -95,7 +95,7 @@ export default {
   mounted() {
     this.countDown(this.options.list);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.interval);
   },
   methods: {

seller/src/views/shop/renovation.vue

@@ -1,39 +1,27 @@
 <template>
   <div class="renovation">
-    <!-- 左侧模块列表 -->
     <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>
+          <el-icon><Picture /></el-icon>
+          <span>{{model.name}}</span>
         </li>
       </draggable>
     </div>
-    <!-- 中间展示模块 -->
     <div class="show-content">
       <model-form ref="modelForm" :data="modelForm"></model-form>
     </div>
-    <!-- 操作按钮 -->
     <div class="btn-bar" :class="{'top':isHiddenBar}">
-      <Button type="primary" :loading="submitLoading" @click="saveTemplate"
-        >保存模板</Button
-      >
-      <Button class="ml_10" @click="resetTemplate">还原模板</Button>
-      <Button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</Button>
-      <Button class="ml_10" v-if="hasCache" @click="clearCache">清空本地装修缓存</Button>
+      <el-button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</el-button>
+      <el-button class="ml_10" @click="resetTemplate">还原模板</el-button>
+      <el-button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</el-button>
+      <el-button class="ml_10" v-if="hasCache" @click="clearCache">清空本地装修缓存</el-button>
     </div>
   </div>
 </template>
 <script>
+import { Picture } from "@element-plus/icons-vue";
 import { modelData } from "./modelConfig";
 import Draggable from "vuedraggable";
 import ModelForm from "./modelForm.vue";
@@ -42,12 +30,12 @@ export default {
   components: {
     Draggable,
     ModelForm,
+    Picture,
   },
   mounted() {
-    const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
+    const setting = window.localStorage.getItem('seller-setting') ? JSON.parse(window.localStorage.getItem('seller-setting')) : {};
     this.isHiddenBar = setting.isUseTabsRouter
-      // 先读缓存，如果缓存有值则读缓存。
-    const cache = this.getStore('sellerPCPageCache')
+     const cache = this.getStore('managerPCPageCache')
     this.hasCache = !!cache;
       if(cache){
         this.$Modal.confirm({
@@ -60,7 +48,6 @@ export default {
           if (pageData) {
             pageData = JSON.parse(pageData);
             if (pageData.list[0].type === "topAdvert") {
-              // topAdvert 为顶部广告 navList为导航栏
               this.$refs.modelForm.topAdvert = pageData.list[0];
               this.$refs.modelForm.navList = pageData.list[1];
               pageData.list.splice(0, 2);
@@ -79,60 +66,55 @@ export default {
   data() {
     return {
       hasCache:false,
-      modelData, // 可选模块数据
-      modelForm: { list: [] }, // 模板数据
-      submitLoading: false, // 提交加载状态
+      modelData,
+      modelForm: { list: [] },
+      submitLoading: false,
       isHiddenBar:true,
     };
   },
   methods: {
     clearCache(){
-      this.setStore('sellerPCPageCache', '')
+      this.setStore('managerPCPageCache', '')
       this.$Message.success('清除成功')
     },
-      // 将楼层装修的内容写入到本地缓存中
     witeLocalStore(){
       const data ={...this.modelForm}
       data.list.unshift(this.$refs.modelForm.navList);
       data.list.unshift(this.$refs.modelForm.topAdvert);
-      this.setStore('sellerPCPageCache', data)
+      this.setStore('managerPCPageCache', data)
       this.$Message.success('写入成功')
     },
     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: this.$route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
+        pageClientType: 'PC',
       };
       API_floor.updateHome(this.$route.query.id, data).then((res) => {
-        this.submitLoading = false;
+        this.submitLoading = false
         if (res.success) {
           this.$Message.success("保存模板成功");
         }
       });
     },
     resetTemplate() {
-      // 还原模板
       this.getTemplateItem(this.$route.query.id);
     },
     getTemplateItem(id) {
-      // 获取模板数据
       API_floor.getHomeData(id).then((res) => {
         if (res.success) {
           let pageData = res.result.pageData;
           if (pageData) {
             pageData = JSON.parse(pageData);
             if (pageData.list[0].type === "topAdvert") {
-              // topAdvert 为顶部广告 navList为导航栏
               this.$refs.modelForm.topAdvert = pageData.list[0];
               this.$refs.modelForm.navList = pageData.list[1];
               pageData.list.splice(0, 2);
@@ -163,8 +145,9 @@ export default {
   display: flex;
 }
 .model-list {
-  width: 120px;
-  height: auto;
+  width: 130px;
+  height: 620px;
+  overflow-y: auto;
   padding: 10px;
   background: #fff;
   margin-top: 60px;
@@ -177,17 +160,19 @@ export default {
     line-height: 30px;
   }
   .model-item {
-    width: 100px;
+    width: 110px;
     height: 30px;
     background: #eee;
     margin-top: 10px;
     line-height: 30px;
     text-align: center;
     color: #999;
+    transition:0.15s;
+    border-radius: 4px;
     &:hover {
-      border: 1px dashed #409eff;
-      color: #409eff;
+      background: $theme_color;
       cursor: move;
+      color: #fff;
     }
   }
   .ghost::after {
@@ -226,7 +211,6 @@ export default {
   padding: 10px;
   box-shadow: 1px 1px 10px #999;
   z-index: 99;
-  top: 100px;
 }
 .top{
   top: 100px;

seller/src/views/shop/ship/logistics.vue

@@ -1,54 +1,81 @@
 <template>
   <div class="logistics">
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-    </Card>
-    <Modal v-model="openModal" :title="openModalTitle" @on-ok="submit" @on-cancel="cancelModal" :width="700">
-      <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
+    <el-card>
+      <el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
+        <el-table-column prop="name" label="物流公司" min-width="120" />
+        <el-table-column label="状态" min-width="120">
+          <template #default="{ row }">
+            <el-tag v-if="!row.selected" type="danger">关闭</el-tag>
+            <el-tag v-else type="success">开启</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="{ row }">
+            <template v-if="!row.selected">
+              <a class="link-text" @click="open(row)">开启</a>
+            </template>
+            <template v-else>
+              <a class="link-text" @click="close(row)">关闭</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="getFaceSheetInfo(row)">修改</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
-      <ButtonGroup style="margin-bottom: 10px;">
-        <Button :type="faceSheetForm.faceSheetFlag ? 'primary' : 'default'"
-          @click="faceSheetForm.faceSheetFlag = true">需要</Button>
-        <Button :type="!faceSheetForm.faceSheetFlag ? 'primary' : 'default'"
-          @click="faceSheetForm.faceSheetFlag = false">不需要</Button>
-      </ButtonGroup>
-      <Card v-if="openText" class="modalStyle">
+    <el-dialog v-model="openModal" :title="openModalTitle" width="700px" :close-on-click-modal="false">
+      <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
+      <el-button-group style="margin-bottom: 10px">
+        <el-button :type="faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = true">
+          需要
+        </el-button>
+        <el-button :type="!faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = false">
+          不需要
+        </el-button>
+      </el-button-group>
+
+      <el-card v-if="openText" class="modalStyle">
         <h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
-        <Form ref="formValidate" :label-width="250" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
-          <FormItem label="电子面单客户账户/月结账号/客户代码" prop="customerName">
-            <Input v-model="faceSheetForm.customerName" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="客户密码/电子面单密码" prop="customerPwd">
-            <Input v-model="faceSheetForm.customerPwd" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="电子面单密钥" prop="monthCode">
-            <Input v-model="faceSheetForm.monthCode" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="归属网点/网点编码/电子面单承载编号" prop="sendSite">
-            <Input v-model="faceSheetForm.sendSite" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="收件快递员" prop="sendStaff">
-            <Input v-model="faceSheetForm.sendStaff" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="支付方式" prop="payType">
-            <Select v-model="faceSheetForm.payType" class="faceSheetInput">
-              <Option value="1">现付</Option>
-              <Option value="2">到付</Option>
-              <Option value="3">月结</Option>
-              <Option value="4">第三方支付(仅SF支持)</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="快递类型" prop="expType">
-            <Input v-model="faceSheetForm.expType" type="text" class="faceSheetInput" />
-          </FormItem>
-          <div style="width:100%;text-align:center;">
+        <el-form ref="formValidate" label-width="250px" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
+          <el-form-item label="电子面单客户账户/月结账号/客户代码" prop="customerName">
+            <el-input v-model="faceSheetForm.customerName" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="客户密码/电子面单密码" prop="customerPwd">
+            <el-input v-model="faceSheetForm.customerPwd" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="电子面单密钥" prop="monthCode">
+            <el-input v-model="faceSheetForm.monthCode" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="归属网点/网点编码/电子面单承载编号" prop="sendSite">
+            <el-input v-model="faceSheetForm.sendSite" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="收件快递员" prop="sendStaff">
+            <el-input v-model="faceSheetForm.sendStaff" class="faceSheetInput" />
+          </el-form-item>
+          <el-form-item label="支付方式" prop="payType">
+            <el-select v-model="faceSheetForm.payType" class="faceSheetInput">
+              <el-option label="现付" value="1" />
+              <el-option label="到付" value="2" />
+              <el-option label="月结" value="3" />
+              <el-option label="第三方支付(仅SF支持)" value="4" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="快递类型" prop="expType">
+            <el-input v-model="faceSheetForm.expType" class="faceSheetInput" />
+          </el-form-item>
+          <div style="width: 100%; text-align: center">
             <a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
             <a @click="frontDownload('type')">快递类型</a>
           </div>
-        </Form>
-      </Card>
-      <br />
-    </Modal>
+        </el-form>
+      </el-card>
+
+      <template #footer>
+        <el-button @click="openModal = false">取消</el-button>
+        <el-button type="primary" @click="submit">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -61,148 +88,39 @@ export default {
     return {
       row: {},
       openModal: false,
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-      },
-      openModalTitle: '开启信息',
-      ruleValidate: {
-        // customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
-        // expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-        // sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
-
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
       },
+      openModalTitle: "开启信息",
+      ruleValidate: {},
       faceSheetForm: {
         faceSheetFlag: false,
         customerName: "",
-        payType: '1',
-        expType: '1',
+        payType: "1",
+        expType: "1",
         customerPwd: "",
         monthCode: "",
         sendSite: "",
         sendStaff: "",
       },
-      columns: [
-        {
-          title: "物流公司",
-          key: "name",
-          minWidth: 120,
-          sortable: false,
-        },
-        {
-          title: "状态",
-          key: "selected",
-          minWidth: 120,
-          sortable: true,
-          render: (h, params) => {
-            if (!params.row.selected) {
-              return h("div", [h("tag", { props: { color: "volcano" } }, "关闭")]);
-            } else {
-              return h("div", [h("tag", { props: { color: "green" } }, "开启")]);
-            }
-          }
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          render: (h, params) => {
-            if (!params.row.selected) {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.open(params.row);
-                      },
-                    },
-                  },
-                  "开启"
-                ),
-              ]);
-            } else {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.close(params.row);
-                      },
-                    },
-                  },
-                  "关闭"
-                ),
-                h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.getFaceSheetInfo(params.row);
-                      },
-                    },
-                  },
-                  "修改"
-                ),
-              ]);
-            }
-
-          },
-        },
-      ],
-      data: [], // 表单数据
+      data: [],
       openText: false,
+      logisticsId: "",
     };
   },
   watch: {
-    'faceSheetForm.faceSheetFlag'(val) {
-      this.openText = val ? true : false
-      console.log(this.openText )
-    }
+    "faceSheetForm.faceSheetFlag"(val) {
+      this.openText = !!val;
+    },
   },
   methods: {
-    //获取状态
-    getfaceSheetFlag(e) {
-      console.log(e);
-      if (e === true) {
-        console.log("打开");
-        this.openText = true;
-      } else {
-        console.log("关闭");
-        this.openText = false;
-      }
-    },
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 获取数据
     getDataList() {
       this.loading = true;
       API_Shop.getLogistics().then((res) => {
@@ -211,38 +129,22 @@ export default {
           this.data = res.result;
         }
       });
-      this.loading = false;
     },
-    cancelModal() {
-      this.faceSheetFlag = false;
-      this.faceSheetForm.faceSheetFlag = false;
-    },
-    // 开启
     open(v) {
       this.row = v;
       this.openModal = true;
-      this.searchForm.faceSheetFlag = "false"; //开弹框 等于v
-      if (this.searchForm.faceSheetFlag == "true") {
-        this.openText = true;
-      } else {
-        this.openText = false;
-      }
+      this.openModalTitle = "开启信息";
+      this.openText = false;
+      this.faceSheetForm.faceSheetFlag = false;
     },
-    //修改
     getFaceSheetInfo(v) {
       this.row = v;
       this.logisticsId = v.logisticsId;
-      this.openModalTitle = '修改信息';
+      this.openModalTitle = "修改信息";
       API_Shop.getIsCheck(this.logisticsId).then((res) => {
         if (res.success) {
-          // this.searchForm = res.result.recordes;
-          this.faceSheetForm.faceSheetFlag = res.result.faceSheetFlag; //开弹框 等于v
-          if (this.faceSheetForm.faceSheetFlag === true) {
-            this.openText = true;
-          } else {
-            this.faceSheetForm.faceSheetFlag = false
-            this.openText = false;
-          }
+          this.faceSheetForm.faceSheetFlag = res.result.faceSheetFlag;
+          this.openText = !!this.faceSheetForm.faceSheetFlag;
           this.faceSheetForm.customerName = res.result.customerName;
           this.faceSheetForm.customerPwd = res.result.customerPwd;
           this.faceSheetForm.monthCode = res.result.monthCode;
@@ -255,29 +157,23 @@ export default {
       this.openModal = true;
     },
     frontDownload(val) {
-      var a = document.createElement("a"); //创建一个<a></a>标签
-      //根据点击按钮来下载不同文件
-      if (val === 'use') {
-        a.href = "static/instructions.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
-        a.download = "使用说明.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
-      } else if (val === 'type') {
-        a.href = "static/logisticsType.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
-        a.download = "快递类型.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
+      const a = document.createElement("a");
+      if (val === "use") {
+        a.href = "static/instructions.xlsx";
+        a.download = "使用说明.xlsx";
+      } else if (val === "type") {
+        a.href = "static/logisticsType.xlsx";
+        a.download = "快递类型.xlsx";
       }
-      a.style.display = "none"; // 障眼法藏起来a标签
-      document.body.appendChild(a); // 将a标签追加到文档对象中
-      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
-      a.remove(); // 一次性的，用完就删除a标签
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
     },
-
     submit() {
       if (!this.row.selected) {
-        API_Shop.logisticsChecked(
-          this.row.logisticsId,
-          this.faceSheetForm
-        ).then((res) => {
+        API_Shop.logisticsChecked(this.row.logisticsId, this.faceSheetForm).then((res) => {
           this.openModal = false;
-          this.$Modal.remove();
           if (res.success) {
             this.$Message.success("物流公司开启成功");
             this.init();
@@ -287,12 +183,12 @@ export default {
         API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
           if (res.success) {
             this.$Message.success("修改成功");
+            this.openModal = false;
             this.init();
           }
         });
       }
     },
-    // 关闭
     close(v) {
       this.$Modal.confirm({
         title: "确认关闭",
@@ -306,9 +202,9 @@ export default {
               this.init();
             }
           });
-        }
+        },
       });
-    }
+    },
   },
   mounted() {
     this.init();
@@ -320,4 +216,13 @@ export default {
 .faceSheetInput {
   width: 300px;
 }
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
 </style>

seller/src/views/shop/ship/shipTemplate.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="search">
-    <Card>
-      <Row>
-        <Button @click="refresh">刷新</Button>
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-      <Tabs @on-click="handleClickType" v-model="currentTab" style="margin-top: 10px">
-        <TabPane label="运费模板" name="INFO">
+    <el-card>
+      <el-row>
+        <el-button @click="refresh">刷新</el-button>
+        <el-button @click="add" type="primary">添加</el-button>
+      </el-row>
+      <el-tabs @click="handleClickType" v-model="currentTab" style="margin-top: 10px">
+        <el-tab-pane label="运费模板" name="INFO">
           <table class="ncsc-default-table order m-b-30" :key="index" v-for="(item,index) in shipInfo">
             <tbody>
               <tr>
@@ -15,7 +15,7 @@
               <tr>
                 <th colspan="20">
                   <span class="temp-name">{{item.name}}</span>
-                  <Tag v-if="item.pricingMethod==='FREE'" class="baoyou" color="warning">包邮</Tag>
+                  <el-tag v-if="item.pricingMethod==='FREE'" class="baoyou" color="warning">包邮</el-tag>
                   <span class="fr m-r-5">
                     <time style="margin-right: 20px" title="最后编辑时间">
                       <i class="icon-time"></i>{{item.updateTime}}
@@ -48,34 +48,34 @@
                     {{children.firstCompany}}
                   </td>
                   <td>
-                    <span class="yuan">￥</span><span class="integer">{{children.firstPrice | unitPrice}}</span>
+                    <span class="yuan">￥</span><span class="integer">{{ $filters.unitPrice(children.firstPrice) }}</span>
                   </td>
                   <td>
                     {{children.continuedCompany}}
                   </td>
                   <td class="bdr">
-                    <span class="yuan">￥</span><span class="integer">{{children.continuedPrice | unitPrice}}</span>
+                    <span class="yuan">￥</span><span class="integer">{{ $filters.unitPrice(children.continuedPrice) }}</span>
                   </td>
                 </tr>
               </template>
             </tbody>
           </table>
-        </TabPane>
-        <TabPane v-if="csTab" :label="title" :name="operation">
-          <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-            <FormItem label="模板名称" prop="name">
-              <Input v-model="form.name" maxlength="10" clearable style="width: 20%" />
-            </FormItem>
-            <FormItem label="计价方式" prop="pricingMethod">
-              <RadioGroup type="button" button-style="solid" v-model="form.pricingMethod">
-                <Radio label="WEIGHT">按重量</Radio>
-                <Radio label="NUM">按件数</Radio>
-                <Radio label="FREE">包邮</Radio>
-              </RadioGroup>
-            </FormItem>
+        </el-tab-pane>
+        <el-tab-pane v-if="csTab" :label="title" :name="operation">
+          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+            <el-form-item label="模板名称" prop="name">
+              <el-input v-model="form.name" maxlength="10" clearable style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="计价方式" prop="pricingMethod">
+              <el-radio-group v-model="form.pricingMethod">
+                <el-radio-button value="WEIGHT">按重量</el-radio-button>
+                <el-radio-button value="NUM">按件数</el-radio-button>
+                <el-radio-button value="FREE">包邮</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
 
-            <FormItem label="详细设置" v-if="form.pricingMethod !== 'FREE'">
-              <Alert type="warning" >点击右侧修改按钮编辑数据</Alert>
+            <el-form-item label="详细设置" v-if="form.pricingMethod !== 'FREE'">
+              <el-alert type="warning" title="点击右侧修改按钮编辑数据" :closable="false" />
               <div class="ncsu-trans-type" data-delivery="TRANSTYPE">
                 <div class="entity">
                   <div class="tbl-except">
@@ -103,21 +103,16 @@
                           </td>
                           <td></td>
                           <td>
-                            <InputNumber class="text w40" type="text" v-model="item.firstCompany" :max="999" :min="0" :step="0.1" clearable/>
+                            <el-input-number class="text w40" v-model="item.firstCompany" :max="999" :min="0" :step="0.1" />
                           </td>
                           <td>
-                            <InputNumber class="text w60" type="text" v-model="item.firstPrice" :max="999999" :min="0" clearable  :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-            :parser="value => value.replace(/\¥\s?|(,*)/g, '')">
-                            </InputNumber>
+                            <el-input-number class="text w60" v-model="item.firstPrice" :max="999999" :min="0" />
                           </td>
                           <td>
-                            <InputNumber class="text w40" type="text" v-model="item.continuedCompany" :max="999" :min="0" :step="0.1"
-                              />
+                            <el-input-number class="text w40" v-model="item.continuedCompany" :max="999" :min="0" :step="0.1" />
                           </td>
                           <td>
-                            <InputNumber class="text w60" type="text" v-model="item.continuedPrice" :max="999999" :min="0" clearable  :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-            :parser="value => value.replace(/\¥\s?|(,*)/g, '')">
-                            </InputNumber>
+                            <el-input-number class="text w60" v-model="item.continuedPrice" :max="999999" :min="0" />
                           </td>
                           <td class="nscs-table-handle">
                             <a
@@ -136,31 +131,25 @@
                   <div class="tbl-attach p-5">
                     <div class="div-error" v-if="saveError">
                       <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
-                      <Icon type="ios-information-circle-outline" />
                       指定地区城市为空或指定错误
-                      <!-- <Icon type="ios-information-circle-outline" />
-                      首费应输入正确的金额
-                      <Icon type="ios-information-circle-outline" />
-                      续费应输入正确的金额 -->
-                      <Icon type="ios-information-circle-outline" />
                       首(续)件(重)费应输入大于0的整数
                     </div>
 
                   </div>
                 </div>
               </div>
-            </FormItem>
-            <Form-item>
-              <Button @click="addShipTemplateChildren(index)" v-if="form.pricingMethod !== 'FREE'"
-                icon="ios-create-outline">为指定城市设置运费模板
-              </Button>
-              <Button @click="handleSubmit" type="primary" style="margin-right:5px">保存
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
-      </Tabs>
-    </Card>
+            </el-form-item>
+            <el-form-item>
+              <el-button v-if="form.pricingMethod !== 'FREE'" @click="addShipTemplateChildren(index)">
+                为指定城市设置运费模板
+              </el-button>
+              <el-button @click="handleSubmit" type="primary" style="margin-right:5px">保存
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
     <multiple-region ref="region" @selected="handleSelect">
 
     </multiple-region>
@@ -288,7 +277,7 @@ export default {
           child.area.split(",").forEach((area) => {
             if (addr.name == area) {
               addr.selectedAll = true;
-              this.$set(child, "selectedAll", true);
+              child.selectedAll = true;
             }
           });
         });

seller/src/views/shop/shopAddress.vue

@@ -1,327 +1,214 @@
 <template>
   <div class="self-address">
-    <Card>
-      <Button @click="add" type="primary">添加</Button>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
+    <el-card>
+      <el-button type="primary" @click="add">添加</el-button>
+      <el-table
         ref="table"
-        style="margin-top:10px"
-      ></Table>
-      <Row type="flex" justify="end" style="margin-top:10px;">
-        <Page
-          :current="searchForm.pageNumber"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%; margin-top: 10px"
+      >
+        <el-table-column prop="addressName" label="自提点名称" min-width="120" />
+        <el-table-column prop="address" label="详细地址" min-width="280" />
+        <el-table-column prop="createTime" label="创建时间" min-width="120" sortable />
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="{ row }">
+            <a class="link-text" @click="edit(row)">修改</a>
+            <span class="op-split">|</span>
+            <a class="link-text" @click="deleteSubmit(row)">删除</a>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[10, 20, 50]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="名称" prop="addressName">
-          <Input v-model="form.addressName" clearable style="width: 90%"/>
-        </FormItem>
-        <FormItem label="详细地址" prop="address">
-          <span>{{ form.address || '暂无地址' }}</span>
-          <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择地址</Button>
-        </FormItem>
-        <FormItem label="联系电话" prop="mobile">
-          <Input v-model="form.mobile" clearable style="width: 90%" maxlength="11"/>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-        >提交
-        </Button
-        >
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
       </div>
-    </Modal>
-    <multipleMap ref="map" @callback="getAddress"></multipleMap>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="名称" prop="addressName">
+          <el-input v-model="form.addressName" clearable style="width: 90%" />
+        </el-form-item>
+        <el-form-item label="详细地址" prop="address">
+          <span>{{ form.address || "暂无地址" }}</span>
+          <el-button style="margin-left: 10px" @click="$refs.map.open()">选择地址</el-button>
+        </el-form-item>
+        <el-form-item label="联系电话" prop="mobile">
+          <el-input v-model="form.mobile" clearable style="width: 90%" maxlength="11" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
+    <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
 
 <script>
-  import * as API_Shop from "@/api/shops";
-  import { validateMobile } from "@/libs/validate";
+import * as API_Shop from "@/api/shops";
+import { validateMobile } from "@/libs/validate";
+import multipleMap from "@/views/my-components/map/multiple-map";
 
-  import multipleMap from "@/views/my-components/map/multiple-map";
-
-
-  export default {
-    name: "shopAddress",
-    components: {
-      multipleMap
-    },
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        modalType: 0, // 添加或编辑标识
-        modalVisible: false, // 添加或编辑显示
-        modalTitle: "", // 添加或编辑标题
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 10, // 页面大小
-        },
-        form: {
-          // 添加或编辑表单对象初始化数据
-          addressName: "",
-          center: "",
-          address:"",//详细地址
-          mobile:"",//手机号码
-        },
-
-        // 表单验证规则
-        formValidate: {
-          addressName: [
-            {
-              required: true,
-              message: "请输入地址名称",
-              trigger: "blur",
-            },
-          ],
-          longitude: [
-            {
-              required: true,
-              message: "请输入地址经度",
-              trigger: "blur",
-            },
-          ],
-          latitude: [
-            {
-              required: true,
-              message: "请输入地址纬度",
-              trigger: "blur",
-            },
-          ],
-          mobile: [
-            {
-              required: true,
-              message: "请输入联系电话号",
-              trigger: "blur",
-            },
-            { validator: validateMobile,
-              trigger: "blur"
-            }
-          ],
-          address: [
-            {
-              required: true,
-              message: " ",
-              trigger: "blur",
-            },
-          ],
-        },
-        submitLoading: false, // 添加或编辑提交状态
-        columns: [
-          // 表头
-          {
-            title: "自提点名称",
-            key: "addressName",
-            minWidth: 120,
-            sortable: false,
-          },
-          {
-            title: "详细地址",
-            key: "address",
-            minWidth: 280
-          },
-          {
-            title: "创建时间",
-            key: "createTime",
-            minWidth: 120,
-            sortable: true,
-          },
-          {
-            title: "操作",
-            key: "action",
-            align: "center",
-            width: 200,
-            render: (h, params) => {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.edit(params.row);
-                      },
-                    },
-                  },
-                  "修改"
-                ),
-                h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.deleteSubmit(params.row);
-                      },
-                    },
-                  },
-                  "删除"
-                ),
-              ]);
-            },
-          },
+export default {
+  name: "shopAddress",
+  components: { multipleMap },
+  data() {
+    return {
+      loading: true,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      form: {
+        addressName: "",
+        center: "",
+        address: "",
+        mobile: "",
+      },
+      formValidate: {
+        addressName: [{ required: true, message: "请输入地址名称", trigger: "blur" }],
+        longitude: [{ required: true, message: "请输入地址经度", trigger: "blur" }],
+        latitude: [{ required: true, message: "请输入地址纬度", trigger: "blur" }],
+        mobile: [
+          { required: true, message: "请输入联系电话号", trigger: "blur" },
+          { validator: validateMobile, trigger: "blur" },
         ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-      };
+        address: [{ required: true, message: " ", trigger: "blur" }],
+      },
+      submitLoading: false,
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
     },
-    methods: {
-      init() { // 初始化数据
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      // 重置
-      handleReset() {
-        this.$refs.searchForm.resetFields();
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 10;
-        this.getDataList();
-      },
-      //获取地址
-      getAddress(val){
-        if(val.type === 'select'){
-          const paths = val.data.map(item => item.name).join(',')
-          this.$set(this.form, 'address', paths)
-
-          this.form.center = val.data[val.data.length - 1].center
-        }
-        else{
-            this.$set(this.form, 'address', val.data.addr)
-            this.form.address = val.data.address
-            this.form.center = val.data.position.lng + "," + val.data.position.lat
-        }
-
-      },
-      // 获取数据
-      getDataList() {
-        this.loading = true;
-        API_Shop.getShopAddress(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    getAddress(val) {
+      if (val.type === "select") {
+        const paths = val.data.map((item) => item.name).join(",");
+        this.form.address = paths;
+        this.form.center = val.data[val.data.length - 1].center;
+      } else {
+        this.form.address = val.data.addr;
+        this.form.address = val.data.address;
+        this.form.center = val.data.position.lng + "," + val.data.position.lat;
+      }
+    },
+    getDataList() {
+      this.loading = true;
+      API_Shop.getShopAddress(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      //添加弹出框
-      add() {
-        this.$refs.form.resetFields()
-        this.modalVisible = true
-        this.modalTitle = "添加自提地址"
-      },
-      //修改弹出框
-      edit(v) {
-        this.modalType = 1
-        this.modalVisible = true
-        this.modalTitle = "修改自提地址"
-        this.form.id = v.id
-        this.form.address = v.address
-        this.form.addressName = v.addressName
-        this.form.mobile = v.mobile
-        this.form.center = v.center
-        this.form.longitude = v.center.split(',')[0]
-        this.form.latitude = v.center.split(',')[1]
-      },
-
-      //保存或者编辑
-      handleSubmit() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.submitLoading = true;
-            if (this.modalType == 0) {
-              // 添加
-              delete this.form.id;
-              API_Shop.addShopAddress(this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("添加成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
-            } else {
-              // 编辑
-              API_Shop.editShopAddress(this.form.id, this.form).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("修改成功");
-                  this.getDataList();
-                  this.modalVisible = false;
-                }
-              });
-            }
-          }
-        });
-      },
-      //删除
-      deleteSubmit(v){
-        this.$Modal.confirm({
-          title: "确认删除",
-          // 记得确认修改此处
-          content: "确认删除自提地址么？",
-          loading: true,
-          onOk: () => {
-            API_Shop.deleteShopAddress(v.id).then((res) => {
-              this.$Modal.remove();
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    add() {
+      this.modalType = 0;
+      this.$refs.form.resetFields();
+      this.modalVisible = true;
+      this.modalTitle = "添加自提地址";
+    },
+    edit(v) {
+      this.modalType = 1;
+      this.modalVisible = true;
+      this.modalTitle = "修改自提地址";
+      this.form.id = v.id;
+      this.form.address = v.address;
+      this.form.addressName = v.addressName;
+      this.form.mobile = v.mobile;
+      this.form.center = v.center;
+      this.form.longitude = v.center.split(",")[0];
+      this.form.latitude = v.center.split(",")[1];
+    },
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          if (this.modalType == 0) {
+            const params = { ...this.form };
+            delete params.id;
+            API_Shop.addShopAddress(params).then((res) => {
+              this.submitLoading = false;
               if (res.success) {
-                this.$Message.success("此自自提地址已删除");
-                this.init();
+                this.$Message.success("添加成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          } else {
+            API_Shop.editShopAddress(this.form.id, this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("修改成功");
+                this.getDataList();
+                this.modalVisible = false;
               }
             });
           }
-        });
-      }
+        }
+      });
     },
-    mounted() {
-      this.init();
+    deleteSubmit(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "确认删除自提地址么？",
+        loading: true,
+        onOk: () => {
+          API_Shop.deleteShopAddress(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("此自自提地址已删除");
+              this.init();
+            }
+          });
+        },
+      });
     },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
-
+<style scoped>
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>

seller/src/views/shop/shopSetting.vue

@@ -1,134 +1,133 @@
 <template>
   <div class="search">
-    <Card style="margin-left: 10px">
-      <Tabs v-model="type" @on-click="handleClickType">
-        <TabPane label="基本信息" name="INFO">
-          <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-            <FormItem label="店铺名称">
-              <Input v-model="storeName" disabled clearable style="width: 20%" />
-            </FormItem>
-            <FormItem label="店铺地址" prop="storeAddressPath">
+    <el-card style="margin-left: 10px">
+      <el-tabs v-model="type" @click="handleClickType">
+        <el-tab-pane label="基本信息" name="INFO">
+          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+            <el-form-item label="店铺名称">
+              <el-input v-model="storeName" disabled clearable style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="店铺地址" prop="storeAddressPath">
               <span>{{ form.storeAddressPath }}</span>
-              <Button style="margin-left: 10px;" @click="handleChangeAddress('storeAddress')">选择</Button>
-            </FormItem>
-            <FormItem label="详细地址" prop="shopAddressDetail">
-              <Input v-model="form.storeAddressDetail" clearable style="width: 20%" maxlength="50" />
-            </FormItem>
-            <FormItem label="店铺LOGO">
+              <el-button style="margin-left: 10px;" @click="handleChangeAddress('storeAddress')">选择</el-button>
+            </el-form-item>
+            <el-form-item label="详细地址" prop="shopAddressDetail">
+              <el-input v-model="form.storeAddressDetail" clearable style="width: 20%" maxlength="50" />
+            </el-form-item>
+            <el-form-item label="店铺LOGO">
               <upload-pic-thumb v-model="form.storeLogo" :multiple="false"></upload-pic-thumb>
-            </FormItem>
-            <FormItem label="店铺简介" prop="content" class="wangEditor">
-              <Input type="textarea" :rows="8" v-model="form.storeDesc" style="width: 30%"></Input>
-            </FormItem>
-            <FormItem label="店铺楼层" prop="content" class="wangEditor">
-              <i-switch v-model="form.pageShow" @on-change="pageShow"></i-switch>
+            </el-form-item>
+            <el-form-item label="店铺简介" prop="content" class="wangEditor">
+              <el-input type="textarea" :rows="8" v-model="form.storeDesc" style="width: 30%"></el-input>
+            </el-form-item>
+            <el-form-item label="店铺楼层" prop="content" class="wangEditor">
+              <el-switch v-model="form.pageShow" @change="pageShow" />
               <span class="desc">店铺楼层装修是否开启，开启后移动端PC端将会自动展示装修的内容</span>
-            </FormItem>
-            <FormItem label="开启自提" prop="content" class="wangEditor">
-              <i-switch v-model="form.selfPickFlag" @on-change="changeSelfPickFlag"></i-switch>
+            </el-form-item>
+            <el-form-item label="开启自提" prop="content" class="wangEditor">
+              <el-switch v-model="form.selfPickFlag" @change="changeSelfPickFlag" />
               <span class="desc">店铺是否开启自提功能</span>
-            </FormItem>
-            <Form-item>
-              <Button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
-        <TabPane label="发货地址">
-          <Form ref="addressGoods" :model="addressGoods" :label-width="100" :rules="addressGoodsValidate">
-            <FormItem label="发货人姓名" prop="salesConsignorName">
-              <Input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
-              </Input>
-            </FormItem>
-            <FormItem label="发货人手机号" prop="salesConsignorMobile">
-              <Input v-model="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
-              </Input>
-            </FormItem>
-            <FormItem label="地址" prop="salesConsignorAddressId">
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="发货地址">
+          <el-form ref="addressGoods" :model="addressGoods" label-width="100px" :rules="addressGoodsValidate">
+            <el-form-item label="发货人姓名" prop="salesConsignorName">
+              <el-input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="发货人手机号" prop="salesConsignorMobile">
+              <el-input v-model="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="地址" prop="salesConsignorAddressId">
               <span>{{ addressGoods.salesConsignorAddressPath }}</span>
-              <Button style="margin-left: 10px;" @click="handleChangeAddress('addressGoods')">选择</Button>
-            </FormItem>
-            <!-- <FormItem label="地址名称" prop="salesConsignorAddressPath">
-              <Input
+              <el-button style="margin-left: 10px;" @click="handleChangeAddress('addressGoods')">选择</el-button>
+            </el-form-item>
+            <!-- <el-form-item label="地址名称" prop="salesConsignorAddressPath">
+              <el-input
                 v-model="addressGoods.salesConsignorAddressPath"
                 clearable
                 style="width: 20%"
               >
-              </Input>
-            </FormItem> -->
-            <FormItem label="详细地址" prop="salesConsignorDetail">
-              <Input v-model="addressGoods.salesConsignorDetail" clearable style="width: 20%">
-              </Input>
-            </FormItem>
-            <Button @click="setAddressGoods" type="primary" style="margin-left: 8px">确认
-            </Button>
-          </Form>
-        </TabPane>
-        <TabPane label="退货地址" name="REFUND_GOODS_ADDRESS">
-          <Form ref="addressForm" :model="addressForm" :label-width="100" :rules="afterFormValidate">
-            <FormItem label="收货人" prop="salesConsigneeName">
-              <Input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
-            </FormItem>
-            <FormItem label="收货人电话" prop="salesConsigneeMobile">
-              <Input v-model="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
-            </FormItem>
-            <FormItem label="售后地址">
+              </el-input>
+            </el-form-item> -->
+            <el-form-item label="详细地址" prop="salesConsignorDetail">
+              <el-input v-model="addressGoods.salesConsignorDetail" clearable style="width: 20%">
+              </el-input>
+            </el-form-item>
+            <el-button @click="setAddressGoods" type="primary" style="margin-left: 8px">确认
+            </el-button>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="退货地址" name="REFUND_GOODS_ADDRESS">
+          <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="afterFormValidate">
+            <el-form-item label="收货人" prop="salesConsigneeName">
+              <el-input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="收货人电话" prop="salesConsigneeMobile">
+              <el-input v-model="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
+            </el-form-item>
+            <el-form-item label="售后地址">
               <span>{{ addressForm.salesConsigneeAddressPath }}</span>
-              <Button style="margin-left: 10px;" @click="handleChangeAddress('salesConsigneeAddressPath')">选择</Button>
-            </FormItem>
-            <FormItem label="详细地址" prop="salesConsigneeDetail">
-              <Input v-model="addressForm.salesConsigneeDetail" clearable style="width: 20%" maxlength="50" />
-            </FormItem>
+              <el-button style="margin-left: 10px;" @click="handleChangeAddress('salesConsigneeAddressPath')">选择</el-button>
+            </el-form-item>
+            <el-form-item label="详细地址" prop="salesConsigneeDetail">
+              <el-input v-model="addressForm.salesConsigneeDetail" clearable style="width: 20%" maxlength="50" />
+            </el-form-item>
 
-            <Form-item>
-              <Button @click="afterHandleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
-        <TabPane label="库存预警" name="STOCK_WARNING">
-          <Form ref="stockWarningForm" :model="stockWarningForm" :label-width="100" :rules="stockWarningFormValidate">
-            <FormItem label="预警数" prop="stockWarning">
-              <InputNumber :min="0" :max="99999" v-model="stockWarningForm.stockWarning" type="number" maxlength="6"
-                clearable style="width: 20%" />
-            </FormItem>
+            <el-form-item>
+              <el-button @click="afterHandleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="库存预警" name="STOCK_WARNING">
+          <el-form ref="stockWarningForm" :model="stockWarningForm" label-width="100px" :rules="stockWarningFormValidate">
+            <el-form-item label="预警数" prop="stockWarning">
+              <el-input-number :min="0" :max="99999" v-model="stockWarningForm.stockWarning" style="width: 20%" />
+            </el-form-item>
 
-            <Form-item>
-              <Button @click="stockWarningHandleSubmit" :loading="submitLoading" type="primary"
+            <el-form-item>
+              <el-button @click="stockWarningHandleSubmit" :loading="submitLoading" type="primary"
                 style="margin-right: 5px">修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane>
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
         <!-- Udesk 坐席功能 后续维护 -->
-        <!-- <TabPane label="客服设置" name="UDESK">
-          <Form
+        <!-- <el-tab-pane label="客服设置" name="UDESK">
+          <el-form
             ref="udeskForm"
             :model="udeskForm"
-            :label-width="100"
+            label-width="100px"
             :rules="udeskFormValidate"
           >
-            <FormItem label="坐席id" prop="merchantEuid">
-              <Input
+            <el-form-item label="坐席id" prop="merchantEuid">
+              <el-input
                 v-model="udeskForm.merchantEuid"
                 maxlength="30"
                 clearable
                 style="width: 20%"
               />
-            </FormItem>
-            <Form-item>
-              <Button
+            </el-form-item>
+            <el-form-item>
+              <el-button
                 @click="merchantSubmit"
                 :loading="submitLoading"
                 type="primary"
                 style="margin-right: 5px"
                 >修改
-              </Button>
-            </Form-item>
-          </Form>
-        </TabPane> -->
-      </Tabs>
-    </Card>
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane> -->
+      </el-tabs>
+    </el-card>
 
     <multipleMap ref="map" @callback="callbackAddress" />
   </div>

seller/src/views/shop/system/clerk/clerkManage.vue

@@ -1,158 +1,177 @@
 <template>
   <div class="search">
-    <Card>
-      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="店员名称">
-          <Input
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+        <el-form-item label="店员名称">
+          <el-input
             type="text"
             v-model="searchForm.clerkName"
             placeholder="请输入店员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="联系方式">
-          <Input
+        </el-form-item>
+        <el-form-item label="联系方式">
+          <el-input
             type="text"
             v-model="searchForm.mobile"
             placeholder="请输入联系方式"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="部门">
-          <department-choose @on-change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-        <Card>
-      <Row class="operation padding-row">
-        <Button @click="add" type="primary">添加</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Button @click="resetPass">重置密码</Button>
-      </Row>
+        </el-form-item>
+        <el-form-item label="部门">
+          <department-choose @change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
+        </el-form-item>
+        <el-button type="primary" class="search-btn" @click="handleSearch">
+          <el-icon><Search /></el-icon>
+          搜索
+        </el-button>
+      </el-form>
+      </el-card>
+        <el-card>
+      <div class="operation padding-row">
+        <el-button @click="add" type="primary">添加</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+        <el-button @click="resetPass">重置密码</el-button>
+      </div>
       <br>
-      <Table
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        sortable="custom"
-        @on-sort-change="changeSort"
-        @on-selection-change="showSelect"
+      <el-table
         ref="table"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        @selection-change="showSelect"
+        @sort-change="changeSort"
+      >
+        <el-table-column type="selection" width="60" align="center" fixed="left" />
+        <el-table-column prop="clerkName" label="店员名称" min-width="100" sortable="custom" fixed="left" />
+        <el-table-column prop="mobile" label="手机号码" min-width="100" fixed="left" />
+        <el-table-column label="店主" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.shopkeeper ? 'success' : 'danger'">{{ row.shopkeeper ? "是" : "否" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="超级管理员" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.isSuper ? 'success' : 'danger'">{{ row.isSuper ? "是" : "否" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? "启用" : "禁用" }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" sortable="custom" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <a class="link-text" @click="edit(row)">编辑</a>
+            <span class="op-split">|</span>
+            <a class="link-text" @click="row.status ? disable(row) : enable(row)">
+              {{ row.status ? "禁用" : "启用" }}
+            </a>
+            <span class="op-split">|</span>
+            <a class="link-text" @click="remove(row)">删除</a>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[10, 20, 50]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10,20,50]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
 
-    <Modal
+    <el-dialog
       :title="modalTitle"
       v-model="userEditModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{top: '30px'}"
+      :close-on-click-modal="false"
+      width="500px"
+      top="30px"
     >
-      <Form ref="form" :model="editForm" :label-width="80" :rules="formValidate">
-        <FormItem label="手机号">
-          <Input v-model="mobile" disabled/>
-        </FormItem>
-        <FormItem label="店员名称">
-          <Input v-model="clerkName" disabled/>
-        </FormItem>
-        <FormItem label="超级管理员" prop="isSuper">
-          <RadioGroup type="button" button-style="solid" v-model="editForm.isSuper">
-            <Radio :label="1">
-              <span>是</span>
-            </Radio>
-            <Radio :label="0">
-              <span>否</span>
-            </Radio>
-          </RadioGroup>
-        </FormItem>
+      <el-form ref="form" :model="editForm" label-width="80px" :rules="formValidate">
+        <el-form-item label="手机号">
+          <el-input v-model="mobile" disabled/>
+        </el-form-item>
+        <el-form-item label="店员名称">
+          <el-input v-model="clerkName" disabled/>
+        </el-form-item>
+        <el-form-item label="超级管理员" prop="isSuper">
+          <el-radio-group v-model="editForm.isSuper">
+            <el-radio-button value="1">是</el-radio-button>
+            <el-radio-button value="0">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
 
-        <FormItem label="角色" prop="roles" v-if="editForm.isSuper == 0">
-          <Select v-model="editForm.roles" multiple>
-            <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
+        <el-form-item label="角色" prop="roles" v-if="editForm.isSuper == 0">
+          <el-select v-model="editForm.roles" multiple>
+            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属部门">
+          <department-tree-choose @change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
+        </el-form-item>
 
-            </Option>
-          </Select>
-        </FormItem>
-        <Form-item label="所属部门">
-          <department-tree-choose @on-change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
-        </Form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="userEditModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="updateSubmit">提交</el-button>
+      </template>
+    </el-dialog>
 
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="userEditModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="updateSubmit">提交</Button>
-      </div>
-    </Modal>
-
-    <Modal
+    <el-dialog
       :title="modalTitle"
       v-model="userModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{top: '30px'}"
+      :close-on-click-modal="false"
+      width="500px"
+      top="30px"
     >
-      <Form ref="form" :model="form" :label-width="80" :rules="formValidate">
-        <FormItem label="手机号" prop="mobile">
-          <Input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
-                 autocomplete="off" @on-change="checkClerks"/>
-          &nbsp;<Button v-if="!memberCheck" @click="checkClerk">校验</Button>
-          <Button v-if="memberCheck" @click="checkAgainClerk">重新校验</Button>
-        </FormItem>
-        <FormItem v-if="newMember" label="用户名" prop="username">
-          <Input v-model="form.username" autocomplete="off"/>
-        </FormItem>
-        <FormItem v-if="oldMember" label="用户名" prop="username">
-          <Input v-model="form.username" autocomplete="off" disabled/>
-        </FormItem>
+      <el-form ref="form" :model="form" label-width="80px" :rules="formValidate">
+        <el-form-item label="手机号" prop="mobile">
+          <el-input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
+                 autocomplete="off" @change="checkClerks"/>
+          &nbsp;<el-button v-if="!memberCheck" @click="checkClerk">校验</el-button>
+          <el-button v-if="memberCheck" @click="checkAgainClerk">重新校验</el-button>
+        </el-form-item>
+        <el-form-item v-if="newMember" label="用户名" prop="username">
+          <el-input v-model="form.username" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item v-if="oldMember" label="用户名" prop="username">
+          <el-input v-model="form.username" autocomplete="off" disabled/>
+        </el-form-item>
 
-        <FormItem label="密码" prop="password" v-if="newMember" :error="errorPass">
-          <Input type="password" password v-model="form.password" autocomplete="off"/>
-        </FormItem>
-        <FormItem label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
-          <RadioGroup type="button" button-style="solid" v-model="form.isSuper">
-            <Radio :label="1">
-              <span>是</span>
-            </Radio>
-            <Radio :label="0">
-              <span>否</span>
-            </Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
-          <Select v-model="form.roles" multiple>
-            <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
+        <el-form-item label="密码" prop="password" v-if="newMember" :error="errorPass">
+          <el-input v-model="form.password" type="password" show-password autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
+          <el-radio-group v-model="form.isSuper">
+            <el-radio-button value="1">是</el-radio-button>
+            <el-radio-button value="0">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
+          <el-select v-model="form.roles" multiple>
+            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属部门" v-if="oldMember || newMember">
+          <department-tree-choose @change="handleSelectDepTree" ref="depTree"></department-tree-choose>
+        </el-form-item>
+      </el-form>
 
-            </Option>
-          </Select>
-        </FormItem>
-        <Form-item label="所属部门" v-if="oldMember || newMember">
-          <department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
-        </Form-item>
-      </Form>
-
-      <div slot="footer">
-        <Button type="text" @click="userModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
-      </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="userModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitUser">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -169,6 +188,7 @@ import {
   getClerk
 } from "@/api/index";
 import {validateMobile} from "@/libs/validate";
+import { Search } from "@element-plus/icons-vue";
 import departmentChoose from "@/views/my-components/lili/department-choose";
 import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
 import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
@@ -176,6 +196,7 @@ import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
 export default {
   name: "clerk-manage",
   components: {
+    Search,
     departmentChoose,
     departmentTreeChoose,
     uploadPicInput,
@@ -235,211 +256,6 @@ export default {
         ]
       },
       submitLoading: false, // 提交状态
-      columns: [ // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-          fixed: "left"
-        },
-        {
-          title: "店员名称",
-          key: "clerkName",
-          minWidth: 100,
-          sortable: true,
-          fixed: "left"
-        },
-        {
-          title: "手机号码",
-          key: "mobile",
-          minWidth: 100,
-          fixed: "left"
-        },
-        {
-          title: "店主",
-          key: "status",
-          align: "center",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.shopkeeper == true) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "是"
-                  }
-                })
-              ]);
-            } else if (params.row.shopkeeper == false) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "否"
-                  }
-                })
-              ]);
-            }
-          },
-        },
-        {
-          title: "超级管理员",
-          key: "status",
-          align: "center",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.isSuper == true) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "是"
-                  }
-                })
-              ]);
-            } else if (params.row.isSuper == false) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "否"
-                  }
-                })
-              ]);
-            }
-          },
-        },
-        {
-          title: "状态",
-          key: "status",
-          align: "center",
-          width: 130,
-          render: (h, params) => {
-            if (params.row.status == true) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "success",
-                    text: "启用"
-                  }
-                })
-              ]);
-            } else if (params.row.status == false) {
-              return h("div", [
-                h("Badge", {
-                  props: {
-                    status: "error",
-                    text: "禁用"
-                  }
-                })
-              ]);
-            }
-          },
-          filters: [
-            {
-              label: "启用",
-              value: true
-            },
-            {
-              label: "禁用",
-              value: false
-            }
-          ],
-          filterMultiple: false,
-          filterMethod(value, row) {
-            return row.status == value;
-          }
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          sortable: true,
-          sortType: "desc",
-          width: 180
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 200,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            let enableOrDisable = "";
-            if (params.row.status == true) {
-              enableOrDisable = h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.disable(params.row);
-                    },
-                  },
-                },
-                "禁用"
-              );
-            } else {
-              enableOrDisable = h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.enable(params.row);
-                    },
-                  },
-                },
-                "启用"
-              );
-            }
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-              enableOrDisable,
-              h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          }
-        }
-      ],
       data: [], // 用户数据
       total: 0, // 总数
     };
@@ -539,11 +355,9 @@ export default {
     },
     // 排序
     changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order == "normal") {
-        this.searchForm.order = "";
-      }
+      this.searchForm.sort = e.prop;
+      this.searchForm.order =
+        e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
       this.getUserList();
     },
     // 获取角色列表
@@ -743,7 +557,7 @@ export default {
     },
     // 清除选中状态
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
     // 批量删除
     delAll() {

seller/src/views/shop/system/department/storeDepartmentManage.vue

@@ -1,129 +1,108 @@
-
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <i-switch v-model="strict" size="large" style="margin-right: 5px">
-          <span slot="open">级联</span>
-          <span slot="close">单选</span>
-        </i-switch>
-        <Button @click="addRoot">添加部门</Button>
-        <Button @click="add" type="primary">添加子部门</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Button @click="getParentList">刷新</Button>
-      </Row>
-      <Row type="flex" justify="start">
-        <Col :md="8" :lg="8" :xl="6">
-          <Alert show-icon>
+    <el-card>
+      <el-row class="operation">
+        <el-switch
+          v-model="strict"
+          active-text="级联"
+          inactive-text="单选"
+          style="margin-right: 5px"
+        />
+        <el-button @click="addRoot">添加部门</el-button>
+        <el-button type="primary" @click="add">添加子部门</el-button>
+        <el-button @click="delAll">批量删除</el-button>
+        <el-button @click="getParentList">刷新</el-button>
+      </el-row>
+      <el-row type="flex" justify="start">
+        <el-col :md="8" :lg="8" :xl="6">
+          <el-alert type="info" show-icon :closable="false">
             当前选择编辑：
             <span class="select-title">{{ editTitle }}</span>
-            <a class="select-clear" v-if="form.id" @click="cancelSelect"
-              >取消选择</a
-            >
-          </Alert>
-          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
-            <Tree
-              ref="tree"
+            <a v-if="form.id" class="select-clear" @click="cancelSelect">取消选择</a>
+          </el-alert>
+          <div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
+            <el-tree
+              ref="treeRef"
               :data="data"
-              :load-data="loadData"
+              lazy
+              :load="loadNode"
+              :props="treeProps"
+              node-key="id"
               show-checkbox
-              @on-check-change="changeSelect"
-              @on-select-change="selectTree"
+              highlight-current
               :check-strictly="!strict"
-            ></Tree>
-            <Spin size="large" fix v-if="loading"></Spin>
+              :current-node-key="currentNodeKey"
+              @node-click="onNodeClick"
+              @check="onCheckChange"
+            />
           </div>
-        </Col>
-        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <Form
-            ref="form"
-            :model="form"
-            :label-width="100"
-            :rules="formValidate"
-          >
-            <FormItem label="部门名称" prop="title">
-              <Input v-model="form.title" />
-            </FormItem>
-            <FormItem label="选择角色">
-              <Select
-                :loading="userLoading"
-                not-found-text="暂无角色"
+        </el-col>
+        <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
+          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+            <el-form-item label="部门名称" prop="title">
+              <el-input v-model="form.title" />
+            </el-form-item>
+            <el-form-item label="选择角色">
+              <el-select
                 v-model="selectedRole"
                 multiple
+                :loading="userLoading"
+                placeholder="请选择角色"
+                style="width: 100%"
               >
-                <Option v-for="item in users" :value="item.id" :key="item.id">{{
-                  item.name
-                }}</Option>
-              </Select>
-            </FormItem>
-
-            <FormItem label="排序值" prop="sortOrder">
-              <Tooltip
-                trigger="hover"
-                placement="right"
-                content="值越小越靠前，支持小数"
-              >
-                <InputNumber
-                  :max="1000"
-                  :min="0"
-                  v-model="form.sortOrder"
-                ></InputNumber>
-              </Tooltip>
-            </FormItem>
-            <Form-item>
-              <Button
-                style="margin-right: 5px"
-                @click="submitEdit"
-                :loading="submitLoading"
+                <el-option
+                  v-for="item in users"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="排序值" prop="sortOrder">
+              <el-tooltip placement="right" content="值越小越靠前，支持小数">
+                <el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item>
+              <el-button
                 type="primary"
-                >修改并保存</Button
+                style="margin-right: 5px"
+                :loading="submitLoading"
+                @click="submitEdit"
               >
-              <Button @click="handleReset">重置</Button>
-            </Form-item>
-          </Form>
-        </Col>
-      </Row>
-    </Card>
+                修改并保存
+              </el-button>
+              <el-button @click="handleReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
 
-    <Modal
-      :title="modalTitle"
+    <el-dialog
       v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
     >
-      <Form
-        ref="formAdd"
-        :model="formAdd"
-        :label-width="85"
-        :rules="formValidate"
-      >
+      <el-form ref="formAdd" :model="formAdd" label-width="85px" :rules="formValidate">
         <div v-if="showParent">
-          <FormItem label="上级部门：">{{ form.title }}</FormItem>
+          <el-form-item label="上级部门：">{{ form.title }}</el-form-item>
         </div>
-        <FormItem label="部门名称" prop="title">
-          <Input v-model="formAdd.title" />
-        </FormItem>
-        <FormItem label="排序值" prop="sortOrder">
-          <Tooltip
-            trigger="hover"
-            placement="right"
-            content="值越小越靠前，支持小数"
-          >
-            <InputNumber
-              :max="1000"
-              :min="0"
-              v-model="formAdd.sortOrder"
-            ></InputNumber>
-          </Tooltip>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="cancelAdd">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitAdd"
-          >提交</Button
-        >
-      </div>
-    </Modal>
+        <el-form-item label="部门名称" prop="title">
+          <el-input v-model="formAdd.title" />
+        </el-form-item>
+        <el-form-item label="排序值" prop="sortOrder">
+          <el-tooltip placement="right" content="值越小越靠前，支持小数">
+            <el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="cancelAdd">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -138,24 +117,31 @@ import {
   getRoleList,
   updateDepartmentRole,
 } from "@/api/index";
+
 export default {
   name: "store-department-manage",
   data() {
     return {
-      loading: true, // 加载状态
-      maxHeight: "500px", // 最大高度
-      strict: true, // 级联还是单选
-      userLoading: false, // 选择角色加载状态
-      loadingEdit: false, // 编辑加载状态
-      modalVisible: false, // modal显隐
-      selectList: [], // 已选列表
-      selectCount: 0, // 已选总数
-      showParent: false, // 展示父级
-      modalTitle: "", // modal标题
-      editTitle: "", // 编辑标题
-      selectedRole: [], //选择的角色
-      searchKey: "", // 搜索关键字
-      form: { // 提交表单
+      loading: true,
+      maxHeight: "500px",
+      strict: true,
+      userLoading: false,
+      loadingEdit: false,
+      modalVisible: false,
+      selectList: [],
+      selectCount: 0,
+      showParent: false,
+      modalTitle: "",
+      editTitle: "",
+      selectedRole: [],
+      searchKey: "",
+      currentNodeKey: null,
+      treeProps: {
+        label: "title",
+        children: "children",
+        isLeaf: "isLeaf",
+      },
+      form: {
         id: "",
         title: "",
         parentId: "",
@@ -163,9 +149,8 @@ export default {
         sortOrder: 0,
         status: 0,
       },
-
-      formAdd: {}, // 新增表单
-      formValidate: { // 验证规则
+      formAdd: {},
+      formValidate: {
         title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
         sortOrder: [
           {
@@ -176,113 +161,120 @@ export default {
           },
         ],
       },
-      submitLoading: false, // 提交loading
-      data: [], // 部门数据
-      dataEdit: [], // 编辑时部门数据
-      users: [], // 用户
+      submitLoading: false,
+      data: [],
+      dataEdit: [],
+      users: [],
     };
   },
   methods: {
     init() {
       this.getParentList();
     },
-    // 获取部门数据
     getParentList() {
       this.loading = true;
       initDepartment().then((res) => {
         this.loading = false;
         if (res.success) {
-          this.data = res.result;
+          this.data = this.bubbleSort(res.result);
         }
       });
     },
-    // 动态加载二级数据
-    loadData(item, callback) {
-      loadDepartment(item.id).then((res) => {
+    loadNode(node, resolve) {
+      const id = node.data?.id;
+      if (id === undefined || id === null) {
+        resolve([]);
+        return;
+      }
+      loadDepartment(id).then((res) => {
         this.loadingEdit = false;
         if (res.success) {
-
-          callback(res.result);
+          resolve(res.result || []);
+        } else {
+          resolve([]);
         }
       });
     },
+    onNodeClick(data) {
+      if (!data) {
+        this.cancelSelect();
+        return;
+      }
+      const row = JSON.parse(JSON.stringify(data));
+      for (const attr in row) {
+        if (row[attr] == null) {
+          row[attr] = "";
+        }
+      }
+      this.editTitle = row.title;
+      this.currentNodeKey = row.id;
+      this.userLoading = true;
 
-    // 点击树
-    selectTree(v) {
-      if (v.length > 0) {
-        // 转换null为""
-        for (let attr in v[0]) {
-          if (v[0][attr] == null) {
-            v[0][attr] = "";
+      getUserByDepartmentId(row.id).then((res) => {
+        const way = [];
+        res.result &&
+          res.result.forEach((item) => {
+            way.push(item.roleId);
+          });
+        this.selectedRole = way;
+      });
+
+      getRoleList({
+        pageNumber: 1,
+        pageSize: 10000,
+      }).then((res) => {
+        this.userLoading = false;
+        if (res.success) {
+          this.users = res.result.records;
+          this.form = row;
+        }
+      });
+    },
+    onCheckChange(_data, { checkedNodes }) {
+      this.selectList = checkedNodes;
+      this.selectCount = checkedNodes.length;
+    },
+    bubbleSort(array) {
+      const len = array.length;
+      if (len < 2) return array;
+      for (let i = 0; i < len; i++) {
+        for (let j = 0; j < i; j++) {
+          if (array[j].sortOrder > array[i].sortOrder) {
+            const temp = array[j];
+            array[j] = array[i];
+            array[i] = temp;
           }
         }
-        let str = JSON.stringify(v[0]);
-        let data = JSON.parse(str);
-
-        this.editTitle = data.title;
-        // 加载部门用户数据
-        this.userLoading = true;
-
-        getUserByDepartmentId(data.id).then((res) => {
-          let way =[]
-          res.result && res.result.forEach((item) => {
-            way.push(item.roleId)
-          })
-           this.$set(this,'selectedRole',way)
-
-        });
-
-        getRoleList({
-          pageNumber: 1,
-          pageSize: 10000,
-        }).then((res) => {
-          this.userLoading = false;
-          if (res.success) {
-            this.users = res.result.records;
-            // 回显
-            this.form = data;
-          }
-        });
-      } else {
-        this.cancelSelect();
       }
+      return array;
     },
-    // 取消选择
     cancelSelect() {
-      let data = this.$refs.tree.getSelectedNodes()[0];
-      if (data) {
-        data.selected = false;
-      }
+      this.$refs.treeRef?.setCurrentKey(null);
+      this.currentNodeKey = null;
       this.$refs.form.resetFields();
       delete this.form.id;
       this.editTitle = "";
+      this.selectedRole = [];
     },
-    // 选择上级部门
     selectTreeEdit(v) {
-
       if (v.length > 0) {
-        // 转换null为""
-        for (let attr in v[0]) {
+        for (const attr in v[0]) {
           if (v[0][attr] == null) {
             v[0][attr] = "";
           }
         }
-        let str = JSON.stringify(v[0]);
-        let data = JSON.parse(str);
+        const data = JSON.parse(JSON.stringify(v[0]));
         this.form.parentId = data.id;
         this.form.parentTitle = data.title;
       }
     },
-    // 取消添加部门
     cancelAdd() {
       this.modalVisible = false;
     },
-    // 重置表单
     handleReset() {
       this.$refs.form.resetFields();
       this.form.status = 0;
     },
-    // 提交表单
     submitEdit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -290,20 +282,18 @@ export default {
             this.$Message.warning("请先点击选择要修改的部门");
             return;
           }
-          let roleWay = [];
+          const roleWay = [];
           this.selectedRole.forEach((item) => {
-            let role = {
+            roleWay.push({
               departmentId: this.form.id,
               roleId: item,
-            };
-            roleWay.push(role);
+            });
           });
 
           Promise.all([
             editDepartment(this.form.id, this.form),
-            updateDepartmentRole(this.form.id, roleWay)
+            updateDepartmentRole(this.form.id, roleWay),
           ]).then((res) => {
-
             this.submitLoading = false;
             if (res[0].success) {
               this.$Message.success("编辑成功");
@@ -314,7 +304,6 @@ export default {
         }
       });
     },
-    // 确认添加部门
     submitAdd() {
       this.$refs.formAdd.validate((valid) => {
         if (valid) {
@@ -330,7 +319,6 @@ export default {
         }
       });
     },
-    // 添加子部门
     add() {
       if (this.form.id == "" || this.form.id == null) {
         this.$Message.warning("请先点击选择一个部门");
@@ -338,7 +326,6 @@ export default {
       }
       this.modalTitle = "添加子部门";
       this.showParent = true;
-
       this.formAdd = {
         parentId: this.form.id,
         sortOrder: 0,
@@ -346,7 +333,6 @@ export default {
       };
       this.modalVisible = true;
     },
-    // 添加一级部门
     addRoot() {
       this.modalTitle = "添加一级部门";
       this.showParent = false;
@@ -357,13 +343,6 @@ export default {
       };
       this.modalVisible = true;
     },
-    // 选中回调
-    changeSelect(v) {
-
-      this.selectCount = v.length;
-      this.selectList = v;
-    },
-    // 批量删除部门
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未勾选要删除的数据");
@@ -395,14 +374,13 @@ export default {
     },
   },
   mounted() {
-    // 计算高度
-    let height = document.documentElement.clientHeight;
+    const height = document.documentElement.clientHeight;
     this.maxHeight = Number(height - 287) + "px";
     this.init();
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import "@/styles/tree-common.scss";
-
 </style>

seller/src/views/shop/system/role/storeRoleManage.vue

@@ -1,77 +1,141 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="addRole" type="primary">添加角色</Button>
-        <Button @click="delAll">批量删除</Button>
-      </Row>
-      <br>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total
-              show-elevator show-sizer></Page>
-      </Row>
-    </Card>
-
-    <!-- 编辑 -->
-    <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
-      <Form ref="roleForm" :model="roleForm" :label-width="80" :rules="roleFormValidate">
-        <FormItem label="角色名称" prop="name">
-          <Input v-model="roleForm.name" />
-        </FormItem>
-        <FormItem label="备注" prop="description">
-          <Input v-model="roleForm.description" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="roleModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitRole">提交
-        </Button>
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="addRole">添加角色</el-button>
+        <el-button @click="delAll">批量删除</el-button>
       </div>
-    </Modal>
-    <!-- 菜单权限 -->
-    <Modal :title="modalTitle" v-model="permModalVisible" :mask-closable="false" :width="500" :styles="{ top: '30px' }" class="permModal">
-      <div style="position: relative">
-        <Tree ref="tree" :data="permData" show-checkbox :render="renderContent">
-        </Tree>
-        <Spin size="large" fix v-if="treeLoading"></Spin>
-      </div>
-      <div slot="footer">
-        <Button type="text" @click="permModalVisible = false">取消</Button>
-        <Select v-model="openLevel" @on-change="changeOpen" style="width: 110px; text-align: left; margin-right: 10px">
-          <Option value="0">展开所有</Option>
-          <Option value="1">收合所有</Option>
-          <Option value="2">仅展开一级</Option>
-          <Option value="3">仅展开两级</Option>
-        </Select>
-        <Button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑
-        </Button>
-      </div>
-    </Modal>
 
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
+        @sort-change="changeSort"
+      >
+        <el-table-column type="selection" width="60" align="center" />
+        <el-table-column prop="name" label="角色名称" min-width="150" />
+        <el-table-column prop="description" label="备注" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="创建时间" width="170" sortable="custom" />
+        <el-table-column prop="updateTime" label="更新时间" width="170" sortable="custom" />
+        <el-table-column prop="createBy" label="最后操作人" width="150" />
+        <el-table-column label="操作" width="230" align="center" fixed="right">
+          <template #default="{ row }">
+            <div v-if="row" class="ops">
+              <a class="link-text" @click="editPerm(row)">菜单权限</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="edit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 保存权限弹出选择权限 -->
-    <Modal width="800" v-model="selectIsSuperModel" title="选择菜单权限" :loading="superModelLoading" @on-ok="saveRole">
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="pageNumber"
+          v-model:page-size="pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="roleModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="roleForm" :model="roleForm" label-width="80px" :rules="roleFormValidate">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="roleForm.name" />
+        </el-form-item>
+        <el-form-item label="备注" prop="description">
+          <el-input v-model="roleForm.description" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="roleModalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitRole">提交</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="permModalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      class="permModal"
+      top="30px"
+    >
+      <div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
+        <el-tree
+          ref="permTree"
+          :key="permTreeKey"
+          :data="permData"
+          :props="{ label: 'title', children: 'children', disabled: 'disabled' }"
+          node-key="id"
+          show-checkbox
+          :default-expand-all="openLevel === '0'"
+          :default-expanded-keys="permExpandedKeys"
+          :default-checked-keys="permCheckedKeys"
+        >
+          <template #default="{ data }">
+            <span>{{ data.title }}</span>
+            <el-tag
+              v-if="data.isSuper == 1 || data.isSuper == 0"
+              :type="data.isSuper == 1 ? 'danger' : 'info'"
+              size="small"
+              style="margin-left: 10px"
+            >
+              {{ data.isSuper == 1 ? "操作权限" : "查看权限" }}
+            </el-tag>
+          </template>
+        </el-tree>
+      </div>
+      <template #footer>
+        <el-button @click="permModalVisible = false">取消</el-button>
+        <el-select v-model="openLevel" style="width: 110px; margin-right: 10px" @change="changeOpen">
+          <el-option value="0" label="展开所有" />
+          <el-option value="1" label="收合所有" />
+          <el-option value="2" label="仅展开一级" />
+          <el-option value="3" label="仅展开两级" />
+        </el-select>
+        <el-button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="selectIsSuperModel" title="选择菜单权限" width="800px">
       <div class="btns">
-        <Button type="primary" @click="setRole()" class="btn-item">一键选中·数据权限</Button>
-        <Button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</Button>
+        <el-button type="primary" class="btn-item" @click="setRole()">一键选中·数据权限</el-button>
+        <el-button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</el-button>
       </div>
       <div class="role-list">
         <div class="role-item" v-for="(item, index) in saveRoleWay" :key="index">
           <div class="title">{{ item.title }}</div>
           <div class="content">
-            <RadioGroup type="button" button-style="solid" v-model="item.isSuper">
-              <Radio :label="1">
-                <span>操作数据权限</span>
-              </Radio>
-              <Radio :label="0">
-                <span>查看权限</span>
-              </Radio>
-            </RadioGroup>
+            <el-radio-group v-model="item.isSuper">
+              <el-radio-button :value="1">操作数据权限</el-radio-button>
+              <el-radio-button :value="0">查看权限</el-radio-button>
+            </el-radio-group>
           </div>
         </div>
       </div>
-    </Modal>
+      <template #footer>
+        <el-button @click="selectIsSuperModel = false">取消</el-button>
+        <el-button type="primary" :loading="superModelLoading" @click="saveRole">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -87,248 +151,74 @@ import {
   saveRoleMenu,
 } from "@/api/index";
 import util from "@/libs/util.js";
+
 export default {
   name: "role-manage",
   data() {
     return {
-      superModelLoading: false, //保存权限弹出选择权限保存
-      selectIsSuperModel: false, //保存权限弹出选择权限
-      rolePermsWay: [], //查询角色权限集合
-      openLevel: "0", // 展开的级别
-      loading: true, // 加载状态
-      treeLoading: true, // 树加载
-      depTreeLoading: true, // 部门树加载
-      submitPermLoading: false, // 权限提交加载
-      submitDepLoading: false, // 部门提交加载
-      sortColumn: "", // 排序
-      sortType: "desc", // 排序类型
-      modalType: 0, // 0 添加 1 编辑
-      roleModalVisible: false, // 角色modal
-      permModalVisible: false, // 菜单权限modal
-      depModalVisible: false, // 部门modal
-      modalTitle: "", // modal标题
+      superModelLoading: false,
+      selectIsSuperModel: false,
+      rolePermsWay: [],
+      openLevel: "0",
+      loading: true,
+      treeLoading: true,
+      depTreeLoading: true,
+      submitPermLoading: false,
+      submitDepLoading: false,
+      sortColumn: "",
+      sortType: "desc",
+      modalType: 0,
+      roleModalVisible: false,
+      permModalVisible: false,
+      depModalVisible: false,
+      modalTitle: "",
       roleForm: {
-        // 角色表单
         name: "",
         description: "",
       },
       roleFormValidate: {
-        // 验证规则
-        name: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" },
-        ],
+        name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
       },
-      submitLoading: false, // 提交loading
-      selectList: [], // 已选列表
-      selectCount: 0, // 已选总数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "角色名称",
-          key: "name",
-          minWidth: 150,
-        },
-        {
-          title: "备注",
-          key: "description",
-          minWidth: 150,
-          tooltip: true,
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 170,
-          sortable: true,
-          sortType: "desc",
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 170,
-          sortable: true,
-        },
-        {
-          title: "最后操作人",
-          key: "createBy",
-          width: 150,
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 230,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.editPerm(params.row);
-                    },
-                  },
-                },
-                "菜单权限"
-              ),
-              h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.edit(params.row);
-                    },
-                  },
-                },
-                "编辑"
-              ),
-              h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 角色数据
-      pageNumber: 1, // 页数
-      pageSize: 10, // 每页数量
-      total: 0, // 总数
-      permData: [], // 菜单权限数据
-      editRolePermId: "", // 编辑权限id
-      selectAllFlag: false, // 全选标识
-      depData: [], // 部门数据
-      dataType: 0, // 数据类型
-      editDepartments: [], // 编辑部门
-
-      saveRoleWay: [], //用户保存用户点击的菜单
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      pageNumber: 1,
+      pageSize: 20,
+      total: 0,
+      permData: [],
+      editRolePermId: "",
+      selectAllFlag: false,
+      depData: [],
+      dataType: 0,
+      editDepartments: [],
+      saveRoleWay: [],
+      permTreeKey: 0,
+      permCheckedKeys: [],
+      permExpandedKeys: [],
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getRoleList();
-      // 获取所有菜单权限树
       this.getPermList();
     },
-    // 渲染部门前icon
-    renderContent(h, { root, node, data }) {
-      let icon = "";
-      if (data.level == 0) {
-        icon = "ios-navigate";
-      } else if (data.level == 1) {
-        icon = "md-list-box";
-      } else if (data.level == 2) {
-        icon = "md-list";
-      } else if (data.level == 3) {
-        icon = "md-radio-button-on";
-      } else {
-        icon = "md-radio-button-off";
-      }
-      return h(
-        "span",
-        {
-          style: {
-            display: "inline-block",
-            cursor: "pointer",
-          },
-        },
-        [
-          h("span", [
-            h("Icon", {
-              props: {
-                type: icon,
-                size: "16",
-              },
-              style: {
-                "margin-right": "8px",
-                "margin-bottom": "3px",
-              },
-            }),
-            h("span", data.title),
-            h(
-              "Tag",
-              {
-                props: {
-                  color:
-                    data.isSuper == 1
-                      ? "red"
-                      : data.isSuper == 0
-                      ? "default"
-                      : "default",
-                },
-                style: {
-                  "margin-left": "10px",
-                  display:
-                    data.isSuper == 1 || data.isSuper == 0
-                      ? "inline-block"
-                      : "none",
-                },
-              },
-              data.isSuper == 1
-                ? "操作权限"
-                : data.isSuper == 0
-                ? "查看权限"
-                : ""
-            ),
-          ]),
-        ]
-      );
-    },
-    // 分页 修改页码
-    changePage(v) {
-      this.pageNumber = v;
+    changePage() {
       this.getRoleList();
       this.clearSelectAll();
     },
-    // 分页 修改页数
-    changePageSize(v) {
+    changePageSize() {
       this.pageNumber = 1;
-      this.pageSize = v;
       this.getRoleList();
     },
-    // 变更排序方式
     changeSort(e) {
-      this.sortColumn = e.key;
-      this.sortType = e.order;
-      if (e.order == "normal") {
+      this.sortColumn = e.prop;
+      this.sortType = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+      if (!e.order) {
         this.sortType = "";
       }
       this.getRoleList();
     },
-
-    /**
-     * 设置权限
-     */
     setRole(val) {
       let enable;
       val == "onlyView" ? (enable = 0) : (enable = 1);
@@ -336,17 +226,13 @@ export default {
         item.isSuper = enable;
       });
     },
-
-    /**
-     * 查询所有角色
-     */
     getRoleList() {
       this.loading = true;
       let params = {
         pageNumber: this.pageNumber,
         pageSize: this.pageSize,
         sort: this.sortColumn,
-        order: this.sort,
+        order: this.sortType,
       };
       getRoleList(params).then((res) => {
         this.loading = false;
@@ -356,22 +242,16 @@ export default {
         }
       });
     },
-
-    /**
-     * 查询菜单
-     */
     getPermList() {
       this.treeLoading = true;
       getAllPermissionList().then((res) => {
         if (res.success) {
           this.deleteDisableNode(res.result);
           this.permData = res.result;
-          this.treeLoading = false;
         }
         this.treeLoading = false;
       });
     },
-    // 递归标记禁用节点
     deleteDisableNode(permData) {
       let that = this;
       permData.forEach(function (e) {
@@ -384,14 +264,11 @@ export default {
         }
       });
     },
-    // 提交
     submitRole() {
       this.$refs.roleForm.validate((valid) => {
         if (valid) {
           if (this.modalType == 0) {
-            // 添加
             this.submitLoading = true;
-
             addRole(this.roleForm).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -403,7 +280,6 @@ export default {
           } else {
             this.submitLoading = true;
             this.roleForm.roleId = this.roleForm.id;
-
             editRole(this.roleForm).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -416,23 +292,17 @@ export default {
         }
       });
     },
-
-    /**
-     * 点击添加按钮
-     */
     addRole() {
       this.modalType = 0;
       this.modalTitle = "添加角色";
-      this.$refs.roleForm.resetFields();
+      this.$refs.roleForm?.resetFields();
       delete this.roleForm.id;
       this.roleModalVisible = true;
     },
-    // 编辑
     edit(v) {
       this.modalType = 1;
       this.modalTitle = "编辑角色";
-      this.$refs.roleForm.resetFields();
-      // 转换null为""
+      this.$refs.roleForm?.resetFields();
       for (let attr in v) {
         if (v[attr] == null) {
           v[attr] = "";
@@ -443,7 +313,6 @@ export default {
       this.roleForm = roleInfo;
       this.roleModalVisible = true;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
@@ -460,16 +329,13 @@ export default {
         },
       });
     },
-    // 清除选中
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中回调
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 批量删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -496,23 +362,17 @@ export default {
         },
       });
     },
-
-    // 菜单权限
     async editPerm(v) {
-
-      /**
-       * 点击菜单权限每次将赋值的isSuper数据给清空掉
-       */
       this.permData.map((item) => {
         item.children.length != 0
           ? item.children.map((child) => {
-            child.children.length != 0
-              ? child.children.map((kid) => {
-                delete kid.isSuper;
-              })
-              : "";
-            delete child.isSuper;
-          })
+              child.children.length != 0
+                ? child.children.map((kid) => {
+                    delete kid.isSuper;
+                  })
+                : "";
+              delete child.isSuper;
+            })
           : "";
         delete item.isSuper;
       });
@@ -523,98 +383,79 @@ export default {
       }
       this.editRolePermId = v.id;
       this.modalTitle = "分配 " + v.name + " 的菜单权限";
-      // 匹配勾选
       let rolePerms;
-      // 当前角色的菜单权限
       let res = await selectRoleMenu(v.id);
       if (res.result) {
         rolePerms = res.result;
         this.rolePermsWay = res.result;
       }
-      // 递归判断子节点是否可以选中
-      this.checkPermTree(this.permData, rolePerms);
+      this.permCheckedKeys = this.collectCheckedKeys(this.permData, rolePerms);
+      this.permExpandedKeys = this.computeExpandedKeys(this.openLevel);
+      this.permTreeKey += 1;
       this.permModalVisible = true;
     },
-    // 递归判断子节点
-    checkPermTree(permData, rolePerms) {
-      let that = this;
-
-      permData.forEach((p) => {
-        if (that.hasPerm(p, rolePerms) && p.status != -1) {
-          if (p.children && p.children.length === 0) {
-            this.$set(p, "checked", true);
+    collectCheckedKeys(permData, rolePerms) {
+      const keys = [];
+      const walk = (nodes) => {
+        nodes.forEach((p) => {
+          if (this.hasPerm(p, rolePerms) && p.status != -1) {
+            if (p.children && p.children.length === 0) {
+              keys.push(p.id);
+            }
           }
-        } else {
-          this.$set(p, "checked", false);
-        }
-        if (p.children && p.children.length > 0) {
-          that.checkPermTree(p.children, rolePerms);
-        }
-      });
+          if (p.children && p.children.length > 0) {
+            walk(p.children);
+          }
+        });
+      };
+      walk(permData);
+      return keys;
     },
-    // 判断角色拥有的权限节点勾选
     hasPerm(p, rolePerms) {
       if (!rolePerms) return false;
       let flag = false;
       for (let i = 0; i < rolePerms.length; i++) {
         if (p.id == rolePerms[i].menuId) {
-          this.$set(p, "isSuper", rolePerms[i].isSuper);
+          p.isSuper = rolePerms[i].isSuper;
           flag = true;
           break;
         }
       }
-      if (flag) {
-        return true;
-      }
-      return false;
+      return flag;
     },
-    // 递归全选节点
-    selectedTreeAll(permData, select) {
-      let that = this;
-      permData.forEach(function (e) {
-        e.checked = select;
-        if (e.children && e.children.length > 0) {
-          that.selectedTreeAll(e.children, select);
-        }
-      });
-    },
-    /**分配菜单权限 */
     submitPermEdit() {
       this.saveRoleWay = [];
-      this.selectIsSuperModel = true; //打开选择权限
-      let selectedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
+      this.selectIsSuperModel = true;
+      const tree = this.$refs.permTree;
+      const selectedNodes = [
+        ...tree.getCheckedNodes(false, true),
+      ];
       let way = [];
       selectedNodes.forEach((e) => {
-
         let perm = {
           title: e.title,
-          isSuper: e.isSuper ? e.isSuper = 1 : e.isSuper = 0 || 0,
+          isSuper: e.isSuper ? (e.isSuper = 1) : (e.isSuper = 0) || 0,
           menuId: e.id,
           roleId: this.editRolePermId,
         };
         way.push(perm);
-        this.$set(this,'saveRoleWay',way)
-
+        this.saveRoleWay = way;
       });
-
     },
-
-    /**保存权限 */
     saveRole() {
       this.superModelLoading = true;
       saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
         this.superModelLoading = false;
         if (res.success) {
           this.$Message.success("操作成功");
-          // 标记重新获取菜单数据
           this.$store.commit("setAdded", false);
           util.initRouter(this);
           this.getRoleList();
           this.permModalVisible = false;
+          this.selectIsSuperModel = false;
         }
       });
     },
-    // 加载数据
     loadData(item, callback) {
       loadDepartment(item.id, { openDataFilter: false }).then((res) => {
         if (res.success) {
@@ -633,80 +474,30 @@ export default {
         }
       });
     },
-    // 判断展开子节点
-    expandCheckDep(v) {
-      this.checkDepTree(v.children, this.editDepartments);
-    },
-    // 判断子节点
-    checkDepTree(depData, roleDepIds) {
-      let that = this;
-      depData.forEach(function (p) {
-        if (that.hasDepPerm(p, roleDepIds)) {
-          p.checked = true;
-        } else {
-          p.checked = false;
-        }
-      });
-    },
-    // 树结构展开层级
-    changeOpen(v) {
-      if (v == "0") {
-        this.permData.forEach((e) => {
-          e.expand = true;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = true;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = true;
-                });
-              }
-            });
-          }
-        });
-      } else if (v == "1") {
-        this.permData.forEach((e) => {
-          e.expand = false;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = false;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = false;
-                });
-              }
-            });
-          }
-        });
-      } else if (v == "2") {
-        this.permData.forEach((e) => {
-          e.expand = true;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = false;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = false;
-                });
-              }
-            });
-          }
-        });
-      } else if (v == "3") {
-        this.permData.forEach((e) => {
-          e.expand = true;
-          if (e.children && e.children.length > 0) {
-            e.children.forEach((c) => {
-              c.expand = true;
-              if (c.children && c.children.length > 0) {
-                c.children.forEach(function (b) {
-                  b.expand = false;
-                });
-              }
-            });
+    computeExpandedKeys(level) {
+      const keys = [];
+      const walk = (nodes, depth) => {
+        nodes.forEach((n) => {
+          if (level === "0") {
+            keys.push(n.id);
+          } else if (level === "2" && depth < 1) {
+            keys.push(n.id);
+          } else if (level === "3" && depth < 2) {
+            keys.push(n.id);
+          }
+          if (n.children && n.children.length) {
+            walk(n.children, depth + 1);
           }
         });
+      };
+      if (level !== "1") {
+        walk(this.permData, 0);
       }
+      return keys;
+    },
+    changeOpen(v) {
+      this.permExpandedKeys = this.computeExpandedKeys(v);
+      this.permTreeKey += 1;
     },
   },
   mounted() {
@@ -742,18 +533,15 @@ export default {
 .btn-item {
   margin-right: 20px;
 }
-.permModal {
-  .ivu-modal-body {
-    max-height: 560px;
-    overflow: auto;
-  }
+.ops a {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
 }
-
-.depModal {
-  .ivu-modal-body {
-    max-height: 500px;
-    overflow: auto;
-  }
+.ops span {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
 }
 .tips {
   font-size: 12px;

seller/src/views/shop/wap/advertising.vue

@@ -43,12 +43,12 @@
                   </div>
                 </div>
                 <div class="selectBtn">
-                  <Button
+                  <el-button
                     size="small"
                     @click="handleClickFile(item, index)"
-                    ghost
+                    plain
                     type="primary"
-                    >选择照片</Button
+                    >选择照片</el-button
                   >
                 </div>
               </div>
@@ -57,30 +57,47 @@
               <div class="decorate-view">
                 <div class="decorate-view-title">选择图片</div>
                 <div>
-                  <Button
-                    ghost
+                  <el-button
+                    plain
                     type="primary"
                     size="small"
                     @click="clickLink(item)"
-                    >选择链接</Button
+                    >选择链接</el-button
                   >
                 </div>
               </div>
+
+              <div class="decorate-view">
+                <div class="decorate-view-title">当前页面状态</div>
+                <div>
+                  <el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
+                    {{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
+                  </el-tag>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
-        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+        <!-- <el-button type="primary" @click="addDecorate()" ghost>添加</el-button> -->
+        <liliDialog ref="liliDialog"    @selectedLink="selectedLink" :types="linkType"></liliDialog>
       </div>
+      <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+         <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+      </el-dialog>
     </div>
   </div>
 </template>
 <script>
-
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import * as API_Other from "@/api/other.js";
 export default {
+   components: {
+    ossManage,
+  },
   data() {
     return {
-
+      result:"",
+      picModelFlag: false, //图片选择器
       type: "full", // 是否全屏
 
       //全屏广告
@@ -91,31 +108,61 @@ export default {
           size: "750*1624",
         },
       ],
-
+      selectedLinks: {},
       linkType: "", // 选择类型
     };
+  },
+   watch: {
+    advertising: {
+      handler(val) {
+        this.$store.state.openStyleStore = val;
+        console.log(
+          "this.$store.state.openStyleStore",
+          this.$store.state.openStyleStore
+        );
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.openPage();
   },
   methods: {
+    openPage() {
+      const alertType = this.$route.query.pagetype;
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[alertType ? alertType : "INDEX"];
+
+      API_Other.getOpenHomeData(pageType).then((res) => {
+        this.$store.state.openStoreId = res.result.id;
+        if (res.result.pageData) {
+          this.advertising = [JSON.parse(res.result.pageData)];
+        }
+        this.result = res.result
+      });
+    },
     // 点击链接
     clickLink(item) {
       this.$refs.liliDialog.open('link')
     },
-    //点击图片解析成base64
-    changeFile(item, index) {
-      const file = document.getElementById("files" + index).files[0];
-      if (file == void 0) return false;
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      this.$nextTick((res) => {
-        reader.onload = (e) => {
-          item.img = e.target.result;
-        };
-      });
+    // 回调选择的链接
+    selectedLink(val) {
+      this.selectedLinks.url = val;
+
+      this.advertising[0].config = val;
     },
     // 点击选择照片
-    handleClickFile(item, index) {
-      document.getElementById("files" + index).click();
-    },
+    handleClickFile() {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    }, // 图片选择器回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.advertising[0].img = val.url;
+    }
   },
 };
 </script>

seller/src/views/shop/wap/alertAdvertising.vue

@@ -43,12 +43,12 @@
                   </div>
                 </div>
                 <div class="selectBtn">
-                  <Button
+                  <el-button
                     size="small"
                     @click="handleClickFile(item, index)"
-                    ghost
+                    plain
                     type="primary"
-                    >选择照片</Button
+                    >选择链接</el-button
                   >
                 </div>
               </div>
@@ -57,27 +57,50 @@
               <div class="decorate-view">
                 <div class="decorate-view-title">选择图片</div>
                 <div>
-                  <Button
-                    ghost
+                  <el-button
+                    plain
                     type="primary"
                     size="small"
                     @click="clickLink(item)"
-                    >选择链接</Button
+                    >选择链接</el-button
                   >
                 </div>
               </div>
+
+              <div class="decorate-view">
+                <div class="decorate-view-title">当前页面状态</div>
+                <div>
+                  <el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
+                    {{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
+                  </el-tag>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+        <liliDialog
+          ref="liliDialog"
+          @selectedLink="selectedLink"
+          :types="linkType"
+        ></liliDialog>
       </div>
+      <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
     </div>
   </div>
 </template>
 <script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import * as API_Other from "@/api/other.js";
 export default {
+   components: {
+    ossManage,
+  },
   data() {
     return {
+      result:"",
+      picModelFlag: false, //图片选择器
       type: "full", // 展示方式
       //全屏广告
       advertising: [
@@ -88,9 +111,58 @@ export default {
         },
       ],
       linkType: "", // 选择类型
+      selectedLinks: {},
     };
   },
+
+  watch: {
+    advertising: {
+      handler(val) {
+        this.$store.state.openStyleStore = val;
+        console.log(
+          "this.$store.state.openStyleStore",
+          this.$store.state.openStyleStore
+        );
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.openPage();
+  },
   methods: {
+    // 回调选择的链接
+    selectedLink(val) {
+      this.selectedLinks.url = val;
+
+      this.advertising[0].config = val;
+    },
+    openPage() {
+      const alertType = this.$route.query.pagetype;
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[alertType ? alertType : "INDEX"];
+
+      API_Other.getOpenHomeData(pageType).then((res) => {
+        this.$store.state.openStoreId = res.result.id;
+        if (res.result.pageData) {
+          this.advertising = [JSON.parse(res.result.pageData)];
+        }
+        this.result = res.result
+      });
+    },
+    // 图片选择器回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.advertising[0].img = val.url;
+    },
+    // 点击选择图片
+    handleClickFile(item, index) {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
     // 点击链接
     clickLink(item) {
       this.$refs.liliDialog.open('link')
@@ -107,10 +179,7 @@ export default {
         };
       });
     },
-    // 点击选择照片
-    handleClickFile(item, index) {
-      document.getElementById("files" + index).click();
-    },
+
   },
 };
 </script>

seller/src/views/shop/wap/decorate.scss

@@ -1,5 +1,5 @@
 
-::v-deep .ivu-modal-mask,::v-deep .ivu-modal-wrap{
+:deep(.el-overlay) {
   z-index: 800;
 }
 .decorate-view-link{

seller/src/views/shop/wap/decorate.vue

@@ -2,131 +2,379 @@
   <div class="decorate">
     <div class="decorate-title">
       {{ res.name }}
-      <Button
+
+      <el-button
         style="margin-left: 20px"
         size="small"
-        ghost
-        v-if="res.type == 'tpl_ad_list' || res.type == 'tpl_activity_list' || res.drawer"
+        plain
+        v-if="
+          res.type == 'tpl_ad_list' ||
+          res.type == 'tpl_activity_list' ||
+          res.drawer
+        "
         type="primary"
         @click="selectStyle()"
-        >选择风格</Button
+        >选择风格</el-button
+      >
+      <el-button
+        style="margin-left: 20px"
+        size="small"
+        plain
+        v-if="res.type == 'promotions' || res.drawerPromotions"
+        type="primary"
+        @click="selectPromotions()"
+        >选择促销活动</el-button
       >
     </div>
+    <el-alert
+      v-if="res.name == '商品分类'"
+      type="warning"
+      title="装修提示"
+      :closable="false"
+    >
+      <template #default>
+        <div style="color: red">
+          如果当前装修模块不是最后一项模块且模块内容绑定为分类，则会默认展示绑定分类的100条商品信息。
+        </div>
+        <div style="color: red">
+          如果当前装修模块是最后一项模块且模块内容绑定为分类，则会默认会根据绑定分类触底加载商品信息。
+        </div>
+        <div style="color: red">
+          如果当前装修内容不为分类，则会展示当前商品的静态信息。
+        </div>
+      </template>
+    </el-alert>
 
     <!-- 右侧显示抽屉 -->
-    <Drawer title="选择风格" :closable="false" width="400" v-model="styleFlag">
+    <el-drawer title="选择风格" :show-close="false" size="400px" v-model="styleFlag">
       <div class="drawer">
-        <div
-          class="drawer-item"
-          @click="clickDrawer(item, index)"
-          v-for="(item, index) in modelData"
-          :key="index"
-          v-if="item.drawer"
-        >
-          <img src alt />
-          <span>{{ item.name }}</span>
-        </div>
+        <template v-for="(item, index) in modelData" :key="index">
+          <div
+            v-if="item.drawer"
+            class="drawer-item"
+            @click="clickDrawer(item, index)"
+          >
+            <img src alt />
+            <span>{{ item.name }}</span>
+          </div>
+        </template>
       </div>
-    </Drawer>
+    </el-drawer>
+
+    <!-- 右侧显示抽屉 -->
+    <el-drawer
+      title="选择促销活动(最多只能展示两个活动)"
+      :show-close="false"
+      size="400px"
+      v-model="promotionsFlag"
+    >
+      <div class="drawer">
+        <template v-for="(item, index) in modelData" :key="index">
+          <div
+            v-if="item.drawerPromotions"
+            class="drawer-item"
+            @click="clickDrawer(item, index)"
+          >
+            <img src alt />
+            <span>{{ item.name }}</span>
+          </div>
+        </template>
+      </div>
+    </el-drawer>
 
     <!-- 卡片集合 -->
     <div
       class="decorate-list"
-      v-if="(res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') || res.drawer"
+      v-if="
+        (res.type != 'tpl_ad_list' &&
+          res.type != 'tpl_activity_list' &&
+          res.type != 'promotions') ||
+        res.drawer ||
+        res.drawerPromotions
+      "
     >
-      <div class="decorate-item" v-for="(item, index) in res.options.list" :key="index">
+      <div
+        class="decorate-item"
+        v-for="(item, index) in res.options.list"
+        :key="index"
+      >
         <div class="decorate-item-title">
           <div>卡片</div>
-          <Icon
+          <el-icon
+            v-if="res.close || res.type == 'promotionDetail'"
             @click="closeDecorate(index)"
-            v-if="res.close"
-            size="20"
+            :size="20"
             color="#e1251b"
-            type="md-close-circle"
-          />
+            class="close-icon"
+          >
+            <CircleClose />
+          </el-icon>
         </div>
 
         <div class="decorate-item-box">
+          <template v-if="item.titleWay">
           <div
             class="decorate-border"
-            v-if="item.titleWay"
             v-for="(title_item, title_index) in item.titleWay"
             :key="title_index"
           >
             <div class="decorate-view">
               <div class="decorate-view-title">标题{{ title_index + 1 }}</div>
               <div>
-                <Input v-model="title_item.title" />
+                <el-input v-model="title_item.title" />
               </div>
             </div>
             <div class="decorate-view">
               <div class="decorate-view-title">描述</div>
               <div>
-                <Input v-model="title_item.desc" />
+                <el-input v-model="title_item.desc" />
               </div>
             </div>
             <div class="decorate-view">
-              <div class="decorate-view-title">绑定商品</div>
-              <div
-                class="decorate-view-link"
-                v-if="res.options.list[0].listWay.length != 0"
-              >
-                <!-- 绑定商品选择器回调已选择的商品 -->
-                <div
-                  v-if="
-                    title_item.___index == bindGoods.___index ||
-                    title_item.title == bindGoods.type
-                  "
-                  v-for="(bindGoods, bindGoodsIndex) in res.options.list[0].listWay"
-                  :key="bindGoodsIndex"
-                >
-                  {{ bindGoods.title }},
+              <div class="decorate-view-title">绑定</div>
+              <div class="decorate-view-link">
+                <div v-if="res.options.list[0].listWay.length != 0">
+                  <!-- 绑定商品选择器回调已选择的商品 -->
+
+                  <template
+                    v-for="(bindGoods, bindGoodsIndex) in res.options.list[0].listWay"
+                    :key="bindGoodsIndex"
+                  >
+                  <div
+                    v-if="
+                      title_item.___index == bindGoods.___index ||
+                      title_item.title == bindGoods.type
+                    "
+                    class="title-item wes-2"
+                  >
+                    <el-tooltip placement="left" :content="bindGoods.title">
+                      <div class="title-goodsName">
+                        {{ bindGoods.title }}
+                      </div>
+                    </el-tooltip>
+                    <div class="title-btn">
+                      <el-button
+                        @click="
+                          slotGoods(
+                            res.options.list[0].listWay,
+                            title_item.___index,
+                            bindGoods,
+                            'up'
+                          )
+                        "
+                        style="margin-right: 10px"
+                        size="small"
+                        >上移</el-button
+                      >
+                    </div>
+                  </div>
+                  </template>
+                </div>
+                <!-- 显示绑定分类 -->
+                <div v-if="title_item.bindCategory">
+                  绑定分类为：{{ title_item.bindCategory.name }}
                 </div>
               </div>
-              <div>
-                <Button @click="bindGoodsId(title_item)" size="small" ghost type="primary"
-                  >选择商品</Button
+
+              <div class="decorate-view-btn">
+                <el-button
+                  @click="bindGoodsId(title_item, title_index)"
+                  size="small"
+                  >选择商品</el-button
+                >
+                <el-button
+                  @click="bindGoodsCategory(title_index)"
+                  size="small"
+                  style="margin-top: 20px"
+                  >选择分类</el-button
                 >
               </div>
             </div>
           </div>
+          </template>
+          <div class="decorate-view" v-if="res.type == 'carousel'">
+            <div class="decorate-view-title">
+              <el-button
+                @click="slotBanner(res, item, index, 'up')"
+                style="margin-right: 10px"
+                size="small"
+                >上移</el-button
+              ><el-button
+                @click="slotBanner(res, item, index, 'down')"
+                size="small"
+                >下移</el-button
+              >
+            </div>
+          </div>
           <!-- 选择照片 -->
           <div class="decorate-view" v-if="!res.notImg">
             <div class="decorate-view-title">选择照片</div>
             <div>
               <img class="show-image" :src="item.img" alt />
 
-              <div class="tips">
+              <div class="tips" v-if="!res.onlyImg">
                 建议尺寸
                 <span>{{ item.size }}</span>
               </div>
             </div>
             <div class="selectBtn">
-              <Button
+              <el-button
                 size="small"
                 @click="handleClickFile(item, index)"
-                ghost
+                plain
                 type="primary"
-                >选择照片</Button
+                >选择照片</el-button
               >
             </div>
           </div>
-          <!-- 填写标题 -->
-          <div class="decorate-view" v-if="item.title != void 0 && !res.notTitle">
-            <div class="decorate-view-title">菜单标题</div>
-            <div>
-              <Input v-model="item.title" style="width: 200px" />
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type == 'title'"
+          >
+            <div class="decorate-view-title">文字对齐方式</div>
+            <div class="card-box">
+              <div
+                class="card"
+                :class="{ active: textAlign == 'left' }"
+                @click="changeTextAlign('left')"
+              >
+                <img
+                  :src="require('@/assets/align-text-left.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div>
+              <div
+                class="card"
+                :class="{ active: textAlign == 'center' }"
+                @click="changeTextAlign('center')"
+              >
+                <img
+                  :src="require('@/assets/align-text-center.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div>
+              <!-- <div
+                class="card"
+                :class="{ active: textAlign == 'right' }"
+                @click="changeTextAlign('right')"
+              >
+                <img
+                  :src="require('@/assets/align-text-right.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div> -->
             </div>
           </div>
+          <div
+            class="decorate-view"
+            v-if="
+              item.title != void 0 &&
+              !res.notTitle &&
+              (res.type == 'title' ||
+                res.type == 'notice' ||
+                res.type == 'promotionDetail')
+            "
+          >
+            <div class="decorate-view-title">背景颜色</div>
+            <div class="decorate-view">
+              <el-color-picker v-model="item.bk_color" />
+              <el-input v-model="item.bk_color" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type == 'notice'"
+          >
+            <div class="decorate-view-title">方向</div>
+            <div class="decorate-view">
+              <el-select
+                style="width: 200px"
+                @change="changeDirection($event, item)"
+                v-model="item.direction"
+              >
+                {{ item.direction }}
+                <el-option label="横向" value="horizontal"></el-option>
+                <el-option label="纵向" value="vertical"></el-option>
+              </el-select>
+            </div>
+          </div>
+
+          <!-- 填写标题 -->
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type != 'notice'"
+          >
+            <div class="decorate-view-title">菜单标题</div>
+            <div>
+              <el-input v-model="item.title" style="width: 200px" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="
+              item.title != void 0 &&
+              !res.notTitle &&
+              (res.type == 'title' || res.type == 'notice')
+            "
+          >
+            <div class="decorate-view-title">标题颜色</div>
+            <div class="decorate-view">
+              <el-color-picker v-model="item.color" />
+              <el-input v-model="item.color" />
+            </div>
+          </div>
+          <!-- 填写小标题 -->
+          <div
+            class="decorate-view"
+            v-if="item.title1 != void 0 && !res.notTitle"
+          >
+            <div class="decorate-view-title">小标题</div>
+            <div>
+              <el-input v-model="item.title1" style="width: 200px" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="item.title1 != void 0 && !res.notTitle"
+          >
+            <div class="decorate-view-title">小标题颜色</div>
+            <div class="decorate-view">
+              <el-color-picker v-model="item.color1" />
+              <el-input v-model="item.color1" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="res.type === 'notice' && !res.notTitle"
+          >
+            <div class="decorate-view-title">公告内容</div>
+            <div>
+              <div
+                v-for="(t, tindex) in item.title"
+                :key="tindex"
+                class="decorate-notice"
+              >
+                <el-input v-model="t.context" style="width: 200px" />
+                <el-icon @click="removeNotice(tindex)" :size="16" color="#e1251b">
+                  <CircleClose />
+                </el-icon>
+              </div>
+            </div>
+          </div>
+
+          <!-- 填写链接 -->
 
           <div class="decorate-view" v-if="res.onlyImg">
             <div class="decorate-view-title">选择模式</div>
 
             <div>
-              <RadioGroup v-model="item.model" type="button">
-                <Radio value="link" label="link">链接</Radio>
-                <Radio value="hotzone" label="hotzone">热区</Radio>
-              </RadioGroup>
+              <el-radio-group v-model="item.model">
+                <el-radio value="link">链接</el-radio>
+                <el-radio value="hotzone">热区</el-radio>
+              </el-radio-group>
             </div>
           </div>
 
@@ -139,7 +387,7 @@
               已选链接：
 
               <span>
-                <!-- {{
+                {{
                   ways.find((e) => {
                     return item.url.___type == e.name;
                   })
@@ -169,10 +417,6 @@
                 <span v-if="item.url.___type == 'other'">
                   {{ item.url.title }}</span
                 >
-                <!-- 当选择完链接之后的其他回调 -->
-                <span v-if="item.url.___type == 'brand'">
-                  {{ item.url.name }}</span
-                >
 
                 <!-- 当选择完活动之后的其他回调 -->
                 <span v-if="item.url.___type == 'marketing'">
@@ -181,8 +425,7 @@
                     满减
                   </span>
                   <span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span>
-                  {{ item.url.title || item.url.goodsName }}
-                </span>
+                  {{ item.url.title || item.url.goodsName }}</span>
                 <!-- 当选择完活动之后的其他回调 -->
                 <span v-if="item.url.___type == 'pages'">
                   {{ item.url.title }}</span
@@ -190,28 +433,55 @@
               </span>
             </div>
             <div>
-              <Button
-                ghost
+              <el-button
+                plain
                 size="small"
                 type="primary"
                 @click="clickLink(item, index, res)"
               >
-                {{ item.model === "hotzone" ? "绘制热区" : "选择链接" }}</Button
+                {{ item.model === "hotzone" ? "绘制热区" : "选择链接" }}</el-button
               >
             </div>
           </div>
           <!-- 链接地址-->
+          <div
+            class="decorate-view"
+            v-if="
+              item.url &&
+              item.url.url !== undefined &&
+              item.url.___type == 'other'
+            "
+          >
+            <div class="decorate-view-title">外部链接</div>
+            <div>
+              <el-input v-model="item.url.url" style="width: 200px" />
+            </div>
+          </div>
 
+          <p
+            v-if="
+              item.url &&
+              item.url.url !== undefined &&
+              item.url.___type == 'other'
+            "
+          >
+            (如非同域名下，则在小程序与公众号中无效)
+          </p>
         </div>
       </div>
     </div>
 
-    <Button
-      v-if="res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list' && !res.notAdd"
+    <el-button
+      v-if="
+        res.type != 'tpl_ad_list' &&
+        res.type != 'tpl_activity_list' &&
+        !res.notAdd &&
+        res.direction != 'horizontal'
+      "
       type="primary"
-      @click="addDecorate()"
-      ghost
-      >添加</Button
+      @click="addDecorate(res.type, res)"
+      plain
+      >添加</el-button
     >
 
     <liliDialog
@@ -219,22 +489,34 @@
       @selectedLink="selectedLink"
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
+
+    <el-dialog width="800px" title="选择分类" v-model="enableSelectCategory" append-to-body destroy-on-close>
+      <categoryTemplate
+        v-if="enableSelectCategory"
+        @selected="confirmCategory"
+      />
+    </el-dialog>
+
     <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
-    <Modal width="1200px" v-model="picModelFlag">
-      <ossManage  @callback="callbackSelected" :isComponent="true"  :initialize="picModelFlag" ref="ossManage" />
-    </Modal>
+
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+    </el-dialog>
   </div>
 </template>
 <script>
-// import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
-import hotzone from "@/views/shop/hotzone";
+import { CircleClose } from "@element-plus/icons-vue";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 import { modelData } from "./config";
-import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型
+import hotzone from "@/views/shop/hotzone";
+import ways from "@/views/lili-dialog/wap.js";
+import categoryTemplate from "@/views/lili-dialog/template/category";
 export default {
   components: {
     ossManage,
     hotzone,
+    categoryTemplate,
+    CircleClose,
   },
   data() {
     return {
@@ -242,11 +524,17 @@ export default {
       picModelFlag: false, //图片选择器
       linkType: "goods", // dialog弹窗口类型
       styleFlag: false, //广告魔方开关
+      textAlign: this.res.options.list[0]
+        ? this.res.options.list[0].textAlign
+        : "center", //文字对齐方式
+      promotionsFlag: false, //广告魔方开关
       selectedLinkIndex: "", //选择链接的索引
       modelData, // 装修数据
       selectedGoods: "", // 已选商品
       selectedLinks: "", // 已选链接
       modelList: "", // 装修列表
+      enableSelectCategory: false, //商品是否绑定分类
+      goodsSelectedIndex: 0, //绑定商品分类的索引
     };
   },
   watch: {
@@ -257,14 +545,106 @@ export default {
   },
   props: ["res"],
   methods: {
+    // 选择分类
+    confirmCategory(val) {
+      let data = {
+        ...this.res.options.list[0].titleWay[this.goodsSelectedIndex],
+      };
+      let callback = {
+        id: val[0].id,
+        name: val[0].name,
+        categoryIdWay: val[0].id,
+      };
+      data = {
+        ...data,
+        bindCategory: callback,
+      };
+      this.res.options.list[0].listWay =
+        this.res.options.list[0].listWay.filter((item) => {
+          return item.___index != this.goodsSelectedIndex;
+        });
+      this.res.options.list[0].titleWay[this.goodsSelectedIndex] = data;
+
+      console.log(this.res.options.list[0]);
+    },
+    // 商品排序
+    slotGoods(list, key, val) {
+      const newVal = [];
+      let newValIndex = 0;
+      // 给当前点击的商品分组
+      list.forEach((item, index) => {
+        if (item.___index == key) {
+          newVal.push(item);
+        }
+      });
+      // 获得当前点击商品的索引
+      newVal.forEach((item, index) => {
+        if (item.id == val.id) {
+          newValIndex = index;
+        }
+      });
+      // 进行商品排序
+      this.upData(newVal, newValIndex);
+      if (list.length == newVal.length) {
+        list = newVal;
+      } else {
+        let newList;
+        newVal.forEach((item, index) => {
+          newList = list.filter((child) => {
+            return child.id != item.id && child.___index != key;
+          });
+        });
+        list = [...newList, ...newVal];
+      }
+
+      this.res.options.list[0]["listWay"] = list;
+    },
+
+    // 轮播图排序
+    slotBanner(val, key, index, down) {
+      console.log(val);
+      if (down == "down") {
+        this.downData(val.options.list, index);
+      } else {
+        this.upData(val.options.list, index);
+      }
+    },
+    upData(arr, index) {
+      let newArr = [];
+      if (arr.length > 1 && index !== 0) {
+        newArr = this.swapItems(arr, index, index - 1);
+      }
+      return newArr;
+    },
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
+    downData(arr, index) {
+      let newArr = [];
+      if (arr.length > 1 && index !== arr.length - 1) {
+        newArr = this.swapItems(arr, index, index + 1);
+      }
+      return newArr;
+    },
+    // 改变横纵切换title内容
+    changeDirection(val, data) {
+      if (val == "horizontal") {
+        const props = { ...data };
+        data.title = [];
+        data.title.push(props.title[0]);
+      }
+    },
     // 选择风格
     selectStyle() {
       this.styleFlag = !this.styleFlag;
     },
+    selectPromotions() {
+      this.promotionsFlag = !this.promotionsFlag;
+    },
     // 回调选择的链接
     selectedLink(val) {
       this.selectedLinks.zoneInfo = [];
-      // 需删除图片中 intro 和 mobileIntro 可能存在转义符导致json出错问题
       delete val.selected;
       delete val.intro;
       delete val.mobileIntro;
@@ -285,15 +665,23 @@ export default {
           ...item,
         };
       });
-
       this.res.options.list[0].listWay.push(...data);
+      // 清除已经绑定的分类
+      this.res.options.list[0].titleWay[this.goodsSelectedIndex].bindCategory =
+        "";
       this.linkType = "";
     },
     // 绑定商品
-    bindGoodsId(val) {
+    bindGoodsId(val, index) {
       this.selectedGoods = val;
+      this.goodsSelectedIndex = index;
       this.liliDialogFlag(true);
     },
+    // 绑定分类
+    bindGoodsCategory(index, key) {
+      this.enableSelectCategory = true;
+      this.goodsSelectedIndex = index;
+    },
     // 点击抽屉
     clickDrawer(item, index) {
       this.$emit("handleDrawer", item);
@@ -301,10 +689,15 @@ export default {
     },
     // 打开图片选择器
     liliDialogFlag(flag) {
+      this.$refs.liliDialog.clearGoodsSelected();
       this.$refs.liliDialog.goodsFlag = flag;
       this.$refs.liliDialog.flag = true;
     },
 
+    changeTextAlign(val) {
+      this.res.options.list[0].textAlign = val;
+      this.textAlign = val;
+    },
     // 点击链接赋值一个唯一值，并将当前选择的模块赋值
     clickLink(val, index, oval) {
       this.selectedLinks = val;
@@ -337,15 +730,35 @@ export default {
       });
     },
     //添加设置
-    addDecorate() {
+    addDecorate(type, data) {
+      if (type === "notice") {
+        if (data.options.list[0].direction == "vertical") {
+          this.res.options.list[0].title.push({
+            content: "",
+          });
+        } else {
+          this.$Message.error("仅纵向支持多添加");
+        }
+      } else {
+        let way = {
+          img: "https://picsum.photos/id/264/200/200",
+          title: "标题",
+          link: "",
+          url: "",
+          size: this.res.options.list[0] ? this.res.options.list[0].size : "",
+          model: "link",
+        };
+        this.res.options.list.push(way);
+      }
+    },
+    addHotPoint() {
       let way = {
         img: "https://picsum.photos/id/264/200/200",
-        title: "标题",
+        text: "标题",
         link: "",
         url: "",
-        size: this.res.options.list[0]?.size,
       };
-      this.res.options.list.push(way);
+      this.res.options.list[0].points.push(way);
     },
     // 图片选择器回显
     callbackSelected(val) {
@@ -358,6 +771,11 @@ export default {
       this.selectedGoods = item;
       this.picModelFlag = true;
     },
+    removeNotice(index) {
+      this.$nextTick(() => {
+        this.res.options.list[0].title.splice(index, 1);
+      });
+    },
     // 关闭
     closeDecorate(index) {
       this.$nextTick(() => {

seller/src/views/shop/wap/index.vue

@@ -13,15 +13,15 @@
             ghostClass: 'ghost',
           }"
         >
+          <template v-for="(model, index) in modelData" :key="index">
           <li
-            v-for="(model, index) in modelData"
-            v-if="!model.drawer"
-            :key="index"
+            v-if="!model.drawer && !model.drawerPromotions"
             class="model-item"
           >
             <img src alt />
             <span>{{ model.name }}</span>
           </li>
+          </template>
         </draggable>
       </div>
 
@@ -44,18 +44,19 @@
               <component
                 class="component"
                 :class="{ active: selected == index }"
-                @click.native="handleComponent(element, index)"
+                @click="handleComponent(element, index)"
                 :is="templates[element.type]"
                 :res="element.options"
               ></component>
-              <Icon
+              <el-icon
                 v-if="selected == index"
                 @click="closeComponent(index)"
-                color="#e1251b"
-                size="25"
                 class="close"
-                type="ios-close-circle"
-              />
+                :size="25"
+                color="#e1251b"
+              >
+                <CircleClose />
+              </el-icon>
             </div>
           </draggable>
         </div>
@@ -73,15 +74,18 @@
   </div>
 </template>
 <script>
+import { CircleClose } from "@element-plus/icons-vue";
 import templates from "./template/index";
 import Draggable from "vuedraggable";
 import { modelData } from "./config";
 import decorate from "./decorate";
-import * as API_Other from '@/api/other'
+import * as API_Other from "@/api/other";
+import * as API_Promotions from "@/api/promotion";
 export default {
   components: {
     Draggable,
     decorate,
+    CircleClose,
   },
   data() {
     return {
@@ -89,10 +93,12 @@ export default {
       modelData, // 装修模型
       qrcode: "", // 二维码
       selected: 0, // 已选下标
-      contentData: { // 总数据
+      contentData: {
+        // 总数据
         list: [],
       },
       decorateData: "", // 装修数据
+      decoratePromotionsData: "", // 装修数据
     };
   },
   watch: {
@@ -108,16 +114,10 @@ export default {
   },
 
   methods: {
-
-    enableBindGoodsShow(){
-
-    },
-
-
     // 初始化数据
     init() {
-       // 先读缓存，如果缓存有值则读缓存。
-       const cache = this.getStore('sellerMobilePageCache')
+      // 先读缓存，如果缓存有值则读缓存。
+      const cache = this.getStore('managerMobilePageCache')
         if(cache){
           this.$Modal.confirm({
           title: '提示',
@@ -132,12 +132,13 @@ export default {
 
         }
       if (!this.$route.query.id) return false;
-      API_Other.getHomeData(this.$route.query.id).then(res=>{
-        this.contentData = JSON.parse(res.result.pageData)
 
+      API_Other.getHomeData(this.$route.query.id).then((res) => {
+        this.contentData = JSON.parse(res.result.pageData);
+
+        this.handleComponent(this.contentData.list[0], 0);
+      });
 
-         this.handleComponent( this.contentData.list[0], 0)
-      })
     },
 
     // 中间组件拖动，右侧数据绑定不变
@@ -151,7 +152,6 @@ export default {
       this.$nextTick(() => {
         this.decorateData = "";
 
-
         // 如果当前楼层不为一
         if (this.contentData.list.length > 1) {
           // 如果当前最底层 给下一层赋值
@@ -171,44 +171,96 @@ export default {
 
     // 点击楼层装修
     handleComponent(val, index) {
-
       this.selected = index;
-      this.$set(this, "decorateData", val);
+      this["decorateData"] = val;
     },
     // 右侧栏回调
     handleDrawer(val) {
-
       let newIndex = this.selected;
+      if (val.promotionsType) {
+        if (this.contentData.list[newIndex].options.list.length >= 2) {
+          this.$Message.error("最多只能展示两个活动");
+          return;
+        }
+        if (val.promotionsType === "LIVE") {
+          API_Promotions.getLiveList({
+            status: "START",
+            pageSize: 1,
+          }).then((res) => {
+            if (res.success && res.result.size > 0) {
+              API_Promotions.getLiveInfo(res.result.records[0].id).then(
+                (res) => {
+                  if (res.success) {
+                    this.contentData.list[newIndex].options.list.push({
+                      type: val.promotionsType,
+                      title: val.name,
+                      title1: val.subName,
+                      color1: val.subColor,
+                      bk_color: val.subBkColor,
+                      data: res.result.commodityList
+                        ? res.result.commodityList.splice(0, 2)
+                        : [],
+                    });
+                  }
+                }
+              );
+            }
+          });
+        } else {
+          API_Promotions.getAllPromotion().then((res) => {
+            let exist = this.contentData.list[newIndex].options.list.find(
+              (i) => i.type === val.promotionsType
+            );
 
-      this.decorateData = "";
+            if (res.success && !exist) {
+              this.contentData.list[newIndex].options.list.push({
+                data: res.result[val.promotionsType]
+                  ? res.result[val.promotionsType].splice(0, 2)
+                  : [],
+                type: val.promotionsType,
+                title1: val.subName,
+                color1: val.subColor,
+                bk_color: val.subBkColor,
+                title: val.name,
+              });
+            }
+          });
+        }
+        this.contentData.list[newIndex] = {
+          ...val,
+          options: {
+            ...this.contentData.list[newIndex].options,
+          },
+          model: val.type,
+        };
+      } else {
+        this.decorateData = "";
 
-      this.$set(this.contentData.list, newIndex, {
-        ...val,
-        options: {
-          ...val.options,
-        },
-
-        // 绑定键值
-        model: val.type,
-      });
-      this.contentData.list = JSON.parse(JSON.stringify(this.contentData.list));
-
-      this.$set(this, "decorateData", this.contentData.list[newIndex]);
+        this.contentData.list[newIndex] = {
+          ...val,
+          options: {
+            ...val.options,
+          },
+          model: val.type,
+        };
+        this.contentData.list = JSON.parse(
+          JSON.stringify(this.contentData.list)
+        );
+        this["decorateData"] = this.contentData.list[newIndex];
+      }
     },
 
     // 封装拖拽参数
     package(val, newIndex) {
       this.contentData.list[newIndex] = "";
       val = JSON.parse(JSON.stringify(val));
-      this.$set(this.contentData.list, newIndex, {
+      this.contentData.list[newIndex] = {
         ...val,
         options: {
           ...val.options,
         },
-
-        // 绑定键值
         model: val.type,
-      });
+      };
     },
     // 拖动
     handleContentlAdd(evt) {

seller/src/views/shop/wap/main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="box">
     <!-- 顶部栏 -->
-    <navbar @selected="selected" />
+    <navbar @selected="selected" :pagetype="pagetype" />
 
     <component :is="layout[name]"></component>
   </div>
@@ -11,16 +11,28 @@ import layout from "./index";
 import navbar from "./navbar";
 export default {
   components: {
-    navbar,
+    navbar
   },
+
   data() {
     return {
       layout, // 装修模块
       name: "index", // 装修的页面
+      pagetype: "INDEX",
     };
   },
+  mounted() {
+    if (this.$route.query.pagetype == "ALERT") {
+      this.name = "alertAdvertising";
+    }
+    if (this.$route.query.pagetype == "OPEN_SCREEN_ANIMATION") {
+      this.name = "advertising";
+    }
+    this.pagetype = this.$route.query.pagetype;
+  },
   methods: {
-    selected(val) { // 顶部栏点击切换
+    selected(val) {
+      // 顶部栏点击切换
       this.name = val;
     }
   }

seller/src/views/shop/wap/navbar.vue

@@ -3,55 +3,56 @@
   <div class="model-title">
     <div>店铺装修</div>
     <div class="btns">
-      <Button
+      <el-button
         @click="clickBtn(item)"
         size="small"
         v-for="(item, index) in way"
         :key="index"
         :type="item.selected ? 'primary' : ''"
-      >
-        {{ item.title }}
-      </Button>
+      >{{ item.title }}</el-button>
     </div>
     <div class="model-title-view-btn">
       <!-- TODO 后期会补全 目前版本暂无 -->
       <!-- <Poptip placement="bottom" width="100">
-        <Button size="default" @click="creatQrCode">预览模板</Button>
-        <div slot="content" class="default-view-content">
+        <el-button size="default" @click="creatQrCode">预览模板</el-button>
+        <template #content><div class="default-view-content">
           <div>临时预览</div>
           <div ref="qrCodeUrl"></div>
         </div>
-      </Poptip> -->
-      <Button size="default" type="default" v-if="hasCache" @click="clearCache">清空本地缓存</Button>
-      <Button size="default" type="primary" @click="handleSpinShow">保存模板</Button>
+      </template></el-popconfirm>-->
+      <el-button size="default" type="default" v-if="hasCache" @click="clearCache">清空本地缓存</el-button>
+      <el-button size="default" type="primary" @click="handleSpinShow">保存模板</el-button>
 
-      <Modal
+      <el-dialog
         title="保存中"
         v-model="saveDialog"
-        :closable="true"
-        :mask-closable="false"
-        :footer-hide="true"
+        :show-close="true"
+        :close-on-click-modal="false"
+        append-to-body
+        destroy-on-close
       >
         <div v-if="progress">
           <div class="model-item">
-            模板名称 <Input style="width: 200px" v-model="submitWay.name" />
+            模板名称
+            <el-input style="width: 200px" v-model="submitWay.name" />
           </div>
           <div class="model-item">
             是否立即发布
-            <i-switch v-model="submitWay.pageShow">
-              <span slot="open">开</span>
-              <span slot="close">关</span>
-            </i-switch>
+            <el-switch
+              v-model="submitWay.pageShow"
+              active-text="开"
+              inactive-text="关"
+            />
           </div>
           <div class="model-item">
             将当前装修内容写入到本地缓存中，下次进入页面时可继续使用
-            <Button type="small" @click="witeLocalStore">写入</Button>
+            <el-button type="small" @click="witeLocalStore">写入</el-button>
           </div>
 
-          <Button type="primary" @click="save()">保存</Button>
+          <el-button type="primary" @click="save()">保存</el-button>
         </div>
-        <Progress v-else :percent="num" status="active" />
-      </Modal>
+        <el-progress v-else :percentage="num" status="success" />
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -59,6 +60,7 @@
 import * as API_Other from "@/api/other.js";
 
 export default {
+  props: ["pagetype"],
   data() {
     return {
       hasCache:false, // 是否有缓存
@@ -72,40 +74,57 @@ export default {
           name: "index",
           selected: true,
         },
-        // {
-        //   title: "全屏广告",
-        //   name: "advertising",
-        //   selected: false,
-        // },
-        // {
-        //   title: "弹窗广告",
-        //   name: "alertAdvertising",
-        //   selected: false,
-        // },
+        {
+          title: "全屏广告",
+          name: "advertising",
+          selected: false,
+        },
+        {
+          title: "弹窗广告",
+          name: "ALERT",
+          selected: false,
+        },
       ],
 
       submitWay: {
         // 表单信息
         pageShow: this.$route.query.type || false,
         name: this.$route.query.name || "模板名称",
-        pageClientType: "H5",
-      },
+        pageClientType: "H5"
+      }
     };
   },
-  watch: {},
+  watch: {
+    pagetype: {
+      handler(val) {
+        this.way.length = 0;
+        if (val == "INDEX") {
+          this.way.push({ title: "首页", name: "index", selected: true });
+        } else if (val == "SPECIAL") {
+          this.way.push({ title: "专题", name: "special", selected: true });
+        } else if (val == "ALERT") {
+          this.way.push({ title: "开屏广告", name: "alert", selected: true });
+        }else if (val == "OPEN_SCREEN_ANIMATION") {
+          this.way.push({ title: "app开屏页面", name: "OPEN_SCREEN_ANIMATION", selected: true });
+        }
+      },
+      immediate: true,
+    },
+  },
   mounted() {
-    this.hasCache = this.getStore('sellerMobilePageCache') ? true : false;
+    this.hasCache = this.getStore('managerMobilePageCache') ? true : false;
   },
   methods: {
     clearCache(){
-      this.setStore('sellerMobilePageCache','');
+      this.setStore('managerMobilePageCache','');
       this.$Message.success('清空成功')
     },
     // 将楼层装修的内容写入到本地缓存中
     witeLocalStore(){
-      this.setStore('sellerMobilePageCache', this.$store.state.styleStore)
+      this.setStore('managerMobilePageCache', this.$store.state.styleStore)
       this.$Message.success('写入成功')
     },
+
     clickBtn(val) {
       this.way.forEach((item, index) => {
         item.selected = false;
@@ -123,7 +142,10 @@ export default {
 
     // 填写是否发布，模板名称之后保存
     save() {
-      if (this.$store.state.styleStore == void 0) {
+       if (
+        this.$store.state.styleStore == void 0 &&
+        (this.$route.query.pagetype && this.$route.query.pagetype != 'ALERT' &&  this.$route.query.pagetype != 'OPEN_SCREEN_ANIMATION')
+      ) {
         this.$Message.error("请装修楼层");
         return false;
       }
@@ -133,21 +155,76 @@ export default {
         : (this.submitWay.pageShow = "CLOSE");
 
       this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
-      this.submitWay.pageType = "STORE";
+      this.submitWay.pageType = "INDEX";
+      this.submitWay.pageType =  this.$route.query.pagetype ||  "INDEX";
+      // this.submitWay.pageType = this.pagetype;
 
-      this.$route.query.id ? this.update() : this.submit(this.submitWay);
+      if (this.$route.query.pagetype == 'ALERT' || this.$route.query.pagetype == 'OPEN_SCREEN_ANIMATION') {
+        this.update(this.submitWay);
+      } else {
+        this.$route.query.id ? this.updateHome() : this.submit(this.submitWay);
+      }
+
+      // this.$route.query.id ? this.update() : this.submit(this.submitWay);
     },
 
     // 更新
-    update() {
+    updateHome() {
       this.progress = false;
       API_Other.updateHome(this.$route.query.id, {
         pageData: JSON.stringify(this.$store.state.styleStore),
         name: this.submitWay.name,
         pageShow: this.submitWay.pageShow,
-        pageType: "STORE",
+        pageType: this.submitWay.pageType,
         pageClientType: "H5",
       })
+        .then(res => {
+          this.num = 50;
+          if (res.success) {
+            this.num = 80;
+            /**制作保存成功动画¸ */
+            setTimeout(() => {
+              this.saveDialog = false;
+              this.$Message.success("修改成功");
+              this.goBack();
+            }, 1000);
+          } else {
+            this.saveDialog = false;
+            this.$Message.error("修改失败，请稍后重试");
+          }
+          console.log(res);
+        })
+        .catch(error => {});
+    },
+
+
+    // 更新
+    update(submitWay) {
+      console.log(this.$store.state.openStyleStore[0], "123123123");
+      if (this.$store.state.openStyleStore == void 0) {
+        this.$Message.error("请装修楼层!");
+        return false;
+      }
+      this.progress = false;
+
+      let id = this.$route.query.id;
+      const pagetype = this.$route.query.pagetype;
+      console.log(this.$store.state.openStyleStore, submitWay);
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[pagetype ? pagetype : "INDEX"];
+
+      if (pagetype) {
+        submitWay.pageData = JSON.stringify(
+          this.$store.state.openStyleStore[0]
+        );
+        submitWay.pageType = pageType;
+        id = this.$store.state.openStoreId;
+      }
+
+      API_Other.updateHome(id, submitWay)
         .then((res) => {
           this.num = 50;
           if (res.success) {
@@ -156,18 +233,21 @@ export default {
             setTimeout(() => {
               this.saveDialog = false;
               this.$Message.success("修改成功");
-              this.goback();
+              this.goBack();
             }, 1000);
           } else {
             this.saveDialog = false;
             this.$Message.error("修改失败，请稍后重试");
           }
+          console.log(res);
         })
         .catch((error) => {});
     },
 
+
+
     // 返回查询数据页面
-    goback() {
+    goBack() {
       this.$router.go(-1);
     },
 
@@ -175,7 +255,7 @@ export default {
     submit(submitWay) {
       this.progress = false;
       API_Other.setHomeSetup(submitWay)
-        .then((res) => {
+        .then(res => {
           this.num = 50;
           if (res.success) {
             this.num = 80;
@@ -183,17 +263,18 @@ export default {
             setTimeout(() => {
               this.saveDialog = false;
               this.$Message.success("保存成功");
-              this.goback();
+              this.goBack();
             }, 1000);
           } else {
             this.progress = true;
             this.saveDialog = false;
             this.$Message.error("保存失败，请稍后重试");
           }
+          console.log(res);
         })
-        .catch((error) => {});
-    },
-  },
+        .catch(error => {});
+    }
+  }
 };
 </script>
 <style scoped lang="scss">

seller/src/views/shop/wap/style.scss

@@ -84,7 +84,7 @@
   text-align: center;
   font-weight: bold;
   line-height: 2;
-  ::v-deep img {
+  :deep(img) {
     margin: 0 auto;
   }
 }

seller/src/views/shop/wap/template/tpl_banner.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="layout">
-    <Carousel class="carousel" v-if="res"  autoplay :autoplay-speed="5000">
-      <CarouselItem v-for="(item, index) in res.list" :key="index">
+    <el-carousel class="carousel" v-if="res" autoplay :interval="5000" height="150px">
+      <el-carousel-item v-for="(item, index) in res.list" :key="index">
         <div>
           <img class="image-mode" :src="item.img" />
         </div>
-      </CarouselItem>
-    </Carousel>
+      </el-carousel-item>
+    </el-carousel>
   </div>
 </template>
 <script>
@@ -16,7 +16,7 @@ export default {
   watch: {
     res: {
       handler(newValue, oldValue) {
-          this.$set(this,'res',newValue);
+          this['res'] = newValue;
       },
       deep: true
     }

seller/src/views/shop/wap/template/tpl_flex_one.vue

@@ -15,7 +15,6 @@ export default {
 .flex-one{
     width: 100%;
     display: block;
-    height: 110px;
     overflow: hidden;
     >img{
         width: 100%;

seller/src/views/shop/wap/template/tpl_goods.vue

@@ -24,13 +24,14 @@
         :key="item_index"
       >
         <div class="goods-img">
-          <Icon
-            size="20"
+          <el-icon
+            :size="20"
             color="#e1251b"
             @click="closeGoods(item, item_index)"
             class="goods-icon"
-            type="ios-close-circle"
-          />
+          >
+            <CircleClose />
+          </el-icon>
           <img :src="item.img" alt />
         </div>
         <div class="goods-desc">
@@ -38,7 +39,7 @@
             {{ item.title }}
           </div>
           <div class="goods-bottom">
-            <div class="goods-price">￥{{ item.price | unitPrice }}</div>
+            <div class="goods-price">￥{{ $filters.unitPrice(item.price) }}</div>
           </div>
         </div>
       </div>
@@ -46,7 +47,9 @@
   </div>
 </template>
 <script>
+import { CircleClose } from "@element-plus/icons-vue";
 export default {
+  components: { CircleClose },
   data() {
     return {
       selected: {
@@ -98,7 +101,7 @@ export default {
   padding: 10px;
   transition: 0.35s;
   display: flex;
-  cursor: pointer;
+  // cursor: pointer;
   > .goods-item-title {
     flex: 1;
     text-align: center;

seller/src/views/shop/wap/template/tpl_menu.vue

@@ -1,38 +1,39 @@
 <template>
-    <div class="layout">
-        <div class="menu-list">
-            <div class="menu-item" v-for="(item,index) in res.list" :key="index">
-                <div>
-                    <img class="menu-img" :src="item.img" alt="">
-                </div>
-                <div class="menu-title">{{item.title}}</div>
-            </div>
+  <div class="layout">
+    <div class="menu-list">
+      <div class="menu-item" v-for="(item, index) in res.list" :key="index">
+        <div>
+          <img class="menu-img" :src="item.img" alt="" />
         </div>
+        <div class="menu-title">{{ item.title }}</div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    props:['res']
-}
+  props: ["res"],
+};
 </script>
 <style lang="scss" scoped>
-   @import "./tpl.scss";
-   .menu-list{
-       display: flex;
-       align-items: center;
-       flex-wrap: wrap;
+@import "./tpl.scss";
+.menu-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 
-       >.menu-item{
-           text-align: center;
-           width: 20%;
-           margin:10px 0;
-       }
-   }
-   .menu-img{
-       width: 44px;
-       height: 44px;
-   }
-   .menu-title{
-       font-size: 12px;
-   }
+  > .menu-item {
+    text-align: center;
+    width: 20%;
+    margin: 10px 0;
+  }
+}
+.menu-img {
+  width: 44px;
+  height: 44px;
+}
+.menu-title {
+  font-size: 12px;
+}
 </style>

seller/src/views/shop/wap/template/tpl_search.vue

@@ -1,12 +1,14 @@
 <template>
     <div class="layout">
         <div class="search">
-            <Icon type="ios-search" />{{res.list[0].title}}
+            <el-icon><Search /></el-icon>{{res.list[0].title}}
         </div>
     </div>
 </template>
 <script>
+import { Search } from "@element-plus/icons-vue";
 export default {
+    components: { Search },
     props: ['res']
 }
 </script>

seller/src/views/shop/wap/template/tpl_title.vue

@@ -1,9 +1,26 @@
 <template>
-  <div class="layout">
-    <div class="background">
+  <div class="layout" :style="{ textAlign: res.list[0].textAlign }">
+    <div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
       <div class="title" :style="{ color: res.list[0].color }">
         {{ res.list[0].title }}
       </div>
+      <div
+        style="
+          position: absolute;
+          right: 10px;
+          top: 2px;
+          color: #fff;
+          line-height: 42px;
+          font-size: 10px;
+        "
+      >
+        <a
+          :href="res.list[0].url"
+          :style="{ color: res.list[0].color1 }"
+          style="text-decoration: none"
+          >{{ res.list[0].title1 }}</a
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -11,13 +28,14 @@
 <script>
 export default {
   title: "标题栏",
-  props: ["res"]
+  props: ["res"],
 };
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .background {
-  background: url("../../../../assets/title.png") no-repeat;
+  background-color: rgb(255, 87, 62);
+  /*background: url("../../../../assets/title.png") no-repeat;*/
   position: absolute;
   z-index: 2;
   width: 100%;
@@ -37,7 +55,8 @@ export default {
 }
 .title {
   line-height: 42px;
-  font-size: 15px;
+  font-size: 18px;
   font-weight: bold;
+  margin-left: 4px;
 }
 </style>

seller/src/views/shop/wap/wapList.vue

@@ -1,119 +1,126 @@
 <template>
-  <div class="wrapper">
-
-    <Card class="content">
-      <Button type="primary" @click="handleAdd()">添加页面</Button>
-      <div class="list">
-        <Spin size="large" fix v-if="loading"></Spin>
-        <div class="item item-title" >
-          <div>页面名称</div>
-          <div class="item-config">
-            <div>状态</div>
-            <div>操作</div>
-          </div>
-        </div>
-
-        <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="changeSwitch(item)">
-              <span slot="open">开</span>
-              <span slot="close">关</span>
-            </i-switch>
-            <a
-              style="color:#2d8cf0;cursor:pointer;text-decoration:none"
-              @click="handleEdit(item)"
-            >修改</a>
-            <span style="margin: 0 8px; color: #dcdee2">|</span>
-            <Poptip confirm title="删除此模板？" @on-ok="handleDel(item)" >
-              <a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
-            </Poptip>
-          </div>
-        </div>
-        <div class="no-more" v-if="list.length ==0">暂无更多模板</div>
+  <div class="search">
+    <el-card shadow="never">
+      <el-tabs v-model="params.pageType" class="page-type-tabs" @tab-change="handleTabChange">
+        <el-tab-pane
+          v-for="typeItem in pageTypes"
+          :key="typeItem.type"
+          :name="typeItem.type"
+          :label="typeItem.title"
+        />
+      </el-tabs>
+      <div class="operation mb_10">
+        <el-button type="primary" @click="handleAdd()">添加页面</el-button>
       </div>
-      <Page :total="total" size="small" @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" show-sizer  :page-size-opts="[20, 50, 100]" @on-page-size-change="changePageSize"/>
-
-    </Card>
-
+      <el-table v-loading="loading" :data="list" style="width: 100%">
+        <el-table-column prop="name" label="页面名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row">{{ row.name || "暂无模板昵称" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="120" align="center">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              v-model="row.pageShow"
+              inline-prompt
+              active-text="开"
+              inactive-text="关"
+              @change="changeSwitch(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="140" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="handleEdit(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="confirmDel(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
+          :total="total"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          background
+          @current-change="changePageNum"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
-
 </template>
 <script>
 import * as API_Other from "@/api/other.js";
 export default {
-  // components: {region},
   data() {
     return {
-      selectedIndex: 0, // 装修那个页面的下标
-      columns: [ // 表头
-        {
-          title: "页面名称",
-          key: "name",
-        },
-        {
-          title: "状态",
-        },
-        {
-          title: "操作",
-          key: "action",
-        },
+      loading: false,
+      pageTypes: [
+        { type: "INDEX", title: "首页" },
+        { type: "SPECIAL", title: "专题" },
       ],
-
-      loading: false, // 加载状态
-
-      params: { // 请求参数
+      params: {
         pageNumber: 1,
         pageSize: 20,
         sort: "createTime",
         order: "desc",
-        pageType: "STORE",
+        pageType: "INDEX",
         pageClientType: "H5",
       },
-      total: 0, // 页面数量
-      list: [], // 总数据
+      total: 0,
+      list: [],
     };
   },
-  watch: {
-    params: {
-      handler(val) {
-        // this.pageNumber++;
-        this.init();
-      },
-      deep: true,
-    },
-  },
   mounted() {
     this.init();
   },
   methods: {
-    // 切换tab
-    clickType(val,index) {
-      this.params.pageNumber = 1
-      this.selectedIndex = index
+    handleTabChange(val) {
+      if (val == "ALERT") {
+        this.$router.push({
+          path: "/floorList/main",
+          query: { pagetype: val },
+        });
+        return;
+      }
+      if (val == "OPEN_SCREEN_ANIMATION") {
+        this.$router.push({
+          path: "/floorList/main",
+          query: { pagetype: val },
+        });
+        return;
+      }
+      this.params.pageNumber = 1;
       this.params.pageType = val;
+      this.init();
+    },
+
+    changePageNum(val) {
+      this.params.pageNumber = val;
+      this.init();
     },
-    // 是否发布
     changeSwitch(item) {
       this.loading = true;
       API_Other.releasePageHome(item.id).then((res) => {
+        this.loading = false;
         if (res.result) {
-          this.loading = false;
           this.$Message.success("发布成功");
           this.init();
         }
-
-        this.init();
-
-        this.loading = false;
       });
     },
-    // 初始化数据
     init() {
       this.loading = true;
       API_Other.getHomeList(this.params).then((res) => {
-        if (!res.result) return false;
         this.loading = false;
+        if (!res.result) return false;
         res.result.records.forEach((item) => {
           if (item.pageShow == "OPEN") {
             item.pageShow = true;
@@ -125,95 +132,50 @@ export default {
         this.total = res.result.total;
       });
     },
-    // 装修楼层
     handleEdit(val) {
       this.$router.push({
         path: "/floorList/main",
-        query: { id: val.id, name: val.name, type: val.pageShow },
+        query: {
+          id: val.id,
+          name: val.name,
+          type: val.pageShow,
+          pagetype: this.params.pageType,
+        },
       });
     },
-    // 添加模板
     handleAdd() {
       this.$router.push({
         path: "/floorList/main",
+        query: { pagetype: this.params.pageType },
       });
     },
-     // 分页 改变页数
-     changePageSize(v) {
+    changePageSize(v) {
       this.params.pageNumber = 1;
       this.params.pageSize = v;
       this.init();
     },
-    // 删除模板
+    confirmDel(row) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "删除此模板？",
+        onOk: () => this.handleDel(row),
+      });
+    },
     handleDel(val) {
       this.loading = true;
       API_Other.removePageHome(val.id).then((res) => {
+        this.loading = false;
         if (res.result) {
-          this.loading = false;
           this.init();
           this.$Message.success("删除成功");
         }
-
-        this.loading = false;
       });
     },
   },
 };
 </script>
 <style scoped lang="scss">
-.category-item {
-  cursor: pointer;
-  padding: 4px;
-}
-.active {
-  background: #ededed;
-}
-.item-title {
-  background: #d7e7f5!important;
-  height: 54px;
-}
-.no-more {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wrapper {
-  background: #fff;
-  padding: 20px;
-  display: flex;
-}
-.category {
-  flex: 2;
-}
-.content {
-  flex: 8;
-}
-* {
-  margin: 5px;
-}
-.list {
-  min-height: 600px;
-  position: relative;
-}
-.item:nth-of-type(2) {
-  margin: 0 5px;
-}
-.item {
-  width: 100% !important;
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  > .item-config {
-    width: 180px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-  }
-}
-.item:nth-of-type(2n+1) {
-  background: #f5f7fa;
+.page-type-tabs {
+  margin-bottom: 16px;
 }
 </style>