Merge branch 'HitSheep' of http://39.105.160.25:10880/post-project-ui/post-ui into HitSheep

package.json

@@ -70,10 +70,10 @@
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
-    "babel-plugin-import": "^1.13.5",
     "babel-eslint": "10.1.0",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-dynamic-import-node": "2.3.3",
+    "babel-plugin-import": "^1.13.5",
     "chalk": "4.1.0",
     "compression-webpack-plugin": "5.0.2",
     "connect": "3.6.6",

src/api/collection/collection.js

@@ -1,9 +1,10 @@
 import request from '@/utils/request'
 
 // 添加套系
-export function addCollection() {
+export function addCollection(data) {
   return request({
-    url: '/post/series' ,
-    method: 'post'
+    url: '/post/series/add' ,
+    method: 'post',
+    data
   })
 }

src/api/notice/notice.js

@@ -2,9 +2,9 @@
 import request from '@/utils/request'
 
 //获取公告列表
-export function getNotice(){
+export function getNotice(pageNum){
     return request({
-        url:'/post/bulletin/list',
+        url:'/post/bulletin/list?pageNum=' +pageNum,
         method:'get'
     })
 }
@@ -35,4 +35,14 @@ export function searchJNotice(title){
         url:'/post/bulletin/list?noticeTitle=' + title,
         method: 'get'
     })
-}
+}
+
+// 创建公告页面
+// 提交公告
+export function submitNotice(data) {
+    return request({
+      url: '/post/bulletin/add',
+      method: 'post',
+      data
+    })
+  }

src/router/index.js

@@ -168,6 +168,26 @@ export const constantRoutes = [
         meta: { title: '创建套系', icon: 'collectionadd' }
       }
     ]
+  },
+  {
+    path: '/publisherList',
+    component: Layout,
+    meta: { title: '发行方管理', icon : "user" },
+    children: [
+      {
+        path: 'publisherList',
+        component: () => import('@/views/publisher/publisherList'),
+        name: 'publisherList',
+        meta: { title: '发行方列表', icon: 'list' }
+      },
+      {
+        path: 'addPublisher',
+        component: () => import('@/views/publisher/addPublisher'),
+        name: 'addPublisher',
+        meta: { title: '创建发行方', icon: 'build' }
+        
+      }
+    ]
   }
   
 ]

src/views/collection/addCollection.vue

@@ -3,10 +3,11 @@
     
     <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
     <div class="message-add-box">
-      <el-form :model="message" :rules="rules" ref="form" label-width="100px">
+      <el-form :model="form" :rules="rules" ref="form" label-width="125px">
       
-        <el-form-item label="藏品名称:" prop="collectionName">
-          <el-input v-model="message.collectionName" style="width: 550px" placeholder="请输入藏品名称"></el-input>
+        <el-form-item label="藏品名称（套）:" prop="collectionName" style="width: 550px">
+          <el-input v-model="form.collectionName" maxlength="20"
+          show-word-limit placeholder="请输入藏品名称"></el-input>
         </el-form-item> 
         <el-form-item label="藏品头图:" prop="imageUrl">
           <el-upload
@@ -16,81 +17,32 @@
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload"
         >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
           <i
             v-else
             class="el-icon-plus avatar-uploader-icon"
           ></i> </el-upload>
         </el-form-item> 
-
-        <el-form-item label="3D模板:" prop="">
-          <el-upload
-          class="avatar-uploader"
-          action="https://jsonplaceholder.typicode.com/posts/"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-          <i
-            v-else
-            class="el-icon-plus avatar-uploader-icon"
-          ></i> </el-upload>
+        <el-form-item label="设置套系时间 ：" prop="collectionTime" style="width: 550px">
+          <el-date-picker
+              v-model="form.collectionTime"
+              type="datetimerange"
+              align="right"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd hh:mm::ss"
+              :default-time="['12:00:00', '08:00:00']">
+            </el-date-picker>
         </el-form-item> 
