完善首页个性化页面

src/api/home.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+export function getHomePage() {
+    return request({
+        url: 'homePage',
+        method: 'POST'
+    })
+}
+
+ 
+
+
+export function homeSetting( data ) {
+    return request({
+        url: 'homePage/setting',
+        method: 'POST',
+        data: data
+    })
+}

src/layout/components/Sidebar/Logo.vue

@@ -39,7 +39,7 @@ export default {
   },
   data() {
     return {
-      title: '智莺系统',
+      title: '无字小说',
       logo: '/pic/common/logo@2x.png'
     }
   }

src/router/index.js

@@ -16,6 +16,8 @@ import sortManagement from './modules/sort-management'
 
 import basicSetting from './modules/basic-setting'
 import setAdvertising from './modules/set-advertising'
+import home from './modules/home'
+
 
 
 
@@ -88,8 +90,8 @@ export const constantRoutes = [
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
+  home,
   basicSetting,
-
   memberManagement,
   booksManagement,
   sortManagement,

src/router/modules/home.js

@@ -0,0 +1,23 @@
+/** When your routing table is too long, you can split it into small modules **/
+
+import Layout from '@/layout'
+
+const home = {
+  path: '/home',
+  component: Layout,
+  redirect: '/home',
+  name: 'home',
+  meta: {
+    title: '首页个性化',
+    icon: 'el-icon-s-home'
+  },
+  children: [
+    {
+      path: 'home',
+      component: () => import('@/views/home/home'),
+      name: 'home',
+      meta: { title: '首页个性化' }
+    },
+  ]
+}
+export default home

src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: '智莺总后台',
+  title: '管理后台',
 
   /**
    * @type {boolean} true | false

src/styles/element-ui.scss

@@ -36,4 +36,31 @@
    position: absolute;
    top: 0;
 
+}
+
+
+.banner-box{
+  .el-table td  {
+    border-bottom: 0;
+  }
+  
+  .el-table th.is-leaf, .el-table td {
+    border-bottom: 0;
+  
+  }
+
+  el-table__row > td {
+    border: none;
+  }
+  
+  .el-table::before {
+    height: 0px;
+  }
+}
+
+
+.el-tooltip__popper.is-light {
+  color: #3DA2FF;
+  border: none;
+  box-shadow: 0px 0px 20px rgb(211, 211, 211);
 }

src/views/home/books-dialog/books-dialog.vue

@@ -0,0 +1,246 @@
+<template>
+  <Dialog
+    :is-dialog-exist="isBooksShow"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-form ref="formData" label-width="auto" :model="formData" inline>
+          <div class="div-main">
+            <el-form-item label="书名" prop="name">
+              <el-input v-model="formData.name" placeholder="请输入" />
+            </el-form-item>
+
+            <el-form-item label="分类" prop="value" style="margin: 0 auto">
+              <el-select v-model="formData.value" placeholder="请选择">
+                <el-option
+                  v-for="item in booksData"
+                  :key="item.value"
+                  :label="item.category_name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="简介" prop="book_intro">
+              <el-input v-model="formData.book_intro" placeholder="请输入" />
+            </el-form-item>
+          </div>
+
+          <div>
+            <el-form-item label=" ">
+              <el-button type="primary" size="mini" @click="onSubmit"> 提交 </el-button>
+              <el-button type="info" plain size="mini" @click="resetForm">
+                重置
+              </el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+        <!-- 数据 -->
+        <div class="table-container">
+          <el-table v-loading="tableDataLoading" :data="tableData" border fit>
+            <el-table-column label="书名" align="center" prop="book_name" />
+            <el-table-column label="分类" align="center">
+              <template slot-scope="scope">{{ booksData[0].category_name }}</template>
+            </el-table-column>
+            <el-table-column label="书源" align="center">
+              <template slot-scope="scope">笔趣阁</template>
+            </el-table-column>
+            <el-table-column
+              label="简介"
+              align="center"
+              prop="book_intro"
+            ></el-table-column>
+
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button type="danger" @click="onSelectItem(scope.row)">
+                  <div style="color: #fff">
+                    <i class="el-icon-success"></i>
+                    <span>选择</span>
+                  </div>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-main>
+    </el-container>
+
+    <el-footer>
+      <el-pagination
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 15, 20, 30]"
+        :page-size="limit"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="totalCount"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-footer>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog/index";
+import { getCategoryShow } from "@/api/sort-management";
+
+/**
+ * 站长等级的编辑dialog
+ */
+export default {
+  components: { Dialog },
+  props: {
+    // 弹窗控制参数
+    isBooksShow: {
+      type: Boolean,
+      default: false,
+    },
+    // 选中的数据
+    selectItem: {
+      type: Object,
+      default: () => {},
+    },
+    booksData: {
+      type: Array,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      dialogTitle: "选择书籍",
+      // dialog样式
+      dialogStyle: {
+        "--dialog-width": "1000px",
+        "--dialog-height": "780px",
+        "--title-height": "51px",
+      },
+      // 提交参数
+      formData: {
+        value: "",
+        name: "",
+        book_intro: "",
+      },
+      // 校验规则
+      rules: {},
+      tableDataLoading: true,
+      // 表格数据
+      tableData: [],
+      limit: 20,
+      currentPage: 1,
+      totalCount: 0,
+    };
+  },
+  watch: {
+    isBooksShow(val) {
+      if (val === true) {
+        this.limit = 20;
+        this.currentPage = 1;
+        this.totalCount = 0;
+        this.initDataView();
+
+        this.formData.value = this.booksData[0].id;
+      }
+    },
+  },
+  methods: {
+    // 关闭弹窗
+    handleClose() {
+      this.$emit("handle-close");
+    },
+    // 提交弹窗
+    handleSuccess() {
+      this.$emit("handle-success");
+    },
+    // 初始化弹窗参数
+    initDataView() {
+      this.tableData = [];
+      this.tableDataLoading = true;
+      getCategoryShow(this.booksData[0].id, {
+        source_platform: 1,
+        page: this.currentPage,
+        page_size: this.limit,
+        name: this.formData.name,
+        desc: this.formData.book_intro,
+      }).then((res) => {
+        this.tableData = res.data.data;
+        this.totalCount = res.data.total;
+        this.tableDataLoading = false;
+      });
+    },
+    // 提交表单
+    submitForm() {
+      this.$refs.formData.validate((vaild) => {
+        if (vaild && this.customValidate()) {
+          console.log("提交表单");
+        }
+      });
+    },
+    handleSizeChange(val) {
+      this.limit = val;
+      this.initDataView();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.initDataView();
+    },
+    customValidate() {},
+
+    onSubmit() {
+      this.initDataView();
+    },
+    resetForm() {
+      this.$refs["formData"].resetFields();
+      this.initDataView();
+    },
+
+    onSelectItem( data ){
+      this.$emit('onSelectItem', data)
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-container {
+  width: 100%;
+  height: 91%;
+  .el-main {
+    height: 100%;
+    width: 100%;
+
+    .formData-title {
+      text-align: center;
+      margin-bottom: 20px;
+      color: #333333;
+      font-size: 18px;
+    }
+
+    .el-form {
+      width: 100%;
+      display: flex;
+      flex-flow: column;
+      box-sizing: border-box;
+      padding: 0 20px;
+      .div-main {
+        display: flex;
+      }
+    }
+  }
+}
+
+.table-container {
+  width: 100%;
+  box-sizing: border-box;
+}
+.el-footer {
+  height: 10%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/home/home.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="home-box">
+    <el-main>
+      <ActionButton @handle-refresh="refreshData" />
+
+      <div class="mod-title">Banner模块</div>
+      <div class="banner-box">
+        <el-table ref="dataList" :data="banner">
+          <el-table-column label="序号" type="index" width="80" align="center">
+          </el-table-column>
+          <el-table-column label="名称" align="center">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入名称" v-model="scope.row.name"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="书籍" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                icon="el-icon-edit"
+                size="mini"
+                @click="onBooksAdd(scope.$index)"
+              ></el-button>
+              <el-tag style="margin-left: 10px" v-if="scope.row.value">{{
+                scope.row.value | onValueBooks
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.status"
+                :active-value="1"
+                :inactive-value="0"
+              ></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <div class="flex-box">
+                <CustomButton
+                  tip-text="删除"
+                  type="danger"
+                  is-svg
+                  icon="delete"
+                  @onClick="onDeleteBanner(scope.$index)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-button
+          style="margin: 15px 0 15px 30px"
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="onPushBanner"
+          >模块</el-button
+        >
+      </div>
+
+      <div class="mod-title">书籍展示模块</div>
+
+      <div class="banner-box">
+        <el-table ref="dataList" :data="book_show">
+          <el-table-column label="序号" type="index" width="80" align="center">
+          </el-table-column>
+          <el-table-column label="书籍标题" align="center">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入名称" v-model="scope.row.name"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="排列样式" align="center">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.value.style" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="书籍分类" align="center">
+            <template slot-scope="scope">
+              <el-select
+                v-model.number="scope.row.value.category_id"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in booksData"
+                  :key="item.value"
+                  :label="item.category_name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.status"
+                :active-value="1"
+                :inactive-value="0"
+              ></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <div class="flex-box">
+                <CustomButton
+                  tip-text="删除"
+                  type="danger"
+                  is-svg
+                  icon="delete"
+                  @onClick="onDeleteBook(scope.$index)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-button
+            style="margin: 15px 0 15px 30px"
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="onPushBook"
+            >模块</el-button
+          >
+
+          <el-tooltip content="最多添加8个模块" placement="top" effect="light">
+            <i class="el-icon-question" style="color: #3da2ff; margin-left: 10px"></i>
+          </el-tooltip>
+        </div>
+      </div>
+      <el-footer height="10%">
+        <el-button type="primary" style="margin-right: 27px" @click="submitForm"
+          >保存</el-button
+        >
+        <el-button type="info" plain @click="resetForm('selectItem')">重置</el-button>
+      </el-footer>
+    </el-main>
+
+    <BooksDialog
+      :isBooksShow="isBooksShow"
+      @onSelectItem="onSelectItem"
+      @handle-close="isBooksShow = false"
+      :booksData="booksData"
+    ></BooksDialog>
+  </div>
+</template>
+
+<script>
+import ActionButton from "@/components/ActionButton/index";
+import CustomButton from "@/components/CustomButton/index";
+
+import BooksDialog from "./books-dialog/books-dialog";
+
+import { getCategoryList } from "@/api/sort-management";
+import { getHomePage, homeSetting } from "@/api/home";
+
+getHomePage;
+export default {
+  filters: {
+    onValueBooks(data) {
+      console.log(data);
+      return data;
+    },
+  },
+  components: {
+    ActionButton,
+    CustomButton,
+    BooksDialog,
+  },
+  data() {
+    return {
+      selectIndex: null,
+      isBooksShow: false,
+      banner: [
+        { name: "", value: "", status: "" },
+        { name: "", value: "", status: "" },
+      ],
+      book_show: [
+        {
+          name: "",
+          value: { style: "", category_id: "" },
+          status: "",
+        },
+        {
+          name: "",
+          value: { style: "", category_id: "" },
+          status: "",
+        },
+      ],
+      booksData: [],
+      options: [
+        {
+          value: "1",
+          label: "竖向排列",
+        },
+        {
+          value: "2",
+          label: "横向排列",
+        },
+      ],
+    };
+  },
+
+  mounted() {
+    this.init();
+    this.openCheckBooksDialog();
+  },
+
+  methods: {
+    // 初始化
+    init() {
+      getHomePage().then((res) => {
+        this.banner = res.data.banner;
+        this.book_show = res.data.book_show;
+      });
+    },
+
+    /**
+     * 添加书籍
+     */
+
+    onBooksAdd(i) {
+      this.isBooksShow = true;
+      this.selectIndex = i;
+    },
+
+    onSelectItem(data) {
+      this.isBooksShow = false;
+      this.banner[this.selectIndex].value = data.book_name;
+    },
+
+    // 删除banner
+    onDeleteBanner(i) {
+      this.banner.splice(i,1)
+    },
+    onDeleteBook(i) {
+      this.book_show.splice(i,1)
+
+    },
+
+    // 刷新
+    refreshData() {
+      console.log("刷新");
+    },
+
+    // 打开查看书籍弹窗
+    openCheckBooksDialog() {
+      this.booksData = [];
+      getCategoryList({
+        source_platform: "1",
+        need_num: true,
+      }).then((res) => {
+        this.booksData = res.data; // 分类列表
+      });
+    },
+    onPushBanner() {
+      this.banner.push({
+        name: "",
+        value: "",
+        status: "",
+      });
+    },
+    onPushBook() {
+      this.book_show.push({
+        name: "",
+        value: { style: "", category_id: "" },
+        status: "",
+      });
+    },
+
+    submitForm() {
+      console.log(this.book_show);
+      console.log(this.banner);
+
+      homeSetting({
+        book_show: this.book_show,
+        banner: this.banner,
+      }).then((res) => {
+        this.init();
+
+        this.$message.success("保存成功");
+      });
+    },
+    resetForm(){
+        this.init()
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mod-title {
+  color: #333333;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.banner-box {
+  background: #ffffff;
+  border-radius: 10px;
+  border: 1px solid #e3e3e3;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  margin: 12px 0 20px;
+}
+</style>

src/views/member-management/components/otherSettingsDialog/otherSettingsDialog.vue

@@ -36,7 +36,7 @@
             </el-form-item> -->
 
             <el-form-item
-              label="支付宝提现账号"
+               label="支付宝提现账号"
               v-if="dialogTitle === '修改绑定的支付宝'"
             >
               <el-input

src/views/sort-management/components/check-books-dialog.vue

@@ -2,7 +2,7 @@
   <Dialog
     :is-dialog-exist="isDialog"
     :title="dialogTitle"
-    :sub-title="booksItem ? booksItem.btn5Data.name : ''"
+    :sub-title="'笔趣阁'"
     :dialog-style="dialogStyle"
     @close-dialog="handleClose"
   >
@@ -24,10 +24,10 @@
               <el-input v-model="formData.book_intro" placeholder="请输入" />
             </el-form-item>
             <el-form-item label=" ">
-              <el-button type="primary" size="mini" @click="onSubmit"> 提交 </el-button>
-              <el-button type="info" plain size="mini" @click="resetForm('formData')">
-                重置
-              </el-button>
+              <el-button type="primary" size="mini" @click="onSubmit">提交</el-button>
+              <el-button type="info" plain size="mini" @click="resetForm('formData')"
+                >重置</el-button
+              >
             </el-form-item>
           </div>
         </el-form>
@@ -35,7 +35,7 @@
         <!-- 数据 -->
         <div class="table-container">
           <el-table
-            v-loading="tableData.length === 0"
+            v-loading="tableDataLoading"
             :data="tableData"
             border
             fit
@@ -44,22 +44,34 @@
             <el-table-column type="index" label="序号" align="center" width="55" />
             <el-table-column label="书名" align="center" prop="book_name" />
             <el-table-column label="分类" align="center">
-              <template slot-scope="scope">{{ booksItem.data.category_name }}</template>
+              <template slot-scope="scope">{{ booksItem.category_name }}</template>
             </el-table-column>
             <el-table-column label="书源" align="center">
-              <template slot-scope="scope">{{ booksItem.btn5Data.name }}</template>
+              <template slot-scope="scope">笔趣阁</template>
             </el-table-column>
             <el-table-column label="简介" align="center" prop="book_intro" />
           </el-table>
         </div>
       </el-main>
     </el-container>
+    <el-footer>
+      <el-pagination
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 15, 20, 30]"
+        :page-size="limit"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="totalCount"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-footer>
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@/components/Dialog/index";
 
+import { getCategoryShow } from "@/api/sort-management";
 export default {
   components: { Dialog },
   props: {
@@ -68,8 +80,8 @@ export default {
       default: false,
     },
     mod: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: () => {},
     },
     booksItem: {
       type: Object,
@@ -83,13 +95,22 @@ export default {
     },
   },
   watch: {
-    mod() {
-      this._baseRequest();
+    mod(value) {
+      if (value) {
+        this.limit = 20;
+        this.currentPage = 1;
+        this.totalCount = 0;
+        this._baseRequest();
+      }
     },
   },
 
   data() {
     return {
+      // 分页数据
+      limit: 20,
+      currentPage: 1,
+      totalCount: 0,
       // dialog样式
       dialogStyle: {
         "--dialog-width": "1000px",
@@ -99,6 +120,7 @@ export default {
       dialogTitle: "查看书籍",
       dialogSubTitle: "笔趣阁",
       isSearchVisible: true,
+      tableDataLoading: true,
       // 表格数据
       tableData: [],
       formData: {
@@ -110,34 +132,23 @@ export default {
   methods: {
     _baseRequest() {
       this.tableData = [];
-      this.tableData = JSON.parse(JSON.stringify(this.mod));
+      this.tableDataLoading = true;
+      getCategoryShow(this.mod.id, {
+        source_platform: 1,
+        page: this.currentPage,
+        page_size: this.limit,
+        name: this.formData.name,
+        desc: this.formData.book_intro,
+      }).then((res) => {
+        this.tableData = res.data.data;
+        this.totalCount = res.data.total;
+        this.tableDataLoading = false;
+      });
     },
     // 提交搜索操作
     onSubmit() {
-      let data = null;
-      if (this.formData.name && this.formData.book_intro) {
-        data = this.mod.filter((item) => {
-          if (
-            item.book_name.indexOf(this.formData.name) != -1 &&
-            item.book_intro.indexOf(this.formData.book_intro) != -1
-          ) {
-            return item;
-          }
-        });
-      } else if (this.formData.name && !this.formData.book_intro) {
-        data = this.mod.filter((item) => {
-          if (item.book_name.indexOf(this.formData.name) != -1) {
-            return item;
-          }
-        });
-      } else {
-        data = this.mod.filter((item) => {
-          if (item.book_intro.indexOf(this.formData.book_intro) != -1) {
-            return item;
-          }
-        });
-      }
-      this.tableData = data;
+      this._baseRequest();
+
     },
     // 重置操作
     resetForm(val) {
@@ -148,6 +159,15 @@ export default {
     handleClose() {
       this.$emit("handle-close");
     },
+
+    handleSizeChange(val) {
+      this.limit = val;
+      this._baseRequest();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this._baseRequest();
+    },
   },
 };
 </script>
@@ -155,9 +175,11 @@ export default {
 <style lang="scss" scoped>
 .el-container {
   width: 100%;
-  height: 100%;
+  height: calc(100% - 65px);
+
   .el-main {
     width: 100%;
+
     .div-main {
       display: flex;
       justify-content: space-between;
@@ -174,4 +196,13 @@ export default {
     }
   }
 }
+
+.el-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  bottom: 0;
+  z-index: 99;
+}
+
 </style>

src/views/sort-management/index.vue

@@ -73,7 +73,7 @@
     />
     <!--    查看书籍弹窗-->
     <CheckBooksDialog
-      :mod="booksData"
+      :mod="modeData"
       :booksItem="booksItem"
       :is-dialog="isCheckDialog"
       @handle-close="isCheckDialog = false"
@@ -90,7 +90,6 @@ import CheckBooksDialog from "./components/check-books-dialog";
 import {
   getPlatformList,
   getCategoryList,
-  getCategoryShow,
   getCategoryDelete,
 } from "@/api/sort-management";
 
@@ -103,6 +102,7 @@ export default {
   },
   data() {
     return {
+      modeData: null,
       isCheckDialog: false,
       isEditDialog: false,
       editTitleDialog: "",
@@ -187,17 +187,13 @@ export default {
     },
     // 打开查看书籍弹窗
     openCheckBooksDialog(data) {
+      console.log(data)
       this.booksData = [];
-      getCategoryShow(data.id, {
-        source_platform: this.btn5Data.value,
-      }).then((res) => {
-        this.booksData = res.data;
-        this.booksItem = {
-          data: data,
-          btn5Data: this.btn5Data,
-        };
-      });
-
+      this.modeData =  {
+        id : data.id,
+        btn5Data : this.btn5Data
+      }
+      this.booksItem = data
       this.isCheckDialog = true;
     },