详情

src/router/index.js

@@ -155,12 +155,13 @@ export const constantRoutes = [
         name: 'seriesList',
         meta: { title: '套系列表', icon: 'list' }
       },
-      // {
-      //   path: 'collectionList',
-      //   component: () => import('@/views/collectionList/collectionList'),
-      //   name: 'collectionList',
-      //   meta: { title: '藏品列表', icon: 'list' }
-      // },
+      {
+        path: 'collectionList',
+        component: () => import('@/views/collection/collectionList'),
+        name: 'collectionList',
+        meta: { title: '藏品列表', icon: 'list' },
+        hidden:true
+      },
       {
         path: 'addCollection',
         component: () => import('@/views/collection/addCollection'),

src/views/collection/collectionDetails.vue

@@ -57,7 +57,7 @@ export default {
 
 .collectionDetails {
   width: 1100px;
-  height: 4000px;
+  height: 2000px;
   /* background: red; */
   margin: 50px auto;
   border: 1px solid #ebeef5;

src/views/collection/collectionList.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <!-- 藏品列表 -->
+    <div class="notice-list">
+      <i class="el-icon-tickets"> 藏品列表</i>
+    </div>
+
+
+    <!-- 数据栏 -->
+    <div class="list-data">
+      <el-table border="true" :data="tableData" style="width: 100%">
+          <el-table-column
+            align="center"
+            label="ID"
+            width="100"
+            prop="noticeId">
+            <template slot-scope="scope">
+              <span >{{ scope.row.id }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            align="center"
+            label="藏品名称"
+            width="200">
+            <template slot-scope="scope">
+              <span >{{ scope.row.name }}</span>
+            </template>
+          </el-table-column>
+
+        
+
+          <el-table-column
+            align="center"
+            label="售卖时间"
+            width="200">
+            <template slot-scope="scope">
+            
+              <span >{{ scope.row.time }}</span>
+            </template>
+          </el-table-column> 
+
+          <el-table-column
+            align="center"
+            label="藏品价格(￥)"
+            width="200">
+            <template slot-scope="scope">
+              <span >{{ scope.row.price }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            align="center"
+            label="藏品状态"
+            width="200">
+            <template slot-scope="scope">
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.state }}</el-tag>
+                </div>
+            
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            align="center"
+            label="数量(份)"
+            width="198">
+            <template slot-scope="scope">
+              <span >{{ scope.row.num }}</span>
+            </template>
+          </el-table-column>
+
+
+
+
+          <el-table-column
+            align="center"
+            label="操作"
+            width="200">
+            <template>
+              <div>
+                <el-button
+                type="text"
+                size="small" 
+                @click="CollectionDetails">
+                藏品详情
+              </el-button>
+              </div>
+            </template>
+          </el-table-column>
+      </el-table>
+      
+    </div>
+    <div class="bottom">
+      <div class="bottom-page">
+        <el-pagination layout="prev, pager, next" :total="this.total" @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+      <span class="bottom-number">共2条 </span>
+    </div>
+
+   
+    
+  </div>
+</template>
+<script>
+import CollectionDetails from './collectionDetails.vue';
+
+  export default{
+    data(){
+      return{
+        tableData: [
+        
+        {
+          id:62,
+          name: '返佣1',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          price:0.1,
+          state:'已售空',
+          num: 500,
+          
+        },
+        {
+          id:63,
+          name: '返佣2',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          price:2,
+          state:'正在售卖',
+          num: 2,
+          
+        },
+      ]
+      }
+    },
+    methods: {
+      //藏品详情点击跳转 
+
+      CollectionDetails(){
+        this.$router.push("./collectionDetails")
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+.notice-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;
+}
+.paging-button{
+  margin-left: 1100px;
+}
+.bottom-number {
+  padding-top: 5px;
+  color: #303133;
+  float: right;
+}
+
+.bottom-page {
+  float: right;
+}
+</style>

src/views/collection/seriesList.vue

@@ -44,7 +44,7 @@
       <span>套系列表 共有</span>
       <span  style="color: rgb(24, 144, 255);">{{ total1 }}</span>
       <span>条数据 </span>
-      <button type="button" class="el-button el-button--default el-button--small total-but-add">
+      <button type="button" class="el-button el-button--default el-button--small total-but-add" @click="add">
             <span>添加</span>
           </button>
     </div>
@@ -59,6 +59,7 @@
           </el-radio-group>
         </div>
       </div>
+
       <div class="list-data">
         <el-table
         border="true"
@@ -67,7 +68,8 @@
     <el-table-column
       align="center"
       label="ID"
-      width="100">
+      width="100"
+      prop="noticeId">
       <template slot-scope="scope">
         <span >{{ scope.row.id }}</span>
       </template>
@@ -125,7 +127,8 @@
         <div>
           <el-button
           type="text"
-          size="small">
+          size="small" 
+          @click="collectionlist">
           藏品列表
         </el-button>
         </div>
@@ -247,6 +250,15 @@
       };
     },
     methods: {
+      //藏品列表点击跳转 
+
+      collectionlist(){
+        this.$router.push("./collectionList")
+      },
+      add(){
+        this.$router.push("./addCollection")
+      }
+
     }
   };