panhui 3 лет назад
Родитель
Сommit
232f576df5
3 измененных файлов с 281 добавлено и 85 удалено
  1. 1 1
      .prettierrc.js
  2. 3 5
      src/views/asset/Detail.vue
  3. 277 79
      src/views/hall/Detail.vue

+ 1 - 1
.prettierrc.js

@@ -4,4 +4,4 @@ module.exports = {
     tabWidth: 4,
     tabWidth: 4,
     arrowParens: 'avoid',
     arrowParens: 'avoid',
     trailingComma: 'none'
     trailingComma: 'none'
-}
+};

+ 3 - 5
src/views/asset/Detail.vue

@@ -46,9 +46,7 @@
                 <div class="flex1"></div>
                 <div class="flex1"></div>
 
 
                 <span class="text1" v-if="info.number">
                 <span class="text1" v-if="info.number">
-                    <div class="text1-top">
-                        编号
-                    </div>
+                    <div class="text1-top">编号</div>
                     <div class="text1-bottom">
                     <div class="text1-bottom">
                         {{ info.number }}
                         {{ info.number }}
                     </div>
                     </div>
@@ -166,7 +164,7 @@
                     <div class="prive" v-if="init.length > 0">
                     <div class="prive" v-if="init.length > 0">
                         <div class="prive1" :class="{ opened: item.opened }" v-for="(item, index) in init" :key="index">
                         <div class="prive1" :class="{ opened: item.opened }" v-for="(item, index) in init" :key="index">
                             <img v-if="!item.opened" class="img" :src="item.icon[0]" alt="" />
                             <img v-if="!item.opened" class="img" :src="item.icon[0]" alt="" />
-                            <div style="margin-top: 4px;" v-if="item.icon[2]">
+                            <div style="margin-top: 4px" v-if="item.icon[2]">
                                 <img v-if="item.opened" class="img" :src="item.icon[2]" alt="" />
                                 <img v-if="item.opened" class="img" :src="item.icon[2]" alt="" />
                             </div>
                             </div>
                             <!-- <img class="img" v-else :src="item.icon[0]" alt="" /> -->
                             <!-- <img class="img" v-else :src="item.icon[0]" alt="" /> -->
@@ -207,7 +205,7 @@
                             <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
                             <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
                         </div>
                         </div>
                     </div>
                     </div>
-                    <div v-else style="display: flex; justify-content: center;">暂无购买记录</div>
+                    <div v-else style="display: flex; justify-content: center">暂无购买记录</div>
                 </van-collapse-item>
                 </van-collapse-item>
             </van-collapse>
             </van-collapse>
 
 

+ 277 - 79
src/views/hall/Detail.vue

@@ -119,47 +119,57 @@
                     </div>
                     </div>
                 </div>
                 </div>
                 <template v-if="info.type === 'COMPANY_BOX'">
                 <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
                                 <van-image
-                                    :src="item.pic"
+                                    :src="changeImgs(blindCollectionInfo.pic)"
                                     :width="picWidth"
                                     :width="picWidth"
                                     :height="picWidth"
                                     :height="picWidth"
                                     fit="coevr"
                                     fit="coevr"
                                     radius="8"
                                     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>
-                                <div class="boxs-text" v-if="isVertical && windowVertical">
+                                <div class="boxs-text" v-if="isVertical && windowVertical && !isSoldOut">
                                     <span>盲盒内含:</span>
                                     <span>盲盒内含:</span>
-                                    <span>{{ blindBoxs.length }}/{{ blindBoxsNums }}</span>
+                                    <span>{{ groupBlindNum[0] }}/{{ blindBoxsNums }}</span>
                                 </div>
                                 </div>
                             </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>盲盒内含:</span>
-                                    <span>{{ blindBoxs.length > 20 ? 20 : blindBoxs.length }}/{{ blindBoxsNums }}</span>
+                                    <span>{{ groupBlindNum[0] }}/{{ blindBoxsNums }}</span>
                                 </div>
                                 </div>
-                                <div class="blind-imgs" :style="getBlindStyle()">
-                                    <van-image
+                                <div
+                                    class="blind-imgs"
+                                    :class="{ blindImgs2: !isSoldOut }"
+                                    :style="getBlindStyle(index)"
+                                >
+                                    <div
                                         class="blind-img"
                                         class="blind-img"
-                                        v-for="img in blindBoxs"
+                                        v-for="img in item.imgs"
                                         :key="img.id"
                                         :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>
                             </div>
                         </div>
                         </div>
@@ -322,7 +332,9 @@ export default {
             collectionShow: false,
             collectionShow: false,
             collectionInfo: {},
             collectionInfo: {},
             blindBoxs: [],
             blindBoxs: [],
-            blindBoxsNums: 0
+            blindBoxsNums: 0,
+            blindBoxItems: [],
+            blindCollectionInfo: {}
         };
         };
     },
     },
     computed: {
     computed: {
@@ -392,6 +404,78 @@ export default {
                 return true;
                 return true;
             }
             }
             return false;
             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() {
     mounted() {
@@ -429,15 +513,15 @@ export default {
                 this.show = true;
                 this.show = true;
             }
             }
         },
         },
