收藏品组件&列表

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

@@ -0,0 +1,189 @@
+<template>
+    <router-link
+        :to="{
+            path: '/storeDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="content"
+    >
+        <el-image class="imgBox" :src="getImg(changeImgs(info.pics))" fit="cover"></el-image>
+
+        <div class="introduce">{{ info.name }}</div>
+        <div class="price">
+            <img class="img1" src="../assets/img/icon_jiage@3x.png" alt="" />
+            <div class="num">{{ info.price }}</div>
+            <!-- <div class="time" >
+                <div class="time1">抢购倒计时<span>1天 01:35:06</span></div>
+            </div> -->
+        </div>
+        <div class="border"></div>
+        <div class="fans">
+            <div class="text">
+                <div class="text1 name1">
+                    <img class="text2" :src="info.minterAvatar" alt="" />
+                    <div class="text3">{{ info.minter }}</div>
+                </div>
+                <div class="text1" v-if="info.ownerId">
+                    <img class="text2" :src="info.ownerAvatar" alt="" />
+                    <div class="text3">{{ info.owner }}</div>
+                </div>
+            </div>
+            <div class="text">
+                <div class="text1">
+                    <img class="text2 text4" src="../assets/img/icon-dianzan@3x.png" alt="" />
+                    <div class="text3">16</div>
+                </div>
+                <!-- <div class="text1" v-else>
+                    <img class="text2 text4" src="../assets/img/icon-yuyue@3x.png" alt="" />
+                    <div class="text3">预约</div>
+                </div> -->
+            </div>
+        </div>
+    </router-link>
+</template>
+
+<script>
+import product from '../mixins/product';
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    mixins: [product]
+};
+</script>
+<style lang="less" scoped>
+.content {
+    .line();
+    width: 276px;
+    height: 416px;
+    display: inline-block;
+    .imgBox {
+        height: 266px;
+        width: 100%;
+        border-radius: 8px 8px 0px 0px;
+    }
+
+    &:hover {
+        .imgBox {
+            position: relative;
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                background-color: fade(@warn, 70%);
+            }
+
+            &::after {
+                padding: 0 22px;
+                content: '立即购买';
+                line-height: 30px;
+                font-size: 16px;
+                color: #1a1a1a;
+                background: #ffffff;
+                border-radius: 16px;
+                border: 1px solid #ffffff;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+
+    .introduce {
+        padding: 10px 16px 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #939599;
+        line-height: 20px;
+    }
+    .price {
+        display: flex;
+        align-items: center;
+        // justify-content: space-between;
+        padding: 0 16px 16px;
+        .img1 {
+            width: 10px;
+            height: 11px;
+            margin-top: 10px;
+        }
+        .num {
+            font-size: 30px;
+            font-family: OSP-DIN, OSP;
+            font-weight: normal;
+            color: #00ffcb;
+            line-height: 30px;
+        }
+        .time {
+            display: flex;
+            margin-left: 24px;
+            .time1 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+            }
+            span {
+                font-size: 14px;
+                font-weight: 400;
+                color: #00ffcb;
+                line-height: 24px;
+                margin-left: 6px;
+            }
+        }
+    }
+    .border {
+        height: 1px;
+        background: #494a4d;
+        border-radius: 1px;
+        margin: 0 16px;
+    }
+    .fans {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 19px 16px 20px;
+        .text {
+            display: flex;
+            align-items: center;
+            .text1 {
+                display: flex;
+                align-items: center;
+                max-width: 70px;
+                overflow: hidden;
+                &.name1 {
+                    margin-right: 22px;
+                }
+                .text2 {
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    margin-right: 4px;
+                    flex-shrink: 0;
+                    &.text4 {
+                        width: 18px;
+                        height: 18px;
+                    }
+                }
+                .text3 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    .ellipsis();
+                    color: #939599;
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -134,6 +134,16 @@ export default {
             this.page = e;
             this.getData();
         },
+        onSearch() {
+            this.$router.push({
+                query: {
+                    ...this.$route.query,
+                    search: this.search
+                }
+            });
+            this.page = 1;
+            this.getData();
+        },
         adjustColumnWidth() {
             let canvas = document.createElement('canvas');
             let ctx = canvas.getContext('2d');

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

@@ -0,0 +1,44 @@
+export default {
+    data() {
+        return {
+            typeOptions: [
+                {
+                    label: '精选推荐',
+                    value: ''
+                },
+                {
+                    label: '原创系列',
+                    value: 'DEFAULT'
+                },
+                {
+                    label: '数字盲盒',
+                    value: 'BLIND_BOX'
+                },
+                {
+                    label: '拍卖系列',
+                    value: 'AUCTION'
+                }
+            ],
+            picsTypes: [
+                {
+                    label: '视频',
+                    value: 'video/mp4'
+                }
+            ]
+        };
+    },
+    methods: {
+        changeImgs(list = []) {
+            return list.map(item => {
+                if (item.type === 'video/mp4') {
+                    return item.thumb;
+                } else {
+                    return item.url;
+                }
+            });
+        },
+        isVideo(info = {}) {
+            return info.type === 'video/mp4';
+        }
+    }
+};

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

@@ -86,11 +86,12 @@ const router = new VueRouter({
             if (savedPosition) {
                 return savedPosition;
             }
+
+            return {
+                x: 0,
+                y: 0
+            };
         }
-        return {
-            x: 0,
-            y: 0
-        };
     }
 });
 

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

@@ -1,4 +1,4 @@
-@warn: #00684f;
+@warn: #0071FD;
 @success: #07c160;
 @danger: #ea2d2d;
 @prim: #00ffcb;

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

@@ -28,7 +28,7 @@
             placeholder="请输入您想找到的作者名称…"
             v-model="search"
             clearable
-            @change="getData"
+            @change="onSearch"
         >
         </el-input>
         <div class="list" v-loading="fetchingData">
@@ -64,7 +64,7 @@
                 </div>
             </router-link>
 
-            <el-empty v-if="empty" description="还没有该类型的开发者哦～"></el-empty>
+            <el-empty v-if="empty" description="还没有开发者哦～"></el-empty>
         </div>
 
         <div class="pagination-wrapper">

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

@@ -29,7 +29,7 @@
                 placeholder="请输入您想找到的作品名称…"
                 v-model="search"
                 clearable
-                @change="getData"
+                @change="onSearch"
             >
             </el-input>
             <el-select class="select" v-model="sortStr" placeholder="请选择">
@@ -39,37 +39,7 @@
         </div>
 
         <div class="list" v-loading="fetchingData">
-            <router-link
-                :to="{ path: '/castingDetail?id=' + item.id }"
-                class="content"
-                v-for="item in list"
-                :key="item.id"
-            >
-                <el-image
-                    class="imgBox"
-                    :src="item.bg || require('../assets/defaultBg.jpg')"
-                    fit="cover"
-                    :lazy="true"
-                ></el-image>
-                <img class="img" :src="item.avatar || require('../assets/img_default_photo.png')" alt="" />
-                <div class="text">
-                    <div class="name">{{ item.nickname }}</div>
-                    <img class="img1" src="../assets/img/renzheng_icon@3x.png" alt="" />
-                </div>
-                <div class="text">
-                    <div class="name name1">{{ item.id }}</div>
-                    <img class="img1 img2" src="../assets/img/copy_icon@3x.png" alt="" />
-                </div>
-                <div class="introduce">{{ item.intro || '该用户什么都没留下...' }}</div>
-                <div class="border"></div>
-                <div class="fans">
-                    <div class="followers">
-                        <div class="text3">{{ item.followers }}</div>
-                        <div class="text4">粉丝</div>
-                    </div>
-                    <div class="follow" @click.prevent="like(item)">{{ item.follow ? '已关注' : '关注' }}</div>
-                </div>
-            </router-link>
+            <collection-info v-for="item in list" :key="item.id" :info="item"></collection-info>
 
             <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
         </div>
@@ -89,8 +59,10 @@
     </div>
 </template>
 <script>
+import CollectionInfo from '../components/CollectionInfo.vue';
 import pageableTable from '../mixins/pageableTable';
 export default {
+    components: { CollectionInfo },
     data() {
         return {
             typeList: [