Commit bea9665b authored by beisir's avatar beisir

feat:links

parent 6877dffb
......@@ -4,6 +4,7 @@
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">
......@@ -36,7 +37,6 @@ export default {
}
},
data() {
const vm = this;
return {
activeIndex: 0,
swiperOptions: {
......@@ -48,38 +48,10 @@ export default {
centeredSlides: true,
watchSlidesProgress: true,
allowTouchMove: false,
autoplay: false,
on: {
init: function() {
const slideLeft = this.slides.eq(this.activeIndex);
console.log(slideLeft);
// slideLeft.addClass('ani-left');
},
// transitionStart: function() {
// const activeIndex = this.activeIndex;
// const slideLeft = this.slides.eq(activeIndex);
// const slideRight = this.slides.eq(activeIndex + 7);
// vm.avatorItem = vm.getAvatorItem(slideLeft);
// vm.rightImgPath = slideRight.data('src');
// slideLeft.addClass('ani-left');
// slideRight.addClass('ani-right');
// },
transitionEnd: function() {
console.log('结束');
vm.$emit('customers-end', vm.avatorItem);
// // for (let i = 0; i < this.slides.length; i++) {
// // let slide = this.slides.eq(i);
// // slide.removeClass('ani-left ani-right');
// // }
const slides = this.slides;
for (let i = 0; i < slides.length; i++) {
const slide = slides.eq(i);
const progress = slides[i].progress;
slide.css('opacity', 1 - Math.abs(progress) / 9);
slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
}
}
autoplay: {
delay: 900,
stopOnLastSlide: false,
disableOnInteraction: false
}
}
};
......@@ -89,14 +61,10 @@ export default {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// this.onSlidePrevChange();
},
beforeDestroy() {
clearInterval(this.timer);
// this.onSlidePrevChange();
},
methods: {
slideChange() {
this.activeIndex = this.swiper.realIndex;
},
setTranslate() {
const slides = this.swiper.slides;
for (let i = 0; i < slides.length; i++) {
......@@ -105,28 +73,8 @@ export default {
slide.css('opacity', 1 - Math.abs(progress) / 9);
slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
}
},
onSlidePrevChange() {
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
this.$emit('customers-start');
this.swiper.slideNext();
}, 5000);
},
getAvatorItem(ele) {
return {
src: ele.data('src'),
name: ele.data('name')
};
}
}
// methods: {
// slideChange() {
// this.activeIndex = this.swiper.realIndex;
// },
// }
};
</script>
<style lang="less">
......
......@@ -4,7 +4,6 @@
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">
......@@ -37,6 +36,7 @@ export default {
}
},
data() {
const vm = this;
return {
activeIndex: 0,
swiperOptions: {
......@@ -48,10 +48,39 @@ export default {
centeredSlides: true,
watchSlidesProgress: true,
allowTouchMove: false,
autoplay: {
delay: 900,
stopOnLastSlide: false,
disableOnInteraction: false
autoplay: false,
on: {
init: function() {
const slideLeft = this.slides.eq(this.activeIndex);
console.log(slideLeft);
// slideLeft.addClass('ani-left');
},
transitionStart: function() {
const activeIndex = this.activeIndex;
// const slideLeft = this.slides.eq(activeIndex);
// const slideRight = this.slides.eq(activeIndex + 7);
// vm.avatorItem = vm.getAvatorItem(slideLeft);
// vm.rightImgPath = slideRight.data('src');
// slideLeft.addClass('ani-left');
// slideRight.addClass('ani-right');
console.log(activeIndex);
},
transitionEnd: function() {
console.log('结束');
vm.$emit('customers-end', vm.avatorItem);
// // for (let i = 0; i < this.slides.length; i++) {
// // let slide = this.slides.eq(i);
// // slide.removeClass('ani-left ani-right');
// // }
const slides = this.slides;
for (let i = 0; i < slides.length; i++) {
const slide = slides.eq(i);
const progress = slides[i].progress;
slide.css('opacity', 1 - Math.abs(progress) / 9);
slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
}
}
}
}
};
......@@ -61,10 +90,13 @@ export default {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
this.onSlidePrevChange();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
slideChange() {
this.activeIndex = this.swiper.realIndex;
},
setTranslate() {
const slides = this.swiper.slides;
for (let i = 0; i < slides.length; i++) {
......@@ -73,8 +105,28 @@ export default {
slide.css('opacity', 1 - Math.abs(progress) / 9);
slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
}
},
onSlidePrevChange() {
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
this.$emit('customers-start');
this.swiper.slideNext();
}, 5000);
},
getAvatorItem(ele) {
return {
src: ele.data('src'),
name: ele.data('name')
};
}
}
// methods: {
// slideChange() {
// this.activeIndex = this.swiper.realIndex;
// },
// }
};
</script>
<style lang="less">
......
......@@ -159,9 +159,7 @@ export default {
return `/pages/groupbuy/webview?url=${encodeURIComponent(JSON.stringify(linkPath))}`;
}
if (isApp) {
const linkPrve = `${
config.openLink
}/common/launch?wxapp=gh_e1d790d67513&jumpUrl=${encodeURIComponent(
const linkPrve = `https://mall.q-gp.com/common/launch?wxapp=gh_e1d790d67513&jumpUrl=${encodeURIComponent(
'pages/groupbuy/webview'
)}&terminal=1`;
const linkParams = encodeURIComponent(JSON.stringify({ url: linkPath }));
......
......@@ -136,7 +136,6 @@ export default {
receiverId: '',
count: 1
},
customers: {},
detailInfo: {},
imgList: [],
detailImgList: [], // 商品详情图像展示
......@@ -160,8 +159,6 @@ export default {
this.init(this.detailParam);
},
mounted() {
EventBus.$on('');
// todo 曝光埋点
setTimeout(() => {
this.showInfo = true;
......
......@@ -136,6 +136,7 @@ export default {
receiverId: '',
count: 1
},
customers: {},
detailInfo: {},
imgList: [],
detailImgList: [], // 商品详情图像展示
......@@ -159,6 +160,10 @@ export default {
this.init(this.detailParam);
},
mounted() {
EventBus.$on('customers-end', customers => {
console.log(customers);
});
// todo 曝光埋点
setTimeout(() => {
this.showInfo = true;
......
......@@ -26,9 +26,7 @@
/>
</div>
</div>
<div class="group-portrait-num" @click="showSwipe = !showSwipe">
已有 {{ goodsTemp.groupBuyUserCount }}人 参与拼单
</div>
<div class="group-portrait-num">已有 {{ goodsTemp.groupBuyUserCount }}人 参与拼单</div>
</div>
<div class="group-list">
<div class="list-title">
......
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