You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.5 KiB
76 lines
1.5 KiB
2 years ago
|
<template>
|
||
|
|
<view class="category-box u-m-b-10">
|
||
|
|
<swiper class="swiper-box" @change="onSwiper" circular :autoplay="false" :interval="3000" :duration="1000">
|
||
|
|
<swiper-item v-for="(c, index) in couponList" :key="c.id">
|
||
|
|
<view class="tab-list u-flex u-row-center u-col-center"><shopro-coupon :couponData="c" :state="0"></shopro-coupon></view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
<view class="category-dots">
|
||
|
|
<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in couponList.length" :key="index"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* 详情优惠券轮播 - 详情专用
|
||
|
|
* @property {Object} couponList - 优惠劵列表
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
categoryCurrent: 0 //分类轮播下标
|
||
|
|
};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
couponList: {}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
methods: {
|
||
|
|
// 轮播
|
||
|
|
onSwiper(e) {
|
||
|
|
this.categoryCurrent = e.detail.current;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.category-box {
|
||
|
|
padding-top: 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
height: 230rpx;
|
||
|
|
position: relative;
|
||
|
|
.swiper-box {
|
||
|
|
height: 210rpx;
|
||
|
|
.tab-list {
|
||
|
|
/deep/.coupon-wrap {
|
||
|
|
width: 710rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.category-dots {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: 15rpx;
|
||
|
|
|
||
|
|
.category-dot {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 3rpx;
|
||
|
|
background: #eeeeee;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-dot-active {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 3rpx;
|
||
|
|
background: #a8700d;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|