Commit 83f37962 authored by Xuguangxing's avatar Xuguangxing

Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

parents ace4a71c ad8bbe65
<template> <template>
<div class="avator-swiper" @click="onSlidePrevChange"> <div class="avator-swiper" @click="onSlidePrevChange">
<swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container"> <swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
<!-- @slide-change="slideChange"
@set-translate="setTranslate" -->
<swiper-slide v-for="(item, index) in avatorData" :key="index" class="avator-swiper_item"> <swiper-slide v-for="(item, index) in avatorData" :key="index" class="avator-swiper_item">
<div class="avator-swiper_item"> <div class="avator-swiper_item">
<img :src="item" /> <img :src="item" />
...@@ -10,7 +8,7 @@ ...@@ -10,7 +8,7 @@
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<div class="avator-swiper_right"> <div class="avator-swiper_right">
<cr-image class="avator-swiper_item" :src="leftImgPath" /> <cr-image class="avator-swiper_item" :src="rightImgPath" />
</div> </div>
</div> </div>
</template> </template>
...@@ -18,7 +16,7 @@ ...@@ -18,7 +16,7 @@
import { swiper, swiperSlide } from 'vue-awesome-swiper'; import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'; import 'swiper/dist/css/swiper.css';
export default { export default {
name: 'AvatorSwiper', name: 'GroupSwiper',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
...@@ -34,8 +32,6 @@ export default { ...@@ -34,8 +32,6 @@ export default {
data() { data() {
const vm = this; const vm = this;
return { return {
activeIndex: 0,
leftImgPath: '',
rightImgPath: '', rightImgPath: '',
swiperOptions: { swiperOptions: {
loop: true, loop: true,
...@@ -47,28 +43,23 @@ export default { ...@@ -47,28 +43,23 @@ export default {
watchSlidesProgress: true, watchSlidesProgress: true,
allowTouchMove: false, allowTouchMove: false,
autoplay: false, autoplay: false,
// autoplay: {
// delay: 900,
// stopOnLastSlide: false,
// disableOnInteraction: false
// }
on: { on: {
init: function() { init: function() {
let slideLeft = this.slides.eq(this.activeIndex - 3); const slideLeft = this.slides.eq(this.activeIndex - 3);
slideLeft.addClass('ani-left'); slideLeft.addClass('ani-left');
}, },
transitionStart: function() { transitionStart: function() {
let slideLeft = this.slides.eq(this.activeIndex - 3); const activeIndex = this.activeIndex;
let slideRight = this.slides.eq(this.activeIndex + 4); const slideLeft = this.slides.eq(activeIndex - 3);
const slideRight = this.slides.eq(activeIndex + 4);
slideLeft.addClass('ani-left'); slideLeft.addClass('ani-left');
slideRight.addClass('ani-right'); slideRight.addClass('ani-right');
vm.leftImgPath = slideRight.find('img').attr('src'); vm.rightImgPath = slideRight.find('img').attr('src');
}, },
transitionEnd: function() { transitionEnd: function() {
for (let i = 0; i < this.slides.length; i++) { for (let i = 0; i < this.slides.length; i++) {
let slide = this.slides.eq(i); let slide = this.slides.eq(i);
slide.removeClass('ani-left'); slide.removeClass('ani-left ani-right');
slide.removeClass('ani-right');
} }
} }
} }
...@@ -85,6 +76,9 @@ export default { ...@@ -85,6 +76,9 @@ export default {
this.onSlidePrevChange(); this.onSlidePrevChange();
} }
}, },
mounted() {
console.log(this.swiper);
},
methods: { methods: {
onSlidePrevChange() { onSlidePrevChange() {
this.swiper.slidePrev(); this.swiper.slidePrev();
...@@ -121,7 +115,7 @@ export default { ...@@ -121,7 +115,7 @@ export default {
margin: 0 auto !important; margin: 0 auto !important;
position: relative; position: relative;
&_right { &_right {
height: 25px; height: 100%;
width: 25px; width: 25px;
position: absolute; position: absolute;
right: 3px; right: 3px;
...@@ -129,16 +123,12 @@ export default { ...@@ -129,16 +123,12 @@ export default {
} }
&_item { &_item {
transition: transform 0.2s linear; transition: transform 0.2s linear;
height: 32px;
padding-top: 2px; padding-top: 2px;
img { img {
height: 25px; height: 25px;
width: 25px; width: 25px;
border-radius: 50%; border-radius: 50%;
} }
&.active {
transform: scale(1.2);
}
} }
} }
</style> </style>
...@@ -43,7 +43,7 @@ const commonParams = { ...@@ -43,7 +43,7 @@ const commonParams = {
loading: false, loading: false,
finished: false, finished: false,
page: 1, page: 1,
pageSize: 10, pageSize: 5,
list: [] list: []
}; };
export default { export default {
......
...@@ -15,10 +15,12 @@ ...@@ -15,10 +15,12 @@
</div> </div>
</div> </div>
<p class="tips"> <p class="tips">
您可在“我的-我的订单”中查看详情 拼团成功即可退款0元拿,拼团失败立即退款
</p> </p>
<div class="actions"> <div class="actions">
<cr-button shape="circle" type="default" @click="goHome(payStatus)">我的拼团</cr-button> <cr-button shape="circle" type="default" @click="goOrderList(payStatus)"
>我的拼团</cr-button
>
<cr-button <cr-button
shape="circle" shape="circle"
class="actions__back" class="actions__back"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment