藏品室

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip/
+VUE_APP_BASE_URL=https://www.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/views/Store.vue

@@ -105,7 +105,13 @@
                                 : ''
                     }"
                 >
-                    <asset-info :info="asset" v-for="asset in item" :key="asset.id"></asset-info>
+                    <asset-info
+                        :info="asset"
+                        v-for="(asset, assetIndex) in item"
+                        :key="assetIndex"
+                        :num="asset.num"
+                        @showMore="showMore"
+                    ></asset-info>
                 </div>
             </template>
 
@@ -132,12 +138,17 @@
 
     <van-overlay :show="show" :lock-scroll="false" @click="show = false" z-index="99">
         <div class="wrapper" @click.stop>
-            <div class="wrapper-title">京明孝陵第27届国际梅花节纪念数字徽章</div>
+            <div class="wrapper-title">{{ moreTitle }}</div>
             <div class="wrapper-box">
-                <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getList">
-                    <template v-for="(item, index) in showList" :key="index">
-                        <asset-info-se :info="asset" v-for="asset in item" :key="asset.id"></asset-info-se>
-                    </template>
+                <van-list
+                    v-model:loading="assetLoading"
+                    :finished="assetFinished"
+                    :immediate-check="false"
+                    finished-text=""
+                    loading-text="加载中..."
+                    @load="getMoreList"
+                >
+                    <asset-info-se :info="asset" v-for="asset in assetList" :key="asset.id"></asset-info-se>
                 </van-list>
             </div>
             <img src="@assets/icon_fenxiang_close.png" @click="show = false" alt="" class="wrapper-close" />
@@ -181,7 +192,12 @@ export default {
             scrollTop: 0,
             sortDes: '',
             showRoom: false,
-            show: false
+            show: false,
+            moreTitle: '',
+            assetLoading: false,
+            assetFinished: false,
+            assetPage: 0,
+            assetList: []
         };
     },
     computed: {
@@ -303,7 +319,22 @@ export default {
             }
         },
         sort() {
-            return 'createdAt,desc';
+            if (this.active == 'explore') {
+                return 'assetId,desc';
+            } else {
+                return 'createdAt,desc';
+            }
+        },
+        url() {
+            if (this.active === 'coupon') {
+                return '/userCoupon/all';
+            } else if (this.active === 'showRoom') {
+                return '/showroom/all';
+            } else if (this.active === 'explore') {
+                return '/assetSuperimposition/all';
+            } else {
+                return 'asset/all';
+            }
         },
         status() {
             if (this.active === 'explore') {
@@ -328,10 +359,37 @@ export default {
             console.log(info);
             let list = [...this.list];
             list.forEach((item, index) => {
+                if (item.id === info.id || item.assetId === info.id) {
+                    list[index] = {
+                        ...item,
+                        ...info,
+                        num: item.num,
+                        id: item.id,
+                        assetId: item.assetId
+                    };
+                    if (info.status === 'DESTROYED') {
+                        list.splice(index, 1);
+                    }
+                }
+            });
+            this.list = list;
+
+            let assetList = [...this.assetList];
+            assetList.forEach((item, index) => {
                 if (item.id === info.id) {
-                    list[index] = info;
+                    assetList[index] = info;
+                    if (info.status === 'DESTROYED') {
+                        assetList.splice(index, 1);
+                    }
                 }
             });
+            this.assetList = assetList;
+            // let list = [...this.list];
+            // list.forEach((item, index) => {
+            //     if (item.id === info.id) {
+            //         list[index] = info;
+            //     }
+            // });
 
             this.list = list.filter(item => {
                 return item.status !== 'DESTROYED';
@@ -386,6 +444,50 @@ export default {
         });
     },
     methods: {
+        showMore(asset) {
+            console.log(asset);
+
+            this.moreTitle = asset.prefixName;
+            this.show = true;
+            this.assetLoading = true;
+            this.getMoreList(true);
+            //
+        },
+        getMoreList(init = false) {
+            if (init) {
+                this.assetList = [];
+                this.assetPage = 0;
+            }
+            this.assetLoading = true;
+            this.assetFinished = false;
+            return this.$http
+                .post(
+                    '/asset/all',
+                    {
+                        page: this.assetPage,
+                        size: 20,
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            status: this.status,
+                            prefixName: this.moreTitle
+                        }
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    if (res.first) {
+                        this.assetList = res.content;
+                    } else {
+                        this.assetList = [...this.assetList, ...res.content];
+                    }
+                    this.assetLoading = false;
+                    this.assetFinished = res.last;
+                    if (!this.assetFinished) {
+                        this.assetPage = this.assetPage + 1;
+                    }
+                    return Promise.resolve();
+                });
+        },
         getList() {
             if (!this.isLogin) {
                 this.empty = true;
@@ -407,36 +509,32 @@ export default {
                     ...this.beforeQuery()
                 }
             };
-            return this.$http
-                .post(
-                    this.active === 'coupon'
-                        ? '/userCoupon/all'
-                        : this.active === 'showRoom'
-                        ? '/showroom/all'
-                        : '/asset/all',
-                    form,
-                    { body: 'json' }
-                )
-                .then(res => {
-                    if (res.first) {
-                        this.list = res.content;
-                    } else {
-                        this.list = [...this.list, ...res.content];
-                    }
-                    this.empty = res.empty && res.first;
-                    this.loading = false;
-                    this.finished = res.last;
-                    if (!this.finished) {
-                        this.page = this.page + 1;
-                    }
-                });
+            return this.$http.post(this.url, form, { body: 'json' }).then(res => {
+                // if (this.active === 'coupon' || this.active === 'showRoom') {
+                if (res.first) {
+                    this.list = res.content;
+                } else {
+                    this.list = [...this.list, ...res.content];
+                }
+                this.empty = res.empty && res.first;
+                this.loading = false;
+                this.finished = res.last;
+                if (!this.finished) {
+                    this.page = this.page + 1;
+                }
+                // } else {
+                //     this.list = res;
+                //     this.empty = res.length === 0;
+                //     this.loading = false;
+                //     this.finished = true;
+                // }
+            });
         },
         beforeQuery() {
             let form = {};
             if (this.active == 'explore') {
                 form = {
-                    status: this.status,
-                    type: 'BLIND_BOX,DEFAULT'
+                    status: this.status
                 };
                 if (this.type === 'NORMAL') {
                     form = {
@@ -672,6 +770,7 @@ export default {
     overflow: auto;
     .van-list {
         padding: 12px 8px;
+        min-height: 364px;
     }
 }