地址&点赞

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

@@ -95,6 +95,22 @@ const routes = [
                         meta: {
                             title: '粉丝'
                         }
+                    },
+                    {
+                        path: '/address',
+                        name: 'address',
+                        component: () => import('../views/user/Address.vue'),
+                        meta: {
+                            title: '地址管理'
+                        }
+                    },
+                    {
+                        path: '/give',
+                        name: 'give',
+                        component: () => import('../views/user/Give.vue'),
+                        meta: {
+                            title: '我赞过的'
+                        }
                     }
                 ]
             },

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

@@ -0,0 +1,45 @@
+<template>
+    <div class="container">
+        <template>
+            <el-table :data="tableData" :border="false" :highlight-current-row="false" style="width: 100%">
+                <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="address" label="所在地区" width="220"> </el-table-column>
+                <el-table-column prop="address" label="详情地址" width="220"> </el-table-column>
+                <el-table-column prop="address" label="操作"> </el-table-column>
+            </el-table>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tableData: [
+                {
+                    name: '王小虎',
+                    phone: '1774639714',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }
+            ]
+        };
+    },
+    computed: {},
+    methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-table__header {
+    background: #1c1e26 !important;
+}
+/deep/ .el-table__row {
+    background: #1c1e26 !important;
+    .cell {
+        color: #ffffff;
+    }
+}
+.container {
+}
+</style>

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

@@ -0,0 +1,319 @@
+<template>
+    <div class="container">
+        <div class="top">
+            <el-radio-group class="menu" v-model="type" size="normal">
+                <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
+                    <div class="radio-item">
+                        <i class="font_family" :class="[item.icon]"></i>
+                        <span>{{ item.label }}</span>
+                    </div>
+                </el-radio-button>
+            </el-radio-group>
+            <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" style="margin: 30px 0"></div>
+
+        <div class="list" v-loading="fetchingData">
+            <collection-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></collection-info>
+
+            <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
+        </div>
+
+        <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 CollectionInfo from '../../components/CollectionInfo.vue';
+import pageableTable from '../../mixins/pageableTable';
+export default {
+    components: { CollectionInfo },
+    data() {
+        return {
+            typeList: [
+                {
+                    label: '全部',
+                    value: ''
+                },
+                {
+                    label: '藏品类',
+                    value: 'DEFAULT'
+                },
+                {
+                    label: '盲盒类',
+                    value: 'BLIND_BOX'
+                }
+            ],
+            search: '',
+            type: '',
+            url: '/collection/all',
+            list: []
+        };
+    },
+    mixins: [pageableTable],
+    watch: {
+        type() {
+            this.$router
+                .replace({
+                    query: {
+                        ...this.$route.query,
+                        type: this.type
+                    }
+                })
+                .catch(() => {});
+            this.getData();
+        }
+    },
+    methods: {
+        beforeGetData() {
+            return {
+                search: this.search,
+                query: {
+                    type: this.type
+                }
+            };
+        },
+        setList(list) {
+            this.list = list;
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.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;
+        }
+    }
+}
+.top {
+    .flex();
+    justify-content: space-between;
+}
+.border {
+    height: 1px;
+    background: #494a4d;
+    border-radius: 1px;
+}
+.container {
+    padding: 30px 16px;
+    .title {
+        height: 42px;
+        font-size: 32px;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+        font-family: ZhenyanGB;
+    }
+
+    .content {
+        width: 276px;
+        .line(@radius:8px);
+        display: inline-block;
+        margin: 16px;
+        .imgBox {
+            height: 160px;
+            width: 100%;
+            border-radius: 8px 8px 0px 0px;
+        }
+        .img {
+            padding: 5px;
+            width: 88px;
+            height: 88px;
+            background: #ffffff;
+            border-radius: 65px;
+            position: absolute;
+            top: 100px;
+            right: 90px;
+        }
+        .text {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .name {
+                height: 24px;
+                font-size: 16px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+                margin-top: 50px;
+                padding-right: 6px;
+                &.name1 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #949699;
+                    line-height: 24px;
+                    margin-top: 0;
+                }
+            }
+            .img1 {
+                width: 18px;
+                height: 18px;
+                margin-top: 50px;
+                &.img2 {
+                    margin-top: 0;
+                }
+            }
+        }
+        .introduce {
+            margin: 10px 16px 16px;
+            height: 60px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 20px;
+            .ellipsis-line(3);
+        }
+        .fans {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 16px 20px;
+            .followers {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+            .text3 {
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .text4 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+            }
+            .follow {
+                width: 70px;
+                height: 26px;
+                color: #00ffcb;
+                font-size: 14px;
+                border-radius: 16px;
+                border: 1px solid;
+                text-align: center;
+                line-height: 26px;
+            }
+        }
+    }
+}
+
+/deep/.menu {
+    .el-radio-button__inner {
+        border-color: #949699;
+        background-color: transparent;
+        color: #949699;
+        width: 140px;
+    }
+    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+        // background: linear-gradient(41deg, #fdfb60 0%, #ff8f3e 100%);
+        background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
+        color: #fff;
+        border-color: #fff;
+    }
+    .el-radio-button {
+        &:last-child {
+            .el-radio-button__inner {
+                border-radius: 0 8px 8px 0;
+            }
+        }
+        &:first-child {
+            .el-radio-button__inner {
+                border-radius: 8px 0 0 8px;
+            }
+        }
+    }
+}
+
+.list {
+    margin: -16px -16px;
+    min-height: 800px;
+    display: flex;
+    justify-content: space-between;
+    .content {
+        margin: 16px;
+    }
+}
+
+.radio-item {
+    .flex();
+    justify-content: center;
+    font-size: 16px;
+
+    .font_family {
+        font-size: 20px;
+        margin-right: 6px;
+    }
+}
+
+.pagination-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 80px auto;
+
+    /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;
+            }
+        }
+    }
+}
+
+.search-list {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .select {
+        /deep/.el-input__inner {
+            background-color: transparent;
+            color: #fff;
+        }
+    }
+}
+</style>

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

@@ -15,8 +15,8 @@
                         <span>用户信息</span>
                     </template>
                     <el-menu-item index="/accountdata">资料与账号</el-menu-item>
-                    <el-menu-item index="1-2">地址管理</el-menu-item>
-                    <el-menu-item index="1-3">我赞过的</el-menu-item>
+                    <el-menu-item index="/address">地址管理</el-menu-item>
+                    <el-menu-item index="give">我赞过的</el-menu-item>
                 </el-submenu>
                 <el-submenu index="2">
                     <template slot="title">