|
|
@@ -119,47 +119,57 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<template v-if="info.type === 'COMPANY_BOX'">
|
|
|
- <div
|
|
|
- class="imgs blindContent"
|
|
|
- v-for="(item, index) in assets"
|
|
|
- :key="index"
|
|
|
- :style="getStyle(item.length)"
|
|
|
- >
|
|
|
- <div class="icon blind" @click="goCollection(item)">
|
|
|
- <div class="img-box">
|
|
|
+ <div class="imgs blindContent" v-for="(item, index) in blindList" :key="index" :style="getStyle()">
|
|
|
+ <div class="icon blind" @click="goBlind(blindCollectionInfo)">
|
|
|
+ <div class="img-box" v-if="index === 0">
|
|
|
<van-image
|
|
|
- :src="item.pic"
|
|
|
+ :src="changeImgs(blindCollectionInfo.pic)"
|
|
|
:width="picWidth"
|
|
|
:height="picWidth"
|
|
|
fit="coevr"
|
|
|
radius="8"
|
|
|
/>
|
|
|
- <div class="icon-status" :class="{ status1: item.status === '仅展示' }">
|
|
|
- <span>{{ item.status }}</span>
|
|
|
- <span v-if="item.status === '寄售中'">¥{{ item.price }}</span>
|
|
|
+ <div class="icon-status status2">
|
|
|
+ <span v-if="isSoldOut">展示({{ blindBoxsNums }}份)</span>
|
|
|
+ <template v-else>
|
|
|
+ <span>{{ blindCollectionInfo.salable ? '售价:' : '仅展示' }}</span>
|
|
|
+ <span v-if="blindCollectionInfo.salable">¥{{ blindCollectionInfo.price }}</span>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
- <div class="boxs-text" v-if="isVertical && windowVertical">
|
|
|
+ <div class="boxs-text" v-if="isVertical && windowVertical && !isSoldOut">
|
|
|
<span>盲盒内含：</span>
|
|
|
- <span>{{ blindBoxs.length }}/{{ blindBoxsNums }}</span>
|
|
|
+ <span>{{ groupBlindNum[0] }}/{{ blindBoxsNums }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="boxs">
|
|
|
- <div class="boxs-text" v-if="!isVertical || !windowVertical">
|
|
|
+ <div class="boxs" :class="{ isFirst: index === 0 }">
|
|
|
+ <div class="boxs-text" v-if="(!isVertical || !windowVertical) && !isSoldOut">
|
|
|
<span>盲盒内含：</span>
|
|
|
- <span>{{ blindBoxs.length > 20 ? 20 : blindBoxs.length }}/{{ blindBoxsNums }}</span>
|
|
|
+ <span>{{ groupBlindNum[0] }}/{{ blindBoxsNums }}</span>
|
|
|
</div>
|
|
|
- <div class="blind-imgs" :style="getBlindStyle()">
|
|
|
- <van-image
|
|
|
+ <div
|
|
|
+ class="blind-imgs"
|
|
|
+ :class="{ blindImgs2: !isSoldOut }"
|
|
|
+ :style="getBlindStyle(index)"
|
|
|
+ >
|
|
|
+ <div
|
|
|
class="blind-img"
|
|
|
- v-for="img in blindBoxs"
|
|
|
+ v-for="img in item.imgs"
|
|
|
:key="img.id"
|
|
|
- :src="changeImgs(img.pic)"
|
|
|
- :width="blindWidth"
|
|
|
- :height="blindWidth"
|
|
|
- fit="cover"
|
|
|
- radius="4"
|
|
|
- />
|
|
|
+ @click.stop="goBlind(img)"
|
|
|
+ >
|
|
|
+ <van-image
|
|
|
+ :src="getImg(changeImgs(img.pic))"
|
|
|
+ :width="blindWidth"
|
|
|
+ :height="blindWidth"
|
|
|
+ fit="cover"
|
|
|
+ radius="4"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div v-if="isSoldOut" class="blind-price" :class="{ status1: img.salable }">
|
|
|
+ {{ img.salable ? `¥${img.price}` : '仅展示' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -322,7 +332,9 @@ export default {
|
|
|
collectionShow: false,
|
|
|
collectionInfo: {},
|
|
|
blindBoxs: [],
|
|
|
- blindBoxsNums: 0
|
|
|
+ blindBoxsNums: 0,
|
|
|
+ blindBoxItems: [],
|
|
|
+ blindCollectionInfo: {}
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -392,6 +404,78 @@ export default {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
+ },
|
|
|
+ isBlind() {
|
|
|
+ return this.info.type === 'COMPANY_BOX';
|
|
|
+ },
|
|
|
+ isSoldOut() {
|
|
|
+ if (this.isBlind) {
|
|
|
+ return (
|
|
|
+ this.blindCollectionInfo &&
|
|
|
+ !this.blindCollectionInfo.noSoldOut &&
|
|
|
+ this.blindCollectionInfo.salable &&
|
|
|
+ this.blindCollectionInfo.source === 'OFFICIAL'
|
|
|
+ );
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ groupBlindNum() {
|
|
|
+ if (!this.isVertical) {
|
|
|
+ return [18, 22];
|
|
|
+ } else if (!this.windowVertical) {
|
|
|
+ return [20, 24];
|
|
|
+ } else {
|
|
|
+ return [36, 42];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ blindList() {
|
|
|
+ let blindBoxs = [...this.blindBoxs];
|
|
|
+ let list = [];
|
|
|
+ list.push(blindBoxs.slice(0, 1 * this.groupBlindNum[0]));
|
|
|
+ let num = blindBoxs.length - this.groupBlindNum[0];
|
|
|
+ console.log(num);
|
|
|
+ if (num > 0 && this.isSoldOut) {
|
|
|
+ for (let i = 1; i <= Math.ceil(num / this.groupBlindNum[1]); i++) {
|
|
|
+ list.push(
|
|
|
+ blindBoxs.slice(
|
|
|
+ this.groupBlindNum[0] + (i - 1) * this.groupBlindNum[1],
|
|
|
+ this.groupBlindNum[0] + i * this.groupBlindNum[1]
|
|
|
+ )
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let _list = list.filter(item => {
|
|
|
+ return item.length > 0;
|
|
|
+ });
|
|
|
+ console.log(_list);
|
|
|
+
|
|
|
+ if (_list.length === 0) {
|
|
|
+ return [{ imgs: [], start: 0, end: 0 }];
|
|
|
+ } else {
|
|
|
+ let _returnList = [];
|
|
|
+ _list.map((item, index) => {
|
|
|
+ let start = index === 0 ? 1 : _returnList[index - 1].end + 1;
|
|
|
+ _returnList.push({
|
|
|
+ imgs: item,
|
|
|
+ start: start,
|
|
|
+ end: start + (item.length - 1)
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return _returnList;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ if (this.blindCollectionInfo.prefixName) {
|
|
|
+ return this.blindCollectionInfo.prefixName;
|
|
|
+ }
|
|
|
+ if (this.isSoldOut) {
|
|
|
+ let name = this.blindBoxItems.length > 0 ? this.blindBoxItems[0].name.split('#')[0] : '';
|
|
|
+ name = name.replace(/：/, '·');
|
|
|
+ name = name.replace(/:/, '·');
|
|
|
+ return name.split('·')[0];
|
|
|
+ }
|
|
|
+ return this.blindCollectionInfo.name;
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -429,15 +513,15 @@ export default {
|
|
|
this.show = true;
|
|
|
}
|
|
|
},
|
|
|
- getBlindStyle() {
|
|
|
+ getBlindStyle(index = 0) {
|
|
|
if (!this.isVertical) {
|
|
|
return {
|
|
|
width: 32 + 'vw',
|
|
|
- height: '146vw'
|
|
|
+ height: index === 0 ? '146vw' : '176vw'
|
|
|
};
|
|
|
} else if (!this.windowVertical) {
|
|
|
return {
|
|
|
- height: 32 + 'vh'
|
|
|
+ height: 29 + 'vh'
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
|
@@ -455,12 +539,12 @@ export default {
|
|
|
} else if (!this.windowVertical) {
|
|
|
return {
|
|
|
width: '210vh',
|
|
|
- paddingRight: '21vh'
|
|
|
+ paddingRight: '20.3vh'
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
|
width: '200vh',
|
|
|
- paddingRight: '23vh'
|
|
|
+ paddingRight: '20.5vh'
|
|
|
};
|
|
|
}
|
|
|
} else {
|
|
|
@@ -517,32 +601,43 @@ export default {
|
|
|
message: '加载中...',
|
|
|
forbidClick: true
|
|
|
});
|
|
|
- return this.$http
|
|
|
- .get('/showroom/get/' + this.roomId)
|
|
|
- .then(res => {
|
|
|
- this.$toast.clear();
|
|
|
- this.info = { name: '', ...res };
|
|
|
- // this.$nextTick(() => {
|
|
|
- // if (!this.isMine && res.type === 'COMPANY' && res.status !== 'SUCCESS') {
|
|
|
- // this.$dialog
|
|
|
- // .alert({
|
|
|
- // title: '提示',
|
|
|
- // message: '当前展厅正在审核中'
|
|
|
- // })
|
|
|
- // .then(() => {
|
|
|
- // this.backPage();
|
|
|
- // });
|
|
|
- // }
|
|
|
- // });
|
|
|
- this.assets =
|
|
|
- res.collections.map(item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- id: item.collectionId
|
|
|
- };
|
|
|
- }) || [];
|
|
|
- // this.assets = [...res.collections, ...res.collections, ...res.collections, ...res.collections];
|
|
|
- if (res.type === 'COMPANY_BOX') {
|
|
|
+ return this.$http.get('/showroom/get/' + this.roomId).then(res => {
|
|
|
+ this.$toast.clear();
|
|
|
+ this.info = { name: '', ...res };
|
|
|
+
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // if (!this.isMine && res.type === 'COMPANY' && res.status !== 'SUCCESS') {
|
|
|
+ // this.$dialog
|
|
|
+ // .alert({
|
|
|
+ // title: '提示',
|
|
|
+ // message: '当前展厅正在审核中'
|
|
|
+ // })
|
|
|
+ // .then(() => {
|
|
|
+ // this.backPage();
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.assets =
|
|
|
+ res.collections.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ id: item.collectionId
|
|
|
+ };
|
|
|
+ }) || [];
|
|
|
+ // this.assets = [...res.collections, ...res.collections, ...res.collections, ...res.collections];
|
|
|
+ if (res.type === 'COMPANY_BOX') {
|
|
|
+ this.getBlindInfo();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getBlindInfo() {
|
|
|
+ this.$toast.loading({
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true
|
|
|
+ });
|
|
|
+ if (this.assets.length > 0) {
|
|
|
+ this.goCollection(this.assets[0], false)
|
|
|
+ .then(() => {
|
|
|
return this.$http.post(
|
|
|
'/blindBoxItem/all',
|
|
|
{
|
|
|
@@ -553,17 +648,39 @@ export default {
|
|
|
},
|
|
|
{ body: 'json' }
|
|
|
);
|
|
|
- } else {
|
|
|
- return Promise.resolve(res);
|
|
|
- }
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- if (this.info.type === 'COMPANY_BOX') {
|
|
|
- console.log(res);
|
|
|
- this.blindBoxs = res.content;
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.blindBoxItems = res.content;
|
|
|
this.blindBoxsNums = res.totalElements;
|
|
|
- }
|
|
|
- });
|
|
|
+
|
|
|
+ if (this.isSoldOut) {
|
|
|
+ return this.$http.post(
|
|
|
+ '/collection/all',
|
|
|
+ {
|
|
|
+ query: {
|
|
|
+ source: 'TRANSFER'
|
|
|
+ },
|
|
|
+ // search: this.search,
|
|
|
+ sort: 'salable,desc;price,asc',
|
|
|
+ size: 9999
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return Promise.resolve();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.$toast.clear();
|
|
|
+ console.log(res);
|
|
|
+ if (this.isSoldOut) {
|
|
|
+ this.blindBoxs = res.content;
|
|
|
+ this.blindBoxsNums = res.totalElements;
|
|
|
+ } else {
|
|
|
+ this.blindBoxs = [...this.blindBoxItems];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
back() {
|
|
|
if (this.isMine && this.isEdit) {
|
|
|
@@ -662,11 +779,14 @@ export default {
|
|
|
this.$router.push('/hallEdit?message=' + encodeURIComponent(this.info.name || '') + '&type=name');
|
|
|
}
|
|
|
},
|
|
|
- goCollection(info) {
|
|
|
- console.log(info);
|
|
|
- this.$http.get('/collection/get/' + info.collectionId).then(res => {
|
|
|
- this.collectionInfo = res;
|
|
|
- this.collectionShow = true;
|
|
|
+ goCollection(info, show = true) {
|
|
|
+ return this.$http.get('/collection/get/' + info.collectionId).then(res => {
|
|
|
+ if (!show) {
|
|
|
+ this.blindCollectionInfo = res;
|
|
|
+ } else {
|
|
|
+ this.collectionInfo = res;
|
|
|
+ this.collectionShow = show;
|
|
|
+ }
|
|
|
});
|
|
|
// if (!this.isMine) {
|
|
|
// this.$router.push('/productDetail/' + info.collectionId);
|
|
|
@@ -682,6 +802,15 @@ export default {
|
|
|
} else {
|
|
|
this.$router.push('/productChoose');
|
|
|
}
|
|
|
+ },
|
|
|
+ goBlind(info) {
|
|
|
+ if (!this.isSoldOut) {
|
|
|
+ this.collectionInfo = { ...this.blindCollectionInfo };
|
|
|
+ this.collectionShow = true;
|
|
|
+ } else {
|
|
|
+ this.collectionInfo = { ...info };
|
|
|
+ this.collectionShow = true;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
beforeRouteLeave(to, from, next) {
|
|
|
@@ -860,6 +989,7 @@ export default {
|
|
|
position: relative;
|
|
|
&.blind {
|
|
|
width: 205vh;
|
|
|
+ justify-content: flex-start;
|
|
|
}
|
|
|
img {
|
|
|
width: 110px;
|
|
|
@@ -879,10 +1009,10 @@ export default {
|
|
|
}
|
|
|
.icon-status {
|
|
|
position: absolute;
|
|
|
- left: 6px;
|
|
|
- top: 6px;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
background: #ffffff;
|
|
|
- border-radius: 9px;
|
|
|
+ border-radius: 8px 0px 8px 0px;
|
|
|
z-index: 3;
|
|
|
padding: 0 8px;
|
|
|
line-height: 18px;
|
|
|
@@ -897,6 +1027,10 @@ export default {
|
|
|
&.status1 {
|
|
|
color: @text3;
|
|
|
}
|
|
|
+
|
|
|
+ &.status2 {
|
|
|
+ color: #3ab200;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -910,6 +1044,7 @@ export default {
|
|
|
align-items: flex-start !important;
|
|
|
.boxs {
|
|
|
padding-left: 5vh;
|
|
|
+ flex-grow: 1;
|
|
|
.boxs-text {
|
|
|
padding-right: 8vh;
|
|
|
}
|
|
|
@@ -921,13 +1056,33 @@ export default {
|
|
|
line-height: 10px;
|
|
|
.flex();
|
|
|
justify-content: space-between;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
.blind-imgs {
|
|
|
.flex();
|
|
|
flex-wrap: wrap;
|
|
|
overflow: hidden;
|
|
|
+ align-items: flex-start;
|
|
|
.blind-img {
|
|
|
margin: 0 5vh 2vh 0;
|
|
|
+ position: relative;
|
|
|
+ .blind-price {
|
|
|
+ padding: 4px;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 10px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px 0px 4px 0px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ &.status1 {
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1087,11 +1242,29 @@ export default {
|
|
|
align-items: center !important;
|
|
|
.boxs {
|
|
|
padding-left: 6vh;
|
|
|
+ .boxs-text {
|
|
|
+ padding-bottom: 3vh;
|
|
|
+ }
|
|
|
}
|
|
|
width: 210vh;
|
|
|
.blind-imgs {
|
|
|
.blind-img {
|
|
|
- margin: 5vh 5vh 0 0;
|
|
|
+ margin: 0 5vh 5vh 0;
|
|
|
+
|
|
|
+ .blind-price {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 10px;
|
|
|
+ position: absolute;
|
|
|
+ padding: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 11vh;
|
|
|
+ text-align: center;
|
|
|
+ background-color: transparent;
|
|
|
+ transform: scale(0.8);
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1199,7 +1372,9 @@ export default {
|
|
|
padding: 6vw 12px 0 12px !important;
|
|
|
align-items: center !important;
|
|
|
.boxs {
|
|
|
- padding-top: 5vw;
|
|
|
+ &.isFirst {
|
|
|
+ padding-top: 5vw;
|
|
|
+ }
|
|
|
padding-left: 0;
|
|
|
position: relative;
|
|
|
|
|
|
@@ -1215,8 +1390,31 @@ export default {
|
|
|
}
|
|
|
height: 196vw;
|
|
|
.blind-imgs {
|
|
|
+ justify-content: flex-end;
|
|
|
.blind-img {
|
|
|
- margin: 5vw 5vw 0 0;
|
|
|
+ margin: 5vw 0 0 5vw;
|
|
|
+
|
|
|
+ .blind-price {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 10px;
|
|
|
+ position: absolute;
|
|
|
+ left: -6px;
|
|
|
+ top: 0;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ background-color: transparent;
|
|
|
+ transform: scale(0.8) rotate(90deg);
|
|
|
+ margin-right: 2px;
|
|
|
+ transform-origin: left;
|
|
|
+ width: 11vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blindImgs2 {
|
|
|
+ .blind-img {
|
|
|
+ margin: 5vw 5vw 0 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
panhui