|
|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <div class="discover">
|
|
|
+ <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
|
|
|
+ <van-search
|
|
|
+ ref="top"
|
|
|
+ shape="round"
|
|
|
+ v-model="search"
|
|
|
+ placeholder="请输入"
|
|
|
+ show-action
|
|
|
+ autofocus
|
|
|
+ :left-icon="require('../../assets/svgs/icon-sosuo.svg')"
|
|
|
+ @search="getSearch"
|
|
|
+ @cancel="$router.go(-1)"
|
|
|
+ />
|
|
|
+ </van-sticky>
|
|
|
+
|
|
|
+ <van-list
|
|
|
+ class="box-list"
|
|
|
+ v-model:loading="loading"
|
|
|
+ :immediate-check="false"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text=""
|
|
|
+ @load="getData"
|
|
|
+ >
|
|
|
+ <template v-for="(item, index) in list" :key="index">
|
|
|
+ <asset-info :info="item"></asset-info>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <van-empty v-if="empty" description="您还没有任何藏品哦~" />
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AssetInfo from '../../components/asset/assetInfo.vue';
|
|
|
+import asset from '../../mixins/asset';
|
|
|
+import list from '../../mixins/list';
|
|
|
+export default {
|
|
|
+ name: 'discover',
|
|
|
+ mixins: [asset, list],
|
|
|
+ inject: ['bar'],
|
|
|
+ components: {
|
|
|
+ AssetInfo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ active: 'explore',
|
|
|
+ stiky: null,
|
|
|
+ type: '',
|
|
|
+ empty: false,
|
|
|
+ list: [],
|
|
|
+ typeOptions: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ type: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '售卖',
|
|
|
+ type: 'ON_SALE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '仅展示',
|
|
|
+ type: 'NORMAL'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ search: '',
|
|
|
+ url: '/asset/all'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeData() {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ userId: this.$store.state.userInfo.id
|
|
|
+ },
|
|
|
+ search: this.search
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getSearch(search) {
|
|
|
+ this.search = search;
|
|
|
+ this.getData(true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.top {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 16px;
|
|
|
+ background-color: @bg;
|
|
|
+ .top-btn {
|
|
|
+ flex-grow: 1;
|
|
|
+ .btn {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: ZhenyanGB;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: text-bottom;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: @prim;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn + .btn {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.select {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 9px;
|
|
|
+ color: #939599 !important;
|
|
|
+ min-width: 96px;
|
|
|
+}
|
|
|
+// /deep/.van-sticky {
|
|
|
+// position: relative;
|
|
|
+// }
|
|
|
+
|
|
|
+.discover {
|
|
|
+ background-color: @bg3;
|
|
|
+ min-height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .mySwiper {
|
|
|
+ width: calc(100vw - 32px);
|
|
|
+ height: calc(41vw - 13px);
|
|
|
+
|
|
|
+ .swiper-pagination {
|
|
|
+ bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination-bullet {
|
|
|
+ width: 6px;
|
|
|
+ height: 2px;
|
|
|
+ border-radius: 1px;
|
|
|
+ background: #d7d7d7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination-bullet-active {
|
|
|
+ background: @prim;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+ /* Center slide text vertically */
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -ms-flex-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.grid-img {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.van-grid {
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+/deep/ .van-grid-item__content {
|
|
|
+ padding: 14px 20px 16px;
|
|
|
+}
|
|
|
+/deep/ .van-grid-item__text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 18px;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ padding: 16px 20px 8px;
|
|
|
+ color: @prim;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.box-list {
|
|
|
+ // display: flex;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ padding: 8px 8px 100px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.van-tab {
|
|
|
+ color: #fff;
|
|
|
+ flex-grow: 0;
|
|
|
+ padding: 0 0 0 0;
|
|
|
+ margin-right: 30px;
|
|
|
+
|
|
|
+ &.van-tab--active {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.van-tabs__nav {
|
|
|
+ padding-left: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .van-tabs__line {
|
|
|
+ bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.van-action-sheet__description::after {
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+}
|
|
|
+</style>
|