|
|
@@ -0,0 +1,216 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="top">
|
|
|
+ <div class="pay">价值证明</div>
|
|
|
+ <div class="search-list">
|
|
|
+ <el-input
|
|
|
+ class="search"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ placeholder="请输入您想找到的作品名称…"
|
|
|
+ v-model="search"
|
|
|
+ clearable
|
|
|
+ @change="onSearch"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <template>
|
|
|
+ <el-table
|
|
|
+ class="customer-table"
|
|
|
+ :header-cell-style="{ background: '#1c1e26' }"
|
|
|
+ :data="tableData"
|
|
|
+ :border="false"
|
|
|
+ :highlight-current-row="false"
|
|
|
+ style="width: 100%; background: #1c1e26"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="商品信息" width="178"> </el-table-column>
|
|
|
+ <el-table-column prop="id" label="订单编号" width="184"> </el-table-column>
|
|
|
+ <el-table-column style="color: #fdfb60" prop="payTime" label="交易时间" width="190"> </el-table-column>
|
|
|
+ <el-table-column prop="totalPrice" label="实际金额" width="140"> </el-table-column>
|
|
|
+ <el-table-column prop="payMethod" label="收益类型" width="140"> </el-table-column>
|
|
|
+ <el-table-column prop="right" label="收益金额"> </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ <div class="pagination-wrapper">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="onSizeChange"
|
|
|
+ @current-change="onCurrentChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="totalElements"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+import list from '../../mixins/list';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ url: '/order/all',
|
|
|
+ search: '',
|
|
|
+ list: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo'])
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ this.tableData = this.list;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeData() {
|
|
|
+ return {
|
|
|
+ search: this.search,
|
|
|
+ query: {
|
|
|
+ userId: this.userInfo.id
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/ .el-table__header {
|
|
|
+ background: #1c1e26 !important;
|
|
|
+}
|
|
|
+/deep/ .el-table__row {
|
|
|
+ background: #1c1e26 !important;
|
|
|
+ .cell {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-table__empty-block {
|
|
|
+ background: #1c1e26 !important;
|
|
|
+}
|
|
|
+/deep/ .el-table__empty-text {
|
|
|
+ padding-top: 150px !important;
|
|
|
+}
|
|
|
+.pagination-wrapper {
|
|
|
+ .pagination();
|
|
|
+}
|
|
|
+.search {
|
|
|
+ background: #1a1a1a;
|
|
|
+ width: 280px;
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ border: 1px solid #898989;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ &:focus {
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-empty {
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.search-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .select {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.container {
|
|
|
+ padding: 45px 16px 0;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .pay {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ width: 106px;
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #939599;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 26px !important;
|
|
|
+ height: 26px !important;
|
|
|
+ // font-size: 16px;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ height: 1px;
|
|
|
+ background: #494a4d;
|
|
|
+ border-radius: 1px;
|
|
|
+ margin: 24px 0 34px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.customer-table th {
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+.customer-table td,
|
|
|
+.customer-table th.is-leaf {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+//表格最外边框
|
|
|
+.el-table--border,
|
|
|
+.el-table--group {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+// 头部边框
|
|
|
+.customer-table thead tr th.is-leaf {
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-right: none;
|
|
|
+}
|
|
|
+.customer-table thead tr th:nth-last-of-type(2) {
|
|
|
+ border-right: 1px solid #ebeef5;
|
|
|
+}
|
|
|
+// 表格最外层边框-底部边框
|
|
|
+.el-table--border::after,
|
|
|
+.el-table--group::after {
|
|
|
+ width: 0;
|
|
|
+}
|
|
|
+.customer-table::before {
|
|
|
+ width: 0;
|
|
|
+}
|
|
|
+.customer-table .el-table__fixed-right::before,
|
|
|
+.el-table__fixed::before {
|
|
|
+ width: 0;
|
|
|
+}
|
|
|
+//表格有滚动时表格头边框
|
|
|
+.el-table--border th.gutter:last-of-type {
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-left: none;
|
|
|
+}
|
|
|
+</style>
|