-        getBlindStyle() {
+        getBlindStyle(index = 0) {
             if (!this.isVertical) {
             if (!this.isVertical) {
                 return {
                 return {
                     width: 32 + 'vw',
                     width: 32 + 'vw',
-                    height: '146vw'
+                    height: index === 0 ? '146vw' : '176vw'
                 };
                 };
             } else if (!this.windowVertical) {
             } else if (!this.windowVertical) {
                 return {
                 return {
-                    height: 32 + 'vh'
+                    height: 29 + 'vh'
                 };
                 };
             } else {
             } else {
                 return {
                 return {
@@ -455,12 +539,12 @@ export default {
                 } else if (!this.windowVertical) {
                 } else if (!this.windowVertical) {
                     return {
                     return {
                         width: '210vh',
                         width: '210vh',
-                        paddingRight: '21vh'
+                        paddingRight: '20.3vh'
                     };
                     };
                 } else {
                 } else {
                     return {
                     return {
                         width: '200vh',
                         width: '200vh',
-                        paddingRight: '23vh'
+                        paddingRight: '20.5vh'
                     };
                     };
                 }
                 }
             } else {
             } else {
@@ -517,32 +601,43 @@ export default {
                 message: '加载中...',
                 message: '加载中...',
                 forbidClick: true
                 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(
                         return this.$http.post(
                             '/blindBoxItem/all',
                             '/blindBoxItem/all',
                             {
                             {
@@ -553,17 +648,39 @@ export default {
                             },
                             },
                             { body: 'json' }
                             { 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;
                         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() {
         back() {
             if (this.isMine && this.isEdit) {
             if (this.isMine && this.isEdit) {
@@ -662,11 +779,14 @@ export default {
                 this.$router.push('/hallEdit?message=' + encodeURIComponent(this.info.name || '') + '&type=name');
                 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) {
             // if (!this.isMine) {
             //     this.$router.push('/productDetail/' + info.collectionId);
             //     this.$router.push('/productDetail/' + info.collectionId);
@@ -682,6 +802,15 @@ export default {
             } else {
             } else {
                 this.$router.push('/productChoose');
                 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) {
     beforeRouteLeave(to, from, next) {
@@ -860,6 +989,7 @@ export default {
         position: relative;
         position: relative;
         &.blind {
         &.blind {
             width: 205vh;
             width: 205vh;
+            justify-content: flex-start;
         }
         }
         img {
         img {
             width: 110px;
             width: 110px;
@@ -879,10 +1009,10 @@ export default {
         }
         }
         .icon-status {
         .icon-status {
             position: absolute;
             position: absolute;
-            left: 6px;
-            top: 6px;
+            left: 0;
+            top: 0;
             background: #ffffff;
             background: #ffffff;
-            border-radius: 9px;
+            border-radius: 8px 0px 8px 0px;
             z-index: 3;
             z-index: 3;
             padding: 0 8px;
             padding: 0 8px;
             line-height: 18px;
             line-height: 18px;
@@ -897,6 +1027,10 @@ export default {
             &.status1 {
             &.status1 {
                 color: @text3;
                 color: @text3;
             }
             }
+
+            &.status2 {
+                color: #3ab200;
+            }
         }
         }
     }
     }
 }
 }
@@ -910,6 +1044,7 @@ export default {
     align-items: flex-start !important;
     align-items: flex-start !important;
     .boxs {
     .boxs {
         padding-left: 5vh;
         padding-left: 5vh;
+        flex-grow: 1;
         .boxs-text {
         .boxs-text {
             padding-right: 8vh;
             padding-right: 8vh;
         }
         }
@@ -921,13 +1056,33 @@ export default {
         line-height: 10px;
         line-height: 10px;
         .flex();
         .flex();
         justify-content: space-between;
         justify-content: space-between;
+        white-space: nowrap;
     }
     }
     .blind-imgs {
     .blind-imgs {
         .flex();
         .flex();
         flex-wrap: wrap;
         flex-wrap: wrap;
         overflow: hidden;
         overflow: hidden;
+        align-items: flex-start;
         .blind-img {
         .blind-img {
             margin: 0 5vh 2vh 0;
             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;
                 align-items: center !important;
                 .boxs {
                 .boxs {
                     padding-left: 6vh;
                     padding-left: 6vh;
+                    .boxs-text {
+                        padding-bottom: 3vh;
+                    }
                 }
                 }
                 width: 210vh;
                 width: 210vh;
                 .blind-imgs {
                 .blind-imgs {
                     .blind-img {
                     .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;
                 padding: 6vw 12px 0 12px !important;
                 align-items: center !important;
                 align-items: center !important;
                 .boxs {
                 .boxs {
-                    padding-top: 5vw;
+                    &.isFirst {
+                        padding-top: 5vw;
+                    }
                     padding-left: 0;
                     padding-left: 0;
                     position: relative;
                     position: relative;
 
 
@@ -1215,8 +1390,31 @@ export default {
                 }
                 }
                 height: 196vw;
                 height: 196vw;
                 .blind-imgs {
                 .blind-imgs {
+                    justify-content: flex-end;
                     .blind-img {
                     .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;
+                        }
                     }
                     }
                 }
                 }
             }
             }