交易历史

src/main/pc-space/src/components/FansInfo.vue

@@ -37,8 +37,9 @@
 </template>
 <script>
 import user from '../mixins/user';
+import pageableTable from '../mixins/pageableTable';
 export default {
-    mixins: [user],
+    mixins: [user, pageableTable],
     props: {
         info: {
             type: Object,

src/main/pc-space/src/mixins/list.js

@@ -4,7 +4,10 @@ export default {
             empty: false,
             loading: false,
             finished: false,
-            page: 0
+            page: 0,
+            pageSize: 20,
+            totalPages: 0,
+            totalElements: 0
         };
     },
     methods: {
@@ -45,6 +48,26 @@ export default {
             });
             this.page = 1;
             this.getData();
+        },
+        onSortChange(e) {
+            this.sort = e;
+            this.getData();
+        },
+        onSizeChange(e) {
+            localStorage.setItem('pageSize', e);
+            this.page = 1;
+            this.pageSize = e;
+            this.getData();
+        },
+        onCurrentChange(e) {
+            this.$router.push({
+                query: {
+                    ...this.$route.query,
+                    page: e
+                }
+            });
+            this.page = e;
+            this.getData();
         }
     }
 };

src/main/pc-space/src/router/index.js

@@ -127,6 +127,14 @@ const routes = [
                         meta: {
                             title: '支付记录'
                         }
+                    },
+                    {
+                        path: '/transactionordes',
+                        name: 'transactionordes',
+                        component: () => import('../views/user/TransactionOrdes.vue'),
+                        meta: {
+                            title: '交易记录'
+                        }
                     }
                 ]
             },

src/main/pc-space/src/styles/common.less

@@ -39,7 +39,32 @@
     -webkit-line-clamp: @line;
     overflow: hidden;
 }
-
+.pagination(){
+     display: flex;
+     margin: 80px 375px;
+
+     /deep/.el-pagination {
+         button:disabled {
+             background-color: transparent;
+             color: #939599;
+         }
+
+         .btn-next,
+         .btn-prev {
+             background: transparent;
+             color: #939599;
+         }
+
+         .el-pager li {
+             background-color: transparent;
+             color: #939599;
+
+             &.active {
+                 color: @prim;
+             }
+         }
+     }
+}
 .min-height(@subHeight:462px, @screenHeight:969px) {
     min-height: calc(100vh - @subHeight);
     @media screen and (max-height: @screenHeight) {

src/main/pc-space/src/views/CollectionDetail.vue

@@ -179,9 +179,6 @@ export default {
     mixins: [product],
     data() {
         return {
-            showMore: false,
-            showMore1: false,
-            showMore2: false,
             tableData: [],
             info: {},
             blindBoxItems: [],

src/main/pc-space/src/views/user/Address.vue

@@ -12,10 +12,10 @@
                 :data="tableData"
                 :border="false"
                 :highlight-current-row="false"
-                style="width: 100%"
+                style="width: 100%; background: #1c1e26"
             >
-                <el-table-column prop="name" label="收货人" width="180"> </el-table-column>
-                <el-table-column prop="phone" label="联系电话" width="180"> </el-table-column>
+                <el-table-column prop="name" label="收货人" width="200"> </el-table-column>
+                <el-table-column prop="phone" label="联系电话" width="200"> </el-table-column>
                 <el-table-column prop="region" label="所在地区" width="220"> </el-table-column>
                 <el-table-column prop="address" label="详情地址" width="220"> </el-table-column>
                 <el-table-column fixed="right" label="操作" width="100">
@@ -29,6 +29,18 @@
             </el-table>
         </template>
         <address-info :show="show" @close="show = false" ref="address"></address-info>
+        <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>
 
@@ -95,7 +107,12 @@ export default {
         color: #ffffff;
     }
 }
-
+/deep/ .el-table__empty-text {
+    padding-top: 150px;
+}
+.pagination-wrapper {
+    .pagination();
+}
 .container {
     padding: 45px 16px 0;
 

src/main/pc-space/src/views/user/MyLikes.vue

@@ -28,7 +28,7 @@
                 :data="tableData"
                 :border="false"
                 :highlight-current-row="false"
-                style="width: 100%"
+                style="width: 100%; background: #1c1e26"
             >
                 <el-table-column prop="name" label="藏品信息" width="158"> </el-table-column>
                 <el-table-column prop="phone" label="卖家" width="104"> </el-table-column>
@@ -46,6 +46,18 @@
                 </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>
 
@@ -136,9 +148,15 @@ export default {
         color: #ffffff;
     }
 }
+/deep/ .el-table__empty-text {
+    padding-top: 150px;
+}
 /deep/ .el-table__empty-block {
     background: #1c1e26 !important;
 }
+.pagination-wrapper {
+    .pagination();
+}
 .search {
     background: #1a1a1a;
     width: 280px;
@@ -196,34 +214,11 @@ export default {
     }
 }
 .container {
-    padding: 45px 16px 0;
+    padding: 30px 16px 0;
 
     .top {
         .flex();
         justify-content: space-between;
-        .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;

src/main/pc-space/src/views/user/PayRecord.vue

@@ -0,0 +1,234 @@
+<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="158"> </el-table-column>
+                <el-table-column prop="phone" label="藏品信息" width="164"> </el-table-column>
+                <el-table-column style="color: #fdfb60" prop="price" label="金额" width="130"> </el-table-column>
+                <el-table-column prop="address" label="订单编号" width="190"> </el-table-column>
+                <el-table-column prop="time" label="支付时间" width="198"> </el-table-column>
+                <el-table-column fixed="right" label="操作">
+                    <template slot-scope="scope">
+                        <el-button @click="handleClick(scope.row)" style="color: red" type="text" size="small"
+                            >删除</el-button
+                        >
+                    </template>
+                </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
+                }
+            };
+        },
+        handleClick(row) {
+            this.$confirm('确定删除该订单吗？', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '退出',
+                type: 'warning'
+            }).then(() => {
+                this.$http.get('/order/del' + row.id).then(() => {
+                    this.getData();
+                    console.log('删除成功');
+                });
+            });
+        }
+    }
+};
+</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>