-        <el-form-item label="藏品价格:" prop="collectionPrice">
-          <el-input v-model="message.collectionPrice" style="width: 550px" placeholder="请输入藏品价格"></el-input>
-        </el-form-item> 
-        <el-form-item label="藏品数量:" prop="collectionCount">
-          <el-input v-model="message.collectionCount" style="width: 550px" placeholder="请输入藏品数量"></el-input>
-        </el-form-item> 
-        <el-form-item label="发行方:" prop="collectionPublisher">
-          <el-input v-model="message.collectionPublisher" style="width: 550px" placeholder="请输入发行方"></el-input>
-        </el-form-item> 
-        
-        <el-dialog :visible.sync="dialogVisible">
-          <img width="100%" :src="dialogImageUrl" alt="">
-        </el-dialog>
-        <el-form-item label="藏品故事:" prop="collectionHistory">
-            <el-upload
-          action="#"
-          list-type="picture-card"
-          :auto-upload="false">
-            <i slot="default" class="el-icon-plus"></i>
-            <div slot="file" slot-scope="{file}">
-              <img
-                class="el-upload-list__item-thumbnail"
-                :src="file.url" alt=""
-              >
-              <span class="el-upload-list__item-actions">
-                <span
-                  class="el-upload-list__item-preview"
-                  @click="handlePictureCardPreview(file)"
-                >
-                  <i class="el-icon-zoom-in"></i>
-                </span>
-                <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleDownload(file)"
-                >
-                  <i class="el-icon-download"></i>
-                </span>
-                <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleRemove(file)"
-                >
-                  <i class="el-icon-delete"></i>
-                </span>
-              </span>
-            </div>
-        </el-upload>
-          <label for="">点击查看</label>
+        <el-form-item label="线下礼品兑换 ：" prop="radio" style="width: 550px">
+            <el-radio v-model="form.radio" label="1">可兑换</el-radio>
+            <el-radio v-model="form.radio" label="2">不可兑换</el-radio>
         </el-form-item> 
+          
         <el-form-item>
           <el-button type="primary" @click="addCollection('form')">提交</el-button>
-          <el-button @click="resetForm('form')">重置</el-button>
-          <el-button @click="importForm('form')">导入</el-button>
+          <!-- <el-button @click="resetForm('form')">重置</el-button>
+          <el-button @click="importForm('form')">导入</el-button> -->
         </el-form-item>
       </el-form>
     </div>     
