图片显示

src/pages/details.vue

@@ -62,13 +62,12 @@
         </div>
         <swiper
             @change="swiperChange"
+            :current="current"
             v-else
-            autoplay
             class="swiper"
-            :interval="1500"
             :display-multiple-items="3"
             circular
-            style="margin-top:20px;"
+            style="margin-top:20px; margin-bottom: 10px;"
         >
             <template>
                 <swiper-item
@@ -76,21 +75,35 @@
                     :key="index"
                     :class="{ active: swiperCurrent === index }"
                 >
-                    <img style="height:100%;" :src="item.image" @click="preview(item.image, cardImgs)" alt="" />
+                    <img
+                        style="height:100%"
+                        :src="item.image + oss"
+                        @click="preview(item.image, getImgs(cardList))"
+                        alt=""
+                    />
                     <!-- <p class="swiper-itemText">{{ item.cardName }}</p> -->
                 </swiper-item>
             </template>
         </swiper>
-        <div class="customDots" v-if="cardList.length > 0">
+        <!-- <div class="customDots" v-if="cardList.length > 0">
             <template>
                 {{ swiperCurrent + 1 }}/{{ cardList.length }}
             </template>
-        </div>
-        <!-- <div class="customDots">
-            <template v-for="(item, index) in cardList">
-                <div class="customDots-item" :class="{ active: swiperCurrent == index }"></div>
-            </template>
         </div> -->
+        <div v-if="cards.length > 0">
+            <div v-if="collectFlag" class="btn" @click="add">查看全部</div>
+            <div v-else class="btn" @click="collects">收起</div>
+            <div v-if="imgFlag" class="imgBox">
+                <div v-for="(item, index) in cards" :key="index">
+                    <img
+                        style="width: 70px;height: 100px;padding:5px"
+                        :src="item.image + oss"
+                        @click="preview(item.image, getImgs(cards))"
+                        alt=""
+                    />
+                </div>
+            </div>
+        </div>
         <h2>拼箱规则</h2>
         <div class="box-details">
             1.拼箱是一种类似拼团的玩法，用户选号后支付，当箱中的全部号码都被购买完毕，才算拼箱成功。如果在有限时间内拼箱没有成团，系统会把钱退回给买家<br />
@@ -144,21 +157,31 @@ export default {
     data() {
         return {
             show: false,
+            imgFlag: false,
+            collectFlag: true,
             name: '',
             swiperCurrent: 0,
             list: [],
-            cardList: [],
+            cards: [],
             cardCaseInfo: {},
             chooseIds: [],
             banners: []
         };
     },
     computed: {
-        cardImgs() {
-            return [...this.cardList].map(item => {
-                return item.image;
+        cardList() {
+            return [...this.cards].filter((item, index) => {
+                return index < 10;
             });
         },
+        // defaultCards() {
+        //     return [...this.cards].filter((item, index) => {
+        //         return index >= 20;
+        //     });
+        // },
+        oss() {
+            return `?x-oss-process=image/resize,l_300`;
+        },
         time() {
             if (this.cardCaseInfo.endTime) {
                 let date = dayjs(this.cardCaseInfo.endTime, 'YYYY-MM-DD HH:mm:ss');
@@ -179,7 +202,16 @@ export default {
             }
         }
     },
+    created() {
+        console.log(this.oss);
+    },
     methods: {
+        getImgs(list) {
+            console.log(list);
+            return list.map(item => {
+                return item.image;
+            });
+        },
         details() {
             this.chooseIds = '';
             this.showLoading();
@@ -189,9 +221,9 @@ export default {
                     this.hideLoading();
                     this.detailsList = res.groupBoxMap;
                     this.cardCaseInfo = res.cardCaseInfo || {};
-                    this.cardList = res.cardCaseInfo.cardDTOs;
+                    this.cards = res.cardCaseInfo.cardDTOs;
                     console.log(this.cardList);
-                    if (this.cardList == '') {
+                    if (this.cards == '') {
                         this.label = '暂无卡片展示';
                     }
                     this.banners = res.cardCaseInfo.images;
@@ -208,6 +240,14 @@ export default {
                     }
                 });
         },
+        add() {
+            this.imgFlag = true;
+            this.collectFlag = false;
+        },
+        collects() {
+            this.imgFlag = false;
+            this.collectFlag = true;
+        },
         result() {
             this.navigateTo('/pages/unpacking?id=' + this.cardCaseInfo.cardCaseId);
         },
@@ -328,40 +368,57 @@ export default {
             margin-left: 1px;
         }
     }
-    .customDots {
-        margin-top: 5px;
-        font-size: 14px;
-        display: flex;
-        justify-content: center;
-    }
-    .swiper-itemText {
-        position: absolute;
-        left: 5px;
-        right: 5px;
-        bottom: 0px;
+    .btn {
+        width: 100px;
+        height: 30px;
+        line-height: 30px;
         font-size: 12px;
-        color: #fff;
-        font-weight: bold;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        background-color: rgba(0, 0, 0, 0.6);
-        line-height: 32px;
-        text-align: center;
-    }
-    .customDots .customDots-item {
-        margin: 0 8px;
-        width: 8px;
-        height: 8px;
-        background-color: transparent;
+        margin: 0 auto;
         border-radius: 8px;
-        background: #000;
-        transition: all 0.6s ease-in-out;
+        text-align: center;
+        color: #000;
+        background: #ccc;
     }
-    .customDots .customDots-item.active {
-        width: 20px;
-        background: #cccccc;
+    .imgBox {
+        .flex();
+        flex-wrap: wrap;
+        width: 391px;
+        margin-top: 20px;
     }
+    // .customDots {
+    //     margin-top: 5px;
+    //     font-size: 14px;
+    //     display: flex;
+    //     justify-content: center;
+    // }
+    // .swiper-itemText {
+    //     position: absolute;
+    //     left: 5px;
+    //     right: 5px;
+    //     bottom: 0px;
+    //     font-size: 12px;
+    //     color: #fff;
+    //     font-weight: bold;
+    //     overflow: hidden;
+    //     text-overflow: ellipsis;
+    //     white-space: nowrap;
+    //     background-color: rgba(0, 0, 0, 0.6);
+    //     line-height: 32px;
+    //     text-align: center;
+    // }
+    // .customDots .customDots-item {
+    //     margin: 0 8px;
+    //     width: 8px;
+    //     height: 8px;
+    //     background-color: transparent;
+    //     border-radius: 8px;
+    //     background: #000;
+    //     transition: all 0.6s ease-in-out;
+    // }
+    // .customDots .customDots-item.active {
+    //     width: 20px;
+    //     background: #cccccc;
+    // }
     .box-con {
         display: flex;
         justify-content: space-between;