src/main/pc-space/src/views/user/Personal.vue

@@ -24,6 +24,8 @@
                         <span>交易信息</span>
                     </template>
                     <el-menu-item index="/mylikes">藏品订单</el-menu-item>
+                    <el-menu-item index="/payrecord">支付记录</el-menu-item>
+                    <el-menu-item index="/transactionordes">交易记录</el-menu-item>
                 </el-submenu>
                 <el-submenu index="3">
                     <template slot="title">
@@ -43,14 +45,7 @@ export default {
     data() {
         return {};
     },
-    methods: {
-        handleOpen(key, keyPath) {
-            console.log(key, keyPath);
-        },
-        handleClose(key, keyPath) {
-            console.log(key, keyPath);
-        }
-    }
+    methods: {}
 };
 </script>
 <style lang="less" scoped>

src/main/pc-space/src/views/user/TransactionOrdes.vue

@@ -0,0 +1,234 @@
+<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="158"> </el-table-column>
+                <el-table-column prop="phone" label="藏品信息" width="164"> </el-table-column>
+                <el-table-column style="color: #fdfb60" prop="price" label="来源" width="130"> </el-table-column>
+                <el-table-column prop="address" label="去向" width="190"> </el-table-column>
+                <el-table-column prop="time" label="交易时间" width="198"> </el-table-column>
+                <el-table-column fixed="right" label="操作">
+                    <template slot-scope="scope">
+                        <el-button @click="handleClick(scope.row)" style="color: red" type="text" size="small"
+                            >删除</el-button
+                        >
+                    </template>
+                </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
+                }
+            };
+        },
+        handleClick(row) {
+            this.$confirm('确定删除该订单吗？', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '退出',
+                type: 'warning'
+            }).then(() => {
+                this.$http.get('/order/del' + row.id).then(() => {
+                    this.getData();
+                    console.log('删除成功');
+                });
+            });
+        }
+    }
+};
+</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;
+}
+.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>