commit message

manager/src/views/Main.vue

@@ -0,0 +1,217 @@
+<style lang="scss">
+@import "./main.scss";
+</style>
+
+<template>
+  <div class="main">
+    <!-- 左侧菜单 -->
+    <div class="sidebar-menu-con menu-bar">
+      <div class="logo-con">
+        <img src="../assets/logo.png" key="max-logo" />
+      </div>
+      <shrinkable-menu></shrinkable-menu>
+    </div>
+    <!-- 顶部标题栏主体 -->
+    <div class="main-header-con" style="padding-left:240px">
+      <div class="main-header">
+        <div :class="{'header-avator-con':navType!=4, 'header-avator-con nav4':navType == 4}">
+          <!-- 通知消息 -->
+          <message-tip v-if="tipsMessage" :res="tipsMessage"></message-tip>
+          <!-- 用户头像 -->
+          <div class="user-dropdown-menu-con">
+
+            <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
+              <Dropdown transfer trigger="hover" @on-click="handleClickUserDropdown">
+                <div class="dropList">
+                  <span class="main-user-name">{{ userInfo.nickName }}</span>
+                  <Icon type="md-arrow-dropdown" />
+                  <Avatar :src="avatarPath" style="background: #fff;margin-left: 10px;"></Avatar>
+                </div>
+                <DropdownMenu slot="list">
+                  <DropdownItem name="personalCenter">{{ $t('userCenter') }}</DropdownItem>
+                  <DropdownItem name="changePass">{{ $t('changePass') }}</DropdownItem>
+                  <DropdownItem name="loginOut" divided>{{ $t('logout') }}</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            </Row>
+          </div>
+        </div>
+      </div>
+      <!-- 已打开的页面标签 -->
+      <div class="tags-con">
+        <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
+      </div>
+    </div>
+    <div class="single-page-con">
+      <div class="single-page">
+        <!-- <keep-alive :include="cachePage"> -->
+        <router-view></router-view>
+        <!-- </keep-alive> -->
+      </div>
+    </div>
+    <!-- 全局加载动画 -->
+    <circleLoading class="loading-position" v-show="loading" />
+  </div>
+</template>
+
+<script>
+import shrinkableMenu from "./main-components/shrinkable-menu/shrinkable-menu.vue";
+import tagsPageOpened from "./main-components/tags-page-opened.vue";
+import breadcrumbNav from "./main-components/breadcrumb-nav.vue";
+import fullScreen from "./main-components/fullscreen.vue";
+import messageTip from "./main-components/message-tip.vue";
+import circleLoading from "@/views/my-components/lili/circle-loading.vue";
+import Cookies from "js-cookie";
+import util from "@/libs/util.js";
+import { getNoticePage } from "@/api/index";
+
+var client;
+export default {
+  components: {
+    shrinkableMenu,
+    tagsPageOpened,
+    breadcrumbNav,
+    fullScreen,
+    messageTip,
+    circleLoading,
+  },
+  data() {
+    return {
+      sliceNum: 5,
+      userInfo: "",
+      userId: "",
+      openedSubmenuArr: this.$store.state.app.openedSubmenuArr,
+      firstThreeNav: [],
+      lastNav: [],
+      navType: 1,
+      tipsMessage: "",
+    };
+  },
+  computed: {
+    loading() {
+      return this.$store.state.app.loading;
+    },
+    pageTagsList() {
+      return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
+    },
+    avatarPath() {
+      return localStorage.avatorImgPath;
+    },
+    cachePage() {
+      return this.$store.state.app.cachePage;
+    },
+    lang() {
+      return this.$store.state.app.lang;
+    },
+    mesCount() {
+      return 0;
+    },
+  },
+
+  methods: {
+    init() {
+      // 菜单初始化
+      let pathArr = util.setCurrentPath(this, this.$route.name);
+      if (pathArr.length >= 2) {
+        this.$store.commit("addOpenSubmenu", pathArr[1].name);
+      }
+      let userInfo = JSON.parse(Cookies.get("userInfo"));
+
+      this.userInfo = userInfo;
+      this.userId = userInfo.id;
+      this.checkTag(this.$route.name);
+      let currWidth = document.body.clientWidth;
+      if (currWidth <= 1200) {
+        this.sliceNum = 2;
+      }
+      // 读取未读消息数
+      getNoticePage({}).then((res) => {
+        if (res.success) {
+          this.tipsMessage = res.result;
+
+          this.$store.state.notices = res.result;
+        }
+      });
+    },
+    //用户头像下方抽屉点击
+    handleClickUserDropdown(name) {
+      //个人中心
+      if (name === "personalCenter") {
+        util.openNewPage(this, "personal-center");
+        this.$router.push({
+          name: "personal-center",
+        });
+      }
+      //修改密码
+      else if (name === "changePass") {
+        util.openNewPage(this, "change-password");
+        this.$router.push({
+          name: "change_password",
+        });
+      }
+      // 退出登录
+      else if (name === "loginOut") {
+        Cookies.set("accessToken", "");
+        this.$store.commit("logout", this);
+        this.$store.commit("clearOpenedSubmenu");
+        this.setStore("accessToken", "");
+        this.setStore("refreshToken", "");
+        this.$router.push({ path: "/login" });
+      }
+    },
+    //切换标签
+    checkTag(name) {
+      let openpageHasTag = this.pageTagsList.some((item) => {
+        if (item.name == name) {
+          return true;
+        }
+      });
+      if (!openpageHasTag) {
+        //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
+        util.openNewPage(
+          this,
+          name,
+          this.$route.params || {},
+          this.$route.query || {}
+        );
+      }
+    },
+    //宽度动态计算
+    resize() {
+      let currWidth = document.body.clientWidth;
+      let count = currWidth / 300;
+      if (count > 6) {
+        this.sliceNum = 6;
+      } else {
+        this.sliceNum = count;
+      }
+    },
+  },
+  watch: {
+    $route(to, from) {
+      this.$store.commit("setCurrentPageName", to.name);
+      let pathArr = util.setCurrentPath(this, to.name);
+      if (pathArr.length > 2) {
+        this.$store.commit("addOpenSubmenu", pathArr[1].name);
+      }
+      this.checkTag(to.name);
+      localStorage.currentPageName = to.name;
+    },
+    lang() {
+      util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
+    },
+  },
+  mounted() {
+    this.init();
+    let that = this;
+    this.resize();
+    window.addEventListener("resize", function () {
+      that.resize();
+    });
+  },
+  created() {
+    // 显示打开的页面的列表
+    this.$store.commit("setOpenedList");
+  },
+};
+</script>

manager/src/views/change-password/change-password.vue

@@ -0,0 +1,168 @@
+
+
+<template>
+  <div>
+    <Card class="change-pass">
+      <p slot="title">
+        <Icon type="key"></Icon>
+        修改密码
+      </p>
+      <div>
+        <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right" :rules="passwordValidate" style="width:450px">
+          <FormItem label="原密码" prop="oldPass">
+            <Input type="password" v-model="editPasswordForm.oldPassword" placeholder="请输入现在使用的密码"></Input>
+          </FormItem>
+          <FormItem label="新密码" prop="newPass">
+            <SetPassword  v-model="editPasswordForm.newPassword" @on-change="changeInputPass" />
+          </FormItem>
+          <FormItem label="确认新密码" prop="rePass">
+            <Input type="password" v-model="editPasswordForm.rePassword" placeholder="请再次输入新密码"></Input>
+          </FormItem>
+          <FormItem>
+            <Button type="primary" style="width: 100px;margin-right:5px" :loading="savePassLoading" @click="saveEditPass">保存
+            </Button>
+            <Button @click="cancelEditPass">取消</Button>
+          </FormItem>
+        </Form>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script>
+import SetPassword from "@/views/my-components/lili/set-password";
+import { changePass } from "@/api/index";
+
+export default {
+  name: "change-password",
+  components: {
+    SetPassword,
+  },
+  data() {
+    const valideRePassword = (rule, value, callback) => {
+      if (value !== this.editPasswordForm.newPassword) {
+        callback(new Error("两次输入密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      savePassLoading: false,
+      editPasswordForm: {
+        oldPassword: "",
+        newPassword: "",
+        rePassword: "",
+      },
+      strength: "",
+      passwordValidate: {
+        oldPassword: [
+          {
+            required: true,
+            message: "请输入原密码",
+            trigger: "blur",
+          },
+        ],
+        newPassword: [
+          {
+            required: true,
+            message: "请输入新密码",
+            trigger: "blur",
+          },
+          {
+            min: 6,
+            message: "请至少输入6个字符",
+            trigger: "blur",
+          },
+          {
+            max: 32,
+            message: "最多输入32个字符",
+            trigger: "blur",
+          },
+        ],
+        rePassword: [
+          {
+            required: true,
+            message: "请再次输入新密码",
+            trigger: "blur",
+          },
+          {
+            validator: valideRePassword,
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    changeInputPass(v, grade, strength) {
+      this.strength = strength;
+    },
+    saveEditPass() {
+      let params = {
+        password: this.md5(this.editPasswordForm.oldPassword),
+        newPassword: this.md5(this.editPasswordForm.newPassword),
+        passStrength: this.md5(this.strength),
+      };
+      this.$refs["editPasswordForm"].validate((valid) => {
+        if (valid) {
+          this.savePassLoading = true;
+          changePass(params).then((res) => {
+            this.savePassLoading = false;
+            if (res.success) {
+              this.$Modal.success({
+                title: "修改密码成功",
+                content: "修改密码成功，需重新登录",
+                onOk: () => {
+                  this.$store.commit("logout", this);
+                  this.$store.commit("clearOpenedSubmenu");
+                  this.$router.push({
+                    name: "login",
+                  });
+                },
+              });
+            }
+          });
+        }
+      });
+    },
+    cancelEditPass() {
+      this.$store.commit("removeTag", "change_password");
+      localStorage.pageOpenedList = JSON.stringify(
+        this.$store.state.app.pageOpenedList
+      );
+      let lastPageName = "";
+      let length = this.$store.state.app.pageOpenedList.length;
+      if (length > 1) {
+        lastPageName = this.$store.state.app.pageOpenedList[length - 1].name;
+      } else {
+        lastPageName = this.$store.state.app.pageOpenedList[0].name;
+      }
+      this.$router.push({
+        name: lastPageName,
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.change-pass {
+  &-btn-box {
+    margin-bottom: 10px;
+
+    button {
+      padding-left: 0;
+
+      span {
+        color: #2d8cf0;
+        transition: all 0.2s;
+      }
+
+      span:hover {
+        color: #0c25f1;
+        transition: all 0.2s;
+      }
+    }
+  }
+}
+</style>

manager/src/views/distribution/dataJson.js

@@ -0,0 +1,49 @@
+// 分销商状态列表
+export const distributionStatusList= [
+    {
+        value:'APPLY',
+        label:'申请中'
+    },
+    {
+        value:'RETREAT',
+        label:'已清退'
+    },
+    {
+        value:'REFUSE',
+        label:'审核拒绝'
+    },
+    {
+        value:'PASS',
+        label:'审核通过'
+    },
+]
+// 分销佣金状态列表
+export const cashStatusList = [
+    {
+        value:'APPLY',
+        label:'待处理'
+    },
+    {
+        value:'REFUSE',
+        label:'拒绝'
+    },
+    {
+        value:'PASS',
+        label:'通过'
+    }
+]
+// 分销订单状态列表
+export const orderStatusList = [
+    {
+        value:'WAIT_BILL',
+        label:'待结算'
+    },
+    {
+        value:'WAIT_CASH',
+        label:'待提现'
+    },
+    {
+        value:'COMPLETE_CASH',
+        label:'提现完成'
+    }
+]

manager/src/views/distribution/distribution.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="search">
+        <Row>
+            <Col>
+                <Card>
+                    <Row @keydown.enter.native="handleSearch">
+                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+                          <Form-item label="会员名称" prop="memberName">
+                            <Input
+                              type="text"
+                              v-model="searchForm.memberName"
+                              placeholder="请输入会员名称"
+                              clearable
+                              style="width: 200px"
+                            />
+                          </Form-item>
+                            <Form-item label="状态">
+                                <Select v-model="searchForm.distributionStatus" style="width:200px">
+                                    <Option v-for="item in distributionStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                                </Select>
+                            </Form-item>
+                          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+                        </Form>
+                    </Row>
+                    <Row class="padding-row">
+                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
+                    </Row>
+                    <Row type="flex" justify="end" class="page">
+                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.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>
+            </Col>
+        </Row>
+
+    </div>
+</template>
+
+<script>
+    import {
+        getDistributionListData,
+        retreatDistribution,
+        resumeDistribution,
+        auditDistribution,
+    } from "@/api/distribution";
+    import  {distributionStatusList}  from './dataJson.js';
+    export default {
+        name: "distribution",
+        components: {
+        },
+        data() {
+            return {
+                distributionStatusList,
+                openSearch: true, // 显示搜索
+                loading: true, // 表单加载状态
+                searchForm: { // 搜索框初始化对象
+                    pageNumber: 1, // 当前页数
+                    pageSize: 10, // 页面大小
+                },
+                selectList: [], // 多选数据
+                selectCount: 0, // 多选计数
+                columns: [
+                    {
+                        title: "会员名称",
+                        key: "memberName",
+                        minWidth: 120,
+                        tooltip: true
+                    },
+                    {
+                        title: "推广单数",
+                        key: "orderNum",
+                        minWidth: 120,
+                        width: 150,
+                    },
+                    {
+                        title: "分销金额",
+                        key: "rebateTotal",
+                        width: 150,
+                        sortable: false,
+                        render: (h, params) => {
+                            return h('div', this.$options.filters.unitPrice(params.row.rebateTotal, '￥'))
+                        }
+                    },
+                    {
+                        title: "可用金额",
+                        key: "canRebate",
+                        width: 150,
+                        sortable: false,
+                        render: (h, params) => {
+                            return h('div', this.$options.filters.unitPrice(params.row.rebateTotal, '￥'))
+                        }
+                    },
+                    {
+                        title: "冻结金额",
+                        key: "commissionFrozen",
+                        width: 150,
+                        sortable: false,
+                        render: (h, params) => {
+                            return h('div', this.$options.filters.unitPrice(params.row.rebateTotal, '￥'))
+                        }
+                    },
+                    {
+                        title: "状态",
+                        key: "distributionStatus",
+                        width: 150,
+                        sortable: false,
+                        render: (h, params) => {
+                            if (params.row.distributionStatus == "PASS") {
+                                return h( "Badge", {props: { status: "success",text: "审核通过" } })
+                            } else if (params.row.distributionStatus == "APPLY") {
+                                return h( "Badge", {props: { status: "processing",text: "申请中" } })
+                            } else if (params.row.distributionStatus == "RETREAT") {
+                                return h( "Badge", {props: { status: "warning",text: "已清退" } })
+                            } else if (params.row.distributionStatus == "REFUSE") {
+                                return h( "Badge", {props: { status: "error",text: "审核拒绝" } })
+                            }
+                        }
+                    },
+                    {
+                        title: "操作",
+                        key: "action",
+                        align: "center",
+                        fixed: "right",
+                        width: 140,
+                        render: (h, params) => {
+                            return h("div",{
+                                style:{
+                                    display:'flex',
+                                    justifyContent:'center'
+                                }
+                            },
+                            [
+                                h(
+                                    "Button",
+                                    {
+                                        props: {
+                                            type: "error",
+                                            size: "small"
+                                        },
+                                        style:{marginRight:'5px', display:params.row.distributionStatus!='RETREAT'?'block':'none'},
+                                        on: {
+                                            click: () => {
+                                                this.retreat(params.row);
+                                            }
+                                        }
+                                    },
+                                    "清退"
+                                ),
+                                h(
+                                    "Button",
+                                    {
+                                        props: {
+                                            type: "success",
+                                            size: "small"
+                                        },
+                                        style:{marginRight:'5px', display:params.row.distributionStatus=='RETREAT'?'block':'none'},
+                                        on: {
+                                            click: () => {
+                                                this.resume(params.row);
+                                            }
+                                        }
+                                    },
+                                    "恢复"
+                                )
+                            ]);
+                        }
+                    }
+                ],
+                data: [], // 表单数据
+                total: 0 // 表单数据总数
+            };
+        },
+        methods: {
+            init() {
+                this.getDataList();
+            },
+            see(v) {
+                this.$router.push({
+                    name: "distributionOrder",
+                    query: { id:v.memberId }
+                });
+            },
+            changePage(v) {
+                this.searchForm.pageNumber = v;
+                this.getDataList();
+                this.clearSelectAll();
+            },
+            changePageSize(v) {
+                this.searchForm.pageSize = v;
+                this.getDataList();
+            },
+            handleSearch() {
+                this.searchForm.pageNumber = 1;
+                this.searchForm.pageSize = 10;
+                this.getDataList();
+            },
+
+            clearSelectAll() { // 清空
+                this.$refs.table.selectAll(false);
+            },
+            changeSelect(e) {
+                this.selectList = e;
+                this.selectCount = e.length;
+            },
+
+            getDataList() {
+                this.loading = true;
+                this.searchForm.status = "PASS";
+                // 带多条件搜索参数获取表单数据 请自行修改接口
+                getDistributionListData(this.searchForm).then(res => {
+                    this.loading = false;
+                    if (res.success) {
+                        this.data = res.result.records;
+                        this.total = res.result.total;
+                    }
+                });
+            },
+            // 清退分销商
+            retreat(v) {
+                this.$Modal.confirm({
+                    title: "提示",
+                    // 记得确认修改此处
+                    content: "您确认要清退 " + v.memberName + " ?",
+                    loading: true,
+                    onOk: () => {
+                        // 删除
+                        retreatDistribution(v.id).then(res => {
+                            this.$Modal.remove();
+                            if (res.success) {
+                                this.$Message.success("操作成功");
+                                this.getDataList();
+                            }
+                        });
+                    }
+                });
+            },
+            // 恢复分销商
+            resume(v){
+                this.$Modal.confirm({
+                    title: '提示',
+                    // 记得确认修改此处
+                    content: "您确认要恢复 " + v.memberName + " ?",
+                    loading: true,
+                    onOk: () => {
+                        // 删除
+                        resumeDistribution(v.id).then(res => {
+                            this.$Modal.remove();
+                            if (res.success) {
+                                this.$Message.success("操作成功");
+                                this.getDataList();
+                            }
+                        });
+                    }
+                });
+            }
+        },
+        mounted() {
+            this.init();
+        }
+    };
+</script>
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>

manager/src/views/distribution/distributionApply.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="search">
+        <Row>
+            <Col>
+                <Card>
+                    <Row @keydown.enter.native="handleSearch">
+                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+                          <Form-item label="会员名称" prop="memberName">
+                            <Input
+                              type="text"
+                              v-model="searchForm.memberName"
+                              placeholder="请输入会员名称"
+                              clearable
+                              style="width: 200px"
+                            />
+                          </Form-item>
+                          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+                        </Form>
+                    </Row>
+                    <Row style="margin-top: 10px">
+                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
+                               @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
+                    </Row>
+                    <Row type="flex" justify="end" class="page">
+                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.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>
+            </Col>
+        </Row>
+    </div>
+</template>
+
+<script>
+    import {
+        getDistributionListData,
+        auditDistribution
+    } from "@/api/distribution";
+
+    export default {
+        name: "distributionApply",
+        components: {},
+        data() {
+            return {
+                loading: true, // 表单加载状态
+                searchForm: { // 搜索框初始化对象
+                    pageNumber: 1, // 当前页数
+                    pageSize: 10, // 页面大小
+                    sort: "createTime", // 默认排序字段
+                    order: "desc", // 默认排序方式
+                    startDate: "", // 起始时间
+                    endDate: "" // 终止时间
+                },
+                selectDate: null,
+                form: { // 添加或编辑表单对象初始化数据
+                    memberName: "",
+                },
+                // 表单验证规则
+                submitLoading: false, // 添加或编辑提交状态
+                selectList: [], // 多选数据
+                selectCount: 0, // 多选计数
+                columns: [
+                    {
+                        title: "会员名称",
+                        key: "memberName",
+                        minWidth: 150,
+                        tooltip: true,
+                    },
+                  {
+                    title: "会员姓名",
+                    key: "name",
+                    minWidth: 120,
+                  },
+                    {
+                        title: "提交时间",
+                        key: "createTime",
+                        minWidth: 150,
+                    },
+                    {
+                        title: "操作",
+                        key: "action",
+                        align: "center",
+                        fixed: "right",
+                        width: 200,
+                        render: (h, params) => {
+                            return h("div", [
+                                h(
+                                    "Button",
+                                    {
+                                        props: {
+                                            type: "success",
+                                            size: "small",
+                                        },
+                                        style: {
+                                            marginRight: "5px"
+                                        },
+                                        on: {
+                                            click: () => {
+                                                this.audit(params.row, "PASS");
+                                            }
+                                        }
+                                    },
+                                    "通过"
+                                ),
+                                h(
+                                    "Button",
+                                    {
+                                        props: {
+                                            type: "error",
+                                            size: "small",
+                                        },
+                                        on: {
+                                            click: () => {
+                                                this.audit(params.row, "REFUSE");
+                                            }
+                                        }
+                                    },
+                                    "拒绝"
+                                )
+                            ]);
+                        }
+                    }
+                ],
+                data: [], // 表单数据
+                total: 0 // 表单数据总数
+            };
+        },
+        methods: {
+            init() {
+                this.getDataList();
+            },
+            changePage(v) {
+                this.searchForm.pageNumber = v;
+                this.getDataList();
+                this.clearSelectAll();
+            },
+            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.selectDate = null;
+                this.searchForm.startDate = "";
+                this.searchForm.endDate = "";
+                // 重新加载数据
+                this.getDataList();
+            },
+            changeSort(e) {
+                this.searchForm.sort = e.key;
+                this.searchForm.order = e.order;
+                if (e.order === "normal") {
+                    this.searchForm.order = "";
+                }
+                this.getDataList();
+            },
+            clearSelectAll() {
+                this.$refs.table.selectAll(false);
+            },
+            changeSelect(e) {
+                this.selectList = e;
+                this.selectCount = e.length;
+            },
+            selectDateRange(v) {
+                if (v) {
+                    this.searchForm.startDate = v[0];
+                    this.searchForm.endDate = v[1];
+                }
+            },
+            getDataList() {
+                this.loading = true;
+                this.searchForm.distributionStatus = "APPLY";
+                // 带多条件搜索参数获取表单数据 请自行修改接口
+                getDistributionListData(this.searchForm).then(res => {
+                    this.loading = false;
+                    if (res.success) {
+                        this.data = res.result.records;
+                        this.total = res.result.total;
+                    }
+                });
+                // 以下为模拟数据
+                //this.data = [
+                //];
+                this.total = this.data.length;
+                this.loading = false;
+            },
+            //审核
+            audit(v, status) {
+                let test = "拒绝"
+                if (status == "PASS") {
+                    test = "通过"
+                }
+                let params = {
+                    status : status
+                }
+                this.$Modal.confirm({
+                    title: "确认" + test,
+                    // 记得确认修改此处
+                    content: "您确认要" + test + " " + v.memberName + " ?",
+                    loading: true,
+                    onOk: () => {
+                        auditDistribution(v.id, params).then(res => {
+                            this.$Modal.remove();
+                            if (res.success) {
+                                this.$Message.success("操作成功");
+                                this.getDataList();
+                            }
+                        });
+                    }
+                });
+            }
+        },
+        mounted() {
+            this.init();
+        }
+    };
+</script>
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>

manager/src/views/distribution/distributionCash.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch" >
+            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+              <Input class="search-input" v-model="searchForm.memberName">
+                <span slot="prepend">会员名称</span>
+              </Input>
+              <Input class="search-input" v-model="searchForm.sn">
+                <span slot="prepend">编号</span>
+              </Input>
+              <Form-item label="状态" style="margin-left: -20px">
+                <Select v-model="searchForm.distributionCashStatus" style="width:150px;">
+                    <Option v-for="item in cashStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                </Select>
+              </Form-item>
+              <Form-item style="margin-left:-35px;" class="br">
+                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
+              </Form-item>
+            </Form>
+          </Row>
+          <Row class="padding-row">
+            <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
+          </Row>
+          <Row type="flex" justify="end" class="page padding-row">
+            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.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>
+      </Col>
+    </Row>
+    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
+      <Form ref="form" :model="form" :label-width="100" :rules="formValidate" >
+      <FormItem label="编号">
+          <Input disabled v-model="form.sn" clearable style="width:100%"/>
+        </FormItem>
+        <FormItem label="会员名称">
+          <Input disabled v-model="form.distributionName" clearable style="width:100%"/>
+        </FormItem>
+        <FormItem label="金额">
+          <Input disabled v-model="form.price" clearable style="width:100%"/>
+        </FormItem>
+        <FormItem label="是否通过" prop="result" v-if="handleStatus =='edit'">
+             <RadioGroup v-model="result">
+                 <Radio :key=0 :label=0>通过</Radio>
+                 <Radio :key=-1 :label=-1>拒绝</Radio>
+             </RadioGroup>
+        </FormItem>
+      </Form>
+      <div slot="footer" v-if="handleStatus == 'edit'">
+        <Button type="text" @click="modalVisible=false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+        getDistributionCash,
+        auditDistributionCash
+    } from "@/api/distribution";
+// import { parse } from 'date-fns';
+import {cashStatusList} from './dataJson'
+export default {
+  name: "distributionCash",
+  components: {
+  },
+  data() {
+    return {
+      cashStatusList, // 状态列表
+      openSearch: true, // 显示搜索
+      loading: true, // 表单加载状态
+      modalVisible: false, // 添加或编辑显示
+      modalTitle: "", // 添加或编辑标题
+      result: -1,
+      searchForm: { // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+      },
+      handleStatus:'edit',// 判断是编辑还是查看
+      form: { // 添加或编辑表单对象初始化数据
+        sn: "",
+        memberName: "",
+        price: "",
+      },
+      auditForm: {
+        result: -1
+      },
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        {
+          title: "编号",
+          key: "sn",
+          minWidth: 200
+        },
+        {
+          title: "会员名称",
+          key: "distributionName",
+          minWidth: 120
+        },
+        {
+          title: "申请金额",
+          key: "price",
+          minWidth: 90,
+           render: (h, params) => {
+              if (params.row.price) {
+                  return h("div", this.$options.filters.unitPrice(params.row.price,'￥'));
+                }
+              }
+        },
+        {
+          title: "申请时间",
+          key: "createTime",
+          minWidth: 130
+        },
+        {
+          title: "处理时间",
+          key: "payTime",
+          minWidth: 130
+        },
+        {
+          title: "状态",
+          key: "distributionCashStatus",
+          minWidth: 100,
+          render: (h, params) => {
+              if (params.row.distributionCashStatus == 'APPLY') {
+                   return h("div", "待处理");
+              }
+              if (params.row.distributionCashStatus == 'PASS') {
+                   return h("div", "通过");
+              }
+              if (params.row.distributionCashStatus == 'REFUSE') {
+                   return h("div", "审核拒绝");
+              }
+            },
+         },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 130,
+          render: (h, params) => {
+            if(params.row.distributionCashStatus != 'APPLY'){
+                return h("div", [
+                  h(
+                    "Button",
+                    {
+                      props: {
+                        type: "success",
+                        size: "small",
+                      },
+                      style: {
+                        marginRight: "5px"
+                      },
+                      on: {
+                        click: () => {
+                          this.view(params.row);
+                        }
+                      }
+                    },
+                    "查看"
+                  ),
+
+                ]);
+            }else {
+                return h("div", [
+                  h(
+                    "Button",
+                    {
+                      props: {
+                        type: "primary",
+                        size: "small",
+                      },
+                      style: {
+                        marginRight: "5px"
+                      },
+                      on: {
+                        click: () => {
+                          this.edit(params.row);
+                        }
+                      }
+                    },
+                    "审核"
+                  ),
+
+                ]);
+            }
+          }
+        }
+      ],
+      data: [], // 表单数据
+      total: 0 // 表单数据总数
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order === "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+
+    getDataList() {
+      this.loading = true;
+      // 带多条件搜索参数获取表单数据 请自行修改接口
+      getDistributionCash(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;
+      this.loading = false;
+    },
+    handleSubmit() {
+      let result = "拒绝"
+      if(this.result == 0){
+        result = "通过"
+      }
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$Modal.confirm({
+            title: "确认审核",
+            content: "您确认要审核"+result+"么?",
+            loading: true,
+            onOk: () => {
+                this.auditForm.result = this.result;
+                auditDistributionCash(this.form.id,this.auditForm).then(res => {
+                    if (res.success) {
+                      this.$Modal.remove();
+                      this.$Message.success("审核成功");
+                      this.getDataList();
+                      this.modalVisible = false;
+                    }
+                });
+            }
+          })
+        }
+      });
+    },
+    edit(v) {
+      this.modalTitle = "审核";
+      this.handleStatus = 'edit';
+      this.$refs.form.resetFields();
+      // 转换null为""
+      for (let attr in v) {
+        if (v[attr] === null) {
+          v[attr] = "";
+        }
+      }
+      let str = JSON.stringify(v);
+      let data = JSON.parse(str);
+      this.form = data;
+      this.modalVisible = true;
+    },
+    view(v){
+      this.modalTitle = "查看";
+      this.handleStatus = 'view';
+      this.$refs.form.resetFields();
+      // 转换null为""
+      for (let attr in v) {
+        if (v[attr] === null) {
+          v[attr] = "";
+        }
+      }
+      let str = JSON.stringify(v);
+      let data = JSON.parse(str);
+      this.form = data;
+      this.modalVisible = true;
+
+    }
+  },
+  mounted() {
+    this.init();
+  }
+};
+</script>
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>

manager/src/views/distribution/distributionGoods.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch">
+            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+              <Form-item label="商品名称" prop="goodsName">
+                <Input
+                  type="text"
+                  v-model="searchForm.goodsName"
+                  placeholder="请输入商品名称"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+              <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+            </Form>
+          </Row>
+          <Row class="operation" style="margin-top: 10px">
+            <Button @click="delAll">批量删除</Button>
+          </Row>
+          <Row>
+            <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.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>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import {
+        getDistributionGoods,
+        delDistributionGoods
+    } from "@/api/distribution";
+import {getShopListData} from '@/api/shops'
+export default {
+  name: "distributionGoods",
+  components: {
+  },
+  data() {
+    return {
+      shopList:[], // 店铺列表
+      loading: true, // 表单加载状态
+      searchForm: { // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+      },
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center"
+        },
+        {
+          title: "商品图片",
+          key: "thumbnail",
+          width: 120,
+          align: "center",
+                    render: (h, params) => {
+                      return h("img", {
+                        attrs: {
+                          src: params.row.thumbnail,
+                          alt: "加载图片失败"
+                        },
+                        style: {
+                          cursor: "pointer",
+                          width: "80px",
+                          height: "60px",
+                          margin: "10px 0",
+                          "object-fit": "contain"
+                        }
+                      });
+                    }
+        },
+        {
+          title: "商品名称",
+          key: "goodsName",
+          minWidth: 200,
+          tooltip: true
+        },
+        {
+          title: "商品价格",
+          key: "price",
+          minWidth: 100,
+          render: (h, params) => {
+            return h("div", this.$options.filters.unitPrice(params.row.price,'￥'));
+          }
+        },
+        {
+          title: "库存",
+          key: "quantity",
+          minWidth: 80
+        },
+        {
+          title: "添加时间",
+          key: "createTime",
+          width: 170
+        },
+        {
+          title: "店铺名称",
+          key: "storeName",
+          minWidth: 120,
+          tooltip: true
+        },
+        {
+            title: "佣金金额",
+            key: "commission",
+            minWidth: 120,
+            sortable: false,
+            render: (h, params) => {
+                return h("div", this.$options.filters.unitPrice(params.row.commission,'￥'));
+            }
+
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 150,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "error",
+                    size: "small"
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    }
+                  }
+                },
+                "下架"
+              )
+            ]);
+          }
+        }
+      ],
+      data: [], // 表单数据
+      total: 0 // 表单数据总数
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+      // this.getShopList()
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    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.init();
+    },
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order === "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+
+    getDataList() {
+      this.loading = true;
+      // 带多条件搜索参数获取表单数据 请自行修改接口
+      getDistributionGoods(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;
+      this.loading = false;
+    },
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        // 记得确认修改此处
+        content: "您确认要删除么?",
+        loading: true,
+        onOk: () => {
+          // 删除
+          delDistributionGoods(v.id).then(res => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.getDataList();
+            }
+          });
+        }
+      });
+    },
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          let ids = []
+          this.selectList.forEach(item => {
+              ids.push(item.id)
+          });
+          // 批量删除
+          delDistributionGoods(ids.toString()).then(res => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.clearSelectAll();
+              this.getDataList();
+            }
+          });
+        }
+      });
+    },
+    getShopList(val){
+      const params = {
+        pageNumber:1,
+        pageSize:10,
+        storeName:''
+      }
+      if(val){
+        params.storeName = val;
+      }else {
+        params.storeName = ''
+      }
+
+      getShopListData(params).then(res => {
+        this.shopList = res.result.records
+      })
+    },
+    searchChange(val){
+      this.getShopList(val)
+    }
+  },
+  mounted() {
+    this.init();
+  }
+};
+</script>
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>
+

manager/src/views/distribution/distributionOrder.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row v-show="openSearch" @keydown.enter.native="handleSearch">
+            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+              <Form-item label="订单编号" prop="orderSn">
+                <Input
+                  type="text"
+                  v-model="searchForm.orderSn"
+                  placeholder="请输入订单编号"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+              <Form-item label="分销商" prop="distributionName">
+                <Input
+                  type="text"
+                  v-model="searchForm.distributionName"
+                  placeholder="请输入分销商名称"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+              <Form-item label="店铺名称">
+                <Select v-model="searchForm.shopId" placeholder="请选择" @on-query-change="searchChange" filterable
+                        clearable style="width: 150px">
+                  <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
+                </Select>
+              </Form-item>
+              <Form-item label="订单时间">
+                <DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" placeholder="选择时间"
+                            style="width: 210px"></DatePicker>
+              </Form-item>
+              <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+            </Form>
+          </Row>
+
+          <Row class="padding-row">
+            <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.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>
+      </Col>
+    </Row>
+
+  </div>
+</template>
+
+<script>
+  import {
+    getDistributionOrder
+  } from "@/api/distribution";
+  import {orderStatusList} from './dataJson'
+  import {getShopListData} from '@/api/shops'
+
+  export default {
+    name: "distributionOrder",
+    components: {},
+    data() {
+      return {
+        timeRange: [],
+        orderStatusList,
+        shopList: [], // 店铺列表
+        distributionId: this.$route.query.id,
+        openSearch: true, // 显示搜索
+        openTip: true, // 显示提示
+        loading: true, // 表单加载状态
+        searchForm: { // 搜索框初始化对象
+          pageNumber: 1, // 当前页数
+          pageSize: 10, // 页面大小
+        },
+        columns: [
+          {
+            title: "订单编号",
+            key: "orderSn",
+            minWidth: 120,
+            tooltip: true
+          },
+
+          {
+            title: "实付金额",
+            key: "orderPrice",
+            width: 130,
+            sortable: false,
+            render: (h, params) => {
+              if(params.row.orderPrice == null){
+                return h("div", this.$options.filters.unitPrice(0, '￥'));
+              }else{
+                return h("div", this.$options.filters.unitPrice(params.row.orderPrice, '￥'));
+              }
+
+            }
+          },
+          {
+            title: "退款金额",
+            key: "returnMoney",
+            width: 130,
+            sortable: false,
+            render: (h, params) => {
+              if(params.row.orderPrice == null){
+                return h("div", this.$options.filters.unitPrice(0, '￥'));
+              }else{
+                return h("div", this.$options.filters.unitPrice(params.row.returnMoney, '￥'));
+              }
+            }
+          },
+          {
+            title: "商品名称",
+            key: "goodsName",
+            minWidth: 120,
+            tooltip: true
+          },
+          {
+            title: "分销商",
+            key: "distributionName",
+            minWidth: 120,
+            tooltip: true
+          },
+          {
+            title: "店铺名称",
+            key: "storeName",
+            minWidth: 120,
+          },
+          {
+            title: "状态",
+            key: "distributionOrderStatus",
+            width: 100,
+            sortable: false,
+            render: (h, params) => {
+              if (params.row.distributionOrderStatus == 'COMPLETE_CASH') {
+                return h('div', '提现完成')
+              } else if (params.row.distributionOrderStatus == 'WAIT_BILL') {
+                return h('div', '待结算')
+              } else if (params.row.distributionOrderStatus == 'WAIT_CASH') {
+                return h('div', '待提现')
+              }
+            }
+          },
+
+          {
+            title: "佣金金额",
+            key: "rebateGrade",
+            width: 120,
+            sortable: false,
+            render: (h, params) => {
+              if(params.row.rebateGrade == null){
+                return h("div", this.$options.filters.unitPrice(0, '￥'));
+              }else{
+                return h("div", this.$options.filters.unitPrice(params.row.rebateGrade, '￥'));
+              }
+
+            }
+          },
+          {
+            title: "创建时间",
+            key: "createTime",
+            width: 180,
+            sortable: false,
+          }
+        ],
+        data: [], // 表单数据
+        total: 0 // 表单数据总数
+      };
+    },
+    methods: {
+      init() {
+        this.getDataList();
+        this.getShopList()
+      },
+      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();
+      },
+
+      getDataList() {
+        this.searchForm.distributionId = this.distributionId;
+        this.loading = true;
+        if (this.timeRange && this.timeRange[0]) {
+          let startTime = this.timeRange[0]
+          let endTime = this.timeRange[1]
+          this.searchForm.startTime = this.$options.filters.unixToDate(startTime / 1000)
+          this.searchForm.endTime = this.$options.filters.unixToDate(endTime / 1000)
+        }
+        console.log(this.searchForm)
+        // 带多条件搜索参数获取表单数据 请自行修改接口
+        getDistributionOrder(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;
+        this.loading = false;
+      },
+      getShopList(val) { // 获取店铺列表
+        const params = {
+          pageNumber: 1,
+          pageSize: 10,
+          storeName: ''
+        }
+        if (val) {
+          params.storeName = val;
+        } else {
+          params.storeName = ''
+        }
+
+        getShopListData(params).then(res => {
+          this.shopList = res.result.records
+        })
+      },
+      searchChange(val) { // 店铺搜索，键盘点击回调
+        this.getShopList(val)
+      }
+    },
+    mounted() {
+      this.init();
+    },
+    watch: {
+      $route(e) {
+        this.distributionId = e.query.id ? e.query.id : undefined;
+        this.getDataList();
+      }
+    }
+  };
+</script>
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>
+

manager/src/views/distribution/distributionSetting.vue

@@ -0,0 +1,77 @@
+<template>
+  <div style="background-color: #fff;">
+
+    <Form ref="form" :model="form" :label-width="120" :rules="formValidate" style="padding: 10px;">
+
+      <Divider orientation="left">分销设置</Divider>
+      <FormItem label="是否开启分销" prop="distribution">
+        <i-switch size="large" v-model="form.isOpen" :true-value="true" :false-value="false" @on-change="handleSubmit">
+          <span slot="open">开启</span>
+          <span slot="close">关闭</span>
+        </i-switch>
+      </FormItem>
+    </Form>
+  </div>
+</template>
+
+<script>
+
+  import {setSetting, getSetting} from "@/api/index";
+
+  export default {
+    name: "distributionSetting",
+    components: {},
+    data() {
+      return {
+        loading: true, // 表单加载状态
+        selectDate: null,
+        form: { // 添加或编辑表单对象初始化数据
+          isOpen: ""
+        },
+        // 表单验证规则
+        formValidate: {},
+        submitLoading: false, // 添加或编辑提交状态
+        selectList: [], // 多选数据
+        selectCount: 0, // 多选计数
+        data: [], // 表单数据
+        total: 0 // 表单数据总数
+      };
+    },
+    methods: {
+      init() {
+        this.getDataList();
+      },
+      getDataList() {
+        this.loading = true;
+        // 带多条件搜索参数获取表单数据 请自行修改接口
+        getSetting("DISTRIBUTION_SETTING").then(res => {
+          this.loading = false;
+          if (res.success) {
+            this.form = res.result;
+          }
+        });
+        this.loading = false;
+      },
+      handleSubmit() {
+
+        this.$refs.form.validate(valid => {
+          if (valid) {
+            setSetting("DISTRIBUTION_SETTING", this.form).then(res => {
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+              }
+            });
+          }
+        })
+
+      }
+    },
+    mounted() {
+      this.init();
+    }
+  };
+</script>
+<style lang="scss" scoped>
+
+</style>

manager/src/views/error-page/403.vue

@@ -0,0 +1,128 @@
+
+<template>
+  <div class="error403">
+    <div class="error403-body-con">
+      <Card>
+        <div class="error403-body-con-title">4<span class="error403-0-span">
+            <Icon type="android-lock"></Icon>
+          </span><span class="error403-key-span">
+            <Icon size="220" type="ios-bolt"></Icon>
+          </span></div>
+        <p class="error403-body-con-message">You don't have permission</p>
+        <div class="error403-btn-con">
+          <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
+          <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Error403",
+  methods: {
+    backPage() {
+      this.$router.go(-1);
+    },
+    goHome() {
+      this.$router.push({
+        name: "home_index",
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@keyframes error403animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  40% {
+    transform: rotateZ(-20deg);
+  }
+  45% {
+    transform: rotateZ(-15deg);
+  }
+  50% {
+    transform: rotateZ(-20deg);
+  }
+  55% {
+    transform: rotateZ(-15deg);
+  }
+  60% {
+    transform: rotateZ(-20deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
+}
+.error403 {
+  &-body-con {
+    width: 700px;
+    height: 500px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    &-title {
+      text-align: center;
+      font-size: 240px;
+      font-weight: 700;
+      color: #2d8cf0;
+      height: 260px;
+      line-height: 260px;
+      margin-top: 40px;
+      .error403-0-span {
+        display: inline-block;
+        position: relative;
+        width: 170px;
+        height: 170px;
+        border-radius: 50%;
+        border: 20px solid #ed3f14;
+        color: #ed3f14;
+        margin-right: 10px;
+        i {
+          display: inline-block;
+          font-size: 120px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+      .error403-key-span {
+        display: inline-block;
+        position: relative;
+        width: 100px;
+        height: 190px;
+        border-radius: 50%;
+        margin-right: 10px;
+        i {
+          display: inline-block;
+          font-size: 190px;
+          position: absolute;
+          left: 20px;
+          transform: translate(-50%, -60%);
+          transform-origin: center bottom;
+          animation: error403animation 2.8s ease 0s infinite;
+        }
+      }
+    }
+    &-message {
+      display: block;
+      text-align: center;
+      font-size: 30px;
+      font-weight: 500;
+      letter-spacing: 4px;
+      color: #dddde2;
+    }
+  }
+  &-btn-con {
+    text-align: center;
+    padding: 20px 0;
+    margin-bottom: 40px;
+  }
+}
+</style>
+

manager/src/views/error-page/404.vue

@@ -0,0 +1,91 @@
+
+<template>
+    <div class="error404">
+        <div class="error404-body-con">
+            <Card>
+                <div class="error404-body-con-title">4<span><Icon type="ios-navigate-outline"></Icon></span>4</div>
+                <p class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
+                <div class="error404-btn-con">
+                    <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
+                    <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+                </div>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Error404',
+    methods: {
+        backPage () {
+            this.$router.go(-1);
+        },
+        goHome () {
+            this.$router.push({
+                name: 'home_index'
+            });
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+   @keyframes error404animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    20% {
+        transform: rotateZ(-60deg);
+    }
+    40% {
+        transform: rotateZ(-10deg);
+    }
+    60% {
+        transform: rotateZ(50deg);
+    }
+    80% {
+        transform: rotateZ(-20deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
+}
+.error404{
+    &-body-con{
+        width: 700px;
+        height: 500px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        &-title{
+            text-align: center;
+            font-size: 240px;
+            font-weight: 700;
+            color: #2d8cf0;
+            height: 260px;
+            line-height: 260px;
+            margin-top: 40px;
+            span{
+                display: inline-block;
+                color: #19be6b;
+                font-size: 230px;
+                animation: error404animation 3s ease 0s infinite alternate;
+            }
+        }
+        &-message{
+            display: block;
+            text-align: center;
+            font-size: 30px;
+            font-weight: 500;
+            letter-spacing: 12px;
+            color: #dddde2;
+        }
+    }
+    &-btn-con{
+        text-align: center;
+        padding: 20px 0;
+        margin-bottom: 40px;
+    }
+}
+</style>

manager/src/views/error-page/500.vue

@@ -0,0 +1,107 @@
+
+
+<template>
+    <div class="error500">
+        <div class="error500-body-con">
+            <Card>
+                <div class="error500-body-con-title">
+                    5<span class="error500-0-span"><Icon type="social-freebsd-devil"></Icon></span><span class="error500-0-span"><Icon type="social-freebsd-devil"></Icon></span>
+                </div>
+                <p class="error500-body-con-message">Oops! the server is wrong</p>
+                <div class="error500-btn-con">
+                    <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
+                    <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+                </div>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Error500',
+    methods: {
+        backPage () {
+            this.$router.go(-1);
+        },
+        goHome () {
+            this.$router.push({
+                name: 'home_index'
+            });
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+   @keyframes error500animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    20% {
+        transform: rotateZ(-10deg);
+    }
+    40% {
+        transform: rotateZ(5deg);
+    }
+    60% {
+        transform: rotateZ(-5deg);
+    }
+    80% {
+        transform: rotateZ(10deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
+}
+.error500{
+    &-body-con{
+        width: 700px;
+        height: 500px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        &-title{
+            text-align: center;
+            font-size: 240px;
+            font-weight: 700;
+            color: #2d8cf0;
+            height: 260px;
+            line-height: 260px;
+            margin-top: 40px;
+            .error500-0-span{
+                display: inline-block;
+                position: relative;
+                width: 170px;
+                height: 170px;
+                border-radius: 50%;
+                border: 20px solid #ed3f14;
+                color: #ed3f14;
+                margin-right: 10px;
+                i{
+                    display: inline-block;
+                    font-size: 120px;
+                    position: absolute;
+                    bottom: -10px;
+                    left: 10px;
+                    transform-origin: center bottom;
+                    animation: error500animation 3s ease 0s infinite alternate;
+                }
+            }
+        }
+        &-message{
+            display: block;
+            text-align: center;
+            font-size: 30px;
+            font-weight: 500;
+            letter-spacing: 4px;
+            color: #dddde2;
+        }
+    }
+    &-btn-con{
+        text-align: center;
+        padding: 20px 0;
+        margin-bottom: 40px;
+    }
+}
+</style>

manager/src/views/goods-unit/index.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch"> </Row>
+          <Row class="operation">
+            <Button @click="add" type="primary" >添加</Button>
+
+            <Button @click="delAll">批量删除</Button>
+          </Row>
+          <Row>
+            <Table
+              :loading="loading"
+              border
+              :columns="columns"
+              :data="data"
+              ref="table"
+              sortable="custom"
+              @on-sort-change="changeSort"
+              @on-selection-change="changeSelect"
+            ></Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page
+              :current="searchForm.pageNumber"
+              :total="total"
+              :page-size="searchForm.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>
+      </Col>
+    </Row>
+    <Modal
+      :title="modalTitle"
+      v-model="modalVisible"
+      :mask-closable="false"
+      :width="500"
+    >
+      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
+        <FormItem label="计量单位" prop="name">
+          <Input v-model="form.name" clearable style="width: 100%" />
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
+          >提交</Button
+        >
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  addGoodsUnit,
+  getGoodsUnitPage,
+  updateGoodsUnit,
+  delGoodsUnit, delSensitive,
+} from "@/api/index";
+export default {
+  name: "bill",
+  components: {},
+  data() {
+    return {
+      openSearch: true, // 显示搜索
+      loading: true, // 表单加载状态
+      modalType: 0, // 添加或编辑标识
+      modalVisible: false, // 添加或编辑显示
+      modalTitle: "", // 添加或编辑标题
+      drop: false,
+      dropDownContent: "展开",
+      dropDownIcon: "ios-arrow-down",
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+        name: "",
+      },
+      selectDate: null,
+      form: {
+        // 添加或编辑表单对象初始化数据
+        name: "",
+      },
+      // 表单验证规则
+      formValidate: {
+        name: [
+          {
+            required: true,
+            message: "请输入计量单位",
+            trigger: "blur",
+          },
+        ],
+      },
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "计量单位",
+          key: "name",
+          minWidth: 120
+        },
+
+        {
+          title: "创建时间",
+          key: "createTime",
+          width: 180
+        },
+        {
+          title: "更新时间",
+          key: "updateTime",
+          width: 180
+        },
+        {
+          title: "操作人",
+          key: "createBy",
+          minWidth: 150
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          width: 200,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "info",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.detail(params.row);
+                    },
+                  },
+                },
+                "修改"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "error",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    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();
+    },
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order === "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+
+    getDataList() {
+      this.loading = true;
+
+      getGoodsUnitPage(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;
+      this.loading = false;
+    },
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+
+          if (this.modalType == 0) {
+            // 添加 避免编辑后传入id等数据 记得删除
+            delete this.form.id;
+            addGoodsUnit(this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          } else {
+            // 编辑
+            updateGoodsUnit(this.id, this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    add() {
+      this.modalType = 0;
+      this.modalTitle = "添加";
+      this.form = {};
+      this.$refs.form.resetFields();
+
+      this.modalVisible = true;
+    },
+    detail(v) {
+      this.modalType = 1;
+      this.id = v.id;
+      this.modalTitle = "修改";
+      this.modalVisible = true;
+      this.form.name = v.name;
+    },
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        // 记得确认修改此处
+        content: "您确认要删除 " + v.name + " ?",
+        loading: true,
+        onOk: () => {
+          // 删除
+          delGoodsUnit(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          // 批量删除
+          delGoodsUnit(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.clearSelectAll();
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss">
+// 建议引入通用样式 可删除下面样式代码
+ @import "@/styles/table-common.scss";
+</style>

manager/src/views/goods/goods-industry-statistics/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <Card>
+    <Form
+    label-position="left"
+      ref="searchForm"
+      :model="params"
+      inline
+      :label-width="100"
+      class="search-form"
+    >
+      <Form-item label="选择店铺" prop="sn">
+        <span class="tips" v-if="storeName"
+          >{{ storeName }}
+          <Button
+            @click="
+              () => {
+                storeName = '';
+                params.shopId = '';
+              }
+            "
+            type="text"
+            >清空</Button
+          >
+        </span>
+        <Button size="small" @click="handleClickShop" type="primary"
+          >选择店铺</Button
+        >
+      </Form-item>
+      <Form-item label="选择会员" prop="sn">
+        <span class="tips" v-if="memberName"
+          >{{ memberName }}
+          <Button
+            @click="
+              () => {
+                memberName = '';
+                params.memberId = '';
+              }
+            "
+            type="text"
+            >清空</Button
+          >
+        </span>
+        <Button size="small" @click="handleClickMember" type="primary"
+          >选择会员</Button
+        >
+      </Form-item>
+      <Form-item label="选择时间类型" prop="sn">
+        <Select v-model="params.timeType" style="width: 200px">
+          <Option
+            v-for="item in typeList"
+            :value="item.value"
+            :key="item.value"
+            >{{ item.label }}</Option
+          >
+        </Select>
+      </Form-item>
+      <Form-item label="按年查询" prop="sn">
+        <DatePicker
+          type="year"
+          placeholder="Select year"
+          style="width: 200px"
+          v-model="year"
+        ></DatePicker>
+      </Form-item>
+      <Form-item label="按月查询" v-if="params.timeType == 'MONTH'">
+        <InputNumber :max="12" :min="1" v-model="params.month"></InputNumber>
+      </Form-item>
+    </Form>
+
+    <Tabs v-model="orderStatus" @on-click="handleClickType">
+      <TabPane label="行业订单数量" name="NUM">
+        <Table :columns="columns" :data="data"></Table>
+
+      </TabPane>
+      <TabPane label="行业订单金额" name="PRICE">
+        <Table :columns="columns" :data="data"></Table>
+
+      </TabPane>
+    </Tabs>
+
+    <Modal v-model="modalFlag" width="1200" :title="selectName">
+      <!-- 店铺 -->
+      <shopLayout v-if="shopFlag" @callback="callbackShop" ref="shops" />
+      <!-- 会员 -->
+      <memberLayout v-else @callback="callbackMember" ref="members" />
+    </Modal>
+  </Card>
+</template>
+<script>
+import shopLayout from "@/views/seller/shop/shopList";
+import memberLayout from "@/views/member/list/index";
+import * as API_Goods from "@/api/goods";
+export default {
+  components: {
+    shopLayout,
+    memberLayout,
+  },
+  data() {
+    return {
+      storeName: "",
+      memberName: "",
+      shopFlag: false,
+      selectName: "选择",
+      modalFlag: false,
+      priceData: "",
+      orderStatus: "NUM",
+
+      shopList: {},
+      memberList: {},
+
+      typeList: [
+        {
+          value: "YEAR",
+          label: "年",
+        },
+        {
+          value: "MONTH",
+          label: "月",
+        },
+      ],
+      total: 0,
+      year:"",
+      params: {
+
+        type: "PRICE",
+        timeType: "YEAR",
+        pageNumber: 1,
+        pageSize: 10,
+        year: "",
+        shopId: "",
+        memberId: "",
+      },
+      columns: [
+        {
+          title: "商品一级分类",
+          key: "categoryName",
+        },
+        {
+          title: "销售数量",
+          key: "num",
+        },
+        {
+          title: "销售金额",
+          key: "price",
+        },
+      ],
+      data: [],
+    };
+  },
+  watch: {
+    params: {
+      handler(val) {
+        this.init();
+      },
+      deep: true,
+    },
+    year(val) {
+      this.params.year = new Date(val).getFullYear();
+    },
+  },
+  methods: {
+    // 选择店铺
+    handleClickShop() {
+      this.modalFlag = true;
+      this.selectName += "店铺";
+      this.shopFlag = true;
+      this.$nextTick(() => {
+        this.$refs.shops.selectedShop = true;
+      });
+    },
+    // 选择会员
+    handleClickMember() {
+      this.modalFlag = true;
+      this.selectName += "会员";
+      this.$nextTick(() => {
+        this.$refs.members.selectedMember = true;
+      });
+    },
+
+    callbackMember(val) {
+      this.memberName = val.username;
+      this.params.memberId = val.id;
+      this.modalFlag = false;
+    },
+
+    callbackShop(val) {
+      this.storeName = val.storeName;
+      this.params.shopId = val.id;
+      this.modalFlag = false;
+    },
+
+    // 点击分页
+    changePage(index) {
+      this.params.pageNumber = index;
+    },
+
+    handleClickType(name) {
+      this.params.type = name;
+    },
+    init(name) {
+      Promise.all([
+        API_Goods.goodsCategoryStatistics(this.params),
+      ]).then((res) => {
+        if (res[0].result) {
+          this.data = res[0].result;
+        }
+
+      });
+    },
+  },
+  mounted() {
+   let data = new Date();
+
+    this.year = data;
+    this.year && this.params.month
+      ? this.timeType == "MONTH"
+      : this.timeType == "YEAR";
+  },
+};
+</script>
+<style scoped lang="scss">
+.page-col {
+  text-align: right;
+  margin: 10px 0;
+}
+.order-col {
+  display: flex;
+  > div {
+    margin-right: 8px;
+    padding: 16px;
+    font-size: 15px;
+  }
+}
+.order-list {
+  display: flex;
+}
+.tips {
+  margin: 0 8px;
+}
+</style>

manager/src/views/goods/goods-info/goods.vue

@@ -0,0 +1,451 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch">
+            <Form
+              ref="searchForm"
+              :model="searchForm"
+              inline
+              :label-width="70"
+              class="search-form"
+            >
+              <Form-item label="商品名称" prop="goodsName">
+                <Input
+                  type="text"
+                  v-model="searchForm.goodsName"
+                  placeholder="请输入商品名称"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+              <Form-item label="商品编号" prop="sn">
+                <Input
+                  type="text"
+                  v-model="searchForm.sn"
+                  placeholder="请输入商品编号"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+              <Form-item label="状态" prop="status">
+                <Select
+                  v-model="searchForm.marketEnable"
+                  placeholder="请选择"
+                  clearable
+                  style="width: 200px"
+                >
+                  <Option value="UPPER">上架</Option>
+                  <Option value="DOWN">下架</Option>
+                </Select>
+              </Form-item>
+              <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search" >搜索</Button>
+            </Form>
+          </Row>
+          <Row class="padding-row">
+            <Table
+              :loading="loading"
+              border
+              :columns="columns"
+              :data="data"
+              ref="table"
+              sortable="custom"
+              @on-sort-change="changeSort"
+              @on-selection-change="changeSelect"
+            >
+
+              <!-- 商品栏目格式化 -->
+              <template slot="goodsSlot" slot-scope="scope">
+                <div style="margin: 5px 0px;height: 80px; display: flex;">
+                  <div style="">
+                    <img :src="scope.row.original" style="height: 60px;margin-top: 1px;width: 60px">
+                  </div>
+
+                  <div style="margin-left: 13px;">
+                    <div class="div-zoom" >
+                      <a>{{scope.row.goodsName}}</a>
+                    </div>
+                  </div>
+                </div>
+
+              </template>
+            </Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page
+              :current="searchForm.pageNumber"
+              :total="total"
+              :page-size="searchForm.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>
+      </Col>
+    </Row>
+    <Modal
+      :title="modalTitle"
+      v-model="modalVisible"
+      :mask-closable="false"
+      :width="500"
+    >
+      <Form
+        ref="underForm"
+        :model="underForm"
+        :label-width="100"
+        :rules="formValidate"
+      >
+        <FormItem label="下架原因" prop="reason">
+          <Input v-model="underForm.reason" clearable style="width: 100%" />
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="lower(form.id)"
+          >提交</Button
+        >
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { getGoodsListData, upGoods, lowGoods } from "@/api/goods";
+export default {
+  name: "goods",
+  components: {},
+  data() {
+    return {
+      id: "", //要操作的id
+      loading: true, // 表单加载状态
+      modalType: 0, // 添加或编辑标识
+      modalVisible: false, // 添加或编辑显示
+      modalTitle: "", // 添加或编辑标题
+      drop: false,
+      dropDownContent: "展开",
+      dropDownIcon: "ios-arrow-down",
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "create_time", // 默认排序字段
+        order: "desc", // 默认排序方式
+      },
+      underForm: {
+        reason: "",
+      },
+      form: {
+        // 添加或编辑表单对象初始化数据
+        goodsName: "",
+        sn: "",
+        marketEnable: "",
+        price: "",
+        sellerName: "",
+      },
+      // 表单验证规则
+
+      formValidate: {},
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        {
+          title: "商品名称",
+          key: "goodsName",
+          minWidth: 180,
+          slot: "goodsSlot",
+        },
+        {
+          title: "商品编号",
+          key: "sn",
+          minWidth: 150,
+          tooltip: true
+        },
+        {
+          title: "成本价",
+          key: "price",
+          width: 130,
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.cost, "￥")
+            );
+          },
+        },
+        {
+          title: "价格",
+          key: "price",
+          width: 130,
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.price, "￥")
+            );
+          },
+        },
+        {
+          title: "状态",
+          key: "marketEnable",
+          width: 100,
+          render: (h, params) => {
+            if (params.row.marketEnable == "DOWN") {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "error",
+                    text: "下架",
+                  },
+                }),
+              ]);
+            } else if (params.row.marketEnable == "UPPER") {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "success",
+                    text: "上架",
+                  },
+                }),
+              ]);
+            }
+          },
+        },
+        {
+          title: "审核状态",
+          key: "isAuth",
+          width: 130,
+          render: (h, params) => {
+            if (params.row.isAuth == "TOBEAUDITED") {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "error",
+                    text: "待审核",
+                  },
+                }),
+              ]);
+            } else if (params.row.isAuth == "PASS") {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "success",
+                    text: "审核通过",
+                  },
+                }),
+              ]);
+            } else if (params.row.isAuth == "REFUSE") {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "error",
+                    text: "审核拒绝",
+                  },
+                }),
+              ]);
+            }
+          },
+        },
+
+        {
+          title: "店铺名称",
+          key: "storeName",
+          minWidth: 100,
+          tooltip: true
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 150,
+          render: (h, params) => {
+            if (params.row.marketEnable == "DOWN") {
+              return h("div", [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.upper(params.row);
+                      },
+                    },
+                  },
+                  "上架"
+                ), h(
+                  "Button",
+                  {
+                    props: {
+                      size: "small",
+                    },
+                    on: {
+                      click: () => {
+                        this.showDetail(params.row);
+                      },
+                    },
+                  },
+                  "查看"
+                )
+              ]);
+            } else {
+              return h("div", [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "error",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.edit(params.row);
+                      },
+                    },
+                  },
+                  "下架"
+                ), h(
+                  "Button",
+                  {
+                    props: {
+                      size: "small",
+                    },
+                    on: {
+                      click: () => {
+                        this.showDetail(params.row);
+                      },
+                    },
+                  },
+                  "查看"
+                )
+              ]);
+            }
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order === "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+    dropDown() {
+      if (this.drop) {
+        this.dropDownContent = "展开";
+        this.dropDownIcon = "ios-arrow-down";
+      } else {
+        this.dropDownContent = "收起";
+        this.dropDownIcon = "ios-arrow-up";
+      }
+      this.drop = !this.drop;
+    },
+    getDataList() {
+      this.loading = true;
+      // 带多条件搜索参数获取表单数据
+      getGoodsListData(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.records) {
+          this.data = res.records;
+          this.total = res.total;
+        }
+      });
+    },
+    edit(v) {
+      this.id = v.id;
+      if (v.underMessage != "{}") {
+        this.underForm.reason = v.underMessage;
+      }
+
+      this.modalType = 1;
+      this.modalTitle = "下架操作";
+      this.modalVisible = true;
+    },
+    lower(id) {
+      lowGoods(this.id, this.underForm).then((res) => {
+        this.$Modal.remove();
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.modalVisible = false;
+          this.getDataList();
+        }
+      });
+    },
+    upper(v) {
+      this.$Modal.confirm({
+        title: "确认上架",
+        content: "您确认要上架 " + v.goodsName + " ?",
+        loading: true,
+        onOk: () => {
+          upGoods(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("上架成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+
+    //查看商品详情
+    showDetail(v) {
+      let id = v.id;
+      this.$router.push({
+        name: "goods-detail",
+        query: { id: id },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+  // 建议引入通用样式 可删除下面样式代码
+  @import "@/styles/table-common.scss";
+</style>

manager/src/views/goods/goods-info/goodsApply.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch">
+            <Form
+              ref="searchForm"
+              :model="searchForm"
+              inline
+              :label-width="70"
+              class="search-form"
+            >
+              <Form-item label="商品名称" prop="goodsName">
+                <Input
+                  type="text"
+                  v-model="searchForm.goodsName"
+                  placeholder="请输入商品名称"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+              <Form-item label="商品编号" prop="sn">
+                <Input
+                  type="text"
+                  v-model="searchForm.sn"
+                  placeholder="请输入商品编号"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+              <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search" >搜索</Button>
+            </Form>
+          </Row>
+          <Row class="padding-row">
+            <Table
+              :loading="loading"
+              border
+              :columns="columns"
+              :data="data"
+              ref="table"
+              sortable="custom"
+              @on-sort-change="changeSort"
+              @on-selection-change="changeSelect"
+            >
+
+              <!-- 商品栏目格式化 -->
+              <template slot="goodsSlot" slot-scope="scope">
+                <div style="margin-top: 5px;height: 80px; display: flex;">
+                  <div style="">
+                    <img :src="scope.row.original" style="height: 60px;margin-top: 3px;width: 60px">
+                  </div>
+
+                  <div style="margin-left: 13px">
+                    <div class="div-zoom" >
+                      <a>{{scope.row.goodsName}}</a>
+                    </div>
+                  </div>
+                </div>
+
+              </template>
+            </Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page
+              :current="searchForm.pageNumber"
+              :total="total"
+              :page-size="searchForm.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>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+  import {authGoods, getAuthGoodsListData} from "@/api/goods";
+
+  export default {
+    name: "goods",
+    components: {},
+    data() {
+      return {
+        id: "", //要操作的id
+        loading: true, // 表单加载状态
+        modalType: 0, // 添加或编辑标识
+        searchForm: {
+          // 搜索框初始化对象
+          pageNumber: 1, // 当前页数
+          pageSize: 10, // 页面大小
+          sort: "create_time", // 默认排序字段
+          order: "desc", // 默认排序方式
+        },
+        underForm: {
+          reason: "",
+        },
+        goodsAuditForm: {
+          is_auth: 1,
+        },
+        form: {
+          // 添加或编辑表单对象初始化数据
+          goodsName: "",
+          sn: "",
+          marketEnable: "",
+          price: "",
+          sellerName: "",
+        },
+        // 表单验证规则
+        formValidate: {},
+        submitLoading: false, // 添加或编辑提交状态
+        selectList: [], // 多选数据
+        selectCount: 0, // 多选计数
+        columns: [
+          {
+            title: "商品名称",
+            key: "goodsName",
+            minWidth: 180,
+            slot: "goodsSlot",
+            tooltip: true
+          },
+          {
+            title: "商品编号",
+            key: "sn",
+            minWidth: 100,
+            tooltip: true
+          },
+          {
+            title: "成本价",
+            key: "price",
+            minWidth: 130,
+            render: (h, params) => {
+              return h(
+                "div",
+                this.$options.filters.unitPrice(params.row.cost, "￥")
+              );
+            },
+          },
+          {
+            title: "价格",
+            key: "price",
+            minWidth: 130,
+            render: (h, params) => {
+              return h(
+                "div",
+                this.$options.filters.unitPrice(params.row.price, "￥")
+              );
+            },
+          },
+          {
+            title: "审核状态",
+            key: "isAuth",
+            minWidth: 130,
+            render: (h, params) => {
+              if (params.row.isAuth == "TOBEAUDITED") {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "error",
+                      text: "待审核",
+                    },
+                  }),
+                ]);
+              } else if (params.row.isAuth == "PASS") {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "success",
+                      text: "审核通过",
+                    },
+                  }),
+                ]);
+              } else if (params.row.isAuth == "REFUSE") {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "error",
+                      text: "审核拒绝",
+                    },
+                  }),
+                ]);
+              }
+            },
+          },
+
+          {
+            title: "店铺名称",
+            key: "storeName",
+            minWidth: 100,
+            tooltip: true
+          },
+          {
+            title: "操作",
+            key: "action",
+            align: "center",
+            fixed: "right",
+            width: 200,
+            render: (h, params) => {
+              return h("div", [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "success",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.examine(params.row, 1);
+                      },
+                    },
+                  },
+                  "通过"
+                ),
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "error",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.examine(params.row, 2);
+                      },
+                    },
+                  },
+                  "拒绝"
+                ), h(
+                  "Button",
+                  {
+                    props: {
+                      size: "small",
+                    },
+                    on: {
+                      click: () => {
+                        this.showDetail(params.row);
+                      },
+                    },
+                  },
+                  "查看"
+                )
+              ]);
+            },
+          },
+        ],
+        data: [], // 表单数据
+        total: 0, // 表单数据总数
+      };
+    },
+    methods: {
+      init() {
+        this.getDataList();
+      },
+      changePage(v) {
+        this.searchForm.pageNumber = v;
+        this.getDataList();
+        this.clearSelectAll();
+      },
+      changePageSize(v) {
+        this.searchForm.pageSize = v;
+        this.getDataList();
+      },
+      handleSearch() {
+        this.searchForm.pageNumber = 1;
+        this.searchForm.pageSize = 10;
+        this.getDataList();
+      },
+      changeSort(e) {
+        this.searchForm.sort = e.key;
+        this.searchForm.order = e.order;
+        if (e.order === "normal") {
+          this.searchForm.order = "";
+        }
+        this.getDataList();
+      },
+      clearSelectAll() {
+        this.$refs.table.selectAll(false);
+      },
+      changeSelect(e) {
+        this.selectList = e;
+        this.selectCount = e.length;
+      },
+      getDataList() {
+        this.loading = true;
+        // 带多条件搜索参数获取表单数据
+        this.searchForm.isAuth = 0;
+        getAuthGoodsListData(this.searchForm).then((res) => {
+          this.loading = false;
+          if (res.records) {
+            this.data = res.records;
+            this.total = res.total;
+          }
+        });
+      },
+      examine(v, isAuth) {
+        let examine = "通过";
+        this.goodsAuditForm.isAuth = "PASS";
+        if (isAuth != 1) {
+          examine = "拒绝";
+          this.goodsAuditForm.isAuth = "REFUSE";
+        }
+        this.$Modal.confirm({
+          title: "确认审核",
+          content: "您确认要审核" + examine + " " + v.goodsName + " ?",
+          loading: true,
+          onOk: () => {
+            authGoods(v.id, this.goodsAuditForm).then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$Message.success("审核成功");
+                this.getDataList();
+              }
+            });
+          },
+        });
+      },
+
+
+      //查看商品详情
+      showDetail(v) {
+        let id = v.id;
+        this.$router.push({
+          name: "goods-detail",
+          query: { id: id },
+        });
+      },
+    },
+    mounted() {
+      this.init();
+    },
+  };
+</script>
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>

manager/src/views/goods/goods-info/goodsDetail.scss

@@ -0,0 +1,381 @@
+/*选择商品品类*/
+.content-goods-publish {
+  padding: 15px;
+  padding-bottom: 50px;
+  margin: 0 auto;
+  text-align: center;
+  border: 1px solid #ddd;
+  background: none repeat 0 0 #fff;
+
+  /*商品品类*/
+  .goods-category {
+    text-align: left;
+    padding: 10px;
+    background: #fafafa;
+    border: 1px solid #e6e6e6;
+
+    ul {
+      padding: 8px 4px 8px 8px;
+      list-style: none;
+      width: 300px;
+      background: none repeat 0 0 #fff;
+      border: 1px solid #e6e6e6;
+      display: inline-block;
+      letter-spacing: normal;
+      margin-right: 15px;
+      vertical-align: top;
+      word-spacing: normal;
+
+      li {
+        line-height: 20px;
+        padding: 5px;
+        cursor: pointer;
+        color: #333;
+        font-size: 12px;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+  }
+
+  /** 当前品类被选中的样式 */
+  .activeClass {
+    background-color: #d9edf7;
+    border: 1px solid #bce8f1;
+    color: #3a87ad;
+  }
+
+  /*!*当前选择的商品品类文字*!*/
+  .current-goods-category {
+    text-align: left;
+    padding: 10px;
+    width: 100%;
+    border: 1px solid #fbeed5;
+    color: #c09853;
+    background-color: #fcf8e3;
+    margin: 10px auto;
+    padding: 8px 35px 8px 14px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    font-size: 12px;
+    font-weight: bold;
+  }
+}
+
+/*编辑基本信息*/
+.el-form {
+  padding-bottom: 80px;
+
+  .el-form-item {
+    width: 100%;
+    text-align: left;
+  }
+}
+
+/*平铺*/
+div.base-info-item>div {
+  margin-left: 5%;
+}
+
+div.base-info-item {
+
+  h4 {
+    margin-bottom: 10px;
+    padding: 0 10px;
+    border: 1px solid #ddd;
+    background-color: #f8f8f8;
+    font-weight: bold;
+    color: #333;
+    font-size: 14px;
+    line-height: 40px;
+    text-align: left;
+  }
+
+  .form-item-view {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-left: 80px;
+
+
+    .layout {
+      margin-bottom: 20px;
+
+      .sku-item-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        width: 100%;
+
+        .sku-item-content-name {
+          display: flex;
+          align-items: flex-start;
+          width: 100%;
+        }
+      }
+
+    }
+
+    .shop-category-text {
+      font-size: 12px;
+    }
+  }
+
+  .form-item-view-bottom {
+    margin-bottom: 50px;
+  }
+
+  .item-goods-properts-row {
+    display: flex;
+    flex-direction: row;
+    word-break: break-all;
+    white-space: normal;
+    width: 300px;
+    height: 100px;
+  }
+
+  .item-goods-properts {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+  }
+
+  .form-item {
+    display: flex;
+    align-items: center;
+  }
+
+
+  /** 审核信息-拒绝原因 */
+  .auth-info {
+    color: red;
+  }
+
+  .el-form-item {
+    width: 30%;
+    min-width: 300px;
+  }
+
+  .goods-name-width {
+    width: 50%;
+    min-width: 300px;
+  }
+
+  .el-form-item__content {
+    margin-left: 120px;
+    text-align: left;
+  }
+
+  p.goods-group-manager {
+    padding-left: 7.5%;
+    text-align: left;
+    color: #999;
+    font-size: 13px;
+  }
+
+  /*teatarea*/
+  /deep/ .el-textarea {
+    width: 150%;
+  }
+
+  .seo-text {
+    width: 150%;
+  }
+}
+
+/*折叠面板*/
+.el-collapse-item {
+  /deep/ .el-collapse-item__header {
+    text-align: left;
+    background-color: #f8f8f8;
+    padding: 0 10px;
+    font-weight: bold;
+    color: #333;
+    font-size: 14px;
+  }
+
+  .el-form-item {
+    margin-left: 5%;
+    width: 25%;
+  }
+
+  /deep/ .el-form-item__content {
+    margin-left: 120px;
+    text-align: left;
+  }
+
+  p.goods-group-manager {
+    padding-left: 12%;
+    text-align: left;
+    color: #999;
+  }
+
+  /deep/ .el-collapse-item__content {
+    padding: 10px 0;
+    text-align: left;
+  }
+}
+
+/*商品描述*/
+.goods-intro {
+  line-height: 40;
+}
+
+/** 底部步骤 */
+.footer {
+  width: 88.7%;
+  padding: 10px;
+  background-color: #ffc;
+  position: fixed;
+  bottom: 0px;
+  left: 10%;
+  text-align: center;
+  z-index: 9999;
+}
+
+/*图片上传组件第一张图设置封面*/
+.goods-images {
+  /deep/ li.el-upload-list__item:first-child {
+    position: relative;
+  }
+
+  /deep/ li.el-upload-list__item:first-child:after {
+    content: "封";
+    color: #fff;
+    font-weight: bold;
+    font-size: 12px;
+    position: absolute;
+    left: -15px;
+    top: -6px;
+    width: 40px;
+    height: 24px;
+    padding-top: 6px;
+    background: #13ce66;
+    text-align: center;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.el-form-item__label {
+  word-break: break-all;
+}
+
+.step-view {
+  width: 33%;
+  height: 40px;
+  font-size: 19px;
+  text-align: center;
+  display: flex;
+  background-color: #fff;
+  justify-content: center;
+  align-items: center;
+}
+
+.add-sku-btn {
+  margin-top: 10px;
+}
+
+.sku-item:not(:first-child) {
+  margin-top: 10px;
+  
+}
+
+.sku-upload-list {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+  margin-right: 4px;
+}
+
+.preview-picture {
+  width: 100%;
+  margin: 0 auto;
+  display: block;
+  // text-align: center;
+  border: 1px solid transparent;
+  // justify-self: center;
+  // align-self: center;
+}
+
+.preview-picture img {
+  width: 100%;
+  height: 100%;
+}
+
+.sku-upload-list img {
+  width: 100%;
+  height: 100%;
+}
+
+.sku-upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, .6);
+}
+
+.sku-upload-list:hover .sku-upload-list-cover {
+  display: block;
+}
+
+.sku-upload-list-cover i {
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.demo-upload-list{
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0,0,0,.2);
+  margin-right: 4px;
+}
+.demo-upload-list img{
+  width: 100%;
+  height: 100%;
+}
+.demo-upload-list-cover{
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,.6);
+}
+.demo-upload-list:hover .demo-upload-list-cover{
+  display: block;
+}
+.demo-upload-list-cover i{
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}

manager/src/views/goods/goods-info/goodsDetail.vue

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <Form
+      :label-width="120"
+    >
+      <div class="content-goods-publish">
+        <div class="base-info-item">
+          <h4>基本信息</h4>
+          <div class="form-item-view">
+            <FormItem label="商品分类">
+              <span v-for="item in goods.categoryName"> {{ item }} > </span>
+            </FormItem>
+            <FormItem label="商品名称" prop="goodsName">
+              {{ goods.goodsName }}
+            </FormItem>
+
+            <FormItem label="商品卖点" prop="sellingPoint">
+              {{ goods.sellingPoint }}
+            </FormItem>
+<!--            <FormItem label="商品品牌" prop="brandId">-->
+<!--              {{ goods.brandId }}-->
+<!--            </FormItem>-->
+          </div>
+          <h4>商品交易信息</h4>
+          <div class="form-item-view">
+            <FormItem
+              class="form-item-view-el"
+              label="计量单位"
+              prop="goodsUnit"
+            > {{ goods.goodsUnit }}
+            </FormItem>
+            <FormItem
+              class="form-item-view-el"
+              label="销售模式"
+              prop="salesModel"
+            >
+              {{ goods.salesModel === 'RETAIL' ? '零售型' : '批发型' }}
+            </FormItem>
+          </div>
+          <h4>商品规格及图片</h4>
+          <div class="form-item-view">
+            <FormItem label="商品编号" prop="sn">
+              {{ goods.sn }}
+            </FormItem>
+            <FormItem label="商品价格" prop="price">
+              ¥{{ goods.price | unitPrice }}
+            </FormItem>
+            <FormItem label="市场价格" prop="cost">
+
+              ¥{{ goods.cost | unitPrice }}
+            </FormItem>
+            <FormItem
+              class="form-item-view-el"
+              label="商品图片"
+              prop="goodsGalleryFiles"
+            >
+
+              <div
+                class="demo-upload-list"
+                v-for="(item, __index) in goods.goodsGalleryList"
+                :key="__index"
+              >
+                <img :src="item"/>
+                <div class="demo-upload-list-cover">
+                  <Icon
+                    type="ios-eye-outline"
+                    @click.native="handleViewGoodsPicture(item)"
+                  ></Icon>
+                </div>
+
+                <Modal title="View Image" v-model="goodsPictureVisible">
+                  <img
+                    :src="previewGoodsPicture"
+                    v-if="goodsPictureVisible"
+                    style="width: 100%"
+                  />
+                </Modal>
+              </div>
+
+
+            </FormItem>
+
+
+            <FormItem
+              class="form-item-view-el"
+              label="商品规格"
+            >
+
+              <Table :columns="skuColumn" :data="skuData">
+
+                <!-- 商品栏目格式化 -->
+                <template slot="showImage" slot-scope="scope">
+
+                  <div style="margin-top: 5px;height: 80px; display: flex;">
+                    <div style="">
+                      <img :src="scope.row.image" style="height: 60px;margin-top: 1px;width: 60px">
+                    </div>
+                  </div>
+                </template>
+              </Table>
+
+            </FormItem>
+
+
+          </div>
+          <h4>商品详情描述</h4>
+          <div class="form-item-view">
+            <FormItem class="form-item-view-el" label="商品描述" prop="intro">
+              <div v-html="goods.intro"></div>
+            </FormItem>
+            <FormItem
+              class="form-item-view-el"
+              label="移动端描述"
+              prop="skuList"
+            >
+              <div v-html="goods.mobileIntro"></div>
+            </FormItem>
+          </div>
+          <h4>商品物流信息</h4>
+          <div class="form-item-view">
+            <FormItem class="form-item-view-el" label="商品重量" prop="weight">
+              <Input v-model="goods.weight">
+                <span slot="append">kg</span>
+              </Input>
+            </FormItem>
+          </div>
+        </div>
+      </div>
+    </Form>
+  </div>
+</template>
+
+<script>
+
+import {getGoodsDetail} from "@/api/goods";
+
+export default {
+
+  name: "goodsDetail",
+  data() {
+    return {
+      goods: '',
+      previewGoodsPicture: '',
+      goodsPictureVisible: false,
+      skuColumn: [
+        {
+          title: '规格',
+          key: 'specs'
+        },
+        {
+          title: '编号',
+          key: 'sn'
+        },
+        {
+          title: '重量',
+          key: 'weight'
+        },
+        {
+          title: '成本',
+          key: 'cost'
+        },
+        {
+          title: '价格',
+          key: 'price'
+        },
+        {
+          title: '图片',
+          slot: "showImage",
+        }
+      ],
+      skuData: []
+    }
+  },
+  mounted() {
+    this.initGoods(this.$route.query.id);
+  }
+  ,
+  methods: {
+    initGoods(id) {
+      getGoodsDetail(id).then(res => {
+        this.goods = res.result;
+        let that = this
+        res.result.skuList.forEach(function (sku, index, array) {
+          console.log(sku)
+          that.skuData.push({
+            'specs': sku.goodsName,
+            'sn': sku.sn,
+            'weight': sku.weight,
+            'cost': that.$options.filters.unitPrice(sku.cost, "¥"),
+            'price': that.$options.filters.unitPrice(sku.price, "¥"),
+            'image': sku.thumbnail,
+          });
+        })
+        console.warn(this.skuData)
+
+      });
+    }
+    ,
+
+    handleViewGoodsPicture(url) {
+      this.previewGoodsPicture = url;
+      this.goodsPictureVisible = true;
+    }
+    ,
+  }
+  ,
+
+}
+;
+</script>
+
+<style lang="scss" soped>
+@import "./goodsDetail.scss";
+
+.ivu-table table {
+  width: 100% !important;
+}
+
+</style>

manager/src/views/goods/goods-manage/brand.vue

@@ -0,0 +1,403 @@
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch">
+            <Form
+              ref="searchForm"
+              :model="searchForm"
+              inline
+              :label-width="70"
+              class="search-form"
+            >
+              <Form-item label="品牌名称" prop="name">
+                <Input
+                  type="text"
+                  v-model="searchForm.name"
+                  placeholder="请输入品牌名称"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+
+              <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+            </Form>
+          </Row>
+          <Row class="operation padding-row">
+            <Button @click="add" type="primary">添加</Button>
+          </Row>
+          <Row>
+            <Table
+              :loading="loading"
+              border
+              :columns="columns"
+              :data="data"
+              ref="table"
+              sortable="custom"
+              @on-sort-change="changeSort"
+              @on-selection-change="changeSelect"
+            ></Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page
+              :current="searchForm.pageNumber"
+              :total="total"
+              :page-size="searchForm.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>
+      </Col>
+    </Row>
+    <Modal
+      :title="modalTitle"
+      v-model="modalVisible"
+      :mask-closable="false"
+      :width="500"
+    >
+      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
+        <FormItem label="品牌名称" prop="name">
+          <Input v-model="form.name" clearable style="width: 100%"/>
+        </FormItem>
+        <FormItem label="品牌图标" prop="logo">
+          <upload-pic-input
+            v-model="form.logo"
+            style="width: 100%"
+          ></upload-pic-input>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
+        >提交
+        </Button
+        >
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+  import {getManagerBrandPage, addBrand, disableBrand} from "@/api/goods";
+  import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
+
+  export default {
+    name: "brand",
+    components: {
+      uploadPicInput,
+    },
+    data() {
+      return {
+        loading: true, // 表单加载状态
+        modalType: 0, // 添加或编辑标识
+        modalVisible: false, // 添加或编辑显示
+        modalTitle: "", // 添加或编辑标题
+        searchForm: {
+          // 搜索框初始化对象
+          pageNumber: 1, // 当前页数
+          pageSize: 10, // 页面大小
+          sort: "create_time", // 默认排序字段
+          order: "desc", // 默认排序方式
+        },
+        form: {
+          // 添加或编辑表单对象初始化数据
+          name: "",
+          logo: "",
+          deleteFlag: "",
+        },
+        // 表单验证规则
+        formValidate: {},
+        submitLoading: false, // 添加或编辑提交状态
+        selectList: [], // 多选数据
+        selectCount: 0, // 多选计数
+        columns: [
+          {
+            title: "品牌名称",
+            key: "name",
+            width: 200,
+            resizable: true,
+            sortable: false,
+          },
+          {
+            title: "品牌图标",
+            key: "logo",
+            align: "left",
+            render: (h, params) => {
+              return h("img", {
+                attrs: {
+                  src: params.row.logo,
+                  alt: "加载图片失败",
+                },
+                style: {
+                  cursor: "pointer",
+                  width: "80px",
+                  height: "60px",
+                  margin: "10px 0",
+                  "object-fit": "contain",
+                },
+              });
+            },
+          },
+          {
+            title: "状态",
+            key: "deleteFlag",
+            align: "left",
+            render: (h, params) => {
+              if (params.row.deleteFlag == 0) {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "success",
+                      text: "启用",
+                    },
+                  }),
+                ]);
+              } else if (params.row.deleteFlag == 1) {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "error",
+                      text: "禁用",
+                    },
+                  }),
+                ]);
+              }
+            },
+            filters: [
+              {
+                label: "启用",
+                value: 0,
+              },
+              {
+                label: "禁用",
+                value: 1,
+              },
+            ],
+            filterMultiple: false,
+            filterMethod(value, row) {
+              if (value == 0) {
+                return row.deleteFlag == 0;
+              } else if (value == 1) {
+                return row.deleteFlag == 1;
+              }
+            },
+          },
+          {
+            title: "操作",
+            key: "action",
+            width: 180,
+            align: "center",
+            fixed: "right",
+            render: (h, params) => {
+              let enableOrDisable = "";
+              if (params.row.deleteFlag == 0) {
+                enableOrDisable = h(
+                  "Button",
+                  {
+                    props: {
+                      size: "small",
+                      type: "error",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.disable(params.row);
+                      },
+                    },
+                  },
+                  "禁用"
+                );
+              } else {
+                enableOrDisable = h(
+                  "Button",
+                  {
+                    props: {
+                      type: "success",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.enable(params.row);
+                      },
+                    },
+                  },
+                  "启用"
+                );
+              }
+              return h("div", [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.edit(params.row);
+                      },
+                    },
+                  },
+                  "编辑"
+                ),
+                enableOrDisable,
+              ]);
+            },
+          },
+        ],
+        data: [], // 表单数据
+        total: 0, // 表单数据总数
+      };
+    },
+    methods: {
+      init() {
+        this.getDataList();
+      },
+      changePage(v) {
+        this.searchForm.pageNumber = v;
+        this.getDataList();
+        this.clearSelectAll();
+      },
+      changePageSize(v) {
+        this.searchForm.pageSize = v;
+        this.getDataList();
+      },
+      handleSearch() {
+        this.searchForm.pageNumber = 1;
+        this.searchForm.pageSize = 10;
+        this.getDataList();
+      },
+      changeSort(e) {
+        this.searchForm.sort = e.key;
+        this.searchForm.order = e.order;
+        if (e.order === "normal") {
+          this.searchForm.order = "";
+        }
+        this.getDataList();
+      },
+      clearSelectAll() {
+        this.$refs.table.selectAll(false);
+      },
+      changeSelect(e) {
+        this.selectList = e;
+        this.selectCount = e.length;
+      },
+      getDataList() {
+        this.loading = true;
+        // 带多条件搜索参数获取表单数据 请自行修改接口
+        getManagerBrandPage(this.searchForm).then((res) => {
+          this.loading = false;
+          if (res.success) {
+            console.warn(12)
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        });
+      },
+      handleSubmit() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.submitLoading = true;
+            if (this.modalType === 0) {
+              // 添加 避免编辑后传入id等数据 记得删除
+              delete this.form.id;
+              addBrand(this.form).then((res) => {
+                this.submitLoading = false;
+                if (res.success) {
+                  this.$Message.success("操作成功");
+                  this.getDataList();
+                  this.modalVisible = false;
+                }
+              });
+            } else {
+              // 编辑
+              addBrand(this.form).then((res) => {
+                this.submitLoading = false;
+                if (res.success) {
+                  this.$Message.success("操作成功");
+                  this.getDataList();
+                  this.modalVisible = false;
+                }
+              });
+            }
+          }
+        });
+      },
+      add() {
+        this.modalType = 0;
+        this.modalTitle = "添加";
+        this.$refs.form.resetFields();
+        delete this.form.id;
+        this.modalVisible = true;
+      },
+      edit(v) {
+        this.modalType = 1;
+        this.modalTitle = "编辑";
+        this.$refs.form.resetFields();
+        // 转换null为""
+        for (let attr in v) {
+          if (v[attr] === null) {
+            v[attr] = "";
+          }
+        }
+        let str = JSON.stringify(v);
+        let data = JSON.parse(str);
+        this.form = data;
+        this.modalVisible = true;
+      },
+      enable(v) {
+        this.$Modal.confirm({
+          title: "确认启用",
+          content: "您确认要启用品牌 " + v.name + " ?",
+          loading: true,
+          onOk: () => {
+            disableBrand(v.id, {disable: false}).then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+              }
+            });
+          },
+        });
+      },
+      disable(v) {
+        this.$Modal.confirm({
+          title: "确认禁用",
+          content: "您确认要禁用品牌 " + v.name + " ?",
+          loading: true,
+          onOk: () => {
+            disableBrand(v.id, {disable: true}).then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+              }
+            });
+          },
+        });
+      },
+    },
+    mounted() {
+      this.init();
+    },
+  };
+</script>

manager/src/views/goods/goods-manage/category.vue

@@ -0,0 +1,528 @@
+<template>
+  <div class="wrapper">
+    <div class="operation">
+      <Button @click="addParent" icon="md-add">添加一级分类</Button>
+      选择分类:
+      <Select @on-change="changeSortCate" v-model="sortCate" style="width:200px">
+        <Option v-for="item in sortCateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+      </Select>
+
+    </div>
+    <tree-table ref="treeTable" size="default" :loading="loading" :data="tableData" :columns="columns" :border="true" :show-index="false" :is-fold="true" :expand-type="false" primary-key="id">
+
+      <template slot="action" slot-scope="scope">
+        <Dropdown v-show="scope.row.level == 2"  transfer="true" trigger="click">
+          <Button size="small">
+            绑定
+            <Icon type="ios-arrow-down"></Icon>
+          </Button>
+          <DropdownMenu slot="list">
+            <DropdownItem @click.native="brandOperation(scope.row)">编辑绑定品牌</DropdownItem>
+            <DropdownItem @click.native="specOperation(scope.row)">编辑绑定规格</DropdownItem>
+            <DropdownItem @click.native="parameterOperation(scope.row)">编辑绑定参数</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+
+        &nbsp;
+        <Dropdown transfer="true" trigger="click">
+          <Button size="small">
+            操作
+            <Icon type="ios-arrow-down"></Icon>
+          </Button>
+          <DropdownMenu slot="list">
+            <DropdownItem @click.native="edit(scope.row)">编辑</DropdownItem>
+            <DropdownItem v-if="scope.row.deleteFlag == 1" @click.native="enable(scope.row)">启用</DropdownItem>
+            <DropdownItem v-if="scope.row.deleteFlag == 0" @click.native="disable(scope.row)">禁用</DropdownItem>
+            <DropdownItem @click.native="remove(scope.row)">删除</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+        &nbsp;
+        <Button v-show="scope.row.level != 2" type="primary" @click="addChildren(scope.row)" size="small" icon="md-add" style="margin-right: 5px">添加子分类
+        </Button>
+      </template>
+
+      <template slot="commissionRate" slot-scope="scope">
+        {{ scope.row.commissionRate }}%
+      </template>
+
+      <template slot="deleteFlag" slot-scope="scope">
+        <div v-if="scope.row.deleteFlag == 0">
+          <Badge text="正常启用" status="success"></Badge>
+        </div>
+        <div v-if="scope.row.deleteFlag == 1">
+          <Badge text="禁用" status="error"></Badge>
+        </div>
+      </template>
+    </tree-table>
+
+    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
+      <Form ref="form" :model="formAdd" :label-width="100" :rules="formValidate">
+        <div v-if="showParent">
+          <FormItem label="上级分类" prop="parentId">
+            {{ parentTitle }}
+            <Input v-model="formAdd.parentId" clearable style="width: 100%; display: none" />
+          </FormItem>
+        </div>
+        <FormItem label="层级" prop="level" style="display: none">
+          <Input v-model="formAdd.level" clearable style="width: 100%" />
+        </FormItem>
+        <FormItem label="分类名称" prop="name">
+          <Input v-model="formAdd.name" clearable style="width: 100%" />
+        </FormItem>
+        <FormItem label="分类图标" prop="image">
+          <upload-pic-input v-model="formAdd.image" style="width: 100%"></upload-pic-input>
+        </FormItem>
+        <FormItem label="排序值" prop="sortOrder" style="width: 345px">
+          <InputNumber v-model="formAdd.sortOrder"></InputNumber>
+        </FormItem>
+        <FormItem label="佣金比例(%)" prop="commissionRate" style="width: 345px">
+          <InputNumber v-model="formAdd.commissionRate"></InputNumber>
+        </FormItem>
+        <FormItem label="是否启用" prop="deleteFlag">
+          <i-switch size="large" v-model="formAdd.deleteFlag" :true-value="0" :false-value="1">
+            <span slot="open">启用</span>
+            <span slot="close">禁用</span>
+          </i-switch>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="Submit">提交</Button>
+      </div>
+    </Modal>
+
+    <Modal :title="modalBrandTitle" v-model="modalBrandVisible" :mask-closable="false" :width="500">
+      <Form ref="brandForm" :model="brandForm" :label-width="100">
+        <Select v-model="brandForm.categoryBrands" multiple>
+          <Option v-for="item in brandWay" :value="item.id" :key="item.id">{{ item.name }}</Option>
+
+        </Select>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalBrandVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="saveCategoryBrand">提交</Button>
+      </div>
+    </Modal>
+
+    <Modal :title="modalSpecTitle" v-model="modalSpecVisible" :mask-closable="false" :width="500">
+      <Form ref="specForm" :model="specForm" :label-width="100">
+        <Select v-model="specForm.category_specs" multiple>
+          <Option v-for="item in specifications" :value="item.id" :key="item.id" :label="item.specName">
+          </Option>
+        </Select>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalSpecVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="saveCategorySpec">提交</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+import {
+  insertCategory,
+  updateCategory,
+  getBrandListData,
+  delCategory,
+  getCategoryBrandListData,
+  saveCategoryBrand,
+  getSpecificationList,
+  getCategorySpecListData,
+  disableCategory,
+  saveCategorySpec,
+  getCategoryTree,
+} from "@/api/goods";
+import TreeTable from "@/views/my-components/tree-table/Table/Table";
+import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
+import * as filters from "@/utils/filters";
+
+export default {
+  name: "lili-components",
+  components: {
+    TreeTable,
+    uploadPicInput,
+  },
+  data() {
+    return {
+      categoryList: [],
+      sortCateList: [], //筛选出分类第一级
+      sortCate: "", //筛选的数据
+      currView: "index",
+      loading: false,
+      selectCount: 0,
+      brands: [], //品牌集合
+      specifications: [], //规格集合
+      categoryId: "",
+      category_brands: [], //已经选择的品牌
+      category_specs: [], //已经选择的规格
+      expandLevel: 1,
+      modalType: 0, // 添加或编辑标识
+      modalVisible: false, // 添加或编辑显示
+      modalBrandVisible: false, //品牌关联编辑显示
+      modalSpecVisible: false, //品牌关联编辑显示
+      modalTitle: "", // 添加或编辑标题
+      showParent: false, // 是否展示上级菜单
+      parentTitle: "", // 父级菜单名称
+      modalBrandTitle: "",
+      modalSpecTitle: "",
+      formAdd: {
+        // 添加或编辑表单对象初始化数据
+        parentId: "",
+        name: "",
+        image: "",
+        sortOrder: "",
+        deleteFlag: 0,
+        commissionRate: "",
+        level: 0,
+      },
+      brandForm: {
+        categoryBrands: [],
+      },
+      brandWay: "", //请求绑定品牌的信息
+      specForm: {},
+      // 表单验证规则
+      formValidate: {},
+      columns: [
+        {
+          title: "分类名称",
+          key: "name",
+          minWidth: "120px",
+        },
+        {
+          title: "状态",
+          key: "deleteFlag",
+          headerAlign: "center",
+          type: "template",
+          template: "deleteFlag",
+        },
+        {
+          title: "佣金(%)",
+          key: "commissionRate",
+          headerAlign: "center",
+          type: "template",
+          template: "commissionRate",
+        },
+        {
+          fixed: "right",
+          title: "操作",
+          key: "action",
+          align: "left",
+          headerAlign: "center",
+          type: "template",
+          template: "action",
+        },
+      ],
+      tableData: [],
+    };
+  },
+  methods: {
+
+    changeSortCate(val) {
+      let way = this.categoryList.find((item) => {
+        return item.name == val;
+      });
+      this.tableData = [way];
+    },
+    init() {
+      this.getAllList(0);
+      this.getBrandList();
+      this.getSpecList();
+    },
+    //获取所有品牌
+    getBrandList() {
+      getBrandListData().then((res) => {
+        this.brandWay = res;
+      });
+    },
+    //获取所有规格
+    getSpecList() {
+      getSpecificationList().then((res) => {
+        if (res.success) {
+          this.specifications = res;
+        }
+      });
+    },
+    //弹出品牌关联框
+    brandOperation(v) {
+      getCategoryBrandListData(v.id).then((res) => {
+        this.categoryId = v.id;
+        this.modalBrandTitle = "品牌关联";
+        this.brandForm.categoryBrands = res.result.map((item) => item.id);
+        // this.brandWay = {...res.result}
+        this.modalBrandVisible = true;
+      });
+    },
+    //弹出规格关联框
+    specOperation(v) {
+      getCategorySpecListData(v.id).then((res) => {
+        this.categoryId = v.id;
+        this.modalSpecTitle = "规格关联";
+        this.specForm.category_specs = res.map((item) => item.id);
+        this.modalSpecVisible = true;
+      });
+    },
+    //保存分类规格绑定
+    saveCategorySpec() {
+      saveCategorySpec(this.categoryId, this.specForm).then((res) => {
+        this.submitLoading = false;
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.modalSpecVisible = false;
+        }
+      });
+    },
+    //保存分类品牌绑定
+    saveCategoryBrand() {
+      saveCategoryBrand(this.categoryId, this.brandForm).then((res) => {
+        this.submitLoading = false;
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.modalBrandVisible = false;
+        }
+      });
+    },
+    parameterOperation(v) {
+      this.$router.push({ name: "parameter", query: { id: v.id } });
+    },
+    refresh() {
+      this.loading = true;
+      let that = this;
+      setTimeout(function () {
+        that.loading = false;
+      }, 1000);
+    },
+    addChildren(v) {
+      this.modalType = 0;
+      this.modalTitle = "添加子分类";
+      this.parentTitle = v.name;
+      this.formAdd.level = eval(v.level + "+1");
+      this.showParent = true;
+      // this.$refs.form.resetFields();
+      delete this.formAdd.id;
+      this.formAdd.parentId = v.id;
+      this.modalVisible = true;
+    },
+    edit(v) {
+      this.modalType = 1;
+      this.modalTitle = "编辑";
+      this.formAdd.id = v.id;
+      this.formAdd.name = v.name;
+      this.formAdd.level = v.level;
+      this.formAdd.parentId = v.parentId;
+      this.formAdd.sortOrder = v.sortOrder;
+      this.formAdd.commissionRate = v.commissionRate;
+      this.formAdd.deleteFlag = v.deleteFlag;
+      this.formAdd.image = v.image;
+      this.showParent = false;
+      this.modalVisible = true;
+    },
+    addParent() {
+      this.modalType = 0;
+      this.modalTitle = "添加一级分类";
+      this.parentTitle = "顶级分类";
+      this.showParent = true;
+      this.$refs.form.resetFields();
+      delete this.formAdd.id;
+      this.formAdd.parentId = 0;
+      this.modalVisible = true;
+    },
+    Submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          if (this.modalType === 0) {
+            // 添加 避免编辑后传入id等数据 记得删除
+            delete this.formAdd.id;
+            insertCategory(this.formAdd).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("添加成功");
+                this.getAllList(0);
+                this.modalVisible = false;
+                this.$refs.form.resetFields();
+              }
+            });
+          } else {
+            // 编辑
+            updateCategory(this.formAdd).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("修改成功");
+                this.getAllList(0);
+                this.modalVisible = false;
+                this.$refs.form.resetFields();
+              }
+            });
+          }
+        }
+      });
+    },
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        // 记得确认修改此处
+        content: "您确认要删除 " + v.name + " ?",
+        loading: true,
+        onOk: () => {
+          // 删除
+          delCategory(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getAllList(0);
+            }
+          });
+        },
+      });
+    },
+    getAllList(parent_id) {
+      this.loading = true;
+      getCategoryTree(parent_id).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          // 仅展开指定级数 默认后台已展开所有
+          let expandLevel = this.expandLevel;
+          localStorage.setItem("category", JSON.stringify(res.result));
+          res.result.forEach((e, index, arr) => {
+            this.sortCateList.push({
+              label: e.name,
+              value: e.name,
+            });
+            this.sortCate = arr[0].name;
+            if (expandLevel == 1) {
+              if (e.level == 0) {
+                e.expand = false;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = false;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 2) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = false;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 3) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = true;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            }
+          });
+
+          this.categoryList = res.result;
+          this.tableData = [res.result[0]];
+        }
+      });
+    },
+    enable(v) {
+      this.$Modal.confirm({
+        title: "确认启用",
+        content: "您是否要启用当前分类 " + v.name + " 及其子分类?",
+        loading: true,
+        okText: "是",
+        cancelText: "否",
+        onOk: () => {
+          disableCategory(v.id, { enableOperations: 0 }).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getAllList(0);
+            }
+          });
+        },
+        onCancel: () => {
+          this.getAllList(0);
+        },
+      });
+    },
+    disable(v) {
+      this.$Modal.confirm({
+        title: "确认禁用",
+        content: "您是否要禁用当前分类 " + v.name + " 及其子分类?",
+        loading: true,
+        okText: "是",
+        cancelText: "否",
+        onOk: () => {
+          disableCategory(v.id, { enableOperations: true }).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getAllList(0);
+            }
+          });
+        },
+        onCancel: () => {
+          this.getAllList(0);
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/styles/table-common.scss";
+.wrapper {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  padding: 20px;
+}
+.article {
+  font-size: 16px;
+  font-weight: 400;
+  margin: 12px 0;
+}
+
+.href-text {
+  font-size: 12px;
+}
+
+.operation {
+  margin-bottom: 2vh;
+}
+
+.select-count {
+  font-weight: 600;
+  color: #40a9ff;
+}
+</style>

manager/src/views/goods/goods-manage/parameter.vue

@@ -0,0 +1,336 @@
+<template>
+  <div style="width: 100%;">
+
+    <Card>
+      <Button @click="handleAddParamsGroup" type="primary">添加</Button>
+
+    </Card>
+
+    <div class="row">
+      <Card v-if="paramsGroup.length==0">
+        暂无参数绑定信息
+      </Card>
+      <div class="paramsGroup" v-else>
+
+        <Card style="width: 350px; margin:7px;" v-for="group in paramsGroup" :key="group.groupId" :bordered="false">
+          <p slot="title">
+            <Icon type="ios-film-outline"></Icon>&nbsp;{{ group.groupName }}
+          </p>
+          <p slot="extra">
+            <Dropdown slot="extra">
+              <a href="javascript:void(0)">
+                操作
+                <Icon type="ios-arrow-down"></Icon>
+              </a>
+              <Dropdown-menu slot="list">
+                <Dropdown-item @click.native="handleEditParamsGroup(group)">编辑</Dropdown-item>
+                <Dropdown-item @click.native="handleDeleteParamGroup(group)">删除</Dropdown-item>
+              </Dropdown-menu>
+            </Dropdown>
+            <Icon type="arrow-down-b"></Icon>
+          </p>
+          <template v-if="group.params && group.params.length > 0">
+            <div v-for="param in group.params" :key="param.param_id" class="params">
+              <span>{{ param.paramName }} 【{{
+                  param.paramType | paramTypeFilter
+                }}】</span>
+
+              <span>
+                <i-button type="text" @click="handleEditParams(group, param)">编辑</i-button>
+                <i-button type="text" size="small" style="color: #f56c6c" @click="handleDeleteParam(group, param)">删除</i-button>
+              </span>
+            </div>
+          </template>
+          <div v-else style="align-content: center">暂无数据...</div>
+          <div style="text-align: center">
+            <i-button type="text" @click="handleAddParams(group)">添加</i-button>
+          </div>
+        </Card>
+
+      </div>
+
+    </div>
+    <div>
+      <Modal :title="modalTitle" v-model="dialogParamsVisible" :mask-closable="false" :width="500">
+        <Form ref="paramForm" :model="paramForm" :label-width="100" :rules="formValidate">
+          <FormItem label="参数名称" prop="paramName">
+            <Input v-model="paramForm.paramName" style="width: 100%" />
+          </FormItem>
+          <FormItem label="参数类型" prop="paramType">
+            <Select :loading="userLoading" v-model="paramForm.paramType">
+              <Option :value="1" :key="1">输入项</Option>
+              <Option :value="2" :key="2">选择项</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="可选值" prop="options">
+            <i-input v-model="paramForm.options" type="textarea" :rows="3" placeholder="请输入可选值,选择项实用逗号分隔"></i-input>
+          </FormItem>
+
+          <FormItem label="选项" prop="specName3">
+            <Checkbox :value="Number" v-model="paramForm.required">必填</Checkbox>
+            <Checkbox v-model="paramForm.isIndex">可索引</Checkbox>
+          </FormItem>
+        </Form>
+
+        <div slot="footer">
+          <Button type="text" @click="dialogParamsVisible = false">取消</Button>
+          <Button type="primary" :loading="submitLoading" @click="submitParamForm">提交</Button>
+        </div>
+      </Modal>
+    </div>
+
+    <div>
+      <Modal :title="modalTitle" v-model="dialogParamsGroupVisible" :mask-closable="false" :width="500">
+        <Form ref="paramGroupForm" :model="paramGroupForm" :label-width="100" :rules="paramGroupValidate">
+          <FormItem label="参数名称" prop="groupName">
+            <Input v-model="paramGroupForm.groupName" style="width: 100%" />
+          </FormItem>
+        </Form>
+
+        <div slot="footer">
+          <Button type="text" @click="dialogParamsGroupVisible = false">取消</Button>
+          <Button type="primary" :loading="submitLoading" @click="submitParamGroupForm">提交</Button>
+        </div>
+      </Modal>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getCategoryParamsListData,
+  insertGoodsParams,
+  updateGoodsParams,
+  deleteParams,
+  insertParamsGroup,
+  updateParamsGroup,
+  deleteParamsGroup,
+} from "@/api/goods";
+export default {
+  name: "categoryParams",
+  components: {},
+  data() {
+    return {
+      /** 分类ID */
+      categoryId: this.$route.query.id,
+      /** 参数组 */
+      paramsGroup: [],
+      /** 添加或编辑标识 */
+      modalType: 0,
+      /** 添加或编辑标题 */
+      modalTitle: "",
+      modalTitle1: "",
+      /** 参数添加或编辑弹出框 */
+      dialogParamsVisible: false,
+      /** 参数组添加或编辑弹出框 */
+      dialogParamsGroupVisible: false,
+      /** 参数ID **/
+      paramId: "",
+      //参数表单
+      paramForm: {},
+      paramGroupForm: {},
+      /** 添加、编辑参数 规格 */
+      formValidate: {
+        paramName: [
+          { required: true, message: "参数名称不能为空", trigger: "blur" },
+        ],
+      },
+      /** 参数组*/
+      paramGroupValidate: {
+        groupName: [
+          { required: true, message: "参数组名称不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  filters: {
+    paramTypeFilter(val) {
+      return val === 1 ? "输入项" : "选择项";
+    },
+  },
+  methods: {
+    init() {
+      this.getDataList();
+    },
+    //弹出添加参数框
+    handleAddParams(group) {
+      this.paramForm = {
+        paramName: "",
+        paramType: 1,
+        options: "",
+        required: false,
+        isIndex: false,
+        groupId: group.groupId,
+        categoryId: this.categoryId,
+      };
+      this.modalTitle = "添加参数";
+      this.modalType = 0;
+      this.dialogParamsVisible = true;
+    },
+    //弹出修改参数框
+    handleEditParams(group, param) {
+      this.paramForm = {
+        paramName: param.paramName,
+        paramType: param.paramType,
+        options: param.options,
+        required: param.required,
+        isIndex: param.isIndex,
+        groupId: group.groupId,
+        categoryId: this.categoryId,
+        id: param.id,
+      };
+      this.modalType = 1;
+      this.modalTitle = "修改参数";
+      this.dialogParamsVisible = true;
+    },
+    //弹出修改参数组框
+    handleEditParamsGroup(group) {
+      this.paramGroupForm = {
+        groupName: group.groupName,
+        categoryId: this.categoryId,
+        id: group.groupId,
+      };
+      this.modalType = 1;
+      this.modalTitle = "修改参数组";
+      this.dialogParamsGroupVisible = true;
+    },
+    handleAddParamsGroup() {
+      (this.paramGroupForm.categoryId = this.categoryId), (this.modalType = 0);
+      this.modalTitle = "添加参数组";
+      this.dialogParamsGroupVisible = true;
+    },
+    //保存参数组
+    submitParamGroupForm() {
+      this.$refs.paramGroupForm.validate((valid) => {
+        if (valid) {
+          if (this.modalType === 0) {
+            insertParamsGroup(this.paramGroupForm).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("参数组修改成功");
+                this.getDataList();
+                this.dialogParamsVisible = false;
+              }
+            });
+          } else {
+            updateParamsGroup(this.paramGroupForm).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("参数组修改成功");
+                this.getDataList();
+                this.dialogParamsVisible = false;
+              }
+            });
+          }
+          this.dialogParamsGroupVisible = false;
+        }
+      });
+    },
+    //保存参数
+    submitParamForm() {
+      this.$refs.paramForm.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          if (this.modalType === 0) {
+            this.paramForm.isIndex = Number(this.paramForm.isIndex);
+            this.paramForm.required = Number(this.paramForm.required);
+            insertGoodsParams(this.paramForm).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("参数添加成功");
+                this.getDataList();
+                this.dialogParamsVisible = false;
+              }
+            });
+          } else {
+            this.paramForm.isIndex = Number(this.paramForm.isIndex);
+            this.paramForm.required = Number(this.paramForm.required);
+            updateGoodsParams(this.paramForm).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("参数修改成功");
+                this.getDataList();
+                this.dialogParamsVisible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    getDataList() {
+      getCategoryParamsListData(this.categoryId).then((res) => {
+        if (res.success) {
+          this.paramsGroup = res.result;
+        }
+      });
+    },
+    //删除参数方法
+    handleDeleteParam(group, param) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        // 记得确认修改此处
+        content: "您确认要删除 " + param.paramName + " ?",
+        loading: true,
+        onOk: () => {
+          // 删除
+          deleteParams(param.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除参数成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+    //删除参数组方法
+    handleDeleteParamGroup(group) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        // 记得确认修改此处
+        content: "您确认要删除 " + group.groupName + " ?",
+        loading: true,
+        onOk: () => {
+          // 删除
+          deleteParamsGroup(group.groupId).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除参数成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" >
+.row {
+  overflow: hidden;
+  margin: 20px 0;
+}
+.params {
+  align-items: center;
+  display: flex;
+  padding: 3px;
+  background-color: #f5f7fa;
+  font-size: 14px;
+  justify-content: space-between;
+}
+.ivu-card-head {
+  background-color: #f5f7fa;
+}
+
+.ivu-btn {
+  font-size: 13px;
+}
+.paramsGroup {
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+</style>

manager/src/views/goods/goods-manage/spec.vue

@@ -0,0 +1,426 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch">
+            <Form
+              ref="searchForm"
+              :model="searchForm"
+              inline
+              :label-width="70"
+              class="search-form"
+            >
+              <Form-item label="规格名称" prop="specName">
+                <Input
+                  type="text"
+                  v-model="searchForm.specName"
+                  placeholder="请输入规格名称"
+                  clearable
+                  style="width: 200px"
+                />
+              </Form-item>
+
+              <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+            </Form>
+          </Row>
+          <Row class="operation padding-row">
+            <Button @click="add" type="primary" >添加</Button>
+            <Button @click="delAll" >批量删除</Button>
+          </Row>
+          <Row class="padding-row">
+            <Table
+              :loading="loading"
+              border
+              :columns="columns"
+              :data="data"
+              ref="table"
+              sortable="custom"
+              @on-sort-change="changeSort"
+              @on-selection-change="changeSelect"
+            >
+
+            </Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page
+              :current="searchForm.pageNumber"
+              :total="total"
+              :page-size="searchForm.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>
+      </Col>
+    </Row>
+    <Modal
+      :title="modalTitle"
+      v-model="modalVisible"
+      :mask-closable="false"
+      :width="500"
+    >
+      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
+        <FormItem label="规格名称" prop="specName">
+          <Input v-model="form.specName" maxlength="30" clearable style="width: 100%" />
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="saveSpec"
+          >提交</Button
+        >
+      </div>
+    </Modal>
+    <Modal
+      :title="modalTitle"
+      v-model="dialogSpecValuesVisible"
+      :mask-closable="false"
+      :width="500"
+      :styles="{ top: '30px' }"
+      class="permModal"
+    >
+      <Form ref="specForm" :model="specForm" :label-width="100">
+        <Select
+          v-model="specForm.specValue"
+          placeholder="输入后回车添加"
+          multiple
+          filterable
+          allow-create
+          :popper-append-to-body="false"
+          popper-class="spec-values-popper"
+          style="width: 100%; text-align: left; margin-right: 10px"
+        >
+          <Option
+            v-for="item in specValues"
+            :value="item.specValue"
+            :key="item.id"
+            :label="item.specValue"
+          >
+          </Option>
+        </Select>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="dialogSpecValuesVisible = false"
+          >取消</Button
+        >
+        <Button
+          type="primary"
+          :loading="submitLoading"
+          @click="submitSpecValuesForm"
+          >提交</Button
+        >
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  getSpecListData,
+  insertSpec,
+  updateSpec,
+  delSpec,
+  getSpecValuesListData,
+  saveSpecValues,
+} from "@/api/goods";
+export default {
+  name: "spec",
+  components: {},
+  data() {
+    return {
+      loading: true, // 表单加载状态
+      modalType: 0, // 添加或编辑标识
+      modalVisible: false, // 添加或编辑显示
+      modalTitle: "", // 添加或编辑标题
+      dialogSpecValuesVisible: false, // 添加或编辑规格值
+      specTitle: "", // 添加或编辑规格值
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "asc", // 默认排序方式
+      },
+      form: {
+        // 添加或编辑表单对象初始化数据
+        specName: "",
+        specValue: "",
+      },
+      specForm: {},
+      /** 编辑规格值 */
+      specValues: [],
+      // 表单验证规则
+      formValidate: {},
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "规格名称",
+          key: "specName",
+          width: 200,
+        },
+        {
+          title: "规格值",
+          key: "specValue",
+          minWidth: 250,
+          tooltip: true
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 250,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "primary",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.editSpec(params.row);
+                    },
+                  },
+                },
+                "编辑规格值"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "info",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.edit(params.row);
+                    },
+                  },
+                },
+                "编辑"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "error",
+                    size: "small",
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+    };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    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();
+    },
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order === "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+    getDataList() {
+      this.loading = true;
+      // 带多条件搜索参数获取表单数据 请自行修改接口
+      getSpecListData(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+      this.loading = false;
+    },
+    submitSpecValuesForm() {
+      saveSpecValues(this.specForm.specId, this.specForm).then((res) => {
+        this.submitLoading = false;
+        if (res.success) {
+          this.$Message.success("规格值保存成功");
+          this.getDataList();
+          this.modalVisible = false;
+          this.dialogSpecValuesVisible = false;
+        }
+      });
+    },
+    saveSpec() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          if (this.modalType === 0) {
+            // 添加 避免编辑后传入id等数据
+            delete this.form.id;
+            insertSpec(this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          } else {
+            // 编辑
+            updateSpec(this.form).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    add() {
+      this.modalType = 0;
+      this.modalTitle = "添加";
+      this.$refs.form.resetFields();
+      delete this.form.id;
+      this.modalVisible = true;
+    },
+    edit(v) {
+      this.modalType = 1;
+      this.modalTitle = "编辑";
+      this.$refs.form.resetFields();
+      // 转换null为""
+      for (let attr in v) {
+        if (v[attr] === null) {
+          v[attr] = "";
+        }
+      }
+      let str = JSON.stringify(v);
+      let data = JSON.parse(str);
+      this.form = data;
+      this.modalVisible = true;
+    },
+    editSpec(v) {
+      getSpecValuesListData(v.id).then((res) => {
+        this.modalType = 1;
+        this.modalTitle = "编辑";
+        this.specValues = res.result;
+        this.specForm.specValue = res.result.map(item => item.specValue)
+        this.specForm.specId = v.id;
+        this.dialogSpecValuesVisible = true;
+      });
+    },
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        // 记得确认修改此处
+        content: "您确认要删除 " + v.specName + " ?",
+        loading: true,
+        onOk: () => {
+          // 删除
+          delSpec(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          // 批量删除
+          delSpec(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.clearSelectAll();
+              this.searchForm.pageNumber = 1
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss">
+  @import "@/styles/table-common.scss";
+</style>

manager/src/views/goods/goods-refund/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <Card>
+    <Form
+      label-position="left"
+      ref="searchForm"
+      :model="params"
+      inline
+      :label-width="100"
+      class="search-form"
+    >
+      <Form-item label="选择店铺" prop="sn">
+        <span class="tips" v-if="storeName"
+          >{{ storeName }}
+          <Button
+            @click="
+              () => {
+                storeName = '';
+                params.shopId = '';
+              }
+            "
+            type="text"
+            >清空</Button
+          >
+        </span>
+        <Button size="small" @click="handleClickShop" type="primary"
+          >选择店铺</Button
+        >
+      </Form-item>
+
+      <Form-item label="选择时间类型">
+        <Select v-model="params.timeType" style="width: 200px">
+          <Option
+            v-for="item in typeList"
+            :value="item.value"
+            :key="item.value"
+            >{{ item.label }}</Option
+          >
+        </Select>
+      </Form-item>
+      <Form-item label="按年查询">
+        <DatePicker
+          type="year"
+          placeholder="Select year"
+          style="width: 200px"
+          v-model="year"
+        ></DatePicker>
+      </Form-item>
+      <Form-item label="按月查询" v-if="params.timeType == 'MONTH'">
+        <InputNumber :max="12" :min="1" v-model="params.month"></InputNumber>
+      </Form-item>
+    </Form>
+
+    <div class="order-list">
+      <div class="order-col">
+        <div>金额</div>
+        <div>{{ priceData | unitPrice }}</div>
+      </div>
+    </div>
+    <Tabs v-model="orderStatus" @on-click="handleClickType">
+      <TabPane label="订单列表" name="PRICE">
+        <Table :columns="columns" :data="data"></Table>
+        <div class="page-col">
+          <Page @on-change="changePage" :total="total" show-total />
+        </div>
+      </TabPane>
+    </Tabs>
+
+    <Modal v-model="modalFlag" width="1200" :title="selectName">
+      <!-- 店铺 -->
+      <shopLayout v-if="shopFlag" @callback="callbackShop" ref="shops" />
+      <!-- 会员 -->
+      <memberLayout v-else @callback="callbackMember" ref="members" />
+    </Modal>
+  </Card>
+</template>
+<script>
+import shopLayout from "@/views/seller/shop/shopList";
+import memberLayout from "@/views/member/list/index";
+import * as API_Goods from "@/api/goods";
+export default {
+  components: {
+    shopLayout,
+    memberLayout,
+  },
+  data() {
+    return {
+      storeName: "",
+      memberName: "",
+      shopFlag: false,
+      selectName: "选择",
+      modalFlag: false,
+      priceData: "",
+      orderStatus: "PRICE",
+
+      shopList: {},
+      memberList: {},
+
+      typeList: [
+        {
+          value: "YEAR",
+          label: "年",
+        },
+        {
+          value: "MONTH",
+          label: "月",
+        },
+      ],
+      total: 0,
+      year: "",
+      params: {
+        type: "PRICE",
+        timeType: "YEAR",
+        pageNumber: 1,
+        pageSize: 10,
+        year: "",
+        shopId: "",
+        memberId: "",
+      },
+      columns: [
+        {
+          title: "售后号",
+          key: "refundSn",
+        },
+        {
+          title: "卖家名称",
+          key: "sellerName",
+        },
+        {
+          title: "商品名称",
+          key: "name",
+        },
+        {
+          title: "规格名称",
+          key: "specs",
+        },
+        {
+          title: "会员名称",
+          key: "memberName",
+        },
+
+        {
+          title: "实际退款金额",
+          key: "finalPrice",
+          align: "center",
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.finalPrice)
+            );
+          },
+        },
+      ],
+      data: [],
+    };
+  },
+  watch: {
+    params: {
+      handler(val) {
+        this.init();
+      },
+      deep: true,
+    },
+
+    year(val) {
+      this.params.year = new Date(val).getFullYear();
+    },
+  },
+  methods: {
+    // 选择店铺
+    handleClickShop() {
+      this.modalFlag = true;
+      this.selectName += "店铺";
+      this.shopFlag = true;
+      this.$nextTick(() => {
+        this.$refs.shops.selectedShop = true;
+      });
+    },
+    // 选择会员
+    handleClickMember() {
+      this.modalFlag = true;
+      this.selectName += "会员";
+      this.$nextTick(() => {
+        this.$refs.members.selectedMember = true;
+      });
+    },
+
+    callbackMember(val) {
+      this.memberName = val.username;
+      this.params.memberId = val.id;
+      this.modalFlag = false;
+    },
+
+    callbackShop(val) {
+      this.storeName = val.storeName;
+      this.params.shopId = val.id;
+      this.modalFlag = false;
+    },
+
+    // 点击分页
+    changePage(index) {
+      this.params.pageNumber = index;
+    },
+
+    handleClickType(name) {
+      this.params.type = name;
+    },
+    init(name) {
+      Promise.all([
+        API_Goods.refundStatistics(this.params),
+        !this.priceData ? API_Goods.refundPriceStatistics(this.params) : "",
+      ]).then((res) => {
+        if (res[0].result) {
+          this.data = res[0].result.records;
+          this.total = res[0].result.total;
+        }
+        if (res[1].result) {
+          this.priceData = res[1].result;
+        }
+      });
+    },
+  },
+  mounted() {
+    let data = new Date();
+
+    this.year = data;
+    this.year && this.params.month
+      ? this.timeType == "MONTH"
+      : this.timeType == "YEAR";
+  },
+};
+</script>
+<style scoped lang="scss">
+.page-col {
+  text-align: right;
+  margin: 10px 0;
+}
+.order-col {
+  display: flex;
+  > div {
+    margin-right: 8px;
+    padding: 16px;
+    font-size: 15px;
+  }
+}
+.order-list {
+  display: flex;
+}
+.tips {
+  margin: 0 8px;
+}
+</style>

manager/src/views/goods/goods-review/index.scss

@@ -0,0 +1,48 @@
+.left-container {
+  float: left;
+}
+
+.right-container {
+  float: left;
+  margin-left: 50px;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+.product {
+  width: 140px;
+  height: 160px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+}
+.show{
+  label{
+    font-size: 14px;
+  }
+  margin-top: 15px;
+}
+
+label {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+  display: block;
+  float: left;
+  margin-right: 2px;
+}
+.border-b {
+  border-bottom: 1px solid #e9e9e9;
+  width: 500px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 12px;
+}
+.div-height{
+  line-height: 25px;
+}

manager/src/views/goods/goods-review/index.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="search">
+    <Row>
+      <Card>
+        <Row @keydown.enter.native="handleSearch">
+          <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+            <Form-item label="会员名称" prop="memberName">
+              <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 200px"/>
+            </Form-item>
+            <Button @click="handleSearch" type="primary" class="search-btn" icon="ios-search">搜索</Button>
+          </Form>
+        </Row>
+        <Row class="padding-row">
+          <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
+                 @on-sort-change="changeSort" @on-selection-change="changeSelect">
+            <!-- 页面展示 -->
+            <template slot="shopDisableSlot" slot-scope="scope">
+              <div>
+              </div>
+              <i-switch size="large" true-value="OPEN" false-value="CLOSE" v-model="scope.row.status"
+                        @on-change="changeSwitch(scope.row)">
+                <span slot="open">展示</span>
+                <span slot="close">隐藏</span>
+              </i-switch>
+            </template>
+          </Table>
+
+        </Row>
+        <Row type="flex" justify="end" class="page">
+          <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.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>
+    </Row>
+
+    <Modal v-model="infoFlag" width="800" :title="infoTitle">
+
+      <div class="info-list" style="overflow: hidden">
+        <div class="left-container">
+          <div class="product">
+            <img class="img" :src=infoData.goodsImage>
+          </div>
+          <div class="show">
+            <label>页面展示：</label>
+            <i-switch size="large" true-value="OPEN" false-value="CLOSE" v-model="infoData.status"
+                      @on-change="changeRadio" style="margin-top: 3px">
+              <span slot="open">展示</span>
+              <span slot="close">隐藏</span>
+            </i-switch>
+          </div>
+        </div>
+        <div class="right-container">
+          <div class="border-b">{{ infoData.goodsName }}</div>
+          <div class="border-b">
+            <div class="div-height"> 店铺名称：{{ infoData.sellerName }}</div>
+            <div class="div-height"> 订单号：{{ infoData.orderNo }}</div>
+          </div>
+
+          <div class="border-b">
+            <List>
+              <ListItem>
+                <ListItemMeta :avatar="infoData.memberProfile" :title="infoData.memberName"
+                              :description="infoData.content"/>
+              </ListItem>
+              <div class="" v-if="infoData.haveImage == 1">
+                评价图
+                <div style="margin-left: 40px">
+                  <img style="width: 100px;height: 110px;margin-left: 2px"
+                       v-for="(img,index) in infoData.image.split(',')" v-if="infoData.image.length !=0" :src="img"
+                       alt=""/>
+                </div>
+              </div>
+            </List>
+          </div>
+          <div class="border-b" v-if="infoData.reply">
+            <div>
+              <div>
+                <div style="float: left"> 商家回复：</div>
+                <div style="margin-left: 60px">{{ infoData.reply }}</div>
+              </div>
+              <div v-if="infoData.haveReplyImage == 1">
+                <div style="margin-left: 60px">
+                  <img style="width: 100px;height: 110px" v-for="(img,index) in infoData.replyImage.split(',')"
+                       v-if="infoData.replyImage.length !=0" :src="img" alt=""/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import * as API_Member from "@/api/member";
+
+export default {
+  name: "shop",
+  components: {},
+  data() {
+    return {
+      pageShow: true,
+      infoData: "",
+      infoFlag: false,
+      infoTitle: "",
+      openSearch: true, // 显示搜索
+      loading: true, // 表单加载状态
+      drop: false,
+
+      dropDownIcon: "ios-arrow-down",
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+        startDate: "", // 起始时间
+        endDate: "", // 终止时间
+      },
+      selectDate: null,
+      form: {
+        // 添加或编辑表单对象初始化数据
+        memberName: "",
+        storeName: "",
+        shopDisable: "",
+        id: "",
+        createTime: "",
+      },
+      // 表单验证规则
+      formValidate: {},
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        // 表头
+        {
+          title: "商品名称",
+          key: "goodsName",
+          minWidth: 120,
+          align: "left",
+          tooltip: true,
+        },
+        {
+          title: "会员名称",
+          key: "memberName",
+          minWidth: 120,
+          align: "left",
+          tooltip: true,
+        },
+        {
+          title: "评价",
+          key: "grade",
+          align: "left",
+          width: 90,
+          render: (h, params) => {
+            if (params.row.grade == "GOOD") {
+              return h(
+                "Tag",
+                {
+                  props: {
+                    color: "success",
+                  },
+                },
+                "好评"
+              );
+            } else if (params.row.grade == "MODERATE") {
+              return h(
+                "Tag",
+                {
+                  props: {
+                    color: "warning",
+                  },
+                },
+                "中评"
+              );
+            } else {
+              return h(
+                "Tag",
+                {
+                  props: {
+                    color: "error",
+                  },
+                },
+                "差评"
+              );
+            }
+          },
+        },
+        {
+          title: "评价内容",
+          key: "content",
+          align: "left",
+          minWidth: 200,
+          tooltip: true,
+        },
+        {
+          title: "评价时间",
+          key: "createTime",
+          align: "left",
+          width: 170
+        },
+        {
+          title: "页面展示",
+          key: "shopDisable",
+          align: "left",
+          width: 100,
+          slot: "shopDisableSlot",
+        },
+        {
+          title: "操作",
+          key: "action",
+          width: 150,
+          align: "center",
+          fixed: "right",
+
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    size: "small",
+                    type: "info",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.info(params.row);
+                    },
+                  },
+                },
+                "查看"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "error",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+    };
+  },
+  methods: {
+    changeRadio(val) {
+      let status = val;
+      API_Member.updateMemberReview(this.infoData.id, {status}).then(
+        (res) => {
+          this.$Message.success("修改成功!");
+          this.init();
+        }
+      );
+    },
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order === "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+    selectDateRange(v) {
+      if (v) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      }
+    },
+    //列表直接选择页面是否展示
+    changeSwitch(v) {
+      let status = v.status;
+      API_Member.updateMemberReview(v.id, {status: status}).then((res) => {
+        this.init();
+      });
+    },
+    getDataList() {
+      this.loading = true;
+      // 带多条件搜索参数获取表单数据 请自行修改接口
+      API_Member.getMemberReview(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;
+      this.loading = false;
+    },
+    //评价详情
+    info(v) {
+      this.infoFlag = true;
+      this.infoTitle = `用户${v.memberName}的评价详情`;
+      API_Member.getMemberInfoReview(v.id).then((res) => {
+        if (res.result) {
+          this.infoData = res.result;
+        }
+      });
+    },
+
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        // 记得确认修改此处
+        content: "您确认要删除会员" + v.memberName + "的评论?",
+        loading: true,
+        onOk: () => {
+          API_Member.delMemberReview(v.id).then((res) => {
+            this.$Message.success("修改成功");
+            this.init();
+          });
+        },
+      });
+    },
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          // 批量删除
+          this.deleteRequest("/shop/delByIds/" + ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.clearSelectAll();
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+@import "@/styles/table-common.scss";
+</style>

manager/src/views/home/home.scss

@@ -0,0 +1,222 @@
+.card {
+  margin: 10px 10px 20px;
+  padding: 0 20px 20px;
+  background: #fff;
+  border: 1px solid #e7e7e7;
+
+  border-radius: 0.4em;
+}
+h4 {
+  margin: 20px 0;
+  font-size: 18px;
+}
+/deep/ .ivu-icon {
+  margin-left: 40px;
+  margin-right: 40px;
+}
+.count-item,
+.todo-item {
+  height: 84px;
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 0.4em;
+  flex: 1;
+  font-weight: bold;
+  margin-right: 20px;
+}
+
+.todo-item {
+  flex-direction: column;
+  background: #ebebeb88;
+  .counts {
+    margin: 4px 0;
+    color: $theme_color;
+  }
+  > div {
+    margin: 4px 0;
+  }
+}
+.todo-item,
+.count-item,
+.today-item,
+.charts,
+.transform {
+  transition: 0.35s;
+}
+.todo-item:hover,
+.count-item:hover,
+.today-item:hover,
+.charts:hover,
+.transform:hover {
+  cursor: pointer;
+  transform: translateY(-10px);
+  z-index: 99;
+}
+.count-item {
+  transition: 0.35s;
+  cursor: pointer;
+  color: #fff;
+  justify-content: flex-start;
+}
+.count-item:nth-of-type(1) {
+  background-image: linear-gradient(109.6deg, rgba($color: #ff7171, $alpha: 0.6) 11.2%, #ff7171 100.2%);
+
+  box-shadow: 1px 3px 12px rgba($color: #ff7171, $alpha: 0.3);
+}
+.count-item:nth-of-type(2) {
+  background-image: linear-gradient(109.6deg, rgba($color: #ffaa71, $alpha: 0.6) 11.2%, #ffaa71 100.2%);
+
+  box-shadow: 1px 3px 12px rgba($color: #ffaa71, $alpha: 0.3);
+}
+.count-item:nth-of-type(3) {
+  background-image: linear-gradient(109.6deg, rgba($color: #93b5e1, $alpha: 0.6) 11.2%, #93b5e1 100.2%);
+
+  box-shadow: 1px 3px 12px rgba($color: #93b5e1, $alpha: 0.3);
+}
+.count-item:nth-of-type(4) {
+  background-image: linear-gradient(109.6deg, rgba($color: #848ccf, $alpha: 0.6) 11.2%, #848ccf 100.2%);
+
+  box-shadow: 1px 3px 12px rgba($color: #848ccf, $alpha: 0.3);
+}
+.counts {
+  line-height: 1;
+  font-size: 21px;
+}
+.flow-box-item {
+  > .counts {
+    color: #ffaa71;
+  }
+}
+.count-list {
+}
+
+.flow-list {
+  height: 330px;
+}
+.svg {
+  width: 20px;
+  height: 20px;
+}
+.flow-item {
+  display: flex;
+  flex: 1;
+}
+.flow {
+  background: #ebebeb88 !important;
+  border: none;
+  padding: 0;
+}
+.flow-member {
+  width: 200px;
+  margin-right: 20px;
+  font-weight: bold;
+
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  > div {
+    font-size: 18px;
+    margin-top: 20px;
+  }
+  > span {
+    color: #ffaa71;
+    font-size: 43px;
+    letter-spacing: 3px;
+    margin-top: 90px;
+    font-style: italic;
+  }
+}
+.flow-box {
+  padding-top: 20px;
+  width: 400px;
+  justify-content: space-between;
+  margin: 10px 0 20px;
+  > .flow-box-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 15px;
+    margin: 0 20px;
+    > div {
+      margin: 4px 0;
+    }
+  }
+}
+.flow-box-splice {
+  background: #fff;
+  width: 190px;
+  margin-right: 20px;
+  padding: 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > div {
+    margin: 4px 0;
+  }
+  > .counts {
+    color: #ffaa71;
+  }
+
+  flex-direction: column;
+}
+.flow-box-splice:nth-last-of-type(1) {
+  margin-right: 0;
+}
+.flow-splice {
+}
+
+.flow-box-splice,
+.flow-member,
+.card,
+.today-box,
+.flow-wrapper {
+  box-shadow: 1px 3px 12px rgba($color: #e7e7e7, $alpha: 0.3);
+  border-radius: 0.4em;
+  box-shadow: 1px 3px 12px rgba($color: #e7e7e7, $alpha: 0.3);
+}
+.flow-wrapper {
+  background: #fff;
+  padding: 0 30px;
+}
+.today-box {
+  flex: 3;
+  background: #fff;
+  margin-left: 20px;
+  padding: 0 30px;
+}
+
+.today-item {
+  width: 30%;
+  margin-bottom: 20px;
+  border-radius: 0.4em;
+  font-weight: bold;
+  background: #ebebeb88;
+  padding: 20px;
+  > span {
+    color: $theme_color;
+    font-size: 21px;
+  }
+}
+
+.charts {
+  margin: 10px 10px 20px;
+  padding: 20px 20px 20px;
+  background: #fff;
+}
+.chart-item {
+  width: 48%;
+  margin-right: 1%;
+}
+
+.today-list {
+  justify-content: space-between;
+  flex-wrap: wrap;
+}

manager/src/views/home/home.vue

@@ -0,0 +1,492 @@
+<template>
+  <div>
+    <!-- 统计 -->
+
+    <div class="card">
+      <h4>
+
+        基本信息
+      </h4>
+      <div class="count-list flex">
+        <div class="count-item" @click="navigateTo('managerGoods')">
+          <div>
+            <Icon class="icon" size="31" type="md-photos" />
+          </div>
+          <div>
+            <div class="counts">{{homeData.goodsNum ||0}}</div>
+            <div>商品数量</div>
+          </div>
+
+        </div>
+        <div class="count-item" @click="navigateTo('memberList')">
+          <div>
+            <Icon class="icon" size="31" type="md-person" />
+          </div>
+          <div>
+            <div class="counts">{{homeData.memberNum ||0}}</div>
+            <div>会员数量</div>
+          </div>
+
+        </div>
+        <div class="count-item" @click="navigateTo('orderList')">
+          <div>
+            <Icon class="icon" size="31" type="md-list" />
+          </div>
+          <div>
+            <div class="counts">{{homeData.orderNum ||0}}</div>
+            <div>订单数量</div>
+          </div>
+
+        </div>
+        <div class="count-item" @click="navigateTo('shopList')">
+          <div>
+            <Icon class="icon" size="31" type="ios-stats" />
+          </div>
+          <div>
+            <div class="counts">{{homeData.storeNum ||0}}</div>
+            <div>店铺数量</div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- 今日待办 -->
+
+    <div class="card">
+      <h4>今日待办</h4>
+      <div class="todo-list flex">
+        <div class="todo-item" @click="navigateTo('applyGoods')">
+          <div class="counts">{{$store.state.notices.goods || 0}}</div>
+          <div>待审核商品</div>
+        </div>
+        <div class="todo-item" @click="navigateTo('shopAuth')">
+          <div class="counts">{{$store.state.notices.store|| 0}}</div>
+          <div>待审核店铺</div>
+        </div>
+        <div class="todo-item" @click="navigateTo('orderComplaint')">
+          <div class="counts">{{$store.state.notices.complain|| 0}}</div>
+          <div>待审核投诉</div>
+        </div>
+        <div class="todo-item" @click="navigateTo('afterSaleOrder')">
+          <div class="counts">{{$store.state.notices.refund|| 0}}</div>
+          <div>待审核售后</div>
+        </div>
+        <div class="todo-item" @click="navigateTo('distribution')">
+          <div class="counts">{{$store.state.notices.distributionCash|| 0}}</div>
+          <div>待审核分销提现</div>
+        </div>
+        <div class="todo-item" @click="navigateTo('billList')">
+          <div class="counts">{{$store.state.notices.waitPayBill|| 0}}</div>
+          <div>待审核分账</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 今日，流量概括 -->
+    <div class="card flow">
+      <div class="flow-list flex">
+        <div class="flow-item ">
+          <div class="flow-member">
+            <div>
+
+              当前在线人数
+            </div>
+            <span>
+              {{homeData.currentNumberPeopleOnline || 0}}
+            </span>
+          </div>
+          <div class="flow-wrapper">
+            <h4>
+              流量概括
+            </h4>
+            <div class="card flow-box flex">
+              <div class="flow-box-item">
+                <div>
+                  今日访客数
+                </div>
+                <div class="counts">
+
+                  {{homeData.todayUV || 0}}
+                </div>
+              </div>
+              <div class="flow-box-item">
+                <div>
+                  昨日访客数
+                </div>
+                <div class="counts">
+                  {{homeData.yesterdayUV || 0}}
+                </div>
+              </div>
+            </div>
+
+            <div class="flow-splice flex">
+              <div class="flow-box-splice">
+                <div>
+                  前七日访客数
+                </div>
+                <div class="counts">
+                  {{homeData.lastSevenUV || 0}}
+                </div>
+              </div>
+              <div class="flow-box-splice">
+                <div>
+                  前三十日访客数
+                </div>
+                <div class="counts">
+                  {{homeData.lastThirtyUV || 0}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="today-box">
+          <h4> 今日概括</h4>
+          <div class="today-list flex">
+            <div class="today-item">
+              <div>今日订单数</div>
+              <span>{{homeData.todayOrderNum}}</span>
+            </div>
+            <div class="today-item">
+              <div>今日交易额</div>
+
+              <span>￥{{homeData.todayOrderPrice | unitPrice }}</span>
+            </div>
+            <div class="today-item">
+              <div>今日新增店铺</div>
+              <span>{{homeData.todayStoreNum || 0}}</span>
+            </div>
+            <div class="today-item">
+              <div>今日新增会员数</div>
+              <span>{{homeData.todayMemberNum || 0}}</span>
+            </div>
+            <div class="today-item">
+              <div>今日上架商品数量</div>
+              <span>{{homeData.todayGoodsNum || 0}}</span>
+            </div>
+            <div class="today-item">
+              <div>今日新增评论</div>
+              <span>{{homeData.todayMemberEvaluation || 0}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- chart -->
+    <div class="charts  flex">
+      <div class="chart-item">
+        <h4>流量统计</h4>
+        <div id="pvChart"></div>
+      </div>
+      <div class="chart-item">
+        <h4>交易统计</h4>
+        <div id="orderChart"></div>
+      </div>
+    </div>
+
+    <!-- top10商品 -->
+    <div class="card transform">
+      <h4>热卖商品TOP10</h4>
+      <Table stripe :columns="tophotGoodsColumns" :data="topHotGoodsData"></Table>
+    </div>
+
+    <!-- top10店铺 -->
+    <div class="card transform">
+      <h4>热卖店铺TOP10</h4>
+      <Table stripe :columns="tophotShopsColumns" :data="topHotShopsData"></Table>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
+import show from "./show.vue";
+import * as API_Goods from "@/api/goods";
+
+import { Chart } from "@antv/g2";
+import * as API_Member from "@/api/member";
+import Cookies from "js-cookie";
+export default {
+  name: "home",
+  components: {
+    show,
+  },
+  data() {
+    return {
+      tophotShopsColumns: [
+        {
+          type: "index",
+          width: 100,
+          title: "排名",
+          align: "center",
+        },
+        {
+          title: "店铺名称",
+          key: "storeName",
+        },
+
+        {
+          title: "价格",
+          key: "price",
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.price, "￥")
+            );
+          },
+        },
+        {
+          title: "销量",
+          key: "num",
+          width: 100,
+          sortable: true,
+        },
+      ],
+
+      tophotGoodsColumns: [
+        {
+          type: "index",
+          width: 100,
+          title: "排名",
+          align: "center",
+        },
+        {
+          title: "商品名称",
+          key: "goodsName",
+        },
+
+        {
+          title: "价格",
+          key: "price",
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.price, "￥")
+            );
+          },
+        },
+        {
+          title: "销量",
+          key: "num",
+          width: 100,
+          sortable: true,
+        },
+      ],
+      topHotGoodsData: [], //热卖商品集合
+      topHotShopsData: [], //热卖店铺集合
+      awaitTodoData: "", //今日待办集合
+      homeData: "",
+      username: "",
+      pvChart: "",
+      orderChart: "",
+      params: {
+        searchType: "LAST_SEVEN",
+      },
+      // 订单传参
+      orderParams: {
+        searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
+        year: "",
+        shopId: "",
+        memberId: "",
+      },
+    };
+  },
+
+  computed: {
+    currNav() {
+      return this.$store.state.app.currNav;
+    },
+    avatarPath() {
+      return localStorage.avatorImgPath;
+    },
+  },
+  methods: {
+    navigateTo(name) {
+      this.$router.push({
+        name,
+      });
+    },
+    // top10热卖商品
+    async toHotGoods() {
+      let res = await hotGoods();
+      res.success ? (this.topHotGoodsData = res.result) : "";
+    },
+
+    // top10热卖店铺
+    async topHotShops() {
+      let res = await hotShops();
+      res.success ? (this.topHotShopsData = res.result) : "";
+    },
+    // 今日待办
+    async awaitTodo() {
+      let res = await getNoticePage();
+      res.success ? (this.awaitTodoData = res.result) : "";
+    },
+
+    async getHomeData() {
+      let res = await homeStatistics();
+      if (res.success) {
+        if (
+          res.result.todayOrderPrice &&
+          res.result.todayOrderPrice != "null"
+        ) {
+          res.result.todayOrderPrice = parseInt(res.result.todayOrderPrice);
+        } else {
+          res.result.todayOrderPrice = 0;
+        }
+
+        this.homeData = res.result;
+      }
+    },
+
+    // 实例化订单图表
+    async initOrderChartList(name) {
+      const res = await API_Goods.getOrderChart(this.orderParams);
+      if (res.success) {
+        this.chartList = res.result;
+
+        if (!this.orderChart) {
+          this.orderChart = new Chart({
+            container: "orderChart",
+            autoFit: true,
+            height: 500,
+            padding: [70, 35, 70, 35],
+          });
+        }
+
+        this.initOrderChart(); //订单表
+      }
+    },
+
+    initOrderChart() {
+      // 默认已经加载 legend-filter 交互
+      let data = this.chartList;
+
+      data.forEach((item) => {
+        item.createTime = item.createTime.split(" ")[0];
+        item.title = "交易额";
+      });
+      this.orderChart.data(data);
+
+      this.orderChart.tooltip({
+        showCrosshairs: true,
+        shared: true,
+      });
+
+      this.orderChart
+        .line()
+        .position("createTime*price")
+        .label("price")
+        .color("title")
+        .shape("smooth");
+
+      this.orderChart
+        .point()
+        .position("createTime*price")
+        .label("price")
+        .color("title")
+        .shape("circle")
+        .style({
+          stroke: "#fff",
+          lineWidth: 1,
+        });
+      this.orderChart.render();
+    },
+
+    // 浏览量统计图
+    initPvChart() {
+      let uv = [];
+      let pv = [];
+      this.data.forEach((item) => {
+        uv.push({
+          date: item.date,
+          uvNum: item.uvNum,
+          title: "访客数UV",
+          pv: item.uvNum,
+        });
+
+        pv.push({
+          date: item.date,
+          pvNum: item.pvNum,
+          pv: item.pvNum,
+          title: "浏览量PV",
+        });
+      });
+
+      let data = [...uv, ...pv];
+
+      this.pvChart.data(data);
+      this.pvChart.scale({
+        activeQuantity: {
+          range: [0, 1],
+          nice: true,
+        },
+      });
+      this.pvChart.tooltip({
+        showCrosshairs: true,
+        shared: true,
+      });
+
+      this.pvChart
+        .line()
+        .position("date*pv")
+        .color("title")
+        .label("pv")
+        .shape("smooth");
+
+      this.pvChart
+        .point()
+        .position("date*pv")
+        .color("title")
+        .label("pv")
+        .shape("circle")
+        .style({
+          stroke: "#fff",
+          lineWidth: 1,
+        });
+
+      this.pvChart.render();
+    },
+
+    // 浏览量
+    async getPvChart() {
+      API_Member.getStatisticsList(this.params).then((res) => {
+        if (res.result) {
+          this.data = res.result;
+
+          if (!this.pvChart) {
+            this.pvChart = new Chart({
+              container: "pvChart",
+              autoFit: true,
+              height: 500,
+              padding: [70, 35, 70, 35],
+            });
+          }
+          this.initPvChart();
+        }
+      });
+    },
+
+    // 初始化信息
+    init() {
+      if (Cookies.get("userInfo")) {
+        let userInfo = JSON.parse(Cookies.get("userInfo"));
+        this.username = userInfo.username;
+      }
+      this.toHotGoods();
+      this.topHotShops();
+      this.awaitTodo();
+      this.getHomeData();
+      this.getPvChart();
+      this.initOrderChartList();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./home.scss";
+</style>

manager/src/views/home/show.vue

@@ -0,0 +1,88 @@
+
+<template>
+  <div>
+    <Card>
+      <Row>
+        <Form
+          ref="searchForm"
+          inline
+          :label-width="70"
+
+          @keydown.enter.native="handleGo"
+        >
+          <Form-item label="链接地址" prop="url">
+            <Input type="text" v-model="url" placeholder="http://" clearable style="width: 350px" />
+          </Form-item>
+          <Form-item style="margin-left:-50px;">
+            <Button @click="handleGo" type="primary" icon="ios-send" style="margin-right:5px">前往</Button>
+            <Button @click="handleOpen" icon="md-open">新窗口中打开</Button>
+          </Form-item>
+        </Form>
+      </Row>
+      <Divider style="margin-top:-10px;margin-bottom:0px;" />
+      <Row>
+        <div style="position:relative;">
+          <iframe
+            id="iframe"
+            :src="go"
+            frameborder="0"
+            width="100%"
+            :height="height"
+            scrolling="auto"
+          ></iframe>
+          <Spin fix size="large" v-if="loading"></Spin>
+        </div>
+      </Row>
+    </Card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "show",
+  data() {
+    return {
+      loading: false,
+      go: "",
+      url: "",
+      html: "",
+      height: "525px"
+    };
+  },
+  computed: {
+    currNav() {
+      return this.$store.state.app.currNav;
+    }
+  },
+  methods: {
+    initUrl() {
+      let url;
+      if (this.currNav == "doc") {
+        url = "https://www.kancloud.cn/lili/lili/content";
+      }
+      if (url) {
+        this.url = url;
+        this.go = url;
+      }
+    },
+    handleGo() {
+      let url = this.url;
+      this.go = this.url;
+    },
+    handleOpen() {
+      window.open(this.url);
+    }
+  },
+  watch: {
+    currNav(v, oldV) {
+      this.initUrl();
+    }
+  },
+  mounted() {
+    // 计算高度
+    let height = document.documentElement.clientHeight;
+    this.height = Number(height - 217) + "px";
+    this.initUrl();
+  }
+};
+</script>

manager/src/views/lili-components/affix-time.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" :key="index"> {{item.title}}</span>
+      <div class="date-picker">
+
+        <Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" style="width:200px;margin-left:10px;">
+
+          <Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index">{{ item.year+'年'+item.month+'月' }}</Option>
+
+        </Select>
+      </div>
+      <div class="shop-list" v-if="!closeShop">
+        <Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询" style="width:200px;margin-left:10px;">
+          <Scroll :on-reach-bottom="handleReachBottom">
+            <Option v-for="(item,index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
+          </Scroll>
+        </Select>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getShopListData } from "@/api/shops.js";
+export default {
+  props: ["closeShop"],
+  data() {
+    return {
+      month: "",
+      year: "",
+
+      defuaultWay: {
+        title: "最近7天",
+        selected: true,
+        searchType: "LAST_SEVEN",
+      },
+
+      selectedWay: {
+        title: "最近7天",
+        selected: true,
+        searchType: "LAST_SEVEN",
+      },
+      storeId: "",
+      dates: [],
+      params: {
+        pageNumber: 1,
+        pageSize: 10,
+        storeName: "",
+      },
+      dateList: [
+        {
+          title: "今天",
+          selected: false,
+          searchType: "TODAY",
+        },
+        {
+          title: "昨天",
+          selected: false,
+          searchType: "YESTERDAY",
+        },
+        {
+          title: "最近7天",
+          selected: true,
+          searchType: "LAST_SEVEN",
+        },
+        {
+          title: "最近30天",
+          selected: false,
+          searchType: "LAST_THIRTY",
+        },
+      ],
+
+      shopTotal: "",
+      shopsData: [],
+    };
+  },
+  mounted() {
+    this.getFiveYears();
+    this.getShopList();
+  },
+  methods: {
+    handleReachBottom() {
+      setTimeout(() => {
+        if (this.params.pageNumber * this.params.pageSize <= this.total) {
+          this.params.pageNumber++;
+          this.getShopList();
+        }
+      }, 1500);
+    },
+    getShopList() {
+      getShopListData(this.params).then((res) => {
+        if (res.success) {
+          /**
+           * 解决数据请求中，滚动栏会一直上下跳动
+           */
+          this.shopTotal = res.result.total;
+
+          this.shopsData.push(...res.result.records);
+        }
+      });
+    },
+    changeshop(val) {
+      this.selectedWay.storeId = this.storeId;
+      this.$emit("selected", this.selectedWay);
+    },
+
+    // 获取近5年 年月
+    getFiveYears() {
+      let getYear = new Date().getFullYear();
+
+      let lastFiveYear = getYear - 5;
+      let maxMonth = new Date().getMonth() + 1;
+      let dates = [];
+      // 循环出过去5年
+      for (let year = lastFiveYear; year <= getYear; year++) {
+        for (let month = 1; month <= 12; month++) {
+          if (year == getYear && month > maxMonth) {
+          } else {
+            dates.push({
+              year: year,
+              month: month,
+            });
+          }
+        }
+      }
+      this.dates = dates.reverse();
+    },
+
+    changeSelect() {
+      console.log(this.month);
+      if (this.month) {
+        this.dateList.forEach((res) => {
+          res.selected = false;
+        });
+        this.selectedWay.year = this.month.split("-")[0];
+        this.selectedWay.month = this.month.split("-")[1];
+        this.selectedWay.searchType = "";
+
+        this.$emit("selected", this.selectedWay);
+        // console.log(this.$emit("selected", this.selectedWay));
+      } else {
+      }
+    },
+
+    clickBreadcrumb(item) {
+      this.dateList.forEach((res) => {
+        res.selected = false;
+      });
+      item.selected = true;
+      item.storeId = this.storeId;
+      this.month = "";
+
+      if (item.searchType == "") {
+        item.searchType = "LAST_SEVEN";
+      }
+
+      this.selectedWay = item;
+      // this.month = "";
+      this.selectedWay.year = new Date().getFullYear();
+      this.selectedWay.month = "";
+
+      this.$emit("selected", this.selectedWay);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  > span {
+    margin-right: 15px;
+    cursor: pointer;
+  }
+}
+.active {
+  color: $theme_color;
+  position: relative;
+}
+.date-picker {
+}
+.active:before {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: $theme_color;
+}
+</style>

manager/src/views/lili-components/multiple-region.vue

@@ -0,0 +1,159 @@
+<template>
+  <Modal :mask-closable="false" :value="switched" v-model="switched" title="选择地址" @on-ok="submit" @on-cancel="cancel">
+    <div class="flex">
+      <Spin size="large" fix v-if="spinShow"></Spin>
+      <Tree ref="tree" class="tree" :data="data" expand-node show-checkbox multiple></Tree>
+    </div>
+  </Modal>
+</template>
+<script>
+import { getAllCity } from "@/api/index";
+export default {
+  data() {
+    return {
+      switched: false,
+      asyncLoading: false,
+      num: 10,
+      modalFlag: false,
+      spinShow: false,
+      timerNum: 10,
+      data: [],
+      id: 0,
+      selectedWay: [],
+      addValidate: {
+        parentName: "无父级",
+      },
+      ruleValidate: {
+        adCode: [
+          {
+            required: true,
+            message: "区域编码不能为空",
+            trigger: "blur",
+          },
+        ],
+
+        center: [
+          {
+            required: true,
+            message: "经纬度不能为空",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "名称不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      callBackData: "",
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    cancel() {
+      this.switched = false;
+      // this.$emit("close",true)
+    },
+    open(val) {
+      if (val) {
+        this.callBackData = val;
+        this.data = JSON.parse(JSON.stringify(this.data));
+        val.areaId.split(",").forEach((ids) => {
+          this.data.forEach((item) => {
+            if (item.id == ids) {
+              item.selected = true;
+
+            }
+            item.children &&
+              item.children.forEach((child) => {
+                if (child.id == ids) {
+                  child.checked = true;
+                }
+              });
+          });
+        });
+
+        console.log(this.data);
+      }
+
+      this.switched = true;
+    },
+
+    submit() {
+      // 筛选出省市
+      let list = this.$refs.tree.getCheckedAndIndeterminateNodes();
+      let sort = [];
+      list.forEach((item) => {
+        item.selectedList = [];
+        if (item.level == "province") {
+          sort.push({
+            ...item,
+          });
+        }
+        sort.forEach((sortItem, sortIndex) => {
+          if (item.level != "province" && sortItem.id == item.parentId) {
+            sortItem.selectedList.push({
+              ...item,
+            });
+          }
+        });
+      });
+
+      this.$emit(
+        "selected",
+        list.filter((item) => {
+          return item.level == "province";
+        })
+      );
+
+      this.cancel();
+    },
+
+    init() {
+      getAllCity().then((res) => {
+        if (res.result) {
+          res.result.forEach((item) => {
+            item.children.forEach((child) => {
+              child.title = child.name;
+            });
+
+            let data = {
+              title: item.name,
+
+              ...item,
+            };
+            this.data.push(data);
+            this.selectedWay.push({ name: data.title, id: data.id });
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.flex {
+  display: flex;
+  position: relative;
+}
+.tree {
+  flex: 2;
+}
+.form {
+  flex: 8;
+}
+.button-list {
+  margin-left: 80px;
+  > * {
+    margin: 0 4px;
+  }
+}
+/deep/ .ivu-modal-body {
+  height: 400px !important;
+  overflow: auto;
+}
+</style>

manager/src/views/lili-components/region.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <Cascader
+      :data="data"
+      :load-data="loadData"
+      change-on-select
+      @on-visible-change="handleChangeOnSelect"
+      @on-change="change"
+    ></Cascader>
+  </div>
+</template>
+<script>
+
+import * as API_Setup from "@/api/index.js";
+export default {
+  data() {
+    return {
+      data: [],
+      selected: [],
+      id: 0,
+      changeOnSelect: false,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+
+  props: ['addressId'],
+  methods: {
+    change(val, selectedData) {
+      /**
+       * @returns [regionId,region]
+       */
+      this.$emit("selected", [
+        val,
+        selectedData[selectedData.length - 1].__label.split("/"),
+      ]);
+    },
+    /**
+     * 动态设置change-on-select的值
+     * 当级联选择器弹窗展开时，设置change-on-select为true，即可以点选菜单选项值发生变化
+     * 当级联选择器弹窗关闭时，设置change-on-select为false，即能够设置初始值
+     */
+    handleChangeOnSelect(value) {
+      this.changeOnSelect = value;
+    },
+    loadData(item, callback) {
+      item.loading = true;
+      API_Setup.getRegion(item.value).then((res) => {
+        if (res.result.length <= 0) {
+          item.loading = false;
+          this.selected = item;
+
+          /**
+           * 处理数据并返回
+           */
+        } else {
+          res.result.forEach((child) => {
+            item.loading = false;
+
+            let data = {
+              value: child.id,
+              label: child.name,
+              loading: false,
+              children: [],
+            };
+
+            if (
+              child.level == "street" ||
+              item.label == "香港特别行政区" ||
+              item.label == "澳门特别行政区"
+            ) {
+              item.children.push({
+                value: child.id,
+                label: child.name,
+              });
+            } else {
+              item.children.push(data);
+            }
+          });
+          this.selected = item;
+          callback();
+        }
+      });
+    },
+    init() {
+      API_Setup.getRegion(this.id).then((res) => {
+        let way = [];
+
+        res.result.forEach((item) => {
+          let data;
+          // 台湾省做处理
+          if (item.name == "台湾省") {
+            data = {
+              value: item.id,
+              label: item.name,
+            };
+          } else {
+            data = {
+              value: item.id,
+              label: item.name,
+              loading: false,
+              children: [],
+            };
+          }
+          way.push(data);
+        });
+
+        this.data = way;
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

manager/src/views/lili-dialog/goods-dialog.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="wrapper">
+    <div class="wap-content">
+      <div class="query-wrapper">
+        <div class="query-item">
+          <div>搜索范围</div>
+          <Input placeholder="商品名称" @on-clear="goodsData=[]; goodsParams.goodsName=''; goodsParams.pageNumber = 1; getQueryGoodsList()" @on-enter="()=>{goodsData=[];goodsParams.pageNumber =1; getQueryGoodsList();}" icon="ios-search" clearable
+            style="width: 150px" v-model="goodsParams.goodsName" />
+        </div>
+        <div class="query-item">
+          <Cascader v-model="category" placeholder="请选择商品分类" style="width: 250px" :data="skuList"></Cascader>
+        </div>
+        <div class="query-item">
+          <Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
+        </div>
+      </div>
+      <div style="positon:retavle;">
+        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
+          <div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
+            <div>
+              <img :src="item.thumbnail" alt="" />
+            </div>
+            <div class="wap-content-desc">
+              <div class="wap-content-desc-title">{{ item.goodsName }}</div>
+              <div class="wap-sku">{{ item.goodsUnit }}</div>
+              <div class="wap-content-desc-bottom">
+                <div>￥{{ item.price | unitPrice }}</div>
+              </div>
+            </div>
+          </div>
+          <Spin size="large" fix v-if="loading"></Spin>
+
+          <div v-if="empty" class="empty">暂无商品信息</div>
+        </Scroll>
+
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as API_Goods from "@/api/goods";
+export default {
+  data() {
+    return {
+      type: "multiple", //单选或者多选 single  multiple
+
+      skuList: [],
+      model1: "",
+
+      selectedWay: [], //选中商品集合
+      total: "",
+      goodsParams: {
+        pageNumber: 1,
+        pageSize: 18,
+        order: "desc",
+        goodsName: "",
+        sn: "",
+        categoryPath: "",
+        marketEnable: "UPPER",
+        isAuth: "PASS",
+      },
+      category: [],
+      goodsData: [],
+      empty: false,
+      loading: false,
+    };
+  },
+  props: ["clearFlag"],
+  watch: {
+    category(val) {
+      this.goodsParams.categoryPath = val[0];
+    },
+    selectedWay: {
+      handler() {
+        this.$emit("selected", this.selectedWay);
+      },
+      deep: true,
+    },
+
+    "goodsParams.categoryPath": {
+      handler: function () {
+        this.goodsData = [];
+        (this.goodsParams.pageNumber = 0), this.getQueryGoodsList();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    handleReachBottom() {
+      setTimeout(() => {
+        if (
+          this.goodsParams.pageNumber * this.goodsParams.pageSize <=
+          this.total
+        ) {
+          this.goodsParams.pageNumber++;
+          this.getQueryGoodsList();
+        }
+      }, 1500);
+    },
+    getQueryGoodsList() {
+      API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
+        this.initGoods(res);
+      });
+    },
+
+    initGoods(res) {
+      if (res.result.records.length !=0) {
+        res.result.records.forEach((item) => {
+          item.selected = false;
+          item.___type = "goods"; //设置为goods让pc wap知道标识
+        });
+        /**
+         * 解决数据请求中，滚动栏会一直上下跳动
+         */
+        this.total = res.result.total;
+        this.goodsData.push(...res.result.records);
+
+        // console.log(this.goodsData);
+      } else {
+        this.empty = true;
+      }
+    },
+    // 查询商品
+    init() {
+      API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
+        // 商品
+        this.initGoods(res);
+      });
+      if (localStorage.getItem('category')) {
+        this.deepGroup(JSON.parse(localStorage.getItem('category')))
+      } else {
+        setTimeout(() => {
+          this.deepGroup(JSON.parse(localStorage.getItem('category')))
+        },3000)
+      }
+    },
+
+    deepGroup(val) {
+      val.forEach((item) => {
+        let childWay = []; //第二级
+        // 第二层
+        if (item.children) {
+          item.children.forEach((child) => {
+            // // 第三层
+            if (child.children) {
+              child.children.forEach((grandson, index, arr) => {
+                arr[index] = {
+                  value: grandson.id,
+                  label: grandson.name,
+                  children: "",
+                };
+              });
+            }
+            let children = {
+              value: child.id,
+              label: child.name,
+              children: child.children,
+            };
+            childWay.push(children);
+          });
+        }
+        // 第一层
+        let way = {
+          value: item.id,
+          label: item.name,
+          children: childWay,
+        };
+
+        this.skuList.push(way);
+      });
+    },
+
+    /**
+     * 点击商品
+     */
+    checkedGoods(val, index) {
+      // 如果单选的话
+      if (this.type != "multiple") {
+        this.goodsData.forEach((item) => {
+          item.selected = false;
+        });
+        this.selectedWay = [];
+        val.selected = true;
+        this.selectedWay.push(val);
+
+        return false;
+      }
+
+      if (val.selected == false) {
+        val.selected = true;
+        this.selectedWay.push(val);
+      } else {
+        val.selected = false;
+        this.selectedWay.splice(index, 1);
+      }
+      // console.log(this.selectedWay);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+.wap-content {
+  width: 100%;
+}
+.empty {
+  text-align: center;
+  padding: 8px 0;
+  width: 100%;
+}
+.wap-content {
+  flex: 1;
+  padding: 0;
+}
+.wap-content-list {
+  position: relative;
+}
+.wap-content-item {
+  width: 210px;
+  margin: 10px 7px;
+  padding: 6px 0;
+}
+// .wap-content-item{
+
+// }
+.active {
+  background: url("../../assets/selected.png") no-repeat;
+  background-position: right;
+  background-size: 10%;
+}
+</style>

manager/src/views/lili-dialog/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <Modal :styles="{ top: '120px' }" width="1160" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
+    <goodsDialog @selected="
+        (val) => {
+          goodsData = val;
+        }
+      " v-if="goodsFlag" ref="goodsDialog" />
+    <linkDialog @selectedLink="
+        (val) => {
+          linkData = val;
+        }
+      " v-else class="linkDialog" />
+  </Modal>
+</template>
+<script>
+import goodsDialog from "./goods-dialog";
+import linkDialog from "./link-dialog";
+export default {
+  components: {
+    goodsDialog,
+    linkDialog,
+  },
+  data() {
+    return {
+      goodsFlag: false,
+      goodsData: "", //选择的商品
+      linkData: "", //选择的链接
+      flag: false,
+    };
+  },
+  props: ["types"],
+  watch: {},
+  mounted() {},
+  methods: {
+    // 关闭弹窗
+    clickClose() {
+      this.$emit("closeFlag", false);
+      this.goodsFlag = false;
+    },
+    // 单选商品
+    singleGoods() {
+      var timer = setInterval(() => {
+        if (this.$refs.goodsDialog) {
+          this.$refs.goodsDialog.type = "single";
+          clearInterval(timer);
+        }
+      }, 100);
+    },
+    clickOK() {
+      if (this.goodsFlag) {
+        this.$emit("selectedGoodsData", this.goodsData);
+      } else {
+        this.$emit("selectedLink", this.linkData);
+      }
+      this.clickClose();
+    },
+    open(type) {
+      this.flag = true;
+      if (type == "goods") {
+        this.goodsFlag = true;
+      } else {
+        this.goodsFlag = false;
+      }
+    },
+    close() {
+      this.flag = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+/deep/ .ivu-modal {
+  overflow: hidden;
+  height: 650px !important;
+}
+/deep/ .ivu-modal-body {
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+</style>

manager/src/views/lili-dialog/link-dialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="wrapper">
+
+    <Tabs :value="wap[0].title" class="tabs">
+      <TabPane :label="item.title" :name="item.title" @click="clickTag(item, i)" v-for="(item, i) in wap" :key="i">
+        <component ref="lili-component" :is="templateWay[item.name]" @selected="
+          (val) => {
+            changed = val;
+          }
+        " />
+      </TabPane>
+    </Tabs>
+
+  </div>
+</template>
+<script>
+import wap from "./wap.js";
+import goodsDialog from "./goods-dialog";
+import templateWay from "./template/index";
+export default {
+  components: {
+    goodsDialog,
+  },
+  data() {
+    return {
+      templateWay,
+      changed: "",
+      selected: 0,
+      selectedLink: "", //选中的链接
+      wap
+    };
+  },
+  watch: {
+    changed: {
+      handler(val) {
+        this.$emit("selectedLink", val[0]); //因为是单选，所以直接返回第一个
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs["lili-component"][0].type = "single"; //如果商品页面设置成为单选
+    });
+
+    this.wap.forEach((item) => {
+      item.selected = false;
+    });
+  },
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+.wap-content-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wap-flex {
+  margin: 2px;
+}
+.tabs {
+  width: 100%;
+}
+
+/deep/ .ivu-modal {
+  overflow: hidden;
+  height: 650px !important;
+}
+/deep/ .ivu-modal-body {
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+</style>

manager/src/views/lili-dialog/style.scss

@@ -0,0 +1,96 @@
+.wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .wap-list {
+        flex: 2;
+        text-align: center;
+        overflow-y: auto;
+        height: 100%;
+    }
+    > .wap-list,
+
+    .wap-content {
+        flex: 8;
+    }
+}
+.wap-sku {
+    font-size: 12px;
+    color: #999;
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+}
+.query-wrapper {
+    display: flex;
+    margin: 8px 0;
+    > .query-item {
+        display: flex;
+        align-items: center;
+        > * {
+            margin: 0 4px;
+        }
+    }
+}
+/deep/ .ivu-scroll-container {
+    width: 100% !important;
+    height: 400px !important;
+}
+/deep/ .ivu-scroll-content {
+    /* */
+    display: flex;
+    flex-wrap: wrap;
+}
+.wap-content-list {
+    overflow-y: auto;
+}
+.wap-item {
+    padding: 10px 0;
+    cursor: pointer;
+}
+.wap-item:hover {
+    background: #ededed;
+}
+
+
+.wap-content-item {
+
+    cursor: pointer;
+
+    display: flex;
+    height: 80px;
+    padding: 2px;
+    overflow: hidden;
+    align-items: center;
+    margin: 10px ;
+    /deep/ img {
+        width: 60px;
+        height: 60px;
+        text-align: center;
+    }
+    .wap-content-desc {
+        width: 180px;
+        padding: 8px;
+        > .wap-content-desc-title {
+            display: -webkit-box;
+            font-size: 12px;
+            color: #666;
+
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            -webkit-line-clamp: 2;
+        }
+        > .wap-content-desc-bottom {
+            font-size: 12px;
+            padding: 4px 0;
+            color: #999;
+            display: flex;
+            justify-content: space-between;
+            > div:nth-of-type(1) {
+                color: $theme_color;
+            }
+        }
+    }
+}

manager/src/views/lili-dialog/template/category.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="wrapper">
+    <!-- 一级分类 -->
+    <div class="list">
+      <div class="list-item" :class="{active:parentIndex === cateIndex}" @click="handleClickChild(cate,cateIndex)" v-for="(cate,cateIndex) in categoryList" :key="cateIndex">
+        {{cate.name}}
+      </div>
+    </div>
+    <!-- 二级分类 -->
+    <div class="list">
+      <div class="list-item" :class="{active:secondIndex === secondI}" @click="handleClickSecondChild(second,secondI)" v-if="secondLevel.length != 0" v-for="(second,secondI) in secondLevel"
+        :key="secondI">
+        {{second.name}}
+      </div>
+    </div>
+    <!--三级分类 -->
+    <div class="list">
+      <div class="list-item" :class="{active:thirdIndex === thirdI}" @click="handleClickthirdChild(third,thirdI)" v-if="thirdLevel.length != 0" v-for="(third,thirdI) in thirdLevel" :key="thirdI">
+        {{third.name}}
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+export default {
+  data() {
+    return {
+      parentIndex: '', // 分类父级下标
+      secondIndex: '', // 分类二级下标
+      thirdIndex: '', // 分类三级下标
+      categoryList: [], // 分类列表一级数据
+      secondLevel: [], // 分类列表二级数据
+      thirdLevel: [], // 分类列表三级数据
+      selectedData: "", // 已选分类数据
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    // 点击一级
+    handleClickChild(item, index) {
+      this.parentIndex = index;
+      this.secondLevel = item.children;
+      item.___type = "category";
+      item.allId = item.id;
+
+      this.secondIndex = '';
+      this.thirdIndex = '';
+      this.thirdLevel = []
+      this.$emit("selected", [item]);
+      // 点击第一级的时候默认显示第二级第一个
+      // this.handleClickSecondChild(item.children, 0);
+    },
+    // 点击二级
+    handleClickSecondChild(second, index) {
+      second.___type = "category";
+      second.allId = `${second.parentId},${second.id}`
+
+      this.secondIndex = index;
+      this.thirdLevel = second.children;
+      this.thirdIndex = '';
+      this.$emit("selected", [second]);
+      // this.handleClickthirdChild(second.children[0], 0);
+    },
+    // 点击三级
+    handleClickthirdChild(item, index) {
+      item.___type = "category";
+      item.allId = `${this.categoryList[this.parentIndex].id},${item.parentId},${item.id}`
+      this.$emit("selected", [item]);
+      this.thirdIndex = index;
+    },
+    init() {
+      let category = JSON.parse(localStorage.getItem('category'))
+      if (category) {
+        category.forEach((item) => {
+          item.___type = "category";
+        });
+        this.categoryList = category;
+        // this.handleClickChild(category[0], 0);
+      } else {
+        setTimeout(() => {
+          category = JSON.parse(localStorage.getItem('category'))
+          category.forEach((item) => {
+            item.___type = "category";
+          });
+          this.categoryList = category;
+          // this.handleClickChild(category[0], 0);
+        },3000)
+      }
+      
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.list {
+  width: 30%;
+  margin: 0 1.5%;
+  height: 400px;
+  overflow: auto;
+  > .list-item {
+    padding: 10px;
+    transition: 0.35s;
+    cursor: pointer;
+  }
+  .list-item:hover {
+    background: #ededed;
+  }
+}
+.active {
+  background: #ededed;
+}
+.wrapper {
+  overflow: hidden;
+}
+</style>

manager/src/views/lili-dialog/template/index.js

@@ -0,0 +1,15 @@
+
+import category from './category.vue'
+import shops from './shops.vue'
+import marketing from './marketing.vue'
+import pages from './pages.vue'
+import goods from '../goods-dialog.vue'
+import other from './other.vue'
+export default {
+  pages,
+  marketing,
+  shops,
+  category,
+  goods,
+  other,
+}

manager/src/views/lili-dialog/template/marketing.vue

@@ -0,0 +1,445 @@
+<template>
+  <div class="wrapper">
+    <div class="list">
+
+      <div class="list-item" @click="clickPromotion(item,index)" v-for="(item,index) in Object.keys(promotionList)" :key="index" :class="{active:selectedIndex == index}">
+        {{ typeOption[item].title}}
+      </div>
+
+      <!-- <div class="list-item" >暂无活动</div> -->
+    </div>
+    <div class="content">
+      <div v-if="showPromotionList">
+        <!-- <div class="search-views">
+          <Input v-model="value11" disabled class="search">
+          <span slot="prepend">店铺名称</span>
+          </Input>
+          <Button type="primary">选择</Button>
+
+        </div> -->
+
+        <div class="tables">
+
+          <Table height="350" border tooltip :loading="loading" :columns="activeColumns" :data="showPromotionList"></Table>
+
+          <Page @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" class="page" :total="totals" size="small" show-elevator />
+
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getAllPromotion,
+  getPromotionSeckill,
+  getPromotionGoods,
+} from "@/api/promotion";
+
+// 引用店铺
+// import shopListDialog from "@/views/seller/shop/";
+export default {
+  data() {
+    return {
+      totals: "",
+      loading: true, //表格请求数据为true
+      promotionList: "",
+      selectedIndex: 0, //左侧菜单选择
+      promotions: "", //选中的活动key
+      index: 999,
+      params: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      pintuanColumns: [
+        {
+          title: "活动标题",
+          key: "title",
+          tooltip: true,
+          width: 250,
+        },
+        {
+          title: "商品名称",
+          key: "goodsName",
+          tooltip: true,
+        },
+        {
+          title: "店铺名称",
+          key: "sellerName",
+          tooltip: true,
+        },
+        {
+          title: "开始时间",
+          key: "startTime",
+          tooltip: true,
+        },
+        {
+          title: "结束时间",
+          key: "endTime",
+          tooltip: true,
+        },
+        {
+          title: "操作",
+          key: "action",
+          fixed: "right",
+          width: 100,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: this.index == params.index ? "primary" : "",
+                    size: "small",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedPromotion(params);
+                    },
+                  },
+                },
+                this.index == params.index ? "已选" : "选择"
+              ),
+            ]);
+          },
+        },
+      ],
+      seckillColumns: [
+        {
+          title: "商品名称",
+          key: "goodsName",
+          tooltip: true,
+          width: 200,
+        },
+        {
+          title: "店铺名称",
+          key: "sellerName",
+          tooltip: true,
+        },
+        {
+          title: "活动时间",
+          key: "timeLine",
+          tooltip: true,
+          render: (h, params) => {
+            return h("div", {}, `${params.row.timeLine}点`);
+          },
+        },
+
+        {
+          title: "原价",
+          key: "originalPrice",
+          tooltip: true,
+          render: (h, params) => {
+            return h(
+              "div",
+              {},
+              this.$options.filters.unitPrice(params.row.originalPrice)
+            );
+          },
+        },
+        {
+          title: "现价",
+          key: "price",
+          tooltip: true,
+          render: (h, params) => {
+            return h(
+              "div",
+              {
+                style: {},
+              },
+              this.$options.filters.unitPrice(params.row.price)
+            );
+          },
+        },
+        {
+          title: "状态",
+          key: "promotionApplyStatus",
+          tooltip: true,
+          render: (h, params) => {
+            return h(
+              "div",
+              {
+                style: {},
+              },
+              params.row.promotionApplyStatus == "APPLY"
+                ? "申请"
+                : params.row.promotionApplyStatus == "PASS"
+                ? "通过"
+                : "拒绝"
+            );
+          },
+        },
+
+        {
+          title: "操作",
+          key: "action",
+          width: 100,
+          fixed: "right",
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: this.index == params.index ? "primary" : "",
+                    size: "small",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedPromotion(params);
+                    },
+                  },
+                },
+                this.index == params.index ? "已选" : "选择"
+              ),
+            ]);
+          },
+        },
+      ],
+
+      activeColumns: [],
+
+      columns: [
+        {
+          title: "活动标题",
+          key: "title",
+          tooltip: true,
+          width: 200,
+        },
+        {
+          title: "商品名称",
+          key: "goodsName",
+          tooltip: true,
+        },
+        {
+          title: "活动开始时间",
+          key: "startTime",
+          tooltip: true,
+        },
+        {
+          title: "活动结束时间",
+          key: "endTime",
+          tooltip: true,
+        },
+        {
+          title: "操作",
+          key: "action",
+          fixed: "right",
+          width: 100,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: this.index == params.index ? "primary" : "",
+                    size: "small",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedPromotion(params);
+                    },
+                  },
+                },
+                this.index == params.index ? "已选" : "选择"
+              ),
+            ]);
+          },
+        },
+      ],
+
+      promotionData: "", //商品集合
+
+      showPromotionList: [], //显示当前促销的商品
+      typeOption: {
+        FULL_DISCOUNT: {
+          title: "满减",
+          methodsed: () => {
+            this.showPromotionList = [];
+            this.activeColumns = this.pintuanColumns;
+            this.params.promotionType = "FULL_DISCOUNT";
+
+            this.sortGoods("FULL_DISCOUNT");
+          },
+        },
+        PINTUAN: {
+          title: "拼团",
+          methodsed: (id) => {
+            this.showPromotionList = [];
+            this.activeColumns = this.pintuanColumns;
+            this.params.promotionType = "PINTUAN";
+            this.sortGoods("PINTUAN");
+          },
+        },
+        SECKILL: {
+          title: "秒杀",
+          methodsed: () => {
+            this.showPromotionList = [];
+            this.activeColumns = this.seckillColumns;
+            this.params.seckillId = this.promotionList["SECKILL"].id;
+            delete this.params.promotionType;
+
+            getPromotionSeckill(this.params).then((res) => {
+              delete this.params.seckillId;
+              this.showPromotionList = this.showPromotionList.concat(
+                res.result.records
+              );
+
+              this.totals = res.result.total;
+              console.log(this.totals);
+            });
+          },
+        },
+        COUPON: {
+          title: "优惠券",
+          methodsed: () => {
+            this.showPromotionList = [];
+            this.params.promotionType = "COUPON";
+            this.sortGoods("COUPON");
+          },
+        },
+        POINTS_GOODS: {
+          title: "积分商品",
+          methodsed: () => {
+            this.showPromotionList = [];
+            this.params.promotionType = "POINTS_GOODS";
+            this.sortGoods("POINTS_GOODS");
+          },
+        },
+      },
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    params: {
+      handler() {
+        this.index = 999;
+        this.typeOption[this.promotions] &&
+          this.typeOption[this.promotions].methodsed();
+      },
+      deep: true,
+    },
+  },
+
+  methods: {
+    sortGoods(type) {
+      this.loading = true;
+      this.params.pageNumber - 1;
+      getPromotionGoods(this.promotionList[type].id, this.params).then(
+        (res) => {
+          this.loading = false;
+          if (res.result) {
+            this.$nextTick(() => {
+              this.showPromotionList = this.showPromotionList.concat(
+                res.result.records
+              );
+              console.log(this.totals);
+              this.totals = res.result.total;
+            });
+          }
+        }
+      );
+    },
+    // 选择活动
+    selectedPromotion(val) {
+      console.log(val);
+      val.row.___type = "marketing";
+      val.row.___promotion = this.promotions;
+      this.$emit("selected", [val.row]);
+      console.log([val.row]);
+
+      this.index = val.index;
+    },
+    // 获取所有营销的活动
+    async init() {
+      let res = await getAllPromotion();
+      if (res.success) {
+        this.loading = false;
+        this.getPromotion(res);
+        this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
+      } else {
+        this.loading = false;
+      }
+    },
+    getPromotion(res) {
+      this.promotionList = res.result;
+
+      if (Object.keys(res.result).length) {
+        this.typeOption[Object.keys(res.result)[0]].methodsed(
+          this.promotionList[Object.keys(res.result)[0]].id
+        );
+      }
+    },
+
+    // 点击某个活动查询活动列表
+    clickPromotion(val, i) {
+      this.promotions = val;
+      this.selectedIndex = i;
+      this.params.pageNumber = 1;
+      this.typeOption[val] &&
+        this.typeOption[val].methodsed(this.promotionList[val].id);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+img {
+  max-width: 100% !important;
+}
+.search {
+  width: 300px;
+}
+.page {
+  margin-top: 2vh;
+  text-align: right;
+}
+.time {
+  font-size: 12px;
+}
+.tables {
+  height: 400px;
+  margin-top: 20px;
+  overflow: auto;
+  width: 100%;
+}
+/deep/ .ivu-table-wrapper {
+  width: 100%;
+}
+.list {
+  margin: 0 1.5%;
+  height: 400px;
+  overflow: auto;
+  > .list-item {
+    padding: 10px;
+    transition: 0.35s;
+    cursor: pointer;
+  }
+  .list-item:hover {
+    background: #ededed;
+  }
+}
+.list {
+  flex: 1;
+  width: auto;
+}
+.content {
+  overflow: hidden;
+  flex: 4;
+}
+.active {
+  background: #ededed;
+}
+.wrapper {
+  overflow: hidden;
+}
+.search-views {
+  display: flex;
+  > * {
+    margin: 0 4px;
+  }
+}
+</style>

manager/src/views/lili-dialog/template/other.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <Row :gutter="30">
+      <Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
+        <div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
+          <Icon size="24" :type="item.icon" />
+          <p>{{item.title}}</p>
+        </div>
+      </Col>
+      <!-- 外部链接，只有pc端跳转 -->
+      <Col span="6" v-if="$route.name === 'renovation'">
+        <div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
+          <Poptip v-model="linkVisible">
+              <Icon size="24" :type="linkItem.icon" />
+              <p>{{linkItem.title}}</p>
+              <div slot="title">链接地址</div>
+              <div slot="content">
+                  <Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
+              </div>
+          </Poptip>
+          
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      linkList: [
+        {
+          title: "首页",
+          icon: "md-home",
+          ___type: "home",
+        },
+        {
+          title: "购物车",
+          icon: "md-cart",
+          ___type: "cart",
+        },
+        {
+          title: "收藏商品",
+          icon: "md-heart",
+          ___type: "collection",
+        },
+        {
+          title: "我的订单",
+          icon: "md-document",
+          ___type: "order",
+        },
+        {
+          title: "个人中心",
+          icon: "md-person",
+          ___type: "user",
+        },
+        {
+          title: "拼团频道",
+          icon: "md-flame",
+          ___type: "group",
+        },
+        {
+          title: "秒杀频道",
+          icon: "md-flame",
+          ___type: "seckill",
+        },
+        {
+          title: "领券中心",
+          icon: "md-pricetag",
+          ___type: "coupon",
+        },
+        {
+          title: "签到",
+          icon: "md-happy",
+          ___type: "sign",
+        },
+        
+      ],
+      linkItem: {
+        title: "外部链接",
+        icon: "ios-link",
+        ___type: "link",
+        url: ''
+      },
+      linkVisible: false,
+      selectedIndex: 9999999,
+    };
+  },
+  methods: {
+    handleLink(val, index) {
+      val = {...val,___type:'other'}
+      this.selectedIndex = index;
+      if (index === this.linkList.length) {
+        this.linkVisible = true
+      } else {
+        this.linkVisible = false
+      }
+      this.$emit("selected",[val])
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../style.scss";
+.card {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px 0;
+  margin: 10px 0;
+  text-align: center;
+  transition: 0.35s;
+  cursor: pointer;
+  /deep/ p {
+    margin: 10px 0;
+  }
+  border: 1px solid #ededed;
+}
+.card:hover{
+   background: #ededed;
+}
+.active {
+  background: #ededed;
+}
+</style>

manager/src/views/lili-dialog/template/pages.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="wrapper">
+    <div class="list">
+      <div class="list-item active">
+        文章页
+      </div>
+    </div>
+    <div class="content">
+      <Article @callbacked="callbackArticle" :selected="true" />
+    </div>
+
+  </div>
+</template>
+<script>
+import Article from "@/views/page/article-manage/articleList.vue";
+export default {
+  components: {
+    Article,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    callbackArticle(val) {
+      val.___type = "pages";
+
+      val.___path = "/pages/public/article";
+
+      this.$emit("selected", [val]);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ .ivu-card-body {
+  height: 414px;
+  overflow: auto;
+}
+.ivu-table-wrapper ivu-table-wrapper-with-border{
+  height: 300px  !important;
+}
+.list {
+  margin: 0 1.5%;
+  height: 400px;
+  overflow: auto;
+  > .list-item {
+    padding: 10px;
+    transition: 0.35s;
+    cursor: pointer;
+  }
+  .list-item:hover {
+    background: #ededed;
+  }
+}
+.list {
+  flex: 2;
+  width: auto;
+}
+.content {
+  overflow: hidden;
+  flex: 8;
+  height: 431px;
+}
+.active {
+  background: #ededed;
+}
+.wrapper {
+  height: 416px;
+  overflow: hidden;
+}
+/deep/ .ivu-table {
+  height: 300px !important;
+  overflow: auto;
+}
+/deep/ .ivu-card-body {
+  padding: 0;
+  height: auto;
+}
+</style>

manager/src/views/lili-dialog/template/shops.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="shop">
+    <div class="wap-content">
+      <div class="query-wrapper">
+        <div class="query-item">
+          <div>店铺名称</div>
+          <Input placeholder="请输入店铺名称" @on-clear="shopsData=[]; params.storeName=''; params.pageNumber =1; init()" @on-enter="()=>{shopsData=[]; params.pageNumber =1; init();}" icon="ios-search" clearable style="width: 150px"
+            v-model="params.storeName" />
+        </div>
+
+        <div class="query-item">
+          <Button type="primary" @click="shopsData=[];params.pageNumber =1; init();" icon="ios-search">搜索</Button>
+        </div>
+      </div>
+      <div>
+        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
+          <div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
+            <div>
+              <img class="shop-logo" :src="item.storeLogo" alt="" />
+            </div>
+            <div class="wap-content-desc">
+              <div class="wap-content-desc-title">{{ item.storeName }}</div>
+
+              <div class="self-operated" :class="{'theme_color':item.selfOperated }">{{ item.selfOperated ? '自营' : '非自营' }}</div>
+              <div class="wap-sku" :class="{'theme_color':!item.shopDisable }">{{ item.shopDisable ? '开启中' : '关闭' }}</div>
+            </div>
+          </div>
+          <Spin size="large" fix v-if="loading"></Spin>
+        </Scroll>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getShopListData } from "@/api/shops.js";
+export default {
+  data() {
+    return {
+      loading: false,
+      total: "",
+      params: {
+        pageNumber: 1,
+        pageSize: 10,
+        storeName: "",
+      },
+      shopsData: [],
+      selected: 9999999999, //设置一个不可能选中的index
+    };
+  },
+  watch: {},
+
+  created() {
+    this.init();
+  },
+  methods: {
+    handleReachBottom() {
+      setTimeout(() => {
+        if (this.params.pageNumber * this.params.pageSize <= this.total) {
+          this.params.pageNumber++;
+          this.init();
+        }
+      }, 1500);
+    },
+    init() {
+      this.loading = true;
+      getShopListData(this.params).then((res) => {
+        if (res.success) {
+          /**
+           * 解决数据请求中，滚动栏会一直上下跳动
+           */
+          this.total = res.result.total;
+
+          this.shopsData.push(...res.result.records);
+
+          this.loading = false;
+        }
+      });
+    },
+    clickShop(val, i) {
+      this.selected = i;
+      val = { ...val, ___type: "shops" };
+      this.$emit("selected", [val]);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../style.scss";
+.shop {
+  display: flex;
+}
+.self-operated {
+  font-size: 12px;
+  color: #999;
+}
+.wap-content-list {
+  flex-wrap: wrap;
+}
+.shop-logo {
+  object-fit: cover;
+}
+.wap-content-item {
+}
+.active {
+  background: url("../../../assets/selected.png") no-repeat;
+  background-position: right;
+  background-size: 10%;
+}
+</style>

manager/src/views/lili-dialog/wap.js

@@ -0,0 +1,33 @@
+export default [
+  {
+    title: "商品",
+    url: "0",
+    openGoods: true,
+    name: "goods"
+  },
+  {
+    title: "分类",
+    url: "1",
+    name: "category"
+  },
+  {
+    title: "店铺",
+    url: "2",
+    name: "shops"
+  },
+  {
+    title: "活动",
+    url: "3",
+    name: "marketing"
+  },
+  {
+    title: "页面",
+    url: "3",
+    name: "pages"
+  },
+  {
+    title: "其他",
+    url: "3",
+    name: "other"
+  }
+];

manager/src/views/lili-empty/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="empty">
+    <img  src="../../assets/empty.png" alt="">
+    暂无数据
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.empty{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  >img{
+    margin-bottom: 10px;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/floorList copy.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="floor-list">
+    <div class="list">
+      <div class="template-saved" v-for="item in templateList" :key="item.id">
+        <div class="template-title">
+          <span>{{ item.name }}</span>
+          <span :class="{ 'theme-color': item.pageShow == 'OPEN' }">{{
+            item.pageShow == "OPEN" ? "已发布" : "未发布"
+          }}</span>
+        </div>
+        <div class="template-content">
+          <!-- <img :src="item.img || require(`@/assets/img-error.png`)" alt=""> -->
+          <div class="cover">
+            <Button icon="md-color-palette" @click="decorate(item.id)"
+              >装修</Button
+            >
+            <Button icon="md-pricetags" @click="Template(item)">编辑</Button>
+            <Button
+              icon="md-send"
+              v-if="item.pageShow == 'CLOSE'"
+              @click="releaseTemplate(item.id)"
+              >发布</Button
+            >
+            <Button
+              icon="md-trash"
+              v-if="item.pageShow == 'CLOSE'"
+              @click="delTemplate(item.id)"
+              >删除</Button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="new-template" @click="createTemp">
+        <Icon type="md-add" />
+        <div>新建模板</div>
+      </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="模板设置"
+      draggable
+      width="600"
+      :z-index="100"
+      :loading="loading"
+      mask-closable="false"
+      @on-ok="newTemplate"
+      @on-cancel="showModal = false"
+    >
+      <Form ref="form" :model="formData" :rules="rules" :label-width="80">
+        <FormItem label="模板名称" prop="name">
+          <Input v-model="formData.name" placeholder="请输入模板名称" />
+        </FormItem>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import * as API_floor from "@/api/other.js";
+export default {
+  name: "floorList",
+  data() {
+    return {
+      showModal: false,
+      templateList: [],
+      formData: {
+        status: false,
+        name: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
+      },
+      loading: true,
+    };
+  },
+  mounted() {
+    let height = window.innerHeight - 150;
+    document.querySelector(".floor-list").style.height = height + "px";
+    this.getTemplateList();
+  },
+  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 = "INDEX"), (data.pageClientType = "PC");
+          if (data.id) {
+            API_floor.updateHome(data.id, data).then((res) => {
+              this.$Message.success("编辑模板成功");
+              this.showModal = false;
+              this.getTemplateList();
+            });
+          } else {
+            API_floor.setHomeSetup(data).then((res) => {
+              this.$Message.success("新建模板成功");
+              this.showModal = false;
+              this.getTemplateList();
+            });
+          }
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+
+    createTemp() {
+      // 新建表单
+      this.$refs.form.resetFields();
+      this.showModal = true;
+    },
+
+    Template(item) {
+      // 编辑表单
+      item.pageShow == "OPEN" ? (item.status = true) : (item.status = false);
+      this.formData = item;
+      this.showModal = true;
+    },
+
+    decorate(id) {
+      // 装修
+      this.$router.push({ name: "renovation", query: { id: id } });
+    },
+
+    getTemplateList() {
+      //模板列表
+      let params = {
+        pageNumber: 1,
+        pageSize: 999,
+        pageType: "INDEX",
+        pageClientType: "PC",
+      };
+      API_floor.getHomeList(params).then((res) => {
+        if (res.code == 200) {
+          this.templateList = res.result.records;
+        }
+      });
+    },
+
+    releaseTemplate(id) {
+      //发布模板
+      API_floor.releasePageHome(id).then((res) => {
+        if (res.code === 200) {
+          this.$Message.success("发布模板成功");
+          this.getTemplateList();
+        }
+      });
+    },
+
+    delTemplate(id) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "<p>确定删除该模板吗？</p>",
+        onOk: () => {
+          API_floor.removePageHome(id).then((res) => {
+            if (res.code === 200) {
+              this.$Message.success("删除模板成功");
+              this.getTemplateList();
+            }
+          });
+        },
+        onCancel: () => {},
+      });
+    },
+  },
+  computed: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.floor-list {
+  background-color: #fff;
+  width: 100%;
+}
+.list {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  > div {
+    width: 260px;
+    height: 450px;
+    margin: 10px 15px;
+    border: 1px solid #eee;
+    border-radius: 5px;
+  }
+  .new-template {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    border: 2px dashed $theme_color;
+    color: $theme_color;
+    background: #f88c7138;
+    .ivu-icon {
+      font-size: 30px;
+      margin-bottom: 10px;
+    }
+  }
+  .template-saved {
+    overflow: hidden;
+    .template-title {
+      padding: 10px;
+      background: #eee;
+      display: flex;
+      justify-content: space-between;
+      .theme-color {
+        color: $theme_color;
+      }
+    }
+  }
+  .template-content {
+    height: 407px;
+    width: 100%;
+    position: relative;
+    background: #ddd;
+    &:hover {
+      .cover {
+        visibility: visible;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    .cover {
+      visibility: hidden;
+      width: 100%;
+      height: 407px;
+      background: rgba(0, 0, 0, 0.3);
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .ivu-btn {
+        margin-bottom: 10px;
+        background: transparent;
+        color: #fff;
+        border-color: #fff;
+        &:hover {
+          background-color: $theme_color;
+        }
+      }
+    }
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/floorList.vue

@@ -0,0 +1,251 @@
+<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>
+    </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>
+            <Button type="info" placement="right" @click="Template(item)" size="small">编辑</Button>
+            <Button type="success" placement="right" @click="decorate(item.id)" size="small">装修</Button>
+            <Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)" @on-cancel="cancel">
+              <Button type="error" size="small">删除</Button>
+            </Poptip>
+          </div>
+        </div>
+        <div class="no-more" v-if="list.length ==0">暂无更多模板</div>
+      </div>
+
+    </Card>
+    <Modal
+      v-model="showModal"
+      title="模板设置"
+      draggable
+      width="600"
+      :z-index="100"
+      :loading="loading"
+      mask-closable="false"
+      @on-ok="newTemplate"
+      @on-cancel="showModal = false"
+    >
+      <Form ref="form" :model="formData" :rules="rules" :label-width="80">
+        <FormItem label="模板名称" prop="name">
+          <Input v-model="formData.name" placeholder="请输入模板名称" />
+        </FormItem>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import * as API_floor from "@/api/other.js";
+export default {
+  name: "floorList",
+  data() {
+    return {
+      showModal: false,  // 添加modal的显示
+      selectedIndex: 0, // 首页还是专题选择的index
+      formData: { // 新建模态框的数据
+        status: false, // 模板是否开启
+        name: "", // 模板名称
+      },
+      columns: [ // 列表展示的column
+        {
+          title: "页面名称",
+          key: "name",
+        },
+        {
+          title: "状态",
+        },
+        {
+          title: "操作",
+          key: "action",
+        },
+      ],
+
+      loading: false, // 加载状态
+      pageTypes: [ // 那种类别的模板
+        {
+          type: "INDEX",
+          title: "首页",
+        }
+        // {
+        //   type: "SPECIAL",
+        //   title: "专题",
+        // },
+      ],
+      list: [], // 模板列表
+    };
+  },
+  mounted() {
+    this.getTemplateList();
+  },
+  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 = "INDEX"), (data.pageClientType = "PC");
+          if (data.id) {
+            API_floor.updateHome(data.id, data).then((res) => {
+              this.$Message.success("编辑模板成功");
+              this.showModal = false;
+              this.getTemplateList();
+            });
+          } else {
+            API_floor.setHomeSetup(data).then((res) => {
+              this.$Message.success("新建模板成功");
+              this.showModal = false;
+              this.getTemplateList();
+            });
+          }
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+
+    createTemp() {
+      // 新建表单
+      this.$refs.form.resetFields();
+      this.showModal = true;
+    },
+
+    Template(item) {
+      // 编辑表单
+      item.status = item.pageShow
+      this.formData = item;
+      this.showModal = true;
+    },
+
+    decorate(id) {
+      // 装修
+      this.$router.push({ name: "renovation", query: { id: id } });
+    },
+
+    getTemplateList() {
+      //模板列表
+      let params = {
+        pageNumber: 1,
+        pageSize: 999,
+        pageType: "INDEX",
+        pageClientType: "PC",
+      };
+      API_floor.getHomeList(params).then((res) => {
+        if (res.code == 200) {
+          this.list = res.result.records;
+          this.list.forEach(e => {
+            if (e.pageShow === 'OPEN') {
+              e.pageShow = true
+            } else {
+              e.pageShow = false
+            }
+          })
+        }
+      });
+    },
+
+    releaseTemplate(id) {
+      //发布模板
+      API_floor.releasePageHome(id).then((res) => {
+        if (res.code === 200) {
+          this.$Message.success("发布模板成功");
+          this.getTemplateList();
+        }
+      });
+    },
+
+    delTemplate(id) {
+      API_floor.removePageHome(id).then((res) => {
+        if (res.code === 200) {
+          this.$Message.success("删除模板成功");
+          this.getTemplateList();
+        }
+      });
+    },
+  },
+  computed: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.category-item {
+  cursor: pointer;
+  padding: 4px;
+}
+.active {
+  background: #ededed;
+}
+.item-title {
+  background: #f5f7fa;
+  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(3n) {
+  background: #f5f7fa;
+}
+</style>

manager/src/views/lili-floor-renovation/modelConfig.js

@@ -0,0 +1,341 @@
+export const modelData = [
+    {
+        type:'carousel',
+        name:'图片轮播',
+        icon:'md-image',
+        showName:'',
+        size:"790*340",
+        options:{
+            list:[
+                {
+                    img:require('@/assets/nav/1.jpg'),
+                    url:''
+                },
+                {
+                    img:require('@/assets/nav/2.jpg'),
+                    url:''
+                },
+                {
+                    img:require('@/assets/nav/3.jpg'),
+                    url:''
+                }
+            ],
+        },
+    },
+    {
+        type:'hotAdvert',
+        name:'热门广告',
+        icon:'md-image',
+        showName:'',
+        options:{
+            list:[
+                {
+                    img:"https://demo.dscmall.cn/storage/data/gallery_album/116/original_img/116_P_1573790294398.png",
+                    url:'',
+                    size:'1200*自定义'
+                },
+                {
+                    img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
+                    url:'',
+                    size:'230*190'
+                },
+                {
+                    img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
+                    url:'',
+                    size:'230*190'
+                },
+                {
+                    img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
+                    url:'',
+                    size:'230*190'
+                },
+                {
+                    img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
+                    url:'',
+                    size:'230*190'
+                },
+                {
+                    img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
+                    url:'',
+                    size:'230*190'
+                }
+            ],
+        },
+    },
+    {
+        type:'seckill',
+        name:'促销活动',
+        icon:'md-image',
+        showName:'',
+        options:{
+            list:[
+                {
+                    time:6,
+                    goodsList:[
+                        {img:require('@/assets/nav/1.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafads123213a', url:''},
+                        {img:require('@/assets/nav/2.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/3.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/4.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/5.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/1.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/2.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/3.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/4.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                        {img:require('@/assets/nav/5.jpg'), price:20, originalPrice:30, name:'阿迪达斯三叶草asdasdafadsa',url:''},
+                    ]
+                },
+                {
+                    time:8,
+                    goodsList:[
+                        {img:require('@/assets/nav/1.jpg'), url:''},
+                        {img:require('@/assets/nav/2.jpg'), url:''},
+                        {img:require('@/assets/nav/3.jpg'), url:''},
+                        {img:require('@/assets/nav/4.jpg'), url:''},
+                        {img:require('@/assets/nav/5.jpg'), url:''},
+                    ]
+                },
+                {
+                    time:10,
+                    goodsList:[
+                        {img:require('@/assets/nav/1.jpg'), url:''},
+                        {img:require('@/assets/nav/2.jpg'), url:''},
+                        {img:require('@/assets/nav/3.jpg'), url:''},
+                        {img:require('@/assets/nav/4.jpg'), url:''},
+                        {img:require('@/assets/nav/5.jpg'), url:''},
+                    ]
+                },
+                {
+                    time:12,
+                    goodsList:[
+                        {img:require('@/assets/nav/1.jpg'), url:''},
+                        {img:require('@/assets/nav/2.jpg'), url:''},
+                        {img:require('@/assets/nav/3.jpg'), url:''},
+                        {img:require('@/assets/nav/4.jpg'), url:''},
+                        {img:require('@/assets/nav/5.jpg'), url:''},
+                    ]
+                },
+                {
+                    time:14,
+                    goodsList:[]
+                },
+                {
+                    time:16,
+                    goodsList:[]
+                },
+                {
+                    time:18,
+                    goodsList:[]
+                }
+               
+            ]
+        },
+    },
+    {
+        type:'discountAdvert',
+        name:'折扣广告',
+        icon:'md-image',
+        options:{
+            bgImg:{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516301201726549362.png',url:'',size:"1300*586"},
+            classification:[{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'}, {img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},],
+            brandList:[{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},]
+        },
+    },
+    // {
+    //     type:'brand',
+    //     name:'首页品牌',
+    //     icon:'md-image',
+    //     options:{
+    //         brandViewList:[
+    //             {
+    //                 nameCn:'品牌闪购',
+    //                 nameEn:'BRAND SALE',
+    //                 img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953433212156689.jpg',
+    //                 url:''
+    //             },
+    //             {
+    //                 nameCn:'品牌活动',
+    //                 nameEn:'BRAND ACTIVITY',
+    //                 img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434269088434.jpg',
+    //                 url:''
+    //             },
+    //             {
+    //                 nameCn:'超级品牌日',
+    //                 nameEn:'SUPER BRAND',
+    //                 img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434500632403.jpg',
+    //                 url:''
+    //             }
+    //         ],
+    //         signList:[
+    //             {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
+    //             {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
+    //             {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
+    //             {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
+    //             {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
+    //             {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''}
+    //         ],
+    //     },
+    // },
+    {
+        type:'recommend',
+        name:'好货推荐',
+        icon:'md-image',
+        options:{
+            contentLeft:{
+                title:'发现好货',
+                secondTitle:'更多好货',
+                bgColor:'#449dae',
+                url:'',
+                list: [
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437520193959.jpg', name: '阿迪达斯三叶草', describe: '也许是每一款经典系列都应该有一个独特的故事吧', url:'',size:'160*160' },
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
+                ]
+            },
+            contentRight:{
+                title:'特色推荐',
+                secondTitle:'更多特色推荐',
+                bgColor:'#a25684',
+                url:'',
+                list: [
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
+                    { img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
+                ]
+            }
+        },
+    },
+    {
+        type:'newGoodsSort',
+        name:'新品排行',
+        icon:'md-image',
+        options:{
+            left:{
+                title:'特卖',
+                secondTitle:"更多特卖",
+                bgColor:'#c43d7e',
+                url:'',
+                list:[
+                    {name:'新年心愿单', describe:'满269减50,满999减100',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"160*160"},
+                    {name:'Ms.Maggie 冬季时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'Ms.Maggie 冬季时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'Ms.Maggie 冬季时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                ],
+            },
+            middle:{
+                title:'新品',
+                secondTitle:"更多新品",
+                bgColor:'#e66a07',
+                url:'',
+                list:[
+                    {name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                    {name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
+                ]
+            },
+            right:{
+                title:'排行榜',
+                secondTitle:"精品风向标",
+                bgColor:'#b62323',
+                url:'',
+                list:[
+                    {name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
+                    {name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
+                    {name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
+                    {name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
+                    {name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
+                    {name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
+                ]
+            }
+        },
+    },
+    {
+        type:'firstAdvert',
+        name:'首页广告',
+        icon:'md-image',
+        options:{
+            list:[
+                {name:'LILI生鲜', describe:"年货带回家 满199减60", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953435885264617.png', url:'',fromColor:'#e89621',toColor:"#f5c568",size:'170*170'},
+                {name:'LILI众筹', describe:"备孕有孕检测仪", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953436530337827.png', url:'', fromColor:"#325bb4", toColor:'#4c9afe',size:'170*170'},
+                {name:'LILI生鲜', describe:"年货带回家 满199减60", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953435885264617.png', url:'', fromColor:"#1c9daf", toColor:'#40cda7',size:'170*170'},
+                {name:'LILI众筹', describe:"备孕有孕检测仪", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953436530337827.png', url:'', fromColor:"#d13837", toColor:'#df6d4f',size:'170*170'},
+                {name:'LILI生鲜', describe:"年货带回家 满199减60", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953435885264617.png', url:'', fromColor:"#ca4283", toColor:'#eb75cf',size:'170*170'},
+                {name:'LILI众筹', describe:"备孕有孕检测仪", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953436530337827.png', url:'', fromColor:"#5d40c1", toColor:'#8c5fdb',size:'170*170'},
+            ],
+        },
+    },
+    {
+        type:'bannerAdvert',
+        name:'横幅广告',
+        icon:'md-image',
+        options:{
+            img:'',
+            url:'',
+            size:'1200*自定义'
+        },
+    },
+    {
+        type:'notEnough',
+        name:'还没逛够',
+        icon:'md-image',
+        options:{
+            list:[
+                [{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },],
+                [{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },],
+                [{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },],
+                [{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
+                { img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },],
+                
+            ],
+            navList:[
+                {title:'精选',desc:'猜你喜欢'},
+                {title:'智能先锋',desc:'大电器城'},
+                {title:'居家优品',desc:'品质生活'},
+                {title:'超市百货',desc:'百货生鲜'},
+            ]
+        },
+    },
+]

manager/src/views/lili-floor-renovation/modelForm.vue

@@ -0,0 +1,393 @@
+<template>
+    <div class="model-form">
+        <div class="model-content">
+            <!-- 头部广告，登录信息，不需要拖拽 -->
+            <div class="top-fixed-advert" :style="{backgroundColor:topAdvert.bgColor}">
+                <img :src="topAdvert.img" width="1200" height="80" alt="">
+                <div class="setup-box">
+                    <Button size="small" @click.stop="handleModel('topAdvert')">编辑</Button>
+                </div>
+            </div>
+            <div class="header-con">
+                <div><Icon type="md-pin" />北京</div>
+                <ul class="detail">
+                    <!-- <li>切换主题</li> -->
+                    <li>请登录</li>
+                    <li>我的订单</li>
+                    <li>我的足迹</li>
+                    <li><Icon size="18" type="ios-cart-outline" ></Icon>购物车</li>
+                    <li>店铺入驻</li>
+                </ul>
+            </div>
+            <div class="search-con">
+                <img :src="require('@/assets/logo.png')" class="logo" alt="">
+                <div class="search">
+                    <i-input v-model="searchData" size="large" placeholder="输入你想查找的商品">
+                        <Button slot="append">搜索</Button>
+                    </i-input>
+                    <!-- <Tag
+                        v-for="(item, index) in promotionTags"
+                        :key="index"
+                        class="mt_10"
+                    >
+                        {{item}}
+                    </Tag> -->
+                </div>
+            </div>
+            <div class="nav-con">
+                <div class="all-categories">全部商品分类</div>
+                <ul class="nav-item">
+                    <li v-for="(item,index) in navList.list" :key="index">
+                        <a href="#">{{item.name}}</a>
+                    </li>
+                </ul>
+                <div class="setup-box">
+                    <Button size="small" @click.stop="handleModel('quickNav')">编辑</Button>
+                </div>
+            </div>
+            <!-- 装修主体 -->
+            <div>
+                <draggable class="model-form-list"
+                    v-model="data.list"
+                    v-bind="{group:'model', ghostClass: 'ghost'}"
+                    @end="handleMoveEnd"
+                    @add="handleModelAdd"
+                >
+                    <template v-for="(element, index) in data.list">
+                        <model-form-item v-if="element && element.key" :key="element.key" :element="element" :index="index" :data="data"></model-form-item>
+                    </template>
+                </draggable>
+            </div>
+        </div>
+        <Modal
+            v-model="showModal"
+            title="顶部广告"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <!-- 顶部广告 -->
+            <div class="modal-top-advert">
+                <div>
+                    <img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
+                </div>
+                <div class="tips">
+                    建议尺寸：<span>{{ topAdvert.size }}</span>
+                </div>
+                <div>
+                    图片链接：<span>{{ topAdvert.url }}</span><Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
+                </div>
+                <div>
+                    选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
+                </div>
+                <div>
+                    选择背景色：<ColorPicker v-model="topAdvert.bgColor" />
+                </div>
+            </div>
+        </Modal>
+        <Modal
+            v-model="showModalNav"
+            title="快捷导航"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <!-- 分类tab栏 -->
+            <div class="modal-tab-bar">
+                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
+                <table cellspacing="0">
+                    <thead>
+                        <tr>
+                            <th width="250">分类名称</th>
+                            <th width="250">链接地址</th>
+                            <!-- <th width="150">排序</th> -->
+                            <th width="250">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item, index) in navList.list" :key="index">
+                            <td><Input v-model="item.name" /></td>
+                            <td><Input v-model="item.url" disabled /></td>
+                            <!-- <td><Input v-model="item.sort"/></td> -->
+                            <td>
+                                <Button type="primary" size="small" @click="handleSelectLink(item,index)">选择链接</Button>&nbsp;
+                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </Modal>
+        <!-- 选择商品。链接 -->
+        <liliDialog
+            ref="liliDialog"
+            @selectedLink="selectedLink"
+            @selectedGoodsData="selectedGoodsData"
+        ></liliDialog>
+        <!-- 选择图片 -->
+        <Modal width="1200px" v-model="picModelFlag" footer-hide>
+            <ossManage @callback="callbackSelected" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+<script>
+import Draggable from 'vuedraggable'
+import ModelFormItem from './modelFormItem.vue'
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+    name:'modelForm',
+    components:{
+        Draggable,
+        ModelFormItem,
+        ossManage
+    },
+    props:['data'],
+    data(){
+        return{
+            picModelFlag: false, // 选择图片模态框
+            showModal: false, // 顶部广告模态框
+            showModalNav: false, // 分类nav模态框
+            selectedNav:null, //当前已选nav
+            // 模拟搜索框下方数据
+            promotionTags: [ "买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"], // 热词数据
+            topAdvert:{ // 头部广告图数据
+                type:'topAdvert',
+                img:'https://x.dscmall.cn/storage/data/gallery_album/108/original_img/108_P_1539564967582.jpg',
+                url:'',
+                bgColor:'#de000d',
+                size:'1200*80'
+            },
+            navList:{ // 分类nav数据
+                type:'navBar',
+                list:[
+                    {name:'秒杀', url:''}, {name:'闪购', url:''}, {name:'优惠券', url:''}, {name:'拍卖', url:''}, {name:'服装城', url:''},
+                ]
+            }
+        }
+    },
+    mounted(){
+        document.body.ondrop = function (event) {
+            let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+            if (isFirefox) {
+                event.preventDefault()
+                event.stopPropagation()
+            }
+        }
+    },
+    methods:{
+        handleSelectLink(item,index) { // 调起选择链接弹窗
+            if(item) this.selectedNav = item;
+            this.$refs.liliDialog.open('link')
+        },
+        selectedLink(val) {
+            console.log(val);
+            if(this.showModalNav){
+                this.selectedNav.url = this.$options.filters.formatLinkType(val);
+            }else {
+                this.topAdvert.url = this.$options.filters.formatLinkType(val);
+            }
+        },
+        handleDelNav(index){ // 删除导航
+            this.navList.list.splice(index,1)
+        },
+        handleAddNav(){ // 添加导航
+            this.navList.list.push(
+                {name:'',url:''}
+            )
+            console.log(this.navList.list)
+        },
+        handleMoveEnd ({newIndex, oldIndex}) {
+            console.log('index', newIndex, oldIndex)
+        },
+        handleModel (type) {
+            if(type == 'topAdvert'){
+                this.showModal = true;
+            } else {
+                this.showModalNav = true;
+            }
+        },
+        handleSelectImg() {
+            this.$refs.ossManage.selectImage = true;
+            this.picModelFlag = true;
+        },
+        callbackSelected (item) { // 选择图片回调
+            this.picModelFlag = false;
+            this.topAdvert.img = item.url;
+        },
+        handleModelAdd (evt) { // 拖拽，添加模块
+            const newIndex = evt.newIndex
+
+            // 为拖拽到容器的元素添加唯一 key
+            this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]))
+            const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
+            this.$set(this.data.list, newIndex, {
+                ...this.data.list[newIndex],
+                options: {
+                    ...this.data.list[newIndex].options,
+                },
+                key,
+                // 绑定键值
+                model: this.data.list[newIndex].type + '_' + key
+            })
+        },
+    },
+    watch: {
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+    @import './modelList/setup-box.scss';
+    .model-form {
+        width: 1500px;
+    }
+    .model-content {
+        width: 1200px;
+        margin: 0 auto;
+        background: #fff;
+        min-height: 1200px;
+    }
+    .model-form-list{
+        min-height: 500px;
+    }
+    /**  顶部广告，头部，搜索框 start */
+    .top-fixed-advert{
+        display: flex;
+        width:1500px;
+        margin-left: -150px;
+        background: $theme_color;
+        justify-content: center;
+    }
+
+    .header-con {
+        display: flex;
+        justify-content: space-between;
+        height: 35px;
+        padding: 0 15px;
+        line-height: 35px;
+        color: #999;
+        font-weight: bold;
+        div,li{
+            &:hover{
+                color: $theme_color;
+                cursor: pointer;
+            }
+        }
+        .detail{
+            display: flex;
+            >li{
+                margin-left: 10px;
+                &::after{
+                    content: "|";
+                    padding-left: 10px;
+                }
+                &:last-child::after{
+                    content:'';
+                    padding-left: 0;
+                }
+                &:hover::after{
+                    color: #999;
+                }
+            }
+        }
+    }
+    /** 搜索框 */
+    .search-con {
+        padding-top: 15px;
+        margin: 0px auto;
+        margin-bottom: 10px;
+        width: 1200px;
+        position: relative;
+        .logo{
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 150px;
+            height: 50px;
+        }
+        .search {
+            width: 460px;
+            margin: 0 auto;
+            /deep/ .ivu-input.ivu-input-large {
+                border: 2px solid $theme_color;
+                font-size: 12px;
+                height: 34px;
+                &:focus {
+                    box-shadow: none;
+                }
+            }
+            /deep/ .ivu-input-group-append {
+                border: 1px solid $theme_color;
+                border-left: none;
+                height: 30px;
+                background-color: $theme_color;
+                color: #ffffff;
+                button {
+                    font-size: 14px;
+                    font-weight: 600;
+                    line-height: 1;
+                }
+            }
+        }
+    }
+    /** 商品分类 */
+    .nav-con{
+       width:1200px;
+       height: 40px;
+       background: #eee;
+       display: flex;
+       .all-categories{
+           width: 200px;
+           line-height: 40px;
+           color: #fff;
+           background-color: $theme_color;
+           text-align: center;
+           font-size: 16px;
+       }
+       .nav-item {
+            width: 1000px;
+            height: 40px;
+            line-height: 40px;
+            overflow: hidden;
+            list-style: none;
+            background-color: #eee;
+            display: flex;
+            li{
+                font-size: 16px;
+                font-weight: bold;
+                margin-left: 20px;
+                a{
+                    color:rgb(89, 88, 88);
+                    font-size: 15px;
+                    &:hover{color:$theme_color}
+                }
+            }
+        }
+    }
+    /**  顶部广告，头部，搜索框 end */
+
+    .top-fixed-advert, .nav-con{
+        position: relative;
+        &:hover{
+            .setup-box{
+                display: block;
+            }
+        }
+    }
+    /** 装修模态框 内部样式start */
+    .modal-top-advert{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        >*{
+            margin-bottom: 10px;
+        }
+    }
+</style>

manager/src/views/lili-floor-renovation/modelFormItem.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="model-item"
+      v-if="element && element.key" 
+    >
+        <!-- 轮播图模块，包括个人信息，快捷导航模块 -->
+        <template v-if="element.type == 'carousel'">
+            <model-carousel :data="element"></model-carousel>
+        </template>
+        <!-- 热门广告 -->
+        <template v-if="element.type == 'hotAdvert'">
+            <div class="setup-content">
+                <img style="display:block;" :src="element.options.list[0].img" @click="$router.push(element.options.list[0].url)" width="1200" alt="">
+                <div class="setup-box">
+                    <div>
+                        <Button size="small" @click.stop="handleSelectModel(element.options.list[0])">编辑</Button>
+                    </div>
+                </div>
+            </div>
+            <ul class="advert-list">
+                <template  v-for="(item,index) in element.options.list">
+                    <li v-if="index!==0" @click="$router.push(item.url)" class="setup-content" :key="index">
+                        <img :src="item.img" width="230" height="190" alt="">
+                        <div class="setup-box">
+                            <div>
+                                <Button size="small" @click.stop="handleSelectModel(item)">编辑</Button>
+                            </div>
+                        </div>
+                    </li>
+                </template>
+            </ul>
+        </template>
+        <!-- 限时秒杀 待完善 -->
+        <template v-if="element.type == 'seckill'">
+            <seckill :data="element"></seckill>
+        </template>
+        <!-- 折扣广告 -->
+        <template v-if="element.type == 'discountAdvert'">
+            <div class="discountAdvert" :style="{'background-image' : 'url(' + element.options.bgImg.img + ')'}">
+                <div>
+                    <div v-for="(item,index) in element.options.classification" :key="index" class="setup-content">
+                        <img :src="item.img" width="190" height="210" alt="">
+                        <div class="setup-box">
+                            <div>
+                                <Button size="small" @click.stop="handleSelectModel(item)">编辑</Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div v-for="(item,index) in element.options.brandList" :key="index" class="setup-content">
+                        <img :src="item.img" width="240" height="105" alt="">
+                        <div class="setup-box">
+                            <div>
+                                <Button size="small" @click.stop="handleSelectModel(item)">编辑</Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <!-- 首页品牌 -->
+        <!-- <template v-if="element.type == 'brand'">
+            <div class="brand">
+                <div class="brand-view">
+                    <div class="brand-view-content" v-for="(brand,index) in element.options.brandViewList" :key="index">
+                        <div class="brand-view-title">
+                            <span><span class="fontsize_18 fw_bold">{{brand.nameCn}}</span> <span class="fw_bold">{{brand.nameEn}}</span></span>
+                            <span>更多&gt;</span>
+                        </div>
+                        <div class="brand-view-img">
+                            <img :src="brand.img" alt="">
+                        </div>
+                    </div>
+                </div>
+                <ul class="brand-list">
+                    <li v-for="(sign,index) in element.options.signList" :key="index">
+                        <div class="brand-img">
+                            <img :src="sign.img" alt="">
+                        </div>
+                        <div class="brand-mash">
+                            <Icon type="ios-heart-outline" />
+                            <div>关注人数：{{ sign.follow }}</div>
+                            <div>点击进入</div>
+                        </div>
+                    </li>
+                    <li class="refresh">
+                        <Icon type="md-refresh" />
+                        <div>换一批</div>
+                    </li>
+                </ul>
+            </div>
+        </template> -->
+        <!-- 好货推荐 -->
+        <template v-if="element.type == 'recommend'">
+            <recommend :data="element"></recommend>
+        </template>
+        <!-- 新品排行 -->
+        <template v-if="element.type == 'newGoodsSort'">
+            <new-goods-sort :data="element"></new-goods-sort>
+        </template>
+        <!-- 首页广告 -->
+        <template v-if="element.type == 'firstAdvert'">
+            <first-page-advert :data="element"></first-page-advert>
+        </template>
+        <!-- 横幅广告 -->
+        <template v-if="element.type == 'bannerAdvert'">
+            <div class="horizontal-advert setup-content">
+                <img v-if="element.options.img" width="1200" :src="element.options.img" alt="">
+                <div v-else class="default-con">
+                    <p>广告图片</p>
+                    <p>1200*自定义</p>
+                </div>
+                <div class="setup-box">
+                    <div>
+                        <Button size="small" @click.stop="handleSelectModel(element.options)">编辑</Button>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-if="element.type == 'notEnough'">
+            <not-enough :data="element"></not-enough>
+        </template>
+        <div class="del-btn">
+            <Button size="small" type="error" @click="handleModelDelete">删除</Button>
+        </div>
+        <Modal
+            v-model="showModal"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <div class="modal-top-advert">
+                <div>
+                    <!-- 热门广告两种图片尺寸 -->
+                    <img class="show-image" width="600" height="40" v-if="selected.size && selected.size.indexOf('1200')>=0" :src="selected.img" alt />
+                    <img class="show-image" width="230" height="190" v-if="selected.size && selected.size.indexOf('230*190')>=0" :src="selected.img" alt />
+                    <!-- 折扣广告三种图片尺寸 -->
+                    <img class="show-image" width="600" height="300" v-if="selected.size && selected.size.indexOf('1300')>=0" :src="selected.img" alt />
+                    <img class="show-image" width="190" height="210" v-if="selected.size && selected.size.indexOf('190*210')>=0" :src="selected.img" alt />
+                    <img class="show-image" width="240" height="105" v-if="selected.size && selected.size.indexOf('240*105')>=0" :src="selected.img" alt />
+                </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;
+                </div>
+            </div>
+        </Modal>
+        <!-- 选择商品。链接 -->
+        <liliDialog
+            ref="liliDialog"
+            @selectedLink="selectedLink"
+            @selectedGoodsData="selectedGoodsData"
+        ></liliDialog>
+        <!-- 选择图片 -->
+        <Modal width="1200px" v-model="picModelFlag" footer-hide>
+            <ossManage @callback="callbackSelected" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+
+<script>
+import ModelCarousel from './modelList/carousel.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";
+
+export default {
+    name:'modelFormItem',
+    props: ['element', 'select', 'index', 'data'],
+    components:{
+        ModelCarousel, Recommend, NewGoodsSort, FirstPageAdvert, NotEnough, Seckill, ossManage
+    },
+    data () {
+        return {
+            showModal:false,
+            selected:{},
+            picModelFlag: false
+        }
+    },
+    mounted () {
+        
+    },
+    methods: {
+        handleSelectModel (item) {
+            this.selected = item;
+            this.showModal = true
+        },
+        handleModelDelete () {
+            this.$Modal.confirm({
+                title: '提示',
+                content: '<p>确定删除当前模块吗？</p>',
+                onOk: () => {
+                    this.$nextTick(() => {
+                        this.data.list.splice(this.index, 1)
+                    })
+                }
+            });
+            
+        },
+        handleSelectLink(item,index) { // 调起选择链接弹窗
+            this.$refs.liliDialog.open('link')
+        },
+        selectedLink(val) {
+            this.selected.url = this.$options.filters.formatLinkType(val);;
+        },
+        handleMoveEnd ({newIndex, oldIndex}) {
+            console.log('index', newIndex, oldIndex)
+        },
+        handleEditModel (type) {
+            this.showModal = true;
+        },
+        handleSelectImg(){ // 选择图片
+            this.$refs.ossManage.selectImage = true;
+            this.picModelFlag = true;
+        },
+        callbackSelected (val) {
+            this.picModelFlag = false;
+            this.selected.img = val.url;
+        }
+        
+    },
+    watch: {
+        
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './modelList/setup-box.scss';
+.model-item{
+    position: relative;
+    margin-bottom: 20px;
+    &:hover{
+        .del-btn{display: block;}
+    }
+}
+.del-btn{
+    width: 100px;
+    height: 100px;
+    display: none;
+    position: absolute;
+    right: -100px;
+    top: 0;
+    &:hover{
+        display: block;
+    }
+}
+/** 横幅广告 */
+.horizontal-advert{
+    width: 1200px;
+    height: auto;
+    .default-con{
+        height: 100px;
+        padding-top: 30px;
+        text-align: center;
+        background: #ddd;
+    }
+}
+/** 热门广告 */
+.advert-list{
+    background: $theme_color;
+    height:200px;
+    display: flex;
+    justify-content: space-around;
+    padding: 3px 10px;
+    >li{
+        img{
+            cursor: pointer;
+            border-radius: 10px;
+            transition: all 150ms ease-in-out;
+            &:hover{
+                transform: translateY(-3px);
+                box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px 0px;
+            }
+        }
+    }
+}
+/** 限时秒杀 */
+.limit-img{
+    display: flex;
+    flex-direction: row;
+    img{
+        width: 300px;
+        height: 100px;
+    }
+}
+/** 折扣广告 */
+.discountAdvert{
+    height:566px;
+    background-repeat: no-repeat ;
+    margin-left: -97px;
+    position: relative;
+    >div {
+        padding-left: 295px;
+        display: flex;
+        flex-wrap: wrap;
+        &:nth-child(1) img{
+            margin: 10px 10px 0 0;
+        }
+        &:nth-child(2) img{
+            margin: 0 10px 0 0;
+        }
+    }
+    
+}
+/** 首页品牌 */
+.brand{
+    .brand-view{
+        display: flex;
+        margin-top: 10px;
+        .brand-view-content{
+            width: 470px;
+            margin-left: 10px;
+            img{
+                width: 100%;
+                height: 316px;
+            }
+            .brand-view-title{
+                height: 50px;
+                padding: 0 5px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
+        .brand-view-content:first-child{
+            width: 240px;
+            margin-left: 0;
+        }
+    }
+    .brand-list{
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        li{
+            width: 121px;
+            height: 112px;
+            position: relative;
+            overflow: hidden;
+            border: 1px solid #f5f5f5;
+            margin: -1px -1px 0 0;
+            &:hover{
+                .brand-mash{display:flex;}
+            }
+            .brand-img{
+                text-align: center;
+                margin-top: 30px;
+                img{
+                    width: 100px;
+                    height: auto;
+                }
+            }
+            .brand-mash{
+                display: none;
+                position: absolute;
+                top: 0;
+                left: 0;
+                background: rgba(0, 0, 0, .5);
+                width: inherit;
+                height: inherit;
+                font-size: 12px;
+                font-weight: bold;
+                .ivu-icon{
+                    position: absolute;
+                    right: 10px;
+                    top: 10px;
+                    font-size: 15px;
+                }
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                color: #fff;
+                cursor: pointer;
+                div:last-child{
+                    background-color: $theme_color;
+                    border-radius: 9px;
+                    padding: 0 10px;
+                    margin-top: 5px;
+                }
+            }
+        }
+        .refresh{
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            .ivu-icon{
+                font-size: 18px;
+                transition: all .3s ease-out;
+            }
+            &:hover{
+                background-color: $theme_color;
+                color: #fff;
+                .ivu-icon{
+                    transform: rotateZ(360deg);
+                }
+            }
+        }
+    }
+}
+
+/** 装修模态框 内部样式start */
+.modal-top-advert{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    >*{
+        margin-bottom: 10px;
+    }
+}
+</style>
+

manager/src/views/lili-floor-renovation/modelList/carousel.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="model-carousel">
+    <div class="nav-body clearfix">
+      <!-- 侧边导航 -->
+      <div class="nav-side">导航栏占位区</div>
+      <div class="nav-content setup-content">
+        <!-- 轮播图 -->
+        <Carousel autoplay>
+          <CarouselItem 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>
+        <div class="setup-box">
+          <div>
+            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+          </div>
+        </div>
+      </div>
+      <div class="nav-right">
+        <div class="person-msg">
+          <img src="../../../assets/play.png" alt />
+          <div>Hi，欢迎来到LiLi Shop</div>
+          <div>
+            <Button type="error" shape="circle">请登录</Button> &nbsp;
+            <Button size="small" shape="circle">我要开店</Button>
+          </div>
+        </div>
+        <div class="shop-msg">
+          <div>
+            <span>店铺信息</span>
+            <span>|</span>
+            <span>网站帮助分类</span>
+          </div>
+          <ul>
+            <li>免责条款</li>
+            <li>联系我们</li>
+            <li>咨询热点</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="快捷导航"
+      draggable
+      width="800"
+      :z-index="100"
+      mask-closable="false"
+      :on-ok="sureDecorate"
+      :on-cancel="cancelDecorate"
+    >
+      <div class="modal-tab-bar">
+        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        &nbsp;
+        <span class="ml_10">图片尺寸:{{ data.size }}</span>
+        <div style="color: #999" class="fz_12">点击缩略图替换图片</div>
+        <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 data.options.list" :key="index">
+              <td>
+                <img
+                  style="cursor: pointer"
+                  :src="item.img"
+                  @click="handleSelectImg(item)"
+                  width="200"
+                  height="100"
+                  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"
+                  size="small"
+                  @click="handleSelectLink(item)"
+                  >选择链接</Button
+                >&nbsp;
+                <Button
+                  type="error"
+                  ghost
+                  size="small"
+                  @click="handleDel(index)"
+                  >删除</Button
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage @callback="callbackSelected" ref="ossManage" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "modelCarousel",
+  props: ["data"],
+  components: {
+    ossManage
+  },
+  data() {
+    return {
+      showModal: false,
+      selected: null,
+      picModelFlag: false,
+    };
+  },
+
+  methods: {
+    handleSelectModel () {
+      // 编辑模块
+      this.showModal = true;
+    },
+    handleAdd () {
+      this.data.options.list.push({ img: "", url: "" });
+      this.$forceUpdate();
+    },
+    handleSelectLink (item) {
+      // 选择链接
+      this.$refs.liliDialog.open('link')
+      this.selected = item;
+    },
+    callbackSelected (item) { // 选择图片回调
+      this.picModelFlag = false;
+      this.selected.img = item.url;
+    },
+    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);
+    },
+    handleSelectImg(item) {
+      this.selected = item;
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.model-carousel {
+  width: 1200px;
+  height: 340px;
+  overflow: hidden;
+}
+
+.nav-item li {
+  float: left;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 30px;
+}
+.nav-item a {
+  text-decoration: none;
+  color: #555555;
+}
+.nav-item a:hover {
+  color: $theme_color;
+}
+/*大的导航信息，包含导航，幻灯片等*/
+.nav-body {
+  width: 1200px;
+  height: 340px;
+  margin: 0px auto;
+}
+.nav-side {
+  height: 100%;
+  width: 200px;
+  padding: 0px;
+  color: #fff;
+  float: left;
+  background-color: #6e6568;
+  line-height: 340px;
+  text-align: center;
+}
+
+/*导航内容*/
+.nav-content {
+  width: 800px;
+  height: 340px;
+  overflow: hidden;
+  float: left;
+  position: relative;
+}
+.nav-right {
+  float: left;
+  width: 200px;
+  .person-msg {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin: 20px auto;
+
+    button {
+      height: 25px !important;
+      margin-top: 10px;
+    }
+
+    .ivu-btn-default {
+      color: $theme_color;
+      border-color: $theme_color;
+    }
+
+    img {
+      margin-bottom: 10px;
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+  }
+  .shop-msg {
+    div {
+      width: 100%;
+      margin: 10px 27px;
+      span {
+        cursor: pointer;
+        text-align: center;
+        font-weight: bold;
+        margin-left: 5px;
+      }
+      span:nth-child(1) {
+        @include content_color($theme_color);
+        margin-left: 0;
+      }
+      span:nth-child(2) {
+        font-weight: normal;
+      }
+      span:nth-child(3):hover {
+        color: $theme_color;
+      }
+    }
+
+    ul {
+      margin: 0 30px;
+      li {
+        cursor: pointer;
+        margin: 5px 0;
+        color: #999395;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+    }
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/modelList/firstPageAdvert.vue

@@ -0,0 +1,160 @@
+<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>
+        <Modal
+            v-model="showModal"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <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"
+            @selectedGoodsData="selectedGoodsData"
+        ></liliDialog>
+        <!-- 选择图片 -->
+        <Modal width="1200px" v-model="picModelFlag" footer-hide>
+            <ossManage @callback="callbackSelected" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+    props:{
+        data:{
+            type: Object,
+            default: null
+        }
+    },
+    components:{ossManage},
+    data() {
+        return {
+            options: this.data.options,
+            showModal: false,
+            selected: {},
+            picModelFlag: false
+        }
+    },
+    methods:{
+        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;
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@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;
+        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;
+    }
+}
+</style>

manager/src/views/lili-floor-renovation/modelList/newGoodsSort.vue

@@ -0,0 +1,338 @@
+<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"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <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>
+        </Modal>
+        <!-- 装修标题 -->
+        <Modal
+            v-model="showModalTitle"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <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" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+    props:{
+        data:{
+            type:Object,
+            default:null
+        }
+    },
+    components:{
+      ossManage
+    },
+    data() {
+        return {
+            options:this.data.options,
+            showModal:false,
+            showModalTitle:false,
+            selected: {},
+            picModelFlag: false
+        }
+    },
+    methods:{
+        handleSelectModel (item, type) {
+            this.selected = item;
+            console.warn(item);
+            if(type){
+                this.showModalTitle = 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')
+        },
+        selectedLink (val) {
+            this.selected.url = this.$options.filters.formatLinkType(val);
+        },
+        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}`
+        },
+       
+        handleMoveEnd ({newIndex, oldIndex}) {
+            console.log('index', newIndex, oldIndex)
+        },
+        handleEditModel (type) {
+            this.showModal = true;
+        },
+        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{
+    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;
+        color: #fff;
+        span:nth-child(1){
+            font-size: 20px;
+        }
+        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;
+}
+</style>

manager/src/views/lili-floor-renovation/modelList/notEnough.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="not-enough">
+        <ul class="nav-bar setup-content">
+            <li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
+                <p>{{item.title}}</p>
+                <p>{{item.desc}}</p>
+            </li>
+            <div class="setup-box" style="width:100px;left:1100px;">
+                <div>
+                    <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+                </div>
+            </div>
+        </ul>
+        <div class="content" v-if="showContent">
+            <div v-for="(item, index) in conData.options.list[currentIndex]" :key="index" class="setup-content">
+                <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> -->
+                </p>
+                <div class="setup-box">
+                    <div>
+                        <Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <Modal
+            v-model="showModal"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <div class="modal-tab-bar">
+                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
+                <table cellspacing="0">
+                    <thead>
+                        <tr>
+                            <th width="250">主标题</th>
+                            <th width="250">描述</th>
+                            <th width="250">操作</th>
+                        </tr>
+                    </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><Input v-model="item.sort"/></td> -->
+                            <td v-if="index!=0">
+                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </Modal>
+        <!-- 选择商品。链接 -->
+        <liliDialog
+            ref="liliDialog"
+            @selectedLink="selectedLink"
+            @selectedGoodsData="selectedGoodsData"
+        ></liliDialog>
+    </div>
+</template>
+<script>
+export default {
+    props:{
+        data:{
+            type: Object,
+            default: null
+        }
+    },
+    data() {
+        return {
+            currentIndex:0,
+            conData:this.data,
+            selected:{},
+            showModal:false,
+            showContent:true,
+        }
+    },
+    watch:{
+        data:function(val){
+            this.conData = val
+        },
+        conData:function(val){
+            this.$emit('content',val)
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        changeCurr(index){
+            this.currentIndex = index;
+        },
+        handleSelectModel (item,type) {
+            this.selected = item;
+            this.showModal = true
+        },
+        handleSelectLink(item,index) { // 调起选择链接弹窗
+            this.$refs.liliDialog.open('link')
+        },
+        handleSelectGoods(item) { // 调起选择链接弹窗
+            if(item) this.selected = item;
+            this.$refs.liliDialog.open('goods')
+        },
+        selectedLink(val) {
+           this.selected.url = this.$options.filters.formatLinkType(val);
+        },
+        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}`
+        },
+        handleDelNav(index){ // 删除导航
+            this.conData.options.navList.splice(index,1)
+            this.conData.options.list.splice(index,1)
+        },
+        handleAddNav(){ // 添加导航
+            this.conData.options.navList.push(
+                {title:'',desc:''}
+            )
+            this.conData.options.list.push(
+                [{ img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                ],
+            )
+            this.showContent = false
+            this.$nextTick(()=>{
+                this.showContent = true;
+            })
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './setup-box.scss';
+.nav-bar{
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: rgb(218, 217, 217);
+    height: 60px;
+    align-items: center;
+    position: relative;
+    li{
+        padding: 0 30px;
+        text-align: center;
+        p:nth-child(1){
+            font-size: 16px;
+            border-radius: 50px;
+            padding: 0 7px;
+        }
+
+        p:nth-child(2){
+            font-size: 14px;
+            color: #999;
+        }
+
+        &:hover{
+            p{
+                color: $theme_color;
+            }
+            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){
+            color: $theme_color;
+        }
+    }
+}
+
+.content{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    >div{
+        padding: 10px;
+        box-sizing: border-box;
+        border: 1px solid #eee;
+        margin-bottom: 10px;
+        p:nth-of-type(1){
+            overflow: hidden;
+            width: 210px;
+            white-space: nowrap;
+            text-overflow:ellipsis;
+            margin: 10px 0 5px 0;
+        }
+        p:nth-of-type(2){
+            color: $theme_color;
+            font-size: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            span:nth-child(2){
+                text-decoration: line-through;
+                font-size: 12px;
+                color: #999;
+            }
+        }
+    }
+}
+</style>

manager/src/views/lili-floor-renovation/modelList/recommend.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="recommend">
+        <div class="recommend-left">
+            <div class="head-recommend setup-content" :style="{background:msgLeft.bgColor}">
+                <span>{{ msgLeft.title }}</span>
+                <span>{{ msgLeft.secondTitle }}&gt;</span>
+                <div class="setup-box">
+                    <div>
+                        <Button size="small" @click.stop="handleSelectModel(msgLeft,true)">编辑</Button>
+                    </div>
+                </div>
+            </div>
+            <div class="content-left">
+                <div class="setup-content">
+                    <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 size="small" :style="{background:msgLeft.bgColor}" class="fz_12 view-btn">点击查看</Button>
+                    <div class="setup-box">
+                        <div>
+                            <Button size="small" @click.stop="handleSelectModel(msgLeft.list[0])">编辑</Button>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <template v-for="(item, index) in msgLeft.list" >
+                        <div  v-if="index!=0" :key="index" class="setup-content">
+                            <img :src="item.img" width="80" height="80" alt="">
+                            <div>
+                                <div>{{ item.name }}</div>
+                                <div>{{ item.describe }}</div>
+                            </div>
+                            <div class="setup-box">
+                                <div>
+                                    <Button size="small" @click.stop="handleSelectModel(item)">编辑</Button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+        <div class="recommend-right">
+            <div class="head-recommend setup-content" :style="{background:msgRight.bgColor}">
+                <span>{{ msgRight.title }}</span>
+                <span>{{ msgRight.secondTitle }}&gt;</span>
+                <div class="setup-box">
+                    <div>
+                        <Button size="small" @click.stop="handleSelectModel(msgRight,true)">编辑</Button>
+                    </div>
+                </div>
+            </div>
+            <div class="content-right">
+                <div v-for="(item, index) in msgRight.list" :key="index" class="setup-content">
+                    <div class="right-item">
+                        <div>
+                            <span :style="{background:msgRight.bgColor}">{{item.name}}</span>
+                            <span>{{item.describe}}</span>
+                        </div>
+                        <div class="right-img">
+                            <img :src="item.img" alt="">
+                        </div>
+                    </div>
+                    <div class="setup-box">
+                        <div>
+                            <Button size="small" @click.stop="handleSelectModel(item)">编辑</Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <Modal
+            v-model="showModal"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <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('80*80')>=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" class="ml_10" 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>
+        </Modal>
+        <Modal
+            v-model="showModalTitle"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            mask-closable="false"
+            :on-ok="sureDecorate"
+            :on-cancel="cancelDecorate"
+            >
+            <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><Input v-model="selected.bgColor" /> <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" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+    props:{
+        data:{
+            type:Object,
+            default:{}
+        }
+    },
+    components:{
+        ossManage
+    },
+    data() {
+        return {
+            msgLeft:this.data.options.contentLeft,
+            msgRight:this.data.options.contentRight,
+            showModal:false,
+            showModalTitle:false,
+            selected:{},
+            picModelFlag: false
+        }
+    },
+    methods:{
+        handleSelectModel (item,type) {
+            this.selected = item;
+            if(type){
+                this.showModalTitle = true
+            } else {
+                this.showModal = true
+            }
+            
+        },
+        handleSelectLink(item,index) { // 调起选择链接弹窗
+            this.$refs.liliDialog.open('link')
+        },
+        handleSelectGoods(item) { // 调起选择商品
+            this.$refs.liliDialog.open('goods')
+        },
+        selectedLink(val) {
+            this.selected.url = this.$options.filters.formatLinkType(val);
+        },
+        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}`
+        },
+        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';
+.recommend{
+    display: flex;
+    justify-content: space-between;
+    .recommend-left{
+        width: 595px;
+        .content-left{
+            display: flex;
+            padding-top: 10px;
+            font-size: 12px;
+            >div:nth-child(1){
+                width: 189px;
+                border-right: 1px solid #eee;
+                height: 360px;
+                img{
+                    margin: 40px 0 0 15px;
+                }
+                .margin-left{
+                    margin-left: 15px;
+                    width: 145px;
+                }
+                div:nth-of-type(1){
+                    font-weight: bold;
+                    border-top: 1px solid #eee;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                }
+                div:nth-of-type(2){
+                    color: #999;
+                }
+                .view-btn{
+                    margin-left: 15px;
+                    margin-top: 10px;
+                    color: #fff;
+                }
+            }
+            >div:nth-child(2){
+                width: 405px;
+                display: flex;
+                flex-wrap: wrap;
+                >div{
+                    display: flex;
+                    align-items: center;
+                    width: 200px;
+                    height: 120px;
+                    img{margin: 0 10px;}
+                    >div:nth-child(2){
+                        // margin: 0 10px;
+                        :nth-child(2){
+                            color: #449dae;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .recommend-right{
+        width: 595px;
+        height: 360px;
+        .head-recommend{
+            background: #a25684;
+        }
+        .content-right{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            padding-top: 10px;
+            >div{
+                width: 50%;
+                text-align: center;
+                height: 180px;
+                padding-top: 10px;
+                .right-item {
+                    display: flex;
+                    margin-top: 30px;
+                    height: 180px;
+                    padding: 0 10px;
+                    font-size: 12px;
+                    >div:nth-child(1) {
+                        width: 130px;
+                        margin-top: 30px;
+                        span:nth-child(1){
+                            color: #fff;
+                            border-radius: 10px;
+                            padding: 0 5px;
+                            background-color: #a25684;
+                            display: block;
+                            width: 120px;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            margin: 0 10px 10px 0;
+                        }
+                        span:nth-child(2) {
+                            font-size: 12px;
+                            color: #666;
+                            display: block;
+                        }
+                    }
+                    .right-img {
+                        width: 100;
+                        height: 100px;
+                        text-align: center;
+                        margin: 0 auto;
+                        img{
+                            max-height: 100px;
+                            max-width: 100px;
+                        }
+                    }
+                    
+                }
+                
+            }
+            >div:nth-child(n+1){
+                border-right: 1px solid #eee;
+            }
+        }
+    }
+
+    .head-recommend{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 50px;
+        padding: 0 10px;
+        background: #449dae;
+        color: #fff;
+        span:nth-child(1){
+            font-size: 20px;
+        }
+        span:nth-child(2){
+            font-size: 12px;
+        }
+    }
+
+}
+
+.modal-top-advert {
+    align-items: start;
+    padding: 0 30px;
+}
+</style>

manager/src/views/lili-floor-renovation/modelList/seckill.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="seckill">
+        <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" class="swiper-slide">
+                    <div class="content">
+                        <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>
+                        </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,
+            days:'00',
+            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)
+    },
+    beforeDestroy(){
+        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;
+    .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>

manager/src/views/lili-floor-renovation/modelList/setup-box.scss

@@ -0,0 +1,62 @@
+.setup-content{
+    position: relative;
+    &:hover{
+        .setup-box{
+            display: block;
+        }
+    }
+}
+
+.setup-box{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, .2);
+    z-index: 99;
+    width: 100%;
+    height: 100%;
+    .ivu-btn{
+        float: right;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+}
+
+.modal-tab-bar{
+    margin-left: 20px;
+    table{
+        margin-top: 10px;
+        display:inline-block;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        max-height: 400px !important;
+        overflow: hidden auto;
+    }
+    thead{
+        background-color: #eee;
+        th{
+            padding: 5px 0;
+        }
+    }
+    td{
+       padding: 10px;
+       text-align: center;
+    }
+    tbody>tr:hover{
+        background-color: aliceblue;
+    }
+}
+
+.modal-top-advert{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    >*{
+        margin-bottom: 10px;
+    }
+    .ivu-input-wrapper{
+        width: 200px;
+    }
+}

manager/src/views/lili-floor-renovation/readme.md

@@ -0,0 +1,20 @@
+### 楼层装修页面
+
+#### floorList.vue  楼层列表
+
+#### renovation.vue 楼层装修主页面
+
+#### singleConfig.vue  右侧配置项
+
+#### modelForm.vue  中间展示所选模块
+
+#### modelFormItem.vue  单个模块样式
+
+#### modelConfig.js 模块数据
+
+#### modelList文件夹为添加的模块
+
+### wap文件夹为移动端楼层装修
+
+
+### draggable中文文档 (http://www.itxst.com/vue-draggable/tutorial.html)

manager/src/views/lili-floor-renovation/renovation.vue

@@ -0,0 +1,172 @@
+<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'}"
+              @end="handleMoveEnd"
+              @start="handleMoveStart"
+              :move="handleMove"
+            >
+                <li v-for="(model, index) in modelData" :key="index" class="model-item">
+                    <Icon :type="model.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"><Button type="primary" @click="saveTemplate">保存模板</Button> <Button @click="resetTemplate">还原模板</Button></div>
+    </div>
+</template>
+<script>
+import { modelData } from './modelConfig';
+import Draggable from "vuedraggable";
+import ModelForm from './modelForm.vue';
+import * as API_floor from '@/api/other.js';
+export default {
+    components:{
+        Draggable, ModelForm
+    },
+    mounted(){
+        this.getTemplateItem(this.$route.query.id)
+    },
+    data() {
+        return {
+            modelData, // 可选模块数据
+            modelForm:{list:[]} // 模板数据
+        }
+    },
+    methods:{
+        saveTemplate(){ // 保存模板
+            this.modelForm.list.unshift(this.$refs.modelForm.navList)
+            this.modelForm.list.unshift(this.$refs.modelForm.topAdvert)
+            const modelForm = JSON.stringify(this.modelForm)
+            const data = {
+                id:this.$route.query.id,
+                pageData:modelForm,
+            }
+            API_floor.updateHome(this.$route.query.id, data).then(res=> {
+                if(res.code === 200) {
+                    this.$Message.success('保存模板成功');
+                } else {
+                    this.$Message.error(res.message)
+                }
+            })
+        },
+        resetTemplate(){ // 还原模板
+            this.getTemplateItem(this.$route.query.id)
+        },
+        getTemplateItem(id){ // 获取模板数据
+            API_floor.getHomeData(id).then(res => {
+                if (res.code === 200) {
+                    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)
+                            this.modelForm = pageData;
+                        } else {
+                            this.modelForm = {list:[]}
+                        }
+                        
+                    } else {
+                        this.modelForm = {list:[]}
+                    }
+                }
+                
+                // this.$refs.modelForm.topAdvert = {};
+                // this.$refs.modelForm.navList = {}
+            })
+        }
+        
+    },
+    watch: {
+        modelForm: {
+            deep: true,
+            handler: function (val) {
+                console.log(val)
+            }
+        } 
+    }
+}
+</script>
+<style lang="scss" scoped>
+.renovation{
+    position: relative;
+    display: flex;
+}
+.model-list{
+    width: 120px;
+    height:auto;
+    padding: 10px;
+    background: #fff;
+    margin-top: 60px;
+    position: fixed;
+    z-index: 100;
+    box-shadow: 1px 1px 10px #999;
+    .classification-title{
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+    }
+    .model-item{
+        width: 100px;
+        height: 30px;
+        background: #eee;
+        margin-top: 10px;
+        line-height: 30px;
+        text-align: center;
+        color: #999;
+        &:hover{
+            border: 1px dashed #409EFF;
+            color: #409EFF;
+            cursor: move;
+        }
+    }
+    .ghost::after{
+        border:none;
+        height: 0;
+        content: '';
+    }
+}
+.show-content{
+    margin-left: 150px;
+    margin-top: 60px;
+}
+.ghost{
+    background: #fff;
+    height: 30px;
+    position: relative;
+    &::after{
+        content: '松开鼠标添加模块';
+        position: absolute;
+        background: #fff;
+        border: 1px dashed #409EFF;
+        color: #409EFF;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        text-align: center;
+        line-height: 50px;
+    }
+}
+.btn-bar{
+    position: fixed;
+    width: 100%;
+    background:#fff;
+    height: 50px;
+    padding: 10px;
+    box-shadow: 1px 1px 10px #999;
+    z-index: 99;
+    top: 100px;
+}
+
+</style>

manager/src/views/lili-floor-renovation/wap/advertising.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="model-view">
+    <div class="model-view-content">
+      <div class="content">
+        <div class="wap-title">首页</div>
+        <div class="draggable">
+          <!-- 全屏 -->
+          <div class="full-shadow" v-if="type == 'full'">
+            <img :src="advertising[0].img" alt="" />
+          </div>
+         
+        </div>
+      </div>
+    </div>
+    <div class="model-config">
+      <div class="decorate">
+        <div class="decorate-title">全屏广告</div>
+
+       
+
+        <div class="decorate-list">
+          <div
+            class="decorate-item"
+            v-for="(item, index) in advertising"
+            :key="index"
+          >
+            <div class="decorate-item-title">
+              <div>设置</div>
+            </div>
+            <div class="decorate-item-box">
+              <!-- 选择照片 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <img class="show-image" :src="item.img" alt />
+                  <input
+                    type="file"
+                    class="hidden-input"
+                    @change="changeFile(item, index)"
+                    ref="files"
+                    :id="'files' + index"
+                  />
+                  <div class="tips">
+                    建议尺寸
+                    <span>{{ item.size }}</span>
+                  </div>
+                </div>
+                <div class="selectBtn">
+                  <Button
+                    size="small"
+                    @click="handleClickFile(item, index)"
+                    ghost
+                    type="primary"
+                    >选择照片</Button
+                  >
+                </div>
+              </div>
+
+              <!-- 选择连接 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <Button
+                    ghost
+                    type="primary"
+                    size="small"
+                    @click="clickLink(item)"
+                    >选择链接</Button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
+        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { btnWay } from "./btn.js";
+export default {
+  data() {
+    return {
+      btnWay,
+      type: "full",
+
+      //全屏广告
+      advertising: [
+         {
+          img:
+            "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200903-182035-5e87.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp",
+          size: "750*1624",
+        },
+      ],
+
+      linkType: "",
+    };
+  },
+  methods: {},
+  mounted() {
+    console.log(this.btnWay);
+  },
+  methods: {
+  
+    // 点击链接
+    clickLink(item) {
+      this.$refs.liliDialog.open('link')
+    },
+
+    // 关闭
+    closeDecorate(index) {
+      this.$nextTick(() => {
+        this.btnWay.splice(index, 1);
+      });
+    },
+    //点击图片解析成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;
+        };
+      });
+    },
+    // 点击选择照片
+    handleClickFile(item, index) {
+      document.getElementById("files" + index).click();
+      // console.log(let files = files)
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+@import "./decorate.scss";
+.decorate-radio {
+  margin: 10px 0;
+}
+.window-shadow,
+.full-shadow {
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  left: 0;
+  align-items: center;
+  justify-content: center;
+}
+.window-shadow {
+  > img {
+    width: 306px;
+    height: 418px;
+  }
+}
+.full-shadow {
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.draggable {
+  position: relative;
+}
+
+.btn-item {
+  > img {
+    margin: 4px 0;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/alertAdvertising.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="model-view">
+    <div class="model-view-content">
+      <div class="content">
+        <div class="wap-title">首页</div>
+        <div class="draggable">
+          <!-- 弹窗广告 -->
+          <div class="window-shadow">
+            <img :src="advertising[0].img" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model-config">
+      <div class="decorate">
+        <div class="decorate-title">弹窗广告</div>
+
+        <div class="decorate-list">
+          <div
+            class="decorate-item"
+            v-for="(item, index) in advertising"
+            :key="index"
+          >
+            <div class="decorate-item-title">
+              <div>设置</div>
+            </div>
+            <div class="decorate-item-box">
+              <!-- 选择照片 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <img class="show-image" :src="item.img" alt />
+                  <input
+                    type="file"
+                    class="hidden-input"
+                    @change="changeFile(item, index)"
+                    ref="files"
+                    :id="'files' + index"
+                  />
+                  <div class="tips">
+                    建议尺寸
+                    <span>{{ item.size }}</span>
+                  </div>
+                </div>
+                <div class="selectBtn">
+                  <Button
+                    size="small"
+                    @click="handleClickFile(item, index)"
+                    ghost
+                    type="primary"
+                    >选择照片</Button
+                  >
+                </div>
+              </div>
+
+              <!-- 选择连接 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <Button
+                    ghost
+                    type="primary"
+                    size="small"
+                    @click="clickLink(item)"
+                    >选择链接</Button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
+        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { btnWay } from "./btn.js";
+export default {
+  data() {
+    return {
+      btnWay,
+      type: "full",
+      //全屏广告
+      advertising: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/9136ecddcddf6607184fab689207e7e3.png",
+          size: "612*836",
+        },
+      ],
+      linkType: "",
+    };
+  },
+  methods: {},
+  mounted() {
+    console.log(this.btnWay);
+  },
+  methods: {
+    // 点击链接
+    clickLink(item) {
+      this.$refs.liliDialog.open('link')
+    },
+
+    // 关闭
+    closeDecorate(index) {
+      this.$nextTick(() => {
+        this.btnWay.splice(index, 1);
+      });
+    },
+    //点击图片解析成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;
+        };
+      });
+    },
+    // 点击选择照片
+    handleClickFile(item, index) {
+      document.getElementById("files" + index).click();
+      // console.log(let files = files)
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+@import "./decorate.scss";
+.decorate-radio {
+  margin: 10px 0;
+}
+.window-shadow,
+.full-shadow {
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  left: 0;
+  align-items: center;
+  justify-content: center;
+}
+.window-shadow {
+  > img {
+    width: 306px;
+    height: 418px;
+  }
+}
+.full-shadow {
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.draggable {
+  position: relative;
+}
+
+.btn-item {
+  > img {
+    margin: 4px 0;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/btn.js

@@ -0,0 +1,21 @@
+/**
+ * btnWay 设置悬浮按钮功能
+ */
+
+export const btnWay = [
+  {
+    img: "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/8153f1d85f462b277d024baf812814a6.png",
+    title: "",
+    size:"80*80"
+  },
+  {
+    img: "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/c72f2c4f452d72e4ad82f38c72911ce4.png",
+    title: "",
+    size:"80*80"
+  },
+  {
+    img: "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/875dd6d2b1980dbccbec0895f757cdff.png",
+    title: "",
+    size:"80*80"
+  },
+];

manager/src/views/lili-floor-renovation/wap/btn.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="model-view">
+    <div class="model-view-content">
+      <div class="content">
+        <div class="wap-title">首页</div>
+        <div class="draggable">
+          <div class="position">
+            <div class="btn-item">
+              <img
+                src="https://shopro-1253949872.file.myqcloud.com/uploads/20200704/f6b9c9d20d21df541ac52e9548486e1a.png"
+                alt=""
+              />
+            </div>
+            <div class="btn-item" v-for="(item, index) in btnWay" :key="index">
+              <img :src="item.img" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model-config">
+      <div class="decorate">
+        <div class="decorate-title">悬浮按钮</div>
+
+        <div class="decorate-list">
+          <div
+            class="decorate-item"
+            v-for="(item, index) in btnWay"
+            :key="index"
+          >
+            <div class="decorate-item-title">
+              <div>图标{{ index + 1 }}</div>
+              <Icon
+                @click="closeDecorate(index)"
+                size="20"
+                color="#e1251b"
+                type="md-close-circle"
+              />
+            </div>
+            <div class="decorate-item-box">
+              <!-- 选择照片 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图标</div>
+                <div>
+                  <img class="show-image" :src="item.img" alt />
+                  <input
+                    type="file"
+                    class="hidden-input"
+                    @change="changeFile(item, index)"
+                    ref="files"
+                    :id="'files' + index"
+                  />
+                  <div class="tips">
+                    建议尺寸
+                    <span>{{ item.size }}</span>
+                  </div>
+                </div>
+                <div class="selectBtn">
+                  <Button
+                    size="small"
+                    @click="handleClickFile(item, index)"
+                    ghost
+                    type="primary"
+                    >选择照片</Button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Button type="primary" @click="addDecorate()" ghost>添加</Button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { btnWay } from "./btn.js";
+export default {
+  data() {
+    return {
+      btnWay,
+    };
+  },
+  methods: {},
+  mounted() {
+    console.log(this.btnWay);
+  },
+  methods: {
+    //添加设置
+    addDecorate() {
+      let way = {
+        img: "https://picsum.photos/id/264/200/200",
+        title: "标题",
+        size: this.btnWay[0].size,
+      };
+      this.btnWay.push(way);
+    },
+
+    // 关闭
+    closeDecorate(index) {
+      this.$nextTick(() => {
+        this.btnWay.splice(index, 1);
+      });
+    },
+    //点击图片解析成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;
+        };
+      });
+    },
+    // 点击选择照片
+    handleClickFile(item, index) {
+      document.getElementById("files" + index).click();
+      // console.log(let files = files)
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+@import "./decorate.scss";
+.draggable {
+  position: relative;
+}
+.position {
+  position: absolute;
+  right: 30px;
+  bottom: 50px;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.btn-item {
+  > img {
+    margin: 4px 0;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/config.js

@@ -0,0 +1,636 @@
+
+import * as API_Other from '@/api/other'
+
+// 获取楼层装修信息
+export function initData(id){
+  API_Other.getHomeData(id).then(res=>{
+
+    homeData = res
+
+  })
+}
+
+
+export let homeData ={}
+
+
+/**
+ * drawer:true   广告右侧打开抽屉中显示
+ * ad_drawer:true 活动魔方右侧显示
+ * notAdd: true 没有添加按钮
+ * notLink: true 没有连接功能
+ * notImg: true 没有选择图片功能
+ * close:true 右侧关闭按钮
+ */
+export const modelData = [
+  {
+    type: "carousel",
+    name: "图片轮播",
+    img: "md-image",
+    notTitle: false,
+    close: true,
+    options: {
+      list: [
+
+        {
+          img: "https://i.loli.net/2020/12/05/fKH4CwImpbuD5Xj.png",
+          url: "",
+          link: "",
+          size: "750*350"
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/12kleCgrSLfKoQs.png",
+          url: "",
+          link: "",
+          size: "750*350"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/343e226d0d2e2d2efcf21f31a678ba46.png",
+          url: "",
+          link: "",
+          size: "750*350"
+        },
+      ]
+    }
+  },
+  {
+    type: "leftOneRightTwo",
+    name: "左一右二",
+    notAdd: true,
+    drawer: true,
+    view: "tpl_ad_list",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "335*335"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/cddb5d90a4241f6235d16368534bc730.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/e047d312fb5930de972ae288b9b3bae7.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        }
+      ]
+    }
+  },
+  {
+    type: "title",
+    name: "标题栏",
+    img: "md-image",
+    notAdd: true,
+    notLink: true,
+    notImg: true,
+    options: {
+      list: [
+        {
+          title: "标题",
+          color: "#000000"
+        }
+      ]
+    }
+  },
+  {
+    type: "leftTwoRightOne",
+    name: "左二右一",
+    notAdd: true,
+    drawer: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/cddb5d90a4241f6235d16368534bc730.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/e047d312fb5930de972ae288b9b3bae7.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "335*335"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexThree",
+    name: "三列单行",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"226*226 (1:1)"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"226*226 (1:1)"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"226*226 (1:1)"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexOne",
+    name: "一张大图",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
+          url: "",
+          link: "",
+          size:"750*280"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexTwo",
+    name: "两张横图",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "335*220"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "335*220"
+        }
+      ]
+    }
+  },
+  {
+    type: "topOneBottomTwo",
+    name: "上一下二",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "710*170"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "335*170"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "335*170"
+        }
+      ]
+    }
+  },
+  {
+    type: "topTwoBottomOne",
+    name: "上二下一",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+
+          size: "335*170"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "335*170"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size: "710*170"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexFive",
+    name: "五列单行",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://picsum.photos/id/127/200/200",
+          url: "",
+          link: "",
+          size:"75*75（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"75*75（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"75*75（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"75*75（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"75*75（1:1）"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexFour",
+    name: "四列单行",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"88*88（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"88*88（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"88*88（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          size:"88*88（1:1）"
+        }
+      ]
+    }
+  },
+  {
+    type: "textPicture",
+    name: "文字图片",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          title: "88*88（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          title: "88*88（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          title: "88*88（1:1）"
+        },
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
+          url: "",
+          link: "",
+          title: "88*88（1:1）"
+        }
+      ]
+    }
+  },
+
+  {
+    type: "tpl_ad_list",
+    name: "广告魔方",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          bg_img: "",
+          name: "",
+          url: ""
+        }
+      ]
+    }
+  },
+  {
+    type: "menu",
+    name: "宫格导航",
+    img: "md-image",
+    close: true,
+    options: {
+      list: [
+        {
+          img:
+            "https://i.loli.net/2020/12/05/SoGAv7gYybuWzED.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img:
+            "https://i.loli.net/2020/12/05/JXR5K3sbIeENjqH.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img:
+            "https://i.loli.net/2020/12/05/KlZfnCFIdEV231Y.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img:
+            "https://i.loli.net/2020/12/05/GfmMyN2wrUVIlci.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img:
+            "https://i.loli.net/2020/12/05/eznDa3iNby5FkYL.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        }
+      ]
+    }
+  },
+  {
+    type: "search",
+    name: "搜索",
+    img: "md-image",
+    notAdd: true,
+    notLink: true,
+    notImg: true,
+    options: {
+      list: [
+        {
+          title: "搜索"
+        }
+      ]
+    }
+  },
+  {
+    type: "goods",
+    name: "商品分类",
+    img: "md-image",
+    notAdd: true,
+    notLink: true,
+    notImg: true,
+    options: {
+      list: [
+        {
+          titleWay: [
+            {
+              title: "精选",
+              desc: "电子推荐"
+            },
+            {
+              title: "实惠",
+              desc: "便宜好货"
+            },
+            {
+              title: "进口",
+              desc: "国际自营"
+            },
+            {
+              title: "推荐",
+              desc: "喂奶推荐"
+            }
+          ],
+          listWay: [
+            {
+              img:
+                "https://api.7wpp.com/uploads/20200930/78d480fa1025394b9be24ef5eef17489.png",
+              price: "120",
+              title:
+                " 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
+              type: "精选"
+            },
+            {
+              img:
+                "https://i.loli.net/2020/12/05/c9mptI5Pg8qJ6ny.png",
+              title:
+                "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
+              price: "190",
+              type: "精选"
+            },
+            {
+              img:
+                "https://i.loli.net/2020/12/05/QsSYIPF743Hgf8q.png",
+              title:
+                "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
+              price: "10",
+              type: "精选"
+            },
+            {
+              img:
+                "https://i.loli.net/2020/12/05/VTwDYcLWnukGxat.png",
+              title:
+                "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
+              price: "190",
+              type: "精选"
+            },
+            {
+              img:
+                "https://i.loli.net/2020/12/05/SIFwaVpE4YJAuQf.png",
+              title:
+                "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
+              price: "10",
+              type: "精选"
+            },
+            {
+              img:
+                "https://api.7wpp.com/uploads/20201110/86d4dedc0d88ce4b1329b02a4b87fe7d.jpg",
+              title:
+                "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
+              price: "190",
+              type: "精选"
+            },
+            {
+              img:
+                "https://api.7wpp.com/uploads/20200930/0d9102613d7b7e738c83504f80194cd4.jpg",
+              title:
+                "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
+              price: "10",
+              type: "精选"
+            },
+          ]
+        }
+      ]
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    type: "joinGroup",
+    name: "拼团活动",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          title: "测试拼团"
+        }
+      ]
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    type: "integral",
+    name: "积分活动",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          title: "测试积分"
+        }
+      ]
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    type: "spike",
+    name: "秒杀活动",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          title: "测试秒杀"
+        }
+      ]
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    type: "group",
+    name: "团购活动",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          title: "测试团购"
+        }
+      ]
+    }
+  }
+];

manager/src/views/lili-floor-renovation/wap/decorate.scss

@@ -0,0 +1,117 @@
+
+/deep/ .ivu-modal-mask,.ivu-modal-wrap{
+  z-index: 800;
+}
+.decorate-view-link{
+    font-size: 12px;
+    margin: 0 4px;
+    color: #999;
+}
+.decorate-view-style {
+    border: 1px solid #ededed;
+    background: #f7f7fa;
+    text-align: center;
+    width: 100%;
+    padding: 30px 0 0 0;
+    margin-bottom: 20px;
+    cursor: pointer;
+    > .select-style {
+      background: #ededed;
+      padding: 15px 0;
+      font-size: 15px;
+    }
+  }
+  .decorate-border {
+    border: 1px solid #ededed;
+    margin: 10px 0;
+    padding: 0 10px;
+  }
+  .drawer {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    > .drawer-item {
+      cursor: pointer;
+      border: 1px solid #ededed;
+      background: #f9f0ff;
+      width: 170px;
+      margin-right: 14px;
+      color: #9254de;
+      margin-bottom: 14px;
+      border-radius: 0.8em;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+  .hidden-input {
+    display: none;
+  }
+  .decorate {
+    padding: 0 20px;
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+    padding-bottom: 120px;
+  }
+  .decorate-title {
+    height: 50px;
+    line-height: 50px;
+    font-weight: bold;
+  }
+  .decorate-list {
+    overflow: hidden;
+  }
+  .decorate-view {
+    display: flex;
+    margin: 20px 0;
+    align-items: center;
+  }
+  .decorate-item-box {
+    background: #fff;
+    padding: 10px;
+    border: 1px solid #ededed;
+  }
+  .decorate-item-title {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 40px;
+    padding: 0 10px;
+  }
+  .decorate-view-title {
+    margin-right: 10px;
+  }
+  .decorate-item {
+    background: #ededed;
+    border-top-left-radius: 0.4em;
+    margin-bottom: 20px;
+    border-top-right-radius: 0.4em;
+  }
+  .show-image {
+    max-width: 50px;
+  }
+  .tips {
+    font-size: 12px;
+    color: #999;
+    > span {
+      color: $theme_color;
+    }
+  }
+  .selectBtn {
+    margin-left: 10px;
+  }
+  .bing-goods-list {
+    display: flex;
+    > .bing-goods-item {
+      width: 50px;
+      height: 50px;
+      > img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+  }

manager/src/views/lili-floor-renovation/wap/decorate.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="decorate">
+    <div class="decorate-title">
+      {{ res.name }}
+      <Button style="margin-left: 20px" size="small" ghost v-if="
+          res.type == 'tpl_ad_list' ||
+          res.type == 'tpl_activity_list' ||
+          res.drawer
+        " type="primary" @click="selectStyle()">选择风格</Button>
+    </div>
+
+    <!-- 右侧显示抽屉 -->
+    <Drawer title="选择风格" :closable="false" width="400" 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>
+      </div>
+    </Drawer>
+
+    <!-- 卡片集合 -->
+    <div class="decorate-list" v-if="
+        (res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') ||
+        res.drawer
+      ">
+      <div class="decorate-item" v-for="(item, index) in res.options.list" :key="index">
+        <div class="decorate-item-title">
+          <div>卡片</div>
+          <Icon @click="closeDecorate(index)" v-if="res.close" size="20" color="#e1251b" type="md-close-circle" />
+        </div>
+
+        <div class="decorate-item-box">
+          <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" />
+              </div>
+            </div>
+            <div class="decorate-view">
+              <div class="decorate-view-title">描述</div>
+              <div>
+                <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.title == bindGoods.type" v-for="(bindGoods,bindGoodsIndex) in res.options.list[0].listWay" :key="bindGoodsIndex">
+                  {{bindGoods.title}},
+                </div>
+
+              </div>
+              <div>
+                <Button @click="bindGoodsId(title_item)" size="small" ghost type="primary">选择商品</Button>
+              </div>
+            </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">
+                建议尺寸
+                <span>{{ item.size }}</span>
+              </div>
+            </div>
+            <div class="selectBtn">
+              <Button size="small" @click="handleClickFile(item, index)" ghost type="primary">选择照片</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>
+          </div>
+          <!-- 填写链接 -->
+
+          <div class="decorate-view" v-if="!res.notLink">
+            <div class="decorate-view-title">选择链接</div>
+            <div v-if="item.url.length != 0" class="decorate-view-link">
+              已选链接：
+
+              <span>
+                {{ ways.find((e)=>{return item.url.___type == e.name}).title }}
+                -
+                <!-- 当选择完链接之后的商品名称 -->
+                <span v-if="item.url.___type == 'goods'"> {{item.url.goodsName}}</span>
+                <!-- 当选择完链接之后的分类回调 -->
+                <span v-if="item.url.___type == 'category'"> {{item.url.name}}</span>
+                <!-- 当选择完链接之后的店铺回调 -->
+                <span v-if="item.url.___type == 'shops'"> {{item.url.memberName}}</span>
+                <!-- 当选择完链接之后的其他回调 -->
+                <span v-if="item.url.___type == 'other'"> {{item.url.title}}</span>
+                <!-- 当选择完活动之后的其他回调 -->
+                <span v-if="item.url.___type == 'marketing'">
+                  <span v-if="item.url.___promotion =='SECKILL'">
+                    秒杀
+                  </span>
+                  <span v-if="item.url.___promotion =='FULL_DISCOUNT'">
+                    满减
+                  </span>
+                  <span v-if="item.url.___promotion =='PINTUAN'">
+                    拼团
+                  </span>
+                  {{item.url.title || item.url.goodsName}}
+                </span>
+                <!-- 当选择完活动之后的其他回调 -->
+                <span v-if="item.url.___type == 'pages'"> {{item.url.title}}</span>
+
+              </span>
+
+            </div>
+            <div>
+              <Button ghost size="small" type="primary" @click="clickLink(item,index)">选择链接</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <Button v-if="
+        res.type != 'tpl_ad_list' &&
+        res.type != 'tpl_activity_list' &&
+        !res.notAdd
+      " type="primary" @click="addDecorate()" ghost>添加</Button>
+
+    <liliDialog ref="liliDialog" @selectedLink="selectedLink" @selectedGoodsData="selectedGoodsData"></liliDialog>
+
+    <Modal width="1200px" v-model="picModelFlag">
+      <ossManage @callback="callbackSelected" ref="ossManage" />
+    </Modal>
+  </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import { modelData } from "./config";
+import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型
+export default {
+  components: {
+    ossManage
+  },
+  data() {
+    return {
+      ways,
+      picModelFlag: false, //图片选择器
+      linkType: "goods", // dialog弹窗口类型
+      styleFlag: false, //广告魔方开关
+      selectedLinkIndex: "", //选择链接的索引
+      modelData,
+      selectedGoods: "",
+      selectedLinks: "",
+      modelList: "",
+    };
+  },
+  watch: {
+    res: {
+      handler: (val) => {},
+      deep: true,
+    },
+  },
+  props: ["res"],
+  mounted() {},
+  methods: {
+    // 选择风格
+    selectStyle() {
+      this.styleFlag = !this.styleFlag;
+    },
+
+    // 回调选择的链接
+    selectedLink(val) {
+      this.selectedLinks.url = val;
+
+      console.log(this.selectedLinks);
+    },
+
+    // 回调的商品信息
+    selectedGoodsData(val) {
+      if (!val) return false;
+      val.forEach((item) => {
+        delete item.selected;
+        item.img = item.thumbnail;
+        item.title = item.goodsName;
+        item.type = this.selectedGoods.title;
+      });
+      this.res.options.list[0].listWay = this.res.options.list[0].listWay.concat(
+        val
+      );
+
+      this.linkType = "";
+    },
+
+    // 绑定商品
+    bindGoodsId(val) {
+      this.selectedGoods = val;
+      this.liliDialogFlag(true);
+    },
+    // 点击抽屉
+    clickDrawer(item, index) {
+      this.$emit("handleDrawer", item);
+      this.styleFlag = false;
+    },
+
+    liliDialogFlag(flag) {
+      this.$refs.liliDialog.goodsFlag = flag;
+      this.$refs.liliDialog.flag = true;
+    },
+
+    // 点击链接赋值一个唯一值，并将当前选择的模块赋值
+    clickLink(val, index) {
+      // this.selectedLinkIndex = index
+      // val.___only = new Date().getTime(), //赋值当前时间戳 唯一
+      this.selectedLinks = val;
+
+      console.log(this.selectedLinks);
+      this.liliDialogFlag(false);
+    },
+
+    //点击图片解析成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;
+        };
+      });
+    },
+    //添加设置
+    addDecorate() {
+      let way = {
+        img: "https://picsum.photos/id/264/200/200",
+        title: "标题",
+        link: "",
+        url: "",
+        size: this.res.options.list[0].size,
+      };
+      this.res.options.list.push(way);
+    },
+
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selectedGoods.img = val.url;
+    },
+
+    // 点击选择照片
+    handleClickFile(item, index) {
+      this.$refs.ossManage.selectImage = true;
+      this.selectedGoods = item;
+      this.picModelFlag = true;
+
+      // console.log(let files = files)
+    },
+
+    // 关闭
+    closeDecorate(index) {
+      this.$nextTick(() => {
+        this.res.options.list.splice(index, 1);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./decorate.scss";
+</style>

manager/src/views/lili-floor-renovation/wap/index.js

@@ -0,0 +1,17 @@
+import index from './index.vue' //首页
+import btn from './btn.vue' //按钮
+import advertising from './advertising.vue' //全屏活动
+import alertAdvertising from './alertAdvertising.vue' //弹窗活动
+
+
+
+const templates = {
+	index,
+	btn,
+	advertising,
+	alertAdvertising
+}
+
+
+
+export default  templates

manager/src/views/lili-floor-renovation/wap/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="wrapper">
+    <!-- 拖拽栏 ，展示栏  -->
+    <div class="model-view">
+      <div class="model-view-menu">
+        <draggable
+          class="model-view-menu-item"
+          :list="modelData"
+          :move="handleMove"
+          v-bind="{
+            group: { name: 'model', pull: 'clone', put: false, animation: 150 },
+            sort: false,
+            ghostClass: 'ghost',
+          }"
+        >
+          <li
+            v-for="(model, index) in modelData"
+            v-if="!model.drawer"
+            :key="index"
+            class="model-item"
+          >
+            <img src alt />
+            <span>{{ model.name }}</span>
+          </li>
+        </draggable>
+      </div>
+
+      <div class="model-view-content">
+        <div class="content">
+          <div class="wap-title">首页</div>
+          <draggable
+            class="draggable"
+            group="model"
+            ghostClass="ghost"
+            @add="handleContentlAdd"
+            @end="handleContentlEnd"
+            v-model="contentData.list"
+          >
+            <div
+              class="list"
+              v-for="(element, index) in contentData.list"
+              :key="element.key"
+            >
+              <component
+                class="component"
+                :class="{ active: selected == index }"
+                @click.native="handleComponent(element, index)"
+                :is="templates[element.type]"
+                :res="element.options"
+              ></component>
+              <Icon
+                v-if="selected == index"
+                @click="closeComponent(index)"
+                color="#e1251b"
+                size="25"
+                class="close"
+                type="ios-close-circle"
+              />
+            </div>
+          </draggable>
+        </div>
+      </div>
+
+      <!-- 右侧栏 -->
+      <div class="model-config">
+        <decorate
+          @handleDrawer="handleDrawer"
+          v-if="decorateData"
+          :res="decorateData"
+        ></decorate>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import templates from "./template/index";
+import Draggable from "vuedraggable";
+import { modelData } from "./config";
+import decorate from "./decorate";
+import * as API_Other from '@/api/other'
+export default {
+  components: {
+    Draggable,
+    decorate,
+  },
+  data() {
+    return {
+      templates,
+      modelData,
+      qrcode: "",
+      selected: 0,
+      contentData: {
+        list: [],
+      },
+      decorateData: "",
+    };
+  },
+  watch: {
+    contentData: {
+      handler(val) {
+        this.$store.state.styleStore = val;
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      if (!this.$route.query.id) return false;
+      API_Other.getHomeData(this.$route.query.id).then(res=>{
+        this.contentData = JSON.parse(res.result.pageData)
+
+
+         this.handleComponent( this.contentData.list[0], 0)
+      })
+    },
+    handleSpinShow() {
+      this.$Spin.show();
+      setTimeout(() => {
+        this.$Spin.hide();
+      }, 3000);
+    },
+
+    // 中间组件拖动，右侧数据绑定不变
+    handleContentlEnd(evt) {
+      const { newIndex } = evt;
+      this.handleComponent(this.contentData.list[newIndex], newIndex);
+    },
+
+    // 关闭楼层装修
+    closeComponent(index) {
+      this.$nextTick(() => {
+        this.decorateData = "";
+
+        console.log(this.contentData.list.length);
+        // 如果当前楼层不为一
+        if (this.contentData.list.length > 1) {
+          // 如果当前最底层 给下一层赋值
+
+          if (index - 1 == -1) {
+            this.handleComponent(this.contentData.list[index], index);
+          } else {
+            // 如果不是最底层给上一层赋值
+            this.handleComponent(this.contentData.list[index - 1], index - 1);
+          }
+          this.contentData.list.splice(index, 1);
+        } else {
+          this.contentData.list.splice(index, 1);
+        }
+      });
+    },
+
+    // 点击楼层装修
+    handleComponent(val, index) {
+      console.warn(val)
+      this.selected = index;
+      this.$set(this, "decorateData", val);
+    },
+
+    handleDrawer(val) {
+      let newIndex = this.selected;
+
+      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]);
+    },
+
+    // 封装拖拽参数
+    package(val, newIndex) {
+      this.contentData.list[newIndex] = "";
+      val = JSON.parse(JSON.stringify(val));
+      this.$set(this.contentData.list, newIndex, {
+        ...val,
+        options: {
+          ...val.options,
+        },
+
+        // 绑定键值
+        model: val.type,
+      });
+    },
+    // 拖动
+    handleContentlAdd(evt) {
+      const { newIndex } = evt;
+
+      this.package(this.contentData.list[newIndex], newIndex);
+      this.handleComponent(this.contentData.list[newIndex], newIndex);
+    },
+    handleMove() {
+      return true;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+</style>

manager/src/views/lili-floor-renovation/wap/main.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="box">
+    <!-- 顶部栏 -->
+    <navbar @selected="selected" />
+
+    <component :is="layout[name]"></component>
+  </div>
+</template>
+<script>
+import layout from "./index";
+import navbar from "./navbar";
+export default {
+  components: {
+    navbar,
+  },
+  data() {
+    return {
+      layout,
+      name: "index",
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    selected(val) {
+      this.name = val;
+    },
+
+
+  },
+};
+</script>
+<style scoped lang="scss">
+.box {
+  height: calc(100vh - 120px);
+  width: 98%;
+  margin: 0 auto;
+  padding: 0 20px;
+  background: #fff;
+  border-radius: 0.4em;
+  overflow: hidden;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/navbar.vue

@@ -0,0 +1,231 @@
+<template>
+  <!-- 预览保存 -->
+  <div class="model-title">
+    <div>店铺装修</div>
+    <div class="btns">
+      <Button
+        @click="clickBtn(item)"
+        size="small"
+        v-for="(item, index) in way"
+        :key="index"
+        :type="item.selected ? 'primary' : ''"
+      >
+        {{ item.title }}
+      </Button>
+    </div>
+    <div class="model-title-view-btn">
+      <Poptip placement="bottom" width="100">
+        <Button size="default" @click="creatQrCode">预览模板</Button>
+        <div slot="content" class="default-view-content">
+          <div>临时预览</div>
+          <div ref="qrCodeUrl"></div>
+        </div>
+      </Poptip>
+      <Button size="default" type="primary" @click="handleSpinShow"
+        >保存模板</Button
+      >
+
+      <Modal
+        title="保存中"
+        v-model="saveDialog"
+        :closable="true"
+        :mask-closable="false"
+        :footer-hide="true"
+      >
+        <div v-if="progress">
+          <div class="model-item">
+            模板名称 <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>
+          </div>
+
+          <Button type="primary" @click="save()">保存</Button>
+        </div>
+        <Progress v-else :percent="num" status="active" />
+      </Modal>
+    </div>
+  </div>
+</template>
+<script>
+import * as API_Other from "@/api/other.js";
+
+import QRCode from "qrcodejs2";
+export default {
+  data() {
+    return {
+      progress: true,
+      num: 20,
+      saveDialog: false,
+      way: [
+        {
+          title: "首页",
+          name: "index",
+          selected: true,
+        },
+        {
+          title: "悬浮按钮",
+          name: "btn",
+          selected: false,
+        },
+        {
+          title: "全屏广告",
+          name: "advertising",
+          selected: false,
+        },
+        {
+          title: "弹窗广告",
+          name: "alertAdvertising",
+          selected: false,
+        },
+      ],
+      qrcode: "",
+      submitWay: {
+        pageShow: this.$route.query.type || false,
+        name: this.$route.query.name || "模板名称",
+        pageClientType: "H5",
+      },
+    };
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    clickBtn(val) {
+      this.way.forEach((item, index) => {
+        item.selected = false;
+      });
+      val.selected = true;
+      this.$emit("selected", val.name);
+    },
+
+    /**
+     * 加载，并保存模板
+     */
+    handleSpinShow() {
+      this.saveDialog = true;
+    },
+
+    // 填写是否发布，模板名称之后保存
+    save() {
+      if (this.$store.state.styleStore == void 0) {
+        this.$Message.error("请装修楼层");
+        return false;
+      }
+
+      this.submitWay.pageShow
+        ? (this.submitWay.pageShow = "OPEN")
+        : (this.submitWay.pageShow = "CLOSE");
+
+      this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
+      this.submitWay.pageType = "INDEX";
+
+      this.$route.query.id ? this.update() : this.submit(this.submitWay);
+    },
+
+    // 更新
+    update() {
+         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,
+      })
+        .then((res) => {
+          this.num = 50;
+          if (res.code == 200) {
+            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) => {});
+    },
+
+    // 返回查询数据页面
+    goback() {
+      this.$router.push({
+        path: "/wapList",
+      });
+    },
+
+    // 保存
+    submit(submitWay) {
+      this.progress = false;
+      API_Other.setHomeSetup(submitWay)
+        .then((res) => {
+          this.num = 50;
+          if (res.code == 200) {
+            this.num = 80;
+            /**制作保存成功动画¸ */
+            setTimeout(() => {
+              this.saveDialog = false;
+              this.$Message.success("保存成功");
+              this.goback();
+            }, 1000);
+          } else {
+             this.progress = true;
+            this.saveDialog = false;
+            this.$Message.error("保存失败，请稍后重试");
+          }
+          console.log(res);
+        })
+        .catch((error) => {});
+    },
+
+    creatQrCode() {
+      if (this.qrcode) {
+        return false;
+      }
+      // this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
+      //   text: "https://www.baidu.com", // 需要转换为二维码的内容
+      //   width: 100,
+      //   height: 100,
+      //   colorDark: "#000000",
+      //   colorLight: "#ffffff",
+      //   correctLevel: QRCode.CorrectLevel.H,
+      // });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.model-item {
+  width: 100%;
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  > * {
+    margin: 0 8px;
+  }
+}
+.model-title {
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #333;
+  font-size: 14px;
+  > .model-title-view-btn {
+    > * {
+      margin: 0 10px;
+    }
+  }
+}
+.btns {
+  * {
+    margin: 0 4px;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/style.scss

@@ -0,0 +1,101 @@
+
+.model-view {
+    display: flex;
+    .model-view-menu {
+        flex: 1.5;
+
+        > .model-view-menu-item {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+    }
+    .model-config{
+        flex: 2.5;
+    }
+    .model-view-content {
+        flex: 6;
+    }
+    .model-item {
+        line-height: 1.75;
+        font-size: 13px;
+        margin: 0 5px 10px 5px;
+        border: 1px solid #ededed;
+        background: #f6f6f9;
+        width: 70px;
+        height: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+}
+.model-view-content{
+
+    background: #f6f6f9;
+    border-radius: .8em;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+}
+.wap-title{
+    line-height: 44px;
+    text-align: center;
+    height: 44px;
+    border-bottom: 1px solid #ededed;
+}
+.content{
+    margin: 20px 0;
+    padding: 50px 13px;
+    width: 360px;
+    background: url('../../../assets/iPhoneX_model.png') no-repeat;
+    height: 780px;
+    background-size: 360px;
+    overflow: hidden;
+    >.component,.draggable{
+        height: 590px;
+        overflow-y: auto;
+        background: #ebebeb;
+    }
+    >.draggable{
+
+        padding-bottom: 100px;
+    }
+}
+.list{
+    position: relative;
+}
+.close{
+    position: absolute;
+    right: 5px;
+    top: 10px;
+    z-index: 99;
+}
+
+
+.model-btn{
+    >*{
+      margin: 0 4px;
+    }
+  }
+  .qrCode {
+    width: 100px;
+    height: 100px;
+  }
+  .default-view-content {
+    text-align: center;
+    font-weight: bold;
+    line-height: 2;
+    /deep/ img {
+      margin: 0 auto;
+    }
+  }
+  .model-config {
+    overflow-y: auto;
+  }
+
+  .active {
+    box-sizing: border-box;
+    border: 1px solid $theme_color;
+  }

manager/src/views/lili-floor-renovation/wap/template/advertising.scss

@@ -0,0 +1,57 @@
+.position-box{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+.join-box {
+    display: flex;
+  }
+  .item-price {
+    > span {
+      font-size: 15px;
+      font-weight: 500;
+      color: #e1212b;
+    }
+  }
+  .join-item {
+    flex: 1;
+  }
+  .item-img {
+    width: 75px;
+    height: 75px;
+    margin: 0 auto;
+    display: block;
+  }
+  .item-img-box {
+    position: relative;
+  }
+  .item-line-through {
+    > span {
+      font-size: 10px;
+      font-weight: 400;
+      text-decoration: line-through;
+      color: #999;
+    }
+  }
+  .item-position-tips {
+    position: absolute;
+    right: 0;
+    color: #fff;
+    font-size: 12px;
+    bottom: 0;
+  }
+  .join-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fff;
+    height: 50px;
+    > div:nth-of-type(1) {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    > div:nth-of-type(2) {
+      font-size: 12px;
+      color: #999;
+    }
+  }

manager/src/views/lili-floor-renovation/wap/template/index.js

@@ -0,0 +1,44 @@
+import tpl_banner from "./tpl_banner";
+import tpl_title from "./tpl_title";
+import tpl_left_one_right_two from "./tpl_left_one_right_two";
+import tpl_left_two_right_one from "./tpl_left_two_right_one";
+import tpl_top_one_bottom_two from "./tpl_top_one_bottom_two";
+import tpl_top_two_bottom_one from "./tpl_top_two_bottom_one";
+import tpl_flex_one from "./tpl_flex_one";
+import tpl_flex_two from "./tpl_flex_two";
+import tpl_flex_three from "./tpl_flex_three";
+import tpl_flex_five from "./tpl_flex_five";
+import tpl_flex_four from "./tpl_flex_four";
+import tpl_text_picture from "./tpl_text_picture";
+import tpl_menu from "./tpl_menu";
+import tpl_search from "./tpl_search";
+import tpl_join_group from "./tpl_join_group";
+import tpl_integral from "./tpl_integral";
+import tpl_spike from "./tpl_spike";
+import tpl_group from "./tpl_group";
+import tpl_ad_list from "./tpl_view_list";
+import tpl_activity_list from './tpl_view_list'
+import tpl_goods from "./tpl_goods";
+export default {
+  carousel: tpl_banner,
+  title: tpl_title,
+  leftOneRightTwo: tpl_left_one_right_two,
+  leftTwoRightOne: tpl_left_two_right_one,
+  topOneBottomTwo:tpl_top_one_bottom_two,
+  topTwoBottomOne:tpl_top_two_bottom_one,
+  flexThree: tpl_flex_three,
+  flexFive: tpl_flex_five,
+  flexFour: tpl_flex_four,
+  flexTwo: tpl_flex_two,
+  textPicture: tpl_text_picture,
+  menu: tpl_menu,
+  search: tpl_search,
+  joinGroup: tpl_join_group,
+  flexOne: tpl_flex_one,
+  goods: tpl_goods,
+  integral:tpl_integral,
+  spike:tpl_spike,
+  group:tpl_group,
+  tpl_ad_list,
+  tpl_activity_list
+};

manager/src/views/lili-floor-renovation/wap/template/tpl.scss

@@ -0,0 +1,31 @@
+.image-mode {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    padding: 1px;
+}
+.layout {
+    padding: 8px;
+    margin: 4px 0;
+    background: #fff;
+}
+.layout,
+.view-height-75,
+.view-height-150 {
+    overflow: hidden;
+}
+.view-width-100{
+    width: 100%;
+}
+.view-height-75 {
+    height: 75px;
+}
+.view-height-150 {
+    height: 150px;
+    flex: 1;
+}
+
+.view-height-85 {
+    height: 85px;
+    flex: 1;
+}

manager/src/views/lili-floor-renovation/wap/template/tpl_banner.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="layout">
+    <Carousel class="carousel" v-if="res"  autoplay autoplay-speed="5000">
+      <CarouselItem v-for="(item, index) in res.list" :key="index">
+        <div>
+          <img class="image-mode" :src="item.img" />
+        </div>
+      </CarouselItem>
+    </Carousel>
+  </div>
+</template>
+<script>
+export default {
+  title: "导航栏",
+  props: ["res"],
+  watch: {
+    res: {
+      handler(newValue, oldValue) {
+          this.$set(this,'res',newValue);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.carousel,
+.image-mode {
+  height: 150px;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_flex_five.vue

@@ -0,0 +1,33 @@
+
+<template>
+  <div class="layout">
+      <img class="image-mode" :src="res.list[0].img" alt="">
+      <img class="image-mode" :src="res.list[1].img" alt="">
+      <img class="image-mode" :src="res.list[2].img" alt="">
+      <img class="image-mode" :src="res.list[3].img" alt="">
+      <img class="image-mode" :src="res.list[4].img" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  title: "五列单行图片模块",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+ 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+img{
+  width: 67px;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_flex_four.vue

@@ -0,0 +1,32 @@
+
+<template>
+  <div class="layout">
+      <img class="image-mode" :src="res.list[0].img" alt="">
+      <img class="image-mode" :src="res.list[1].img" alt="">
+      <img class="image-mode" :src="res.list[2].img" alt="">
+      <img class="image-mode" :src="res.list[3].img" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  title: "四列单行图片模块",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  height: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+img{
+  width: 84px;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_flex_one.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="layout">
+        <div class="flex-one">
+            <img :src="res.list[0].img" alt="">
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: ['res']
+}
+</script>
+<style lang="scss" scoped>
+@import './tpl.scss';
+.flex-one{
+    width: 100%;
+    display: block;
+    height: 110px;
+    overflow: hidden;
+    >img{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_flex_three.vue

@@ -0,0 +1,31 @@
+
+<template>
+  <div class="layout">
+      <img class="image-mode" :src="res.list[0].img" alt="">
+      <img class="image-mode" :src="res.list[1].img" alt="">
+      <img class="image-mode" :src="res.list[2].img" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  title: "三列单行图片模块",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  height: 110px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+img{
+   width: 111px;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_flex_two.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="layout">
+    <div class="flex-two">
+      <div class="flex-item">
+        <img :src="res.list[0].img" alt />
+      </div>
+      <div class="flex-item">
+        <img :src="res.list[1].img" alt />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  title: "两张横图",
+  props: ["res"],
+  mounted () {
+
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.flex-two {
+  width: 100%;
+  display: flex;
+  height: 110px;
+  overflow: hidden;
+
+}
+.flex-item {
+    width: 50%;
+  > img {
+    display: block;
+     max-width: 100%;
+    height: 100%;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_goods.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="layout">
+    <div class="goods-cell-title">
+      <div
+        class="goods-item-title"
+        :class="{ selected: selected.index == index }"
+        @click="handleClickTitle(title, index)"
+        v-for="(title, index) in res.list[0].titleWay"
+        :key="index"
+      >
+        <h4>{{ title.title }}</h4>
+        <div>{{ title.desc }}</div>
+      </div>
+    </div>
+    <div class="goods-list">
+      <div
+        v-if="selected.val == item.type"
+        class="goods-item"
+        v-for="(item, item_index) in res.list[0].listWay"
+        :key="item_index"
+      >
+        <div class="goods-img">
+          <Icon
+            size="20"
+            color="#e1251b"
+            @click="closeGoods(item, item_index)"
+            class="goods-icon"
+            type="ios-close-circle"
+          />
+          <img :src="item.img" alt />
+        </div>
+        <div class="goods-desc">
+          <div class="goods-title">
+            {{ item.title }}
+          </div>
+          <div class="goods-bottom">
+            <div class="goods-price">￥{{ item.price | unitPrice }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      selected: {
+        index: 0,
+        val: "精选",
+      },
+    };
+  },
+  props: ["res"],
+  mounted() {},
+  methods: {
+    closeGoods(val, index) {
+      this.res.list[0].listWay.splice(index,1)
+    },
+    handleClickTitle(val, index) {
+      this.selected.index = index;
+      this.selected.val = val.title;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.layout {
+  padding: 8px 0;
+  background: #e8e8e8;
+}
+.selected {
+  > h4 {
+    color: #000 !important;
+  }
+  > div {
+    font-weight: bold;
+    color: #e4393c !important;
+  }
+}
+.goods-cell-title {
+  padding: 10px;
+  transition: 0.35s;
+  display: flex;
+  cursor: pointer;
+  > .goods-item-title {
+    flex: 1;
+    text-align: center;
+    > h4 {
+      font-size: 16px;
+      color: #666;
+    }
+    > div {
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}
+.goods-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.goods-item {
+  width: 50%;
+  margin-bottom: 10px;
+  border-radius: 0.4em;
+  overflow: hidden;
+}
+.goods-img {
+  position: relative;
+  margin: 0 auto;
+  width: 158px;
+  height: 150px;
+  border-top-left-radius: 0.4em;
+  border-top-right-radius: 0.4em;
+  overflow: hidden;
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.goods-desc {
+  border-bottom-left-radius: 0.4em;
+  border-bottom-right-radius: 0.4em;
+  width: 158px;
+  background: #fff;
+  padding: 4px;
+  margin: 0 auto;
+  > .goods-title {
+    font-size: 12px;
+    height: 38px;
+    display: -webkit-box;
+    font-weight: 500;
+    -webkit-box-orient: vertical;
+
+    -webkit-line-clamp: 2;
+
+    overflow: hidden;
+  }
+  > .goods-bottom {
+    display: flex;
+    > .goods-price {
+      line-height: 2;
+      color: #e4393c;
+    }
+  }
+}
+.goods-icon {
+  right: 5px;
+  top: 5px;
+  position: absolute;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_group.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+           
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+          </div>
+          <div class="item-price">
+            <span>￥120.00</span>
+          </div>
+          <div class="item-line-through">
+            <span>￥190.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+@import './advertising.scss';
+
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_integral.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+           
+          </div>
+          <div class="item-price">
+            <span>20积分</span>
+          </div>
+          <div class="item-line-through">
+            <span>30积分</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.join-box {
+  display: flex;
+}
+.item-price {
+  > span {
+    font-size: 15px;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.join-item {
+  flex: 1;
+}
+.item-img {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  > span {
+    font-size: 10px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.item-position-tips {
+  position: absolute;
+  right: 0;
+  color: #fff;
+  font-size: 12px;
+  bottom: 0;
+}
+.join-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  height: 50px;
+  > div:nth-of-type(1) {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  > div:nth-of-type(2) {
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_join_group.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+            <div class="item-position-tips">2人团</div>
+          </div>
+          <div class="item-price">
+            <span>￥120.00</span>
+          </div>
+          <div class="item-line-through">
+            <span>￥120.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.join-box {
+  display: flex;
+}
+.item-price {
+  > span {
+    font-size: 15px;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.join-item {
+  flex: 1;
+}
+.item-img {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  > span {
+    font-size: 10px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.item-position-tips {
+  position: absolute;
+  right: 0;
+  color: #fff;
+  font-size: 12px;
+  bottom: 0;
+}
+.join-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  height: 50px;
+  > div:nth-of-type(1) {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  > div:nth-of-type(2) {
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_left_one_right_two.vue

@@ -0,0 +1,37 @@
+
+<template>
+  <div class="layout">
+    <div class="view-height-150">
+      <img class="image-mode" :src="res.list[0].img" />
+    </div>
+    <div class="view-height-150">
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[2].img" alt />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "左一右二",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-size: cover;
+}
+
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_left_two_right_one.vue

@@ -0,0 +1,38 @@
+
+<template>
+  <div class="layout ">
+    <div class="view-height-150">
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[0].img" alt />
+      </div>
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+    </div>
+    <div class="view-height-150">
+      <img class="image-mode" :src="res.list[2].img" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "左二右一",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  height: 167px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-size: cover;
+}
+
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_menu.vue

@@ -0,0 +1,38 @@
+<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>
+    </div>
+</template>
+<script>
+export default {
+    props:['res']
+}
+</script>
+<style lang="scss" scoped>
+   @import "./tpl.scss";
+   .menu-list{
+       display: flex;
+       align-items: center;
+       flex-wrap: wrap;
+      
+       >.menu-item{
+           text-align: center;
+           width: 63px;
+           margin:10px 0;
+       }
+   }
+   .menu-img{
+       width: 44px;
+       height: 44px;
+   }
+   .menu-title{
+       font-size: 12px;
+   }
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_search.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="layout">
+        <div class="search">
+            <Icon type="ios-search" />{{res.list[0].title}}
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: ['res']
+}
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.search{
+    height: 32px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ededed;
+}
+.layout{
+    background: #fff;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_spike.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+           
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+          </div>
+          <div class="item-price">
+            <span>￥120.00</span>
+          </div>
+          <div class="item-line-through">
+            <span>￥190.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+@import './advertising.scss';
+
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_text_picture.vue

@@ -0,0 +1,94 @@
+
+<template>
+  <div class="layout">
+    <div class="view-list">
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[0].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[0].img" alt />
+        </div>
+      </div>
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[1].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[1].img" alt />
+        </div>
+      </div>
+    </div>
+    <div class="view-list">
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[2].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[2].img" alt />
+        </div>
+      </div>
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[3].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[3].img" alt />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "文字图片模板",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  background: #e8e8e8;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  padding: 0;
+}
+.-item-image{
+
+     padding: 10px ;
+     >img{
+
+         width: 100%;
+     }
+}
+.-item-tilte {
+  background: #ff9f28;
+  height: 30px;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  line-height: 30px;
+}
+
+.view-list {
+  width: 48%;
+  margin: 0 auto;
+  display: flex;
+  background: #fff;
+   border-top-left-radius: 0.8em;
+    border-top-right-radius: 0.8em;
+    border: 1px solid #ededed;
+
+  > .view-item {
+    width: 50%;
+  }
+  > .view-item:nth-of-type(1) {
+    > .-item-tilte {
+      border-top-left-radius: 0.8em;
+    }
+  }
+  > .view-item:nth-of-type(2) {
+    > .-item-tilte {
+      border-top-right-radius: 0.8em;
+    }
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_title.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="layout">
+    <div class="background">
+      <div class="title" :style="{ color: res.list[0].color }">
+        {{ res.list[0].title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "标题栏",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.background {
+  background: url("../../../../assets/title.png") no-repeat;
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+
+  height: 42px;
+  background-size: cover;
+}
+.layout {
+  text-align: center;
+  position: relative;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #ffffff;
+}
+.title {
+  line-height: 42px;
+  font-size: 15px;
+  font-weight: bold;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_top_one_bottom_two.vue

@@ -0,0 +1,50 @@
+
+<template>
+  <div class="layout">
+    <div class="view-width-100">
+      <img class="image-mode" :src="res.list[0].img" />
+    </div>
+    <div class="view-width-100">
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[2].img" alt />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "上一下二",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  height: 170px;
+  flex-direction: column;
+}
+img {
+  width: 100% !important;
+  height: 85px !important;
+}
+.view-width-100 {
+  padding: 1px 0;
+  display: flex;
+  height: 85px;
+}
+.view-height-85 {
+  padding: 0 1px;
+  width: 50%;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_top_two_bottom_one.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="layout">
+    <div class="view-width-100">
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[0].img" alt />
+      </div>
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+    </div>
+    <div class="view-width-100">
+      <img class="image-mode" :src="res.list[2].img" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "上二下一",
+  props: ["res"],
+  mounted() {
+    console.log(this.res);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  height: 170px;
+  flex-direction: column;
+}
+img {
+  width: 100% !important;
+  height: 85px !important;
+}
+.view-width-100 {
+  padding: 1px 0;
+  display: flex;
+  height: 85px;
+  width: 100%;
+}
+.view-height-85 {
+  padding: 0 1px;
+  width: 50%;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_view_list.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="layout">请选择风格</div>
+</template>
+<script>
+export default {
+    destroyed(){
+       
+    }
+}
+</script>
+<style scoped lang="scss">
+@import './tpl.scss';
+.layout{
+    height: 100px;
+}
+</style>

manager/src/views/lili-floor-renovation/wap/wapList.vue

@@ -0,0 +1,223 @@
+<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>
+    </Card>
+    <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>
+            <Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
+            <Poptip confirm title="删除此模板？" @on-ok="handleDel(item)" @on-cancel="cancel">
+              <Button type="error" size="small">删除</Button>
+            </Poptip>
+          </div>
+        </div>
+        <div class="no-more" v-if="list.length ==0">暂无更多模板</div>
+      </div>
+      <Page :total="total" size="small" @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" />
+
+    </Card>
+
+  </div>
+
+</template>
+<script>
+import * as API_Other from "@/api/other.js";
+// import region from '@/views/lili-components/multiple-region'
+// import marketing from '@/views/lili-dialog/template/marketing'
+// import Region from '@/views/lili-components/multiple-region'
+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: "专题",
+        },
+      ],
+      params: {
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "",
+        order: "asc",
+        pageType: "INDEX",
+        pageClientType: "H5",
+      },
+      total: "",
+      list: [],
+    };
+  },
+  watch: {
+    params: {
+      handler(val) {
+        // this.pageNumber++;
+        this.init();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    clickType(val,index) {
+      this.params.pageNumber = 1
+      this.selectedIndex = index
+      this.params.pageType = val;
+    },
+    changeSwitch(item) {
+      this.loading = true;
+      API_Other.releasePageHome(item.id).then((res) => {
+        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;
+        res.result.records.forEach((item) => {
+          if (item.pageShow == "OPEN") {
+            item.pageShow = true;
+          } else {
+            item.pageShow = false;
+          }
+        });
+        this.list = res.result.records;
+        console.log(this.list);
+        this.total = res.result.total;
+      });
+    },
+
+    handleEdit(val) {
+      this.$router.push({
+        path: "/floorList/main",
+        query: { id: val.id, name: val.name, type: val.pageShow },
+      });
+    },
+
+    handleAdd() {
+      this.$router.push({
+        path: "/floorList/main",
+      });
+    },
+
+    handleDel(val) {
+      this.loading = true;
+      API_Other.removePageHome(val.id).then((res) => {
+        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: #f5f7fa;
+  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(3n) {
+  background: #f5f7fa;
+}
+</style>

manager/src/views/login.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="login">
+    <Row @keydown.enter.native="submitLogin" class="flex">
+      <Col style="width: 368px">
+      <Header />
+      <Row style="flex-direction: column;">
+
+        <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
+          <FormItem prop="username">
+            <Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="请输入用户名" autocomplete="off" />
+          </FormItem>
+          <FormItem prop="password">
+            <Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码" autocomplete="off" />
+          </FormItem>
+        </Form>
+
+        <Row>
+          <Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
+            <span v-if="!loading">{{ $t("login") }}</span>
+            <span v-else>{{ $t("logining") }}</span>
+          </Button>
+        </Row>
+
+      </Row>
+      <div v-if="socialLogining">
+        <RectLoading />
+      </div>
+      <Footer />
+      </Col>
+      <LangSwitch />
+    </Row>
+  </div>
+</template>
+
+<script>
+import { login, userInfo } from "@/api/index";
+import Cookies from "js-cookie";
+import Header from "@/views/main-components/header";
+import Footer from "@/views/main-components/footer";
+import LangSwitch from "@/views/main-components/lang-switch";
+import RectLoading from "@/views/my-components/lili/rect-loading";
+import CountDownButton from "@/views/my-components/lili/count-down-button";
+import util from "@/libs/util.js";
+
+export default {
+  components: {
+    CountDownButton,
+    RectLoading,
+    LangSwitch,
+    Header,
+    Footer,
+  },
+  data() {
+    return {
+      error: false,
+      loading: false,
+      sending: false,
+      form: {
+        username: "",
+        password: "",
+        mobile: "",
+        code: "",
+      },
+      rules: {
+        username: [
+          {
+            required: true,
+            message: "账号不能为空",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: "密码不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    mounted() {},
+    afterLogin(res) {
+      let accessToken = res.result.accessToken;
+      let refreshToken = res.result.refreshToken;
+      this.setStore("accessToken", accessToken);
+      this.setStore("refreshToken", refreshToken);
+      // 获取用户信息
+      userInfo().then((res) => {
+        if (res.success) {
+          // 加载菜单
+          this.setStore("userInfo", res.result);
+          Cookies.set("userInfo", JSON.stringify(res.result));
+          this.$store.commit("setAvatarPath", res.result.avatar);
+          util.initRouter(this);
+          this.$router.push({
+            name: "home_index",
+          });
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+    submitLogin() {
+      this.$refs.usernameLoginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          login({
+            username: this.form.username,
+            password: this.md5(this.form.password),
+          }).then((res) => {
+            if (res && res.success) {
+              this.afterLogin(res);
+            } else {
+              this.loading = false;
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login {
+  height: 100%;
+  background: url("../assets/background.png") no-repeat;
+  background-color: #f0f2f5;
+  display: flex;
+  background-size: cover;
+  align-items: center;
+  justify-content: center;
+
+  .ivu-tabs-nav-container {
+    line-height: 2;
+    font-size: 17px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+    zoom: 1;
+  }
+
+  .form {
+    padding-top: 1vh;
+
+    .input-verify {
+      width: 67%;
+    }
+  }
+
+  .forget-pass,
+  .other-way {
+    font-size: 14px;
+  }
+
+  .login-btn,
+  .other-login {
+    margin-top: 3vh;
+  }
+
+  .icons {
+    display: flex;
+    align-items: center;
+  }
+
+  .other-icon {
+    cursor: pointer;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.2);
+
+    :hover {
+      color: #2d8cf0;
+    }
+  }
+}
+.flex {
+  justify-content: center;
+}
+
+</style>

manager/src/views/logistics/index.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="search">
+    <Row>
+      <Col>
+        <Card>
+          <Row @keydown.enter.native="handleSearch"></Row>
+          <Row class="operation padding-row">
+            <Button @click="add" type="primary">添加</Button>
+          </Row>
+          <Row>
+            <Table
+              :loading="loading"
+              border
+              :columns="columns"
+              :data="data"
+              ref="table"
+              sortable="custom"
+              @on-sort-change="changeSort"
+              @on-selection-change="changeSelect"
+            >
+              <!-- 页面展示 -->
+              <template slot="disableSlot" slot-scope="scope">
+                <i-switch size="large" v-model="scope.row.disabled == 'OPEN'?true:false" @on-change="changeSwitch(scope.row)">
+                  <span slot="open">展示</span>
+                  <span slot="close">隐藏</span>
+                </i-switch>
+              </template>
+            </Table>
+          </Row>
+          <Row type="flex" justify="end" class="page">
+            <Page
+              :current="searchForm.pageNumber"
+              :total="total"
+              :page-size="searchForm.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>
+      </Col>
+    </Row>
+    <Modal
+      :title="modalTitle"
+      v-model="modalVisible"
+      :mask-closable="false"
+      :width="500"
+    >
+      <Form ref="form" :model="form" :label-width="120" :rules="formValidate">
+        <FormItem label="物流公司名称" prop="name">
+          <Input v-model="form.name" clearable style="width: 100%"/>
+        </FormItem>
+        <FormItem label="物流公司代码" prop="code">
+          <Input v-model="form.code" clearable style="width: 100%"/>
+        </FormItem>
+        <FormItem label="支持电子面单">
+          <i-switch v-model="form.standBy" size="large">
+            <span slot="open">开</span>
+            <span slot="close">关</span>
+          </i-switch>
+        </FormItem>
+        <FormItem label="电子面单表单">
+          <Input v-model="form.formItems" clearable style="width: 100%"/>
+        </FormItem>
+        <FormItem label="禁用状态" prop="disabled">
+          <i-switch v-model="form.disabled" size="large">
+            <span slot="open">开启</span>
+            <span slot="close">禁用</span>
+          </i-switch>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="modalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
+        >提交
+        </Button
+        >
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+  import {
+    getLogisticsPage,
+    updateLogistics,
+    getLogisticsDetail,
+    addLogistics,
+    delLogistics,
+  } from "@/api/logistics";
+
+  export default {
+    name: "bill",
+    components: {},
+    data() {
+      return {
+        openSearch: true, // 显示搜索
+        openTip: true, // 显示提示
+        loading: true, // 表单加载状态
+        modalType: 0, // 添加或编辑标识
+        modalVisible: false, // 添加或编辑显示
+        modalTitle: "", // 添加或编辑标题
+        drop: false,
+        dropDownContent: "展开",
+        dropDownIcon: "ios-arrow-down",
+        searchForm: {
+          // 搜索框初始化对象
+          pageNumber: 1, // 当前页数
+          pageSize: 10, // 页面大小
+          sort: "createTime", // 默认排序字段
+          order: "desc", // 默认排序方式
+          name: "",
+        },
+        selectDate: null,
+        form: {
+          // 添加或编辑表单对象初始化数据
+          name: "",
+        },
+        // 表单验证规则
+        formValidate: {
+          name: [
+            {
+              required: true,
+              message: "请输入物流公司名称",
+              trigger: "blur",
+            },
+          ],
+        },
+        submitLoading: false, // 添加或编辑提交状态
+        selectList: [], // 多选数据
+        selectCount: 0, // 多选计数
+        columns: [
+          // 表头
+          {
+            type: "selection",
+            width: 60,
+            align: "center",
+          },
+          {
+            title: "物流公司名称",
+            key: "name",
+            minWidth: 120,
+            sortable: false,
+          },
+          {
+            title: "物流公司编码",
+            key: "code",
+            minWidth: 120,
+            sortable: false,
+          },
+          {
+            title: "状态",
+            key: "disabled",
+            width: 150,
+            slot: "disableSlot",
+            /*render(h, params) {
+              return h("Badge", {
+                props: {
+                  status: params.row.disabled == 'OPEN' ? "success" : "error",
+                  text: params.row.disabled == 'OPEN' ? "开启" : "禁用",
+                },
+              });
+            },*/
+          },
+          {
+            title: "创建时间",
+            key: "createTime",
+            width: 180,
+            sortable: false,
+          },
+          {
+            title: "操作",
+            key: "action",
+            align: "center",
+            width: 150,
+            render: (h, params) => {
+              return h("div", [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.detail(params.row);
+                      },
+                    },
+                  },
+                  "修改"
+                ),
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "error",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.remove(params.row);
+                      },
+                    },
+                  },
+                  "删除"
+                ),
+              ]);
+            },
+          },
+        ],
+        data: [], // 表单数据
+        total: 0, // 表单数据总数
+      };
+    },
+    methods: {
+      init() {
+        this.getDataList();
+      },
+      changePage(v) {
+        this.searchForm.pageNumber = v;
+        this.getDataList();
+        this.clearSelectAll();
+      },
+      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();
+      },
+      changeSort(e) {
+        this.searchForm.sort = e.key;
+        this.searchForm.order = e.order;
+        if (e.order === "normal") {
+          this.searchForm.order = "";
+        }
+        this.getDataList();
+      },
+      clearSelectAll() {
+        this.$refs.table.selectAll(false);
+      },
+      changeSelect(e) {
+        this.selectList = e;
+        this.selectCount = e.length;
+      },
+
+      getDataList() {
+        this.loading = true;
+
+        getLogisticsPage(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;
+        this.loading = false;
+      },
+      handleSubmit() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.submitLoading = true;
+            this.form.disabled = this.form.disabled == true ? "OPEN" : "CLOSE"
+            if (this.modalType == 0) {
+              // 添加 避免编辑后传入id等数据 记得删除
+              delete this.form.id;
+
+              this.form.disabled
+                ? (this.form.disabled = "OPEN")
+                : (this.form.disabled = "CLOSE");
+              addLogistics(this.form).then((res) => {
+                this.submitLoading = false;
+                if (res.success) {
+                  this.$Message.success("操作成功");
+                  this.getDataList();
+                  this.modalVisible = false;
+                }
+              });
+            } else {
+              // 编辑
+              updateLogistics(this.id, this.form).then((res) => {
+                this.submitLoading = false;
+                if (res.success) {
+                  this.$Message.success("操作成功");
+                  this.getDataList();
+                  this.modalVisible = false;
+                }
+              });
+            }
+          }
+        });
+      },
+      add() {
+        this.modalType = 0;
+        this.modalTitle = "添加";
+        this.form = {};
+        this.$refs.form.resetFields();
+
+        this.modalVisible = true;
+      },
+      detail(v) {
+        this.modalType = 1;
+        this.id = v.id;
+        this.modalTitle = "修改";
+        this.modalVisible = true;
+
+        this.form.name = v.name;
+        this.form.code = v.code;
+        this.form.standBy = v.standBy;
+        this.form.formItems = v.formItems;
+        this.form.disabled = v.disabled;
+        this.form.disabled == "OPEN"
+          ? (this.form.disabled = true)
+          : (this.form.disabled = false);
+      },
+      remove(v) {
+        this.$Modal.confirm({
+          title: "确认删除",
+          // 记得确认修改此处
+          content: "您确认要删除 " + v.name + " ?",
+          loading: true,
+          onOk: () => {
+            // 删除
+            delLogistics(v.id).then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+              }
+            });
+          },
+        });
+      },
+    },
+    mounted() {
+      this.init();
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  // 建议引入通用样式 可删除下面样式代码
+  @import "@/styles/table-common.scss";
+</style>

manager/src/views/main-components/breadcrumb-nav.vue

@@ -0,0 +1,28 @@
+<template>
+    <Breadcrumb>
+        <BreadcrumbItem 
+            v-for="item in currentPath" 
+            :to="item.path" 
+            :key="item.name"
+        >{{ itemTitle(item) }}</BreadcrumbItem>
+    </Breadcrumb>
+</template>
+
+<script>
+export default {
+    name: 'breadcrumbNav',
+    props: {
+        currentPath: Array
+    },
+    methods: {
+        itemTitle (item) {
+            if (typeof item.title == 'object') {
+                return this.$t(item.title.i18n);
+            } else {
+                return item.title;
+            }
+        }
+    }
+};
+</script>
+

manager/src/views/main-components/footer.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="foot">
+    <Row type="flex" justify="space-around" class="help">
+      <a class="item" href="https://pickmall.com" target="_blank">{{ $t('help') }}</a>
+      <a class="item" href="https://pickmall.com" target="_blank">{{ $t('privacy') }}</a>
+      <a class="item" href="https://pickmall.com" target="_blank">{{ $t('terms') }}</a>
+    </Row>
+    <Row type="flex" justify="center" class="copyright">
+      Copyright © 2020 - Present
+      <a
+        href="http://lili.cn"
+        target="_blank"
+        style="margin:0 5px;"
+      >lili-shop</a> {{ $t('rights') }}
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "footer"
+};
+</script>
+
+<style lang="scss" scoped>
+.foot {
+  position: fixed;
+  bottom: 4vh;
+  width: 368px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  .help {
+    margin: 0 auto;
+    margin-bottom: 1vh;
+    width: 60%;
+    .item {
+      color: rgba(0, 0, 0, 0.45);
+    }
+    :hover {
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}
+</style>

manager/src/views/main-components/fullscreen.vue

@@ -0,0 +1,80 @@
+<template>
+    <div @click="handleChange" v-if="showFullScreenBtn" class="full-screen-btn-con">
+        <Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
+            <Icon :type="value ? 'ios-contract' : 'ios-expand'" :size="24"></Icon>
+        </Tooltip>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "fullScreen",
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    showFullScreenBtn() {
+      return window.navigator.userAgent.indexOf("MSIE") < 0;
+    }
+  },
+  methods: {
+    handleFullscreen() {
+      let main = document.body;
+      if (this.value) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        if (main.requestFullscreen) {
+          main.requestFullscreen();
+        } else if (main.mozRequestFullScreen) {
+          main.mozRequestFullScreen();
+        } else if (main.webkitRequestFullScreen) {
+          main.webkitRequestFullScreen();
+        } else if (main.msRequestFullscreen) {
+          main.msRequestFullscreen();
+        }
+      }
+    },
+    handleChange() {
+      this.handleFullscreen();
+    }
+  },
+  created() {
+    let isFullscreen =
+      document.fullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement ||
+      document.fullScreen ||
+      document.mozFullScreen ||
+      document.webkitIsFullScreen;
+    isFullscreen = !!isFullscreen;
+    document.addEventListener("fullscreenchange", () => {
+      this.$emit("input", !this.value);
+      this.$emit("on-change", !this.value);
+    });
+    document.addEventListener("mozfullscreenchange", () => {
+      this.$emit("input", !this.value);
+      this.$emit("on-change", !this.value);
+    });
+    document.addEventListener("webkitfullscreenchange", () => {
+      this.$emit("input", !this.value);
+      this.$emit("on-change", !this.value);
+    });
+    document.addEventListener("msfullscreenchange", () => {
+      this.$emit("input", !this.value);
+      this.$emit("on-change", !this.value);
+    });
+    this.$emit("input", isFullscreen);
+  }
+};
+</script>

manager/src/views/main-components/header.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <Row class="header">
+      <img src="../../assets/logo.png" class="logo" width="220px">
+      <!-- <div class="description">{{ $t('LILISHOP-ADMIN') }}</div> -->
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "header",
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+
+  margin-bottom: 6vh;
+  text-align: center;
+  display: flex;
+  justify-content: center !important;
+}
+.logo {
+  transform: scale(2);
+}
+</style>

manager/src/views/main-components/lang-switch.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="lang-icon">
+    <Dropdown @on-click="langChange">
+      <Icon type="md-globe" size="26"/>
+      <DropdownMenu slot="list">
+        <DropdownItem name="zh-CN">简体中文</DropdownItem>
+        <DropdownItem name="en-US">English</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "langSwitch",
+  methods: {
+    langChange(v) {
+      this.$i18n.locale = v;
+      this.$store.commit("switchLang", v);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.lang-icon {
+  position: fixed;
+  top: 2vh;
+  right: 1.5vw;
+  cursor: pointer;
+}
+</style>