Commit 6f909b8b authored by beisir's avatar beisir

feat:update 头像

parent ca4b1926
......@@ -2,7 +2,7 @@
<div id="app">
<cr-nav-bar v-if="header" :title="title" left-text="" @click-left="backFun" />
<div class="app">
<!-- <Weapp v-if="isWeixinBrowser" jump-url="/pages/user/login" /> -->
<Weapp v-if="isWeixinBrowser" jump-url="/pages/groupbuy/webview" />
<keep-alive>
<router-view v-if="$route.meta.keepLive" />
</keep-alive>
......@@ -20,13 +20,13 @@ import { mapState } from 'vuex';
import NetError from '@/components/NetError';
import { isApp, isWxMp, isWechat } from '@/service/validation.service';
import store from '@/store';
// import Weapp from '@/components/weapp';
import Weapp from '@/components/weapp';
import goodsShare from '@/components/groupShare';
export default {
name: 'App',
components: {
NetError,
// Weapp,
Weapp,
goodsShare
},
data() {
......
......@@ -31,11 +31,6 @@ export default {
params
});
},
getGroupAvator(data) {
return http.get(`http://yapi.quantgroups.com/mock/479/goods/getAvator`, data, {
hideLoading: true
});
},
getWxConfig(url = window.location.href.split('#')[0]) {
return http.post(`${talosHost}/api/kdsp/wx/mp/getJsapiSign`, {
url: url,
......
<template>
<div class="avator-swiper">
<div class="avator-swiper_left" :class="{ anileft: isAnimate }">
<cr-image class="avator-swiper_item" :src="leftImgPath" />
</div>
<swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
<swiper-slide
v-for="(item, index) in avatorData"
......@@ -36,7 +39,9 @@ export default {
data() {
const vm = this;
return {
isAnimate: false,
timer: null,
leftImgPath: '',
rightImgPath: '',
avatorItem: null,
swiperOptions: {
......@@ -48,26 +53,29 @@ export default {
centeredSlides: false,
watchSlidesProgress: true,
allowTouchMove: false,
autoplay: false,
autoplay: {
delay: 5000,
reverseDirection: true
},
on: {
init: function() {
const slideLeft = this.slides.eq(this.activeIndex);
slideLeft.addClass('ani-left');
},
transitionStart: function() {
const activeIndex = this.activeIndex;
const slideLeft = this.slides.eq(activeIndex);
const slideRight = this.slides.eq(activeIndex + 7);
const activeIndex = this.activeIndex,
slideLeft = this.slides.eq(activeIndex),
slideRight = this.slides.eq(activeIndex + 7);
vm.$emit('animation-event-start');
vm.avatorItem = vm.getAvatorItem(slideLeft);
vm.isAnimate = true;
vm.rightImgPath = slideRight.data('src');
slideLeft.addClass('ani-left');
slideRight.addClass('ani-right');
vm.leftImgPath = slideLeft.data('src');
slideLeft.addClass('ani-opt');
slideRight.addClass('ani-opt');
},
transitionEnd: function() {
vm.isAnimate = false;
vm.$emit('animation-event-end', vm.avatorItem);
for (let i = 0; i < this.slides.length; i++) {
let slide = this.slides.eq(i);
slide.removeClass('ani-left ani-right');
slide.removeClass('ani-opt');
}
}
}
......@@ -79,21 +87,7 @@ export default {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
this.onSlidePrevChange();
},
beforeDestroy() {
clearInterval(this.timer);
// this.onSlidePrevChange();
},
methods: {
onSlidePrevChange() {
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
this.$emit('animation-event-start');
this.swiper.slidePrev();
}, 5000);
},
getAvatorItem(ele) {
return {
src: ele.data('src'),
......@@ -116,18 +110,13 @@ export default {
opacity: 1;
}
}
.ani-left {
.anileft {
transform-origin: right;
animation: leftToRight 1s linear;
}
@keyframes scaleTo {
to {
opacity: 1;
}
}
.ani-right {
.ani-opt {
opacity: 0;
// animation: scaleTo 3s ease-out;
}
.avator-swiper {
width: 100%;
......@@ -136,13 +125,19 @@ export default {
&_container {
transition-timing-function: linear;
}
&_right {
&_right,
&_left {
height: 100%;
width: 25px;
position: absolute;
right: 3px;
top: 0px;
}
&_right {
right: 3px;
}
&_left {
left: 0px;
}
&_item {
transition: transform 0.2s linear;
padding-top: 2px;
......
......@@ -3,7 +3,7 @@
羊小咩原始ID:gh_a976018bfb9e -->
<wx-open-launch-weapp
class="launch-btn"
username="gh_a976018bfb9e"
username="gh_e1d790d67513"
:path="jumpUrl"
@launch="launch"
@error="launchError"
......
......@@ -144,7 +144,6 @@ export default {
},
methods: {
bundleButtonClick(item) {
alert(item.showButton);
this[this.showButtonMethod[item.showButton].click](item);
},
finishTimeChange() {
......
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