@@ -104,33 +56,26 @@ import {addCollection} from '../../api/collection/collection.js'
   
     data() {
       return {
-        message: {
+        
+        form:{
           collectionName:'',
           imageUrl: '',
-          collectionPrice:'' , 
-          collectionCount:'' ,
-          collectionPublisher:'' , 
-          collectionHistory:'',
+          collectionTime:'' , 
+          radio: '1',
         },
         rules:{
           collectionName: [
             { required: true, message: '请输入藏品名称', trigger: 'blur' }
           ],
           imageUrl: [
-            { required: true, message: '请导入藏品图片', trigger: 'blur' }
-          ],
-          collectionPrice: [
-            { required: true, message: '请输入藏品价格', trigger: 'blur' }
-          ],
-          collectionCount: [
-            { required: true, message: '请输入藏品数量', trigger: 'blur' }
-          ],
-          collectionPublisher: [
-            { required: true, message: '请输入发布人', trigger: 'blur' }
+            { required: true, message: '请按照规范上传尺寸为750px*750px的图片', trigger: 'blur' }
           ],
-          collectionHistory: [
-            { required: true, message: '请输入藏品故事', trigger: 'blur' }
+          collectionTime: [
+            { required: true, message: '请输入套系时间', trigger: 'blur' }
           ],
+          radio:[
+            {required : true , trigger: 'blur' }
+          ]
         }
     }
   },
@@ -139,43 +84,76 @@ import {addCollection} from '../../api/collection/collection.js'
   },
   methods: {
         handleAvatarSuccess(res, file) {
-          this.imageUrl = URL.createObjectURL(file.raw);
+          this.form.imageUrl = URL.createObjectURL(file.raw);
+        },
+          beforeAvatarUpload(file) {
+          const isJPG = file.type === 'image/jpeg';
+          const isLt2M = file.size / 1024 / 1024 < 2;
+          if (!isJPG) {
+            this.$message.error('上传头像图片只能是 JPG 格式!');
+          }
+          if (!isLt2M) {
+            this.$message.error('上传头像图片大小不能超过 2MB!');
+          }
+          return isJPG && isLt2M;
         },
-        beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
-        return isJPG && isLt2M;
-      },
       addCollection() { 
-        console.log( "-****" , this.message.collectionName);
-        console.log( "-****" , this.message.imageUrl);
-        console.log( "-****" , this.message.collectionPrice);
-        console.log( "-****" , this.message.collectionCount);
-        console.log( "-****" , this.message.collectionPublisher);
-        console.log( "-****" , this.message.collectionHistory);
-        addCollection(this.collectionName) .then((res)=>{
+        console.log( "-****" , this.form.collectionName);
+        console.log( "-****" , this.form.imageUrl);
+        console.log( "-****" , this.form.collectionTime);
+        console.log( "-****" , this.form.radio);
+        addCollection({
+          seriesName :this.form.collectionName ,
+          seriesImage:this.form.imageUrl,
+          startTime :this.form.collectionTime[0] , 
+          endTime: this.form.collectionTime[1], 
+          collectionCounts:"0",
+          exchangeStatus:  this.form.radio
+        }) .then((res)=>{
           console.log(res);
+          this.$message({
+              message:"套系添加成功！",
+              type:"success",
+          });
         })
       },
       resetForm(formName) {
         this.$refs[formName].resetFields();
       },
-      // importForm(formName) {
-        
-      // }
     }
 }
 </script>
 
 <style>
+.down{
+  margin-left: 15px;
+}
+.demonstration{
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #606266;
+    line-height: 40px;
+    padding: 0 12px 0 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #606266;
+    line-height: 40px;
+    padding: 0 12px 0 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-weight: 700;
+}
+.el-icon-plus{
+  margin-top: 85px;
+}
+
 .avatar-uploader .el-upload {
+    width: 370px; 
+    height: 370px;
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
@@ -232,4 +210,8 @@ import {addCollection} from '../../api/collection/collection.js'
     border-top: 0px;
     width: 450px;
 }
+.avatar{
+  width: 370px;
+  height: 370px;
+}
 </style>

src/views/message/addMessage.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="message-add" :style="{height:height,width:width}"  >
     
-    <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
     <div class="message-add-box">
       <el-form :model="message" :rules="rules" ref="form" label-width="100px">
       
@@ -10,11 +9,6 @@
         </el-form-item> 
       
         <el-form-item label="发布时间:" required>
-          <!-- <el-col :span="11">
-            <el-form-item prop="dateTime">
-              <el-time-picker placeholder="选择时间" v-model="message.dateTime" style="width: 100%;"></el-time-picker>
-            </el-form-item>
-          </el-col> -->
           <el-col :span="11">
             <el-form-item prop="date1">
               <el-date-picker type="date" placeholder="选择日期" v-model="message.date1" style="width: 100%;"></el-date-picker>
@@ -52,12 +46,10 @@ import {submitMessage} from '../../api/message/message.js'
 
  export default {
   
-    data() {
+  data() {
       return {
-        
         message: {
           messageTitle: '',
-          // dateTime: '',
           date1:'',
           date2:'',
           receivedUsers: '',

src/views/notice/addNotice.vue

@@ -1,35 +1,34 @@
 <template>
   <div>
-    <div class="background">
-      <div class="content">
-        <el-form
-          ref="form"
-          :model="form"
-          :rules="rules"
-          label-width="90px"
-          id="selectForm"
-        >
-          <el-form-item label="公告名称:" size="mini" prop="title">
-            <el-input
-              v-model="form.name"
-              placeholder="请输入公告名称"
-              style="width: 510px"
-            ></el-input>
+    <div class="notice-add">
+      <div class="notice-add-box">
+        <el-form ref="form" :model="notice" :rules="rules" label-width="90px" id="selectForm">
+          <el-form-item label="公告名称:" size="mini" prop="noticeTitle">
+            <el-input v-model="notice.noticeTitle" placeholder="请输入公告名称" style="width: 510px"></el-input>
           </el-form-item>
 
-          <el-form-item label="发布时间:" size="mini" prop="time">
-            <el-time-select placeholder="选择时间"> </el-time-select>
-          </el-form-item>
+          <el-form-item label="发布时间:" required>
+          <el-col :span="11">
+            <el-form-item prop="date1">
+              <el-date-picker type="date" placeholder="选择日期" v-model="notice.date1" style="width: 100%;"></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col class="line" :span="1.5">-</el-col>
+          <el-col :span="11">
+            <el-form-item prop="date2">
+              <el-time-picker placeholder="选择时间" v-model="notice.date2" style="width: 100%;"></el-time-picker>
+            </el-form-item>
+         </el-col>
+        </el-form-item>
 
           <el-form-item label="公告内容:" prop="content">
-            <quill-editor
-              class="ql-editor"
-              v-model="content"
-              ref="myQuillEditor"
-              :options="editorOption"
-            >
-            </quill-editor>
+            <editor v-model="notice.content" :min-height="192"/>
           </el-form-item>
+
+          <el-form-item>
+          <el-button type="primary" @click="submitForm('form')">提交</el-button>
+          <el-button @click="resetForm('form')">重置</el-button>
+        </el-form-item>
         </el-form>
       </div>
     </div>
@@ -37,85 +36,101 @@
 </template>
   
 <script>
-import Quill from "quill"; // 引入编辑器
-// 自定义字体大小
-const Size = Quill.import("attributors/style/size");
-Size.whitelist = ["10px", "12px", "16px", "18px", "20px", "30px", "32px"];
-Quill.register(Size, true);
-
-// 自定义字体类型
-var fonts = [
-  "SimSun",
-  "SimHei",
-  "Microsoft-YaHei",
-  "KaiTi",
-  "FangSong",
-  "Arial",
-  "sans-serif",
-];
-var Font = Quill.import("formats/font");
-Font.whitelist = fonts;
-Quill.register(Font, true);
+import { submitNotice } from '../../api/notice/notice.js'
 export default {
   data() {
     return {
-      
-      form: {
-        name: "",
+      notice: {
+        noticeTitle: '',
+        date1:'',
+        date2:'',
         content:"", 
-
+        cnt:1
       },
       rules: {
-        title: [{ required: true, message: "请输入公告名称", trigger: "blur" }],
-        time: [{ required: true, message: "请输入发布时间", trigger: "blur" }],
+        noticeTitle: [{ required: true, message: "请输入公告名称", trigger: "blur" }],
+        date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
+        date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
         content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
       },
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
-            ["blockquote", "code-block"], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
-            [{ script: "sub" }, { script: "super" }], // 上标/下标
-            [{ indent: "-1" }, { indent: "+1" }], // 缩进
-            [{ direction: "rtl" }], // 文本方向
-            [{ size: ["12px", false, "16px", "18px", "20px", "30px"] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            [
-              {
-                font: [
-                  false,
-                  "SimSun",
-                  "SimHei",
-                  "Microsoft-YaHei",
-                  "KaiTi",
-                  "FangSong",
-                  "Arial",
-                ],
-              },
-            ], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ["clean"], // 清除文本格式
-            ["link", "image", "video"], // 链接、图片、视频
-          ],
-          placeholder: "请输入正文",
-        },
-      },
-
-    };
+    }
   },
   mounted() {
-    console.log( "-****" , this.form.name);
-    console.log( "-****" , this.form.content);
+    console.log( "-****" , this.notice.noticeTitle);
+    console.log( "-****" , this.notice.date1);
+    console.log( "-****" , this.notice.date2);
+    console.log( "-****" , this.notice.content);
   },
+  methods: {
+      change(){
+        console.log(1);
+        this.cnt = this.cnt+ 1  
+        console.log(this.cnt);
+      },
+      onEditorChange() {
+      //内容改变事件
+        this.$emit("input", this.content);
+      },
+      submitForm(formName) {
+        console.log( "-****title" , this.notice.noticeTitle);
+        console.log( "-****date1" , this.notice.date1);
+        console.log( "-****date2" , this.notice.date2);
+        console.log( "-****content" , this.notice.content);
+        // console.log( "lxzhen-****content" , this.content);
+        var dateTime = this.notice.date1;
+          function add0(m){return m<10?'0'+m:m }
+            function format(shijianchuo)
+            {
+                var time = new Date(shijianchuo);
+                var y = time.getFullYear();
+                var m = time.getMonth()+1;
+                var d = time.getDate()+1;
+                var h = time.getHours()+1;
+                var mm = time.getMinutes()+1;
+                var s = time.getSeconds()+1;
+                return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
+            }
+           var date = format(dateTime);
+        console.log(date);
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            // alert('submit!');
+            submitNotice({
+              newsTitle:this.notice.noticeTitle,
+              newsContent:this.notice.content,
+              createTime:'1994-12-01 12:22:33',
+              updateTime:'1994-12-01 12:22:33',
+            })
+              .then((res) => {
+                console.log(res);
+                // 添加成功
+                this.$notice({
+                  notice:"公告添加成功！",
+                  type:"success",
+                });
+                this.$refs[notice].resetFields();//添加成功后清空
+                this.$router.push('/notice/noticeList')//跳转
+              })
+              // 失败
+              .catch((err) => {
+                console.log(err);
+              });
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+        
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+    }
 };
 </script>
 
 <style scoped>
-.background {
+.notice-add {
   width: 750px;
   height: 100%;
   position: absolute;
@@ -127,7 +142,7 @@ export default {
   border: 1px solid #ccc;
   border-radius: 5px;
 }
-.content {
+.notice-add-box {
   width: 100%;
   height: 100%;
   padding: 35px;

src/views/notice/noticeList.vue

@@ -71,11 +71,12 @@
     </div>
     <!-- 分页 -->
     <div class="pageMenu">
-      <div id="dataNum">共0条</div>
+      <div id="dataNum">共{{ this.total }}条</div>
       <el-pagination
         background
         layout="prev, pager, next"
-        :total="total"
+        :total="this.total"
+        @current-change="handleCurrentChange"
         :page-size="pageSize"
       >
       </el-pagination>
@@ -187,32 +188,41 @@ export default {
       value1: "",
       tableData: [],
       mockNoticeList: [],
-      total: 0,
-      pageSize: 5,
-      totalNum: "",
+      total: 1,
+      pageSize: 10,
+      pageNum: 1,
       row_ : "1",
-      noticeTime_: "1"
+      noticeTime_: "1",
+      currentPageData: [],
+      currentPage: 1,
     };
   },
   mounted() {
     //获取总条目的id
-    this.totalNum = document.querySelector("#dataNum");
+    // this.totalNum = document.querySelector("#dataNum");
     this.getMockNoticeList();
     // this.getTableList();
   },
 
   methods: {
     getMockNoticeList() {
-      getNotice().then((res) => {
+      getNotice(this.pageNum).then((res) => {
         //获取数据
         this.tableData = res.rows;
-        console.log(res);
+        this.total = res.total
 
-        //获取数据总数
-        this.totalNum.innerHTML = `共：${res.rows.length}条`;
-        this.total = res.rows.length;
+        console.log(res);
+        console.log(res.rows)
       });
     },
+    //分页
+    handleCurrentChange(val) {
+      getNotice(val).then((res) => {
+        this.tableData = res.rows
+        this.total = res.total
+        // console.log(res)
+      })
+    },
     // 删除按钮
     deleteNotice(row) {
       console.log(row);

src/views/publisher/addPublisher.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>新建发行方</h1>
+</template>

src/views/publisher/publisherList.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="app">
+    <!-- 头部 -->
+    <div class="search-menu">
+      <div class="search-head">
+        <div>
+          <i id="search-head-text" class="el-icon-search"> 筛选搜索</i>
+        </div>
+        <div class="search-head-btn">
+          <el-button plain>重置</el-button>
+          <el-button type="primary">查询搜索</el-button>
+        </div>
+      </div>
+      <!-- 筛选发行方名称 -->
+      <div class="publisher-search">
+        <div class="publisher-name">发行方名称</div>
+        <div>
+          <el-input
+            class="search-input"
+            v-model="input"
+            placeholder="筛选发行方名称"
+          ></el-input>
+        </div>
+      </div>
+    </div>
+    <!-- 发行方列表 -->
+    <div class="publisher-list">
+      <i class="el-icon-tickets"> 发行方列表</i>
+      <el-button id="addBtn" size="small">添加</el-button>
+    </div>
+    <!-- 数据栏 -->
+    <div class="data-list">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="id" label="ID"> </el-table-column>
+        <el-table-column prop="headPortrait" label="头像"> </el-table-column>
+        <el-table-column prop="publisherName" label="发行方名称">
+        </el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <template >
+            <el-button size="mini" type="text">修改</el-button>
+            <el-popconfirm title="你确定删除本条消息吗？">
+              <el-button id="deleteBtn" size="mini" type="text" slot="reference"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页 -->
+    <div class="pageMenu">
+      <div id="dataNum">共{{ this.total }}条</div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+
+
+<script>
+export default {
+  data() {
+    return {
+      input: "",
+        tableData: [],
+      total: 10,
+      pageSize: 10,
+      pageNum: 1,
+      mockPublisher:[]
+    };
+  },
+  mounted(){
+    this.getMockPublisher();
+    this.getTableList();
+  },
+  methods: {
+    getMockPublisher() {
+      var Mock = require("mockjs");
+      var data = Mock.mock({
+        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
+        "list|1-10": [
+          {
+            // 属性 id 是一个自增数，起始值为 1，每次增 1
+            "id|+1": 1,
+            headPortrait:'@word(3, 5)',
+            publisherName:'@word(5, 10)',
+          },
+        ],
+      });
+      this.mockPublisher = data;
+    },
+    //获取数据
+    getTableList(){
+      this.tableData = this.mockPublisher.list;
+    }
+  },
+};
+</script>
+
+
+
+<style scoped>
+.search-menu {
+  /* background: red; */
+  width: 1250px;
+  height: 150px;
+  margin: 0 auto;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 30px;
+}
+.search-head {
+  display: flex;
+  justify-content: space-between;
+}
+#search-head-text {
+  margin-top: 20px;
+  margin-left: 20px;
+  font-family: PingFang SC;
+  font-size: 15px;
+}
+.search-head-btn {
+  margin-top: 20px;
+  margin-right: 20px;
+}
+.publisher-search {
+  display: flex;
+  margin-left: 58px;
+}
+.publisher-name {
+  font-size: 13px;
+  font-family: PingFang SC;
+  color: #333333;
+  margin-top: 8px;
+  margin-right: 5px;
+}
+.search-input {
+  width: 200px;
+}
+
+.publisher-list {
+  width: 1250px;
+  height: 50px;
+  margin: 0 auto;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 30px;
+  line-height: 17px;
+  display: flex;
+  justify-content: space-between;
+}
+.el-icon-tickets {
+  margin-top: 17px;
+  margin-left: 20px;
+  font-family: PingFang SC;
+  font-size: 15px;
+}
+#addBtn {
+  width: 60px;
+  height: 30px;
+  margin-top: 10px;
+  margin-right: 32px;
+}
+.data-list {
+  width: 1250px;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.data-table {
+  margin: 0 auto;
+}
+#deleteBtn {
+  margin-left: 10px;
+}
+.pageMenu {
+  width: 1283px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+#dataNum {
+  font-size: 13px;
+  font-family: PingFang SC;
+  margin-top: 7px;
+  margin-right: 5px;
+}
+</style>