336 lines
9.6 KiB
Vue
336 lines
9.6 KiB
Vue
<template>
|
||
<view class="" style="">
|
||
<view class="choubox" v-for="(b,v) in awardArr.length" :key="v" :style="'width:'+width" v-if="pattern">
|
||
<view class="choulist">
|
||
<view class="choulists" :style="moveCss[v]">
|
||
<!--:style="[{backgroundImage:`url(${a.cate_backimgurl})`}]" -->
|
||
<view class="jp_img animated infinite" v-for="(a,x) in items[v]" :key="x">
|
||
<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FF8A00" class="imgqx" v-if="a.shang_id==31"></image>
|
||
<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #00FFFD" class="imgqx" v-else-if="a.shang_id==32"></image>
|
||
<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #F95FFF" class="imgqx" v-else-if="a.shang_id==33"></image>
|
||
<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FFE721" class="imgqx" v-else-if="a.shang_id==34"></image>
|
||
<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FFFFFF" class="imgqx" v-else-if="a.shang_id==35"></image>
|
||
<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FFFFFF" class="imgqx" v-else="a.shang_id==35"></image>
|
||
<view class="cj_title_name">{{a.title}}</view>
|
||
<!-- <image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/a.png" mode="" class="imgqx" v-if="a.shang=='A'"></image>
|
||
<image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/b.png" mode="" class="imgqx" v-if="a.shang=='B'"></image>
|
||
<image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/c.png" mode="" class="imgqx" v-if="a.shang=='C'"></image>
|
||
<image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/d.png" mode="" class="imgqx" v-if="a.shang=='D'"></image> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="choubox" v-for="(b,v) in awardArr.length" :key="v" :style="'width:'+width" v-else>
|
||
<view class="choulist">
|
||
<view class="choulists_b" :style="moveCss[v]">
|
||
<!--:style="[{backgroundImage:`url(${a.cate_backimgurl})`}]" -->
|
||
<view class="jp_img animated infinite" v-for="(a,x) in items[v]" :key="x">
|
||
<image :src="a.imgurl" style="width: 100rpx;height: 110rpx;"></image>
|
||
<image style="width: 166rpx;height: 41rpx;" :src="a.shang" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zzz" ref="refDivName"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
//中奖弹出框内容
|
||
awardArr: {
|
||
type: Array,
|
||
default: function() {
|
||
return [] //如果是对就是return {}
|
||
}
|
||
},
|
||
//抽赏商品列表
|
||
ShopList: {
|
||
type: Array,
|
||
default: function() {
|
||
return [] //如果是对就是return {}
|
||
}
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '750rpx'
|
||
},
|
||
pattern: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
OrderList: [],
|
||
rollTimer: null, //动画定时器句柄
|
||
leftM: 10, //指针停止位置的偏移量 用来计算弹出框的初始位置
|
||
moveCss: [], //奖励滚动组件的滑动的动画效果css
|
||
itemWidth: 164, //每张卡牌的宽度
|
||
luckyNums: 0, //中奖位置
|
||
luckydata: [], //中奖位置数组
|
||
lnStart: 50, //中奖位置区间开始
|
||
lnEnd: 60, //中奖位置区间结束
|
||
items: [], //滚动的卡片列表
|
||
awardItem: [], //中奖道具
|
||
tiaotype: 1,
|
||
gudata: [],
|
||
// 适配手机
|
||
left_px: '',
|
||
scaleCsss: []
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
//随机数
|
||
getRand(start, end) {
|
||
return Math.floor(Math.random() * (end - start + 1) + start);
|
||
},
|
||
getItem() {
|
||
let r = this.getRand(0, (this.ShopList.length - 1));
|
||
let item;
|
||
item = this.ShopList[r];
|
||
return item;
|
||
},
|
||
// 开始动画
|
||
openBox(v) {
|
||
let that = this
|
||
// #ifdef H5
|
||
// console.log(this.$refs.refDivName.$el.offsetWidth)
|
||
that.left_px = that.$refs.refDivName.$el.offsetWidth
|
||
// #endif
|
||
// #ifdef MP
|
||
// console.log(uni.createSelectorQuery().in(this).select(".zzz"))
|
||
uni.createSelectorQuery().in(that).select(".zzz").boundingClientRect(data => {
|
||
//data 可以打印data输出看详细数据，有很多数据信息
|
||
// console.log(data)
|
||
that.left_px = data.width; //表示元素宽度
|
||
}).exec();
|
||
// #endif
|
||
//初始化数据
|
||
that.tiaotype = 1;
|
||
that.InitPageModel(v);
|
||
//150ms后显示奖励皮肤滚动组件
|
||
// debugger
|
||
setTimeout(() => {
|
||
//500ms 之后开始奖励列表滑动
|
||
that.rollTimer = setTimeout(() => that.startScroll(v), 100);
|
||
}, 150);
|
||
|
||
},
|
||
//初始化列表
|
||
InitPageModel(v) {
|
||
|
||
var that = this;
|
||
//随机一个总数
|
||
that.items = [];
|
||
//中间号码的列队
|
||
that.luckydata = [];
|
||
//中奖卡片的位置
|
||
for (var a = 0; a < v; a++) {
|
||
var jldata = [];
|
||
that.luckyNums = that.getRand(that.lnStart, that.lnEnd);
|
||
that.luckydata.push(that.luckyNums)
|
||
let loopNum = that.lnEnd - that.luckyNums < 4 ? that.luckyNums + 4 : that.lnEnd;
|
||
// console.log(that.gudata)
|
||
for (let i = 0; i < loopNum; i++) {
|
||
let item = {};
|
||
if (i == that.luckyNums) {
|
||
item = that.ShopList.filter((item) => item.id == that.awardArr[a].goodslist_id)[
|
||
0]; //把奖励加到列表里
|
||
// item.class = 'rubberBand'
|
||
|
||
that.awardItem.push(item); //拿到奖励的各个参数
|
||
} else {
|
||
item = that.getItem();
|
||
}
|
||
jldata.push(item);
|
||
}
|
||
that.items[a] = jldata;
|
||
|
||
}
|
||
},
|
||
//滑动效果
|
||
startScroll() {
|
||
var that = this;
|
||
let direction = ''
|
||
if (that.pattern) {
|
||
direction = 'left'
|
||
} else {
|
||
direction = 'top'
|
||
}
|
||
that.$nextTick(function() {
|
||
if (that.rollTimer != null) {
|
||
// setTimeout(() => {
|
||
// that.Audio.play()
|
||
// that.Audio.onPlay(function() {
|
||
// console.log('onPlay');
|
||
// });
|
||
// }, 500)
|
||
} else {
|
||
setTimeout(() => {
|
||
that.Audio.stop()
|
||
}, 500)
|
||
}
|
||
|
||
setTimeout(() => {
|
||
for (var a = 0; a < that.luckydata.length; a++) {
|
||
// let m = that.getRand(0, 50) - 110;
|
||
let m = -58;
|
||
|
||
that.leftM = m;
|
||
// debugger
|
||
// console.log((that.luckydata[a] - 2), that.left_px)
|
||
var yanzi = direction + ':-' + ((that.luckydata[a] - 2) * that.left_px - m) +
|
||
'px;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
|
||
that.moveCss.push(yanzi)
|
||
//6s 动画结束后 开始弹出奖励图片，6500ms后执行
|
||
}
|
||
}, 500);
|
||
|
||
that.rollTimer = setTimeout(() => {
|
||
// display和动画会有前后执行的冲突，所以加上10ms延时处理
|
||
that.scaleCss = [];
|
||
that.scaleCsss = [];
|
||
that.$emit("close_animation")
|
||
setTimeout(() => {
|
||
//奖品按顺序淡出
|
||
for (var a = 0; a < that.luckydata.length; a++) {
|
||
setTimeout(() => {
|
||
// 奖品显示框
|
||
var scale = 'opacity:1 ;transition:all .8s;'
|
||
var scales =
|
||
'opacity:0 ;transform: scale(5);transition:all 2.5s;'
|
||
that.scaleCss.push(scale)
|
||
that.scaleCsss.push(scales)
|
||
}, 800 + a * 330);
|
||
}
|
||
that.moveCss = [];
|
||
that.items = [];
|
||
that.luckydata = [];
|
||
}, 500);
|
||
}, 9000);
|
||
})
|
||
},
|
||
tiaoguo() {
|
||
var that = this;
|
||
clearTimeout(that.rollTimer);
|
||
that.scaleCss = [];
|
||
that.scaleCsss = [];
|
||
that.$emit("close_animation")
|
||
setTimeout(() => {
|
||
//奖品按顺序淡出
|
||
for (var a = 0; a < that.luckydata.length; a++) {
|
||
setTimeout(() => {
|
||
// 奖品显示框
|
||
var scale = 'opacity:1 ;transition:all .8s;'
|
||
var scales =
|
||
'opacity:0 ;transform: scale(5);transition:all 2.5s;'
|
||
that.scaleCss.push(scale)
|
||
that.scaleCsss.push(scales)
|
||
}, 800 + a * 330);
|
||
}
|
||
that.moveCss = [];
|
||
that.items = [];
|
||
that.luckydata = [];
|
||
}, 500);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 适配手机
|
||
.zzz {
|
||
width: 164rpx;
|
||
height: 1rpx;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.choubox {
|
||
// width: 730rpx;
|
||
height: 160rpx;
|
||
position: relative;
|
||
margin: auto;
|
||
overflow: hidden;
|
||
|
||
.choulist {
|
||
position: absolute;
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
|
||
.choulists_b {
|
||
position: relative;
|
||
top: 0;
|
||
|
||
// left: -50rpx;
|
||
// display: flex;
|
||
.jp_img {
|
||
position: relative;
|
||
width: 164rpx;
|
||
height: 144rpx;
|
||
// overflow: hidden;
|
||
animation-delay: 9s;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-position: 0% 100%;
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
|
||
image {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.choulists {
|
||
position: relative;
|
||
left: -50rpx;
|
||
display: flex;
|
||
|
||
.jp_img {
|
||
position: relative;
|
||
width: 164rpx;
|
||
height: 144rpx;
|
||
overflow: hidden;
|
||
animation-delay: 9s;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-position: 0% 100%;
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
|
||
image {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cj_title_name {
|
||
width: 144rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
</style>
|