|
|
@@ -60,16 +60,37 @@
|
|
|
<div class="box-details" v-if="cardList == ''">
|
|
|
{{ label }}
|
|
|
</div>
|
|
|
- <div class="cardBox">
|
|
|
- <div class="cardList" v-for="(item, index) in cardList" :key="index">
|
|
|
- <div class="boxImg">
|
|
|
- <img :src="item.image" alt="" />
|
|
|
- </div>
|
|
|
- <div class="name">
|
|
|
- <p>{{ item.cardName }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <swiper
|
|
|
+ @change="swiperChange"
|
|
|
+ v-else
|
|
|
+ autoplay
|
|
|
+ class="swiper"
|
|
|
+ :interval="1500"
|
|
|
+ :display-multiple-items="3"
|
|
|
+ circular
|
|
|
+ style="margin-top:20px;"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <swiper-item
|
|
|
+ v-for="(item, index) in cardList"
|
|
|
+ :key="index"
|
|
|
+ :class="{ active: swiperCurrent === index }"
|
|
|
+ >
|
|
|
+ <img style="height:100%;" :src="item.image" @click="preview(item.image, cardImgs)" alt="" />
|
|
|
+ <!-- <p class="swiper-itemText">{{ item.cardName }}</p> -->
|
|
|
+ </swiper-item>
|
|
|
+ </template>
|
|
|
+ </swiper>
|
|
|
+ <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> -->
|
|
|
<h2>拼箱规则</h2>
|
|
|
<div class="box-details">
|
|
|
1.拼箱是一种类似拼团的玩法，用户选号后支付，当箱中的全部号码都被购买完毕，才算拼箱成功。如果在有限时间内拼箱没有成团，系统会把钱退回给买家<br />
|
|
|
@@ -124,6 +145,7 @@ export default {
|
|
|
return {
|
|
|
show: false,
|
|
|
name: '',
|
|
|
+ swiperCurrent: 0,
|
|
|
list: [],
|
|
|
cardList: [],
|
|
|
cardCaseInfo: {},
|
|
|
@@ -132,6 +154,11 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
+ cardImgs() {
|
|
|
+ return [...this.cardList].map(item => {
|
|
|
+ return item.image;
|
|
|
+ });
|
|
|
+ },
|
|
|
time() {
|
|
|
if (this.cardCaseInfo.endTime) {
|
|
|
let date = dayjs(this.cardCaseInfo.endTime, 'YYYY-MM-DD HH:mm:ss');
|
|
|
@@ -163,6 +190,7 @@ export default {
|
|
|
this.detailsList = res.groupBoxMap;
|
|
|
this.cardCaseInfo = res.cardCaseInfo || {};
|
|
|
this.cardList = res.cardCaseInfo.cardDTOs;
|
|
|
+ console.log(this.cardList);
|
|
|
if (this.cardList == '') {
|
|
|
this.label = '暂无卡片展示';
|
|
|
}
|
|
|
@@ -199,6 +227,9 @@ export default {
|
|
|
this.checkCollect();
|
|
|
}
|
|
|
},
|
|
|
+ swiperChange(e) {
|
|
|
+ this.swiperCurrent = e.detail.current;
|
|
|
+ },
|
|
|
goChat() {
|
|
|
this.checkLogin().then(() => {
|
|
|
if (this.storeInfo.userId !== this.$store.state.userInfo.id) {
|
|
|
@@ -244,6 +275,9 @@ export default {
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+ /deep/ .indicator-dots {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
padding: 15px 20px 150px 20px;
|
|
|
.bottom(150px);
|
|
|
img {
|
|
|
@@ -294,6 +328,40 @@ 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;
|
|
|
+ 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;
|
|
|
@@ -414,35 +482,35 @@ export default {
|
|
|
line-height: 28px;
|
|
|
margin: 10px 0 15px 0;
|
|
|
}
|
|
|
- .cardBox {
|
|
|
- .flex();
|
|
|
- overflow: hidden;
|
|
|
- overflow-x: auto;
|
|
|
- .cardList {
|
|
|
- .boxImg {
|
|
|
- .flex();
|
|
|
- margin-top: 15px;
|
|
|
- img {
|
|
|
- top: 0;
|
|
|
- width: 110px;
|
|
|
- height: 150px;
|
|
|
- margin-right: 2px;
|
|
|
- border-radius: 8px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- .name {
|
|
|
- .flex();
|
|
|
- p {
|
|
|
- min-height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 12px;
|
|
|
- color: #303133;
|
|
|
- padding-left: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // .cardBox {
|
|
|
+ // .flex();
|
|
|
+ // overflow: hidden;
|
|
|
+ // // overflow-x: auto;
|
|
|
+ // overflow-x: scroll;
|
|
|
+ // .cardList {
|
|
|
+ // .boxImg {
|
|
|
+ // .flex();
|
|
|
+ // margin-top: 15px;
|
|
|
+ // img {
|
|
|
+ // width: 110px;
|
|
|
+ // height: 160px;
|
|
|
+ // margin-right: 15px;
|
|
|
+ // border-radius: 8px;
|
|
|
+ // display: inline-block;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .name {
|
|
|
+ // .flex();
|
|
|
+ // p {
|
|
|
+ // min-height: 50px;
|
|
|
+ // overflow: hidden;
|
|
|
+ // font-size: 12px;
|
|
|
+ // color: #303133;
|
|
|
+ // padding-left: 2px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
.box-footer {
|
|
|
right: 0;
|
|
|
background: #ffffff;
|
|
|
@@ -530,4 +598,29 @@ export default {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
+.swiper {
|
|
|
+ height: 310rpx;
|
|
|
+ image {
|
|
|
+ width: 100% !important;
|
|
|
+ transition: transform ease-in-out 0.1s;
|
|
|
+ }
|
|
|
+ ._swiper-item.active + ._swiper-item {
|
|
|
+ image {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ ._swiper-item {
|
|
|
+ // padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ image {
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ // &.active {
|
|
|
+ // padding: 0 5px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
xuqiang