| | |
| | | <swiper :style="{width: '100vw', height: '410rpx'}" :indicator-dots="swiperConfig.indicatorDots" |
| | | :indicator-color="swiperConfig.indicatorColor" :indicator-active-color="swiperConfig.indicatorActiveColor" |
| | | :autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration" |
| | | :circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin" |
| | | :circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin" v-if="init" |
| | | :next-margin="swiperConfig.nextMargin" @change="swiperChange" @animationfinish="animationfinish"> |
| | | |
| | | |
| | | <swiper-item v-for="(item, i) in bannerList" :key="i"> |
| | | <!-- 1.当前展示为第1项时,bannerList最后一项和第二项的justifyContent值分别为flex-end和flex-start,其余项值为center --> |
| | | <!-- 2.当前展示为最后一项时,bannerList倒数第2项和第1项的justifyContent值分别为flex-end和flex-start,其余项值为center --> |
| | |
| | | <image :src="item.bg" class="slide-image"> |
| | | |
| | | </image> |
| | | <view v-if="item.currentMsg" class="top-msg" :class="[`v${i+1}`]"> |
| | | <view v-if="item.currentMsg" class="top-msg" :class="[`v${bannerList[i].key|| (i+1)}`]"> |
| | | {{item.currentMsg}} |
| | | </view> |
| | | <image :src="item.picture" class="icon-image" :class="[`v${i+1}`]" mode="aspectFit"></image> |
| | | <view class="container" :class="[`v${i+1}`]"> |
| | | <image :src="item.picture" class="icon-image" :class="[`v${bannerList[i].key||(i+1)}`]" |
| | | mode="aspectFit"></image> |
| | | <view class="container" :class="[`v${bannerList[i].key|| (i+1)}`]"> |
| | | <view class="title">{{bannerList[i].title}}</view> |
| | | <view class="line-component" v-if="bannerList[i].point"> |
| | | <view class="line-bg"> |
| | | <view class="tip" |
| | | :style="{'left':(bannerList[i].point.end&&(bannerList[i].point.current/bannerList[i].point.end)||0).toFixed(2)*100+'%'}"> |
| | | :style="{'left':(bannerList[i].point.current<=bannerList[i].point.endPoint)?((bannerList[i].point.endPoint&&(bannerList[i].point.current/bannerList[i].point.endPoint)||0).toFixed(2)*100+'%'):'100%'}"> |
| | | {{bannerList[i].point.current || 0}} |
| | | </view> |
| | | <view class="tip-loc" |
| | | :style="{'left':(bannerList[i].point.end&&(bannerList[i].point.current/bannerList[i].point.end)||0).toFixed(2)*100+'%'}"> |
| | | :style="{'left':(bannerList[i].point.current<=bannerList[i].point.endPoint)?((bannerList[i].point.endPoint&&(bannerList[i].point.current/bannerList[i].point.endPoint)||0).toFixed(2)*100+'%'):'100%'}"> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="desc"> |
| | | <span |
| | | v-if="bannerList[i].point.end">{{bannerList[i].point.current || 0}}/{{bannerList[i].point.end}},升级还需{{bannerList[i].point.end-bannerList[i].point.current}}成长值</span> |
| | | <span v-else>成长值:{{bannerList[i].point.current || 0}}</span> |
| | | v-if="bannerList[i].point.endPoint&&(bannerList[i].point.current<=bannerList[i].point.endPoint)">{{bannerList[i].point.current || 0}}/{{bannerList[i].point.endPoint}},升级还需{{bannerList[i].point.endPoint - bannerList[i].point.current}}成长值</span> |
| | | <span v-else>当前成长值:{{bannerList[i].point.current || 0}}</span> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | return { |
| | | curIndex: 0, |
| | | descIndex: 0, |
| | | isDescAnimating: false |
| | | isDescAnimating: false, |
| | | init: true |
| | | } |
| | | }, |
| | | methods: { |
| | | |
| | | // swiperChangeIndex(index){ |
| | | // this.curIndex = index || 0 |
| | | // this.init = true |
| | | // this.$forceUpdate() |
| | | // }, |
| | | swiperChange(e) { |
| | | const that = this |
| | | this.curIndex = e.mp.detail.current |
| | |
| | | that.descIndex = e.mp.detail.current |
| | | clearTimeout(timer) |
| | | }, 150) |
| | | this.$emit('changeIndex',this.curIndex) |
| | | }, |
| | | animationfinish(e) { |
| | | this.isDescAnimating = false |