|
|
@@ -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>
|
