折叠

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://www.raex.vip/
+VUE_APP_BASE_URL=https://test.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: {
@@ -305,6 +321,17 @@ export default {
         sort() {
             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') {
                 if (this.type === 'paimai') {
@@ -327,13 +354,66 @@ export default {
         this.emitter.on('updateList', info => {
             console.log(info);
             let list = [...this.list];
-            list.forEach((item, index) => {
-                if (item.id === info.id) {
-                    list[index] = info;
-                }
-            });
+            let assetList = [...this.assetList];
+            if (assetList.length == 1) {
+                this.show = false;
+            }
+            if (!this.show) {
+                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;
+            }
 
-            this.list = list.filter(item => {
+            if (assetList.length > 1) {
+                assetList.forEach((item, index) => {
+                    if (item.id === info.id) {
+                        assetList[index] = info;
+                        if (info.status === 'DESTROYED') {
+                            assetList.splice(index, 1);
+                            let _index = [...this.list].findIndex(item => {
+                                return item.prefixName === this.moreTitle;
+                            });
+                            let _info = {};
+                            if (_index !== -1) {
+                                _info = { ...this.list[_index] };
+                                _info.num = _info.num - 1;
+                            }
+                            if (index === 0) {
+                                _info = {
+                                    ..._info,
+                                    ...assetList[0],
+                                    num: _info.num,
+                                    id: _info.id,
+                                    assetId: assetList[0].id
+                                };
+                            }
+                            this.list[_index] = _info;
+                        }
+                    }
+                });
+                this.assetList = assetList;
+            }
+
+            // let list = [...this.list];
+            // list.forEach((item, index) => {
+            //     if (item.id === info.id) {
+            //         list[index] = info;
+            //     }
+            // });
+
+            this.list = [...this.list].filter(item => {
                 return item.status !== 'DESTROYED';
             });
             this.$toast.clear();
@@ -386,6 +466,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 +531,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 = {
@@ -663,7 +783,7 @@ export default {
 }
 
 .wrapper-box {
-    width: 314px;
+    width: 306px;
     height: 394px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 16px;
@@ -672,6 +792,7 @@ export default {
     overflow: auto;
     .van-list {
         padding: 12px 8px;
+        min-height: 364px;
     }
 }
 
@@ -698,4 +819,4 @@ export default {
         margin-top: 10vh;
     }
 }
-</style>
+</style>