post-ui/src/views/sets/collectionList.vue

<template>
  <div>
    <div class="header">
      <el-row :style="{ margin: '12px' }">
        <el-col :span="22">
          <i class="el-icon-search"></i>
          <span :style="{ padding: '4px' }">藏品列表</span>
         
        </el-col>
        <el-col :span="2">
          <el-button @click="addcollist" >添加藏品</el-button>
        </el-col>

      </el-row>
    </div>
    <div class="footer">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column label="id" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.collectionId }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="collectionTitle"
          label="藏品名称"
          width="220"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.collectionTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="showStart"
          label="售卖时间"
          width="280"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.showStart }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="colPrice"
          label="藏品价格"
          width="190"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.colPrice }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="status"
          label="藏品状态"
          width="220"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="colCount"
          label="数量"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.colCount }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="edit" label="操作" width="280" align="center">
          <el-row>
            <el-button type="text" @click="coldetails">藏品详情</el-button>
          </el-row>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="total, prev, pager, next"
        :total="total"
        id="page"
        :page-size="10"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { collecctionList } from "../../api/sets/index";
import { collectionList } from "../../api/collection/collection";
export default {
  data() {
    return {
      pageInfo: {
        // 分页信息
        pageNum: 1,
        pageSize: 10,
      },
      total: 1,
      tableData: [
        {
          collectionId:'1',
          collectionTitle:'这是第一个',
          showStart:'2023-02-12 03:42:08',
          colPrice:20,
          status:'在售卖',
          colCount:20,


        }
      ],
    };
  },
  mounted() {
    // this.getcollectionList();
    // this.init();
  },
  methods: {
    addcollist(){
      this.$router.push("./addcollections");
    },
    init() {
      let colList =this.$route.params.rows;
      console.log(colList);
      setTimeout(() => {
        collecctionList(colList.tetherId).then((res) => {
          console.log(res);
          this.total = res.total;
          this.tableData = res.rows;
        });
      }, 800);
    },
    coldetails() {
      this.$router.push("./collectionDetails");
    },
    // getcollectionList() {
    //   collecctionList().then((res) => {
    //     this.total = res.total;
    //     this.tableData = res.rows;
    //   });
    // },
    handleCurrentChange(newPage) {
      this.pageInfo.pageNum = newPage;
    },
  },
};
</script>
<style scoped>
.header {
  height: 60px;
  margin-top: 20px;
  margin: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.footer {
  width: 100%;
  display: inline-block;
  margin: 16px;
}
</style>