|
|
<template>
|
|
|
<view class="tm-choujiangGame py-32">
|
|
|
<view class="tm-choujiangGame-theme-1 flex-center flex-col">
|
|
|
<view class="tm-choujiangGame-bg ">
|
|
|
<view
|
|
|
@click="clickImgPlay"
|
|
|
class="tm-choujiangGame-bg-image"
|
|
|
:style="{
|
|
|
backgroundImage: `url(${them_data.bg})`
|
|
|
}"
|
|
|
></view>
|
|
|
<view class="tm-choujiangGame-bg-prod ">
|
|
|
<view
|
|
|
class="tm-choujiangGame-bg-cp text-red text-align-center "
|
|
|
:style="{
|
|
|
width: '25%',
|
|
|
height: '100%',
|
|
|
transform: `translateY(${reisetInitTop}px)`
|
|
|
}"
|
|
|
:animation="animationData0"
|
|
|
>
|
|
|
<view
|
|
|
v-for="(item, index) in listData"
|
|
|
:key="index"
|
|
|
style="height: 100%;"
|
|
|
class="flex-center flex-col"
|
|
|
>
|
|
|
<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
class="tm-choujiangGame-bg-cp text-red text-align-center "
|
|
|
:style="{
|
|
|
width: '25%',
|
|
|
height: '100%',
|
|
|
transform: `translateY(${reisetInitTop}px)`
|
|
|
}"
|
|
|
:animation="animationData1"
|
|
|
>
|
|
|
<view
|
|
|
v-for="(item, index) in listData"
|
|
|
:key="index"
|
|
|
style="height: 100%;"
|
|
|
class="flex-center flex-col"
|
|
|
>
|
|
|
<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
class="tm-choujiangGame-bg-cp text-red text-align-center "
|
|
|
:style="{
|
|
|
width: '25%',
|
|
|
height: '100%',
|
|
|
transform: `translateY(${reisetInitTop}px)`
|
|
|
}"
|
|
|
:animation="animationData2"
|
|
|
>
|
|
|
<view
|
|
|
v-for="(item, index) in listData"
|
|
|
:key="index"
|
|
|
style="height: 100%;"
|
|
|
class="flex-center flex-col"
|
|
|
>
|
|
|
<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
class="tm-choujiangGame-bg-cp text-red text-align-center "
|
|
|
:style="{
|
|
|
width: '25%',
|
|
|
height: '100%',
|
|
|
transform: `translateY(${reisetInitTop}px)`
|
|
|
}"
|
|
|
:animation="animationData3"
|
|
|
>
|
|
|
<view
|
|
|
v-for="(item, index) in listData"
|
|
|
:key="index"
|
|
|
style="height: 100%;"
|
|
|
class="flex-center flex-col"
|
|
|
>
|
|
|
<tm-images v-if="item.img" :previmage="false" :width="60" :src="item.img"></tm-images>
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="flex-end tm-choujiangGame-point">
|
|
|
<view class="tm-choujiangGame-point-bar"
|
|
|
:style="{
|
|
|
transform: aniOff?'rotate(0)':'rotate(25deg)'
|
|
|
}"
|
|
|
>
|
|
|
<tm-images :previmage="false" :width="120" :src="them_data.point"></tm-images>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- transform: choujiangJieGuo==null?`translateY(-100%)`:`translateY(0)` -->
|
|
|
<view class="tm-choujiangGame-pingtai flex-center">
|
|
|
<view class="tm-choujiangGame-pingtai-coll" :style="{
|
|
|
transition: 'all 0.5s',
|
|
|
transform: choujiangJieGuo==null?`translateY(-100%)`:`translateY(0)`
|
|
|
}">
|
|
|
<view class="tm-choujiangGame-pingtai-text">中奖啦~</view>
|
|
|
<tm-images :previmage="false" :width="380" :height="200" :src="them_data.dizuo"></tm-images>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 转盘抽奖
|
|
|
* @property {Number} theme-index = [] 默认0，主题索引，我已内置两套皮肤。
|
|
|
* @property {Array} theme-list = [] 默认[已内置两套]，主题列表数据，已有两套。
|
|
|
* @property {Boolean} disabled = [] 默认 false，是否禁用
|
|
|
* @property {Boolean} disabledCenter = [] 默认 false，是否禁用点中间图片开始。
|
|
|
* @property {Number} duration = [] 默认 3000，动画时长
|
|
|
* @property {Array} list = [] 默认 [测试的数据]，奖品数据。
|
|
|
* @property {Function} start 游戏开始时触发。
|
|
|
* @property {Function} end 游戏结束触发，并返回奖品数据。
|
|
|
* @example <tm-choujiangGame ></tm-choujiangGame>
|
|
|
*/
|
|
|
import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
|
|
|
export default {
|
|
|
components:{tmImages},
|
|
|
name: 'tm-choujiangGame',
|
|
|
props: {
|
|
|
themeIndex: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
themeList: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [
|
|
|
{
|
|
|
bg: 'https://jx2d.cn/yuwuimages/choujiangGame_1.png?k=9',
|
|
|
point: 'https://jx2d.cn/yuwuimages/choujiangGame_1_0.png',
|
|
|
dizuo: 'https://jx2d.cn/yuwuimages/choujiangGame_2_1.png'
|
|
|
},
|
|
|
{
|
|
|
bg: 'https://jx2d.cn/yuwuimages/choujiangGame_2.png?k=9',
|
|
|
point: 'https://jx2d.cn/yuwuimages/choujiangGame_2_0.png',
|
|
|
dizuo: 'https://jx2d.cn/yuwuimages/choujiangGame_2_1.png'
|
|
|
}
|
|
|
];
|
|
|
}
|
|
|
},
|
|
|
disabled: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
//是否禁用点中间图片开始。
|
|
|
disabledCenter:{
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
// 动画时长
|
|
|
duration: {
|
|
|
type: Number,
|
|
|
default: 150
|
|
|
},
|
|
|
list: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [
|
|
|
{ name: '1', gailv: 30, id: 1, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
|
|
|
{ name: '2', gailv: 10, id: 2, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' },
|
|
|
{ name: '3', gailv: 10, id: 3, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
|
|
|
{ name: '4', gailv: 10, id: 4, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' },
|
|
|
{ name: '5', gailv: 10, id: 5, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
|
|
|
{ name: '7', gailv: 10, id: 7, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' },
|
|
|
{ name: '8', gailv: 10, id: 8, img: 'https://jx2d.cn/yuwuimages/jiangping_2.png' },
|
|
|
{ name: '9', gailv: 10, id: 9, img: 'https://jx2d.cn/yuwuimages/jiangping_1.png' }
|
|
|
|
|
|
];
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
animationData0: '',
|
|
|
animationData1: '',
|
|
|
animationData2: '',
|
|
|
animationData3: '',
|
|
|
aniOff: true,
|
|
|
choujiangJieGuo:null,
|
|
|
listData: [],
|
|
|
|
|
|
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.listData = this.list;
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
reisetInitTop:function(){
|
|
|
return -(this.listData.length-1)*uni.upx2px(160)
|
|
|
},
|
|
|
them_index: function() {
|
|
|
return this.themeIndex;
|
|
|
},
|
|
|
them_data: function() {
|
|
|
return this.themeList[this.them_index];
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
clickImgPlay(){
|
|
|
if (this.disabledCenter) return;
|
|
|
this.play();
|
|
|
},
|
|
|
chuliganlv() {
|
|
|
var ml = new this.$tm.choujiang(this.listData);
|
|
|
let zhongle = [];
|
|
|
let xh = [
|
|
|
ml.getResult(),
|
|
|
ml.getResult(),
|
|
|
ml.getResult(),
|
|
|
ml.getResult()
|
|
|
]
|
|
|
|
|
|
for(let i=0 ;i<xh.length;i++){
|
|
|
|
|
|
let index = 0
|
|
|
for(let j=0;j<this.listData.length;j++){
|
|
|
if(this.listData[j].id === xh[i].id){
|
|
|
index = j;
|
|
|
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
//(this.listData.length-1)*2
|
|
|
let cisu = (this.listData.length-1)*2+1 + (this.listData.length - index);
|
|
|
zhongle.push({
|
|
|
index:index,
|
|
|
data:xh[i],
|
|
|
playNum:cisu
|
|
|
})
|
|
|
}
|
|
|
|
|
|
return zhongle;
|
|
|
},
|
|
|
async play() {
|
|
|
let t = this;
|
|
|
if (this.disabled) return;
|
|
|
if (!this.aniOff) {
|
|
|
console.warn('未结束动画,不能连续点击.');
|
|
|
return;
|
|
|
}
|
|
|
// 开始动画.
|
|
|
this.$emit('start');
|
|
|
this.choujiangJieGuo = null;
|
|
|
let zhongjiang = this.chuliganlv();
|
|
|
|
|
|
this.$nextTick(async function() {
|
|
|
await this.resetInit();
|
|
|
|
|
|
this.aniOff = false;
|
|
|
let duration = this.duration;
|
|
|
let dhIndex=[0,0,0,0];//内部播放次数。
|
|
|
let ydIndex =[0,0,0,0] ; //达到长度时，要循环。
|
|
|
let isok = [false,false,false,false]
|
|
|
async function aniOpen(ix){
|
|
|
if(ydIndex[ix]>t.listData.length-1){
|
|
|
|
|
|
|
|
|
if(ix==0){
|
|
|
var animation0 = uni.createAnimation({
|
|
|
duration: 0
|
|
|
});
|
|
|
t.animationData0 = animation0;
|
|
|
animation0.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
|
|
|
t.animationData0 = animation0.export();
|
|
|
}else if(ix==1){
|
|
|
var animation1 = uni.createAnimation({
|
|
|
duration: 0
|
|
|
});
|
|
|
t.animationData1 = animation1;
|
|
|
animation1.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
|
|
|
t.animationData1 = animation1.export();
|
|
|
}else if(ix==2){
|
|
|
var animation2 = uni.createAnimation({
|
|
|
duration: 0
|
|
|
});
|
|
|
t.animationData2 = animation2;
|
|
|
animation2.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
|
|
|
t.animationData2 = animation2.export();
|
|
|
}else if(ix==3){
|
|
|
var animation3 = uni.createAnimation({
|
|
|
duration: 0
|
|
|
});
|
|
|
t.animationData3 = animation3;
|
|
|
animation3.translateY(-(t.listData.length-1)*uni.upx2px(160)).step({duration:0});
|
|
|
t.animationData3 = animation3.export();
|
|
|
}
|
|
|
await uni.$tm.sleep(50);
|
|
|
ydIndex[ix] = 0;
|
|
|
}else{
|
|
|
var animation = uni.createAnimation({
|
|
|
duration: duration,
|
|
|
timingFunction: 'linear'
|
|
|
});
|
|
|
|
|
|
|
|
|
if(ix==0){
|
|
|
t.animationData0 = animation;
|
|
|
let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
|
|
|
animation.translateY(uni.upx2px(jl)).step();
|
|
|
t.animationData0 = animation.export();
|
|
|
}else if(ix==1){
|
|
|
t.animationData1 = animation;
|
|
|
let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
|
|
|
animation.translateY(uni.upx2px(jl)).step();
|
|
|
t.animationData1 = animation.export();
|
|
|
}else if(ix==2){
|
|
|
t.animationData2 = animation;
|
|
|
let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
|
|
|
animation.translateY(uni.upx2px(jl)).step();
|
|
|
t.animationData2 = animation.export();
|
|
|
}else if(ix==3){
|
|
|
let jl = -(t.listData.length-1)*160+ydIndex[ix]*160;
|
|
|
animation.translateY(uni.upx2px(jl)).step();
|
|
|
t.animationData3 = animation.export();
|
|
|
|
|
|
}
|
|
|
|
|
|
await uni.$tm.sleep(duration);
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
dhIndex[ix] = dhIndex[ix]+1;
|
|
|
ydIndex[ix] = ydIndex[ix]+1;
|
|
|
|
|
|
if(dhIndex[ix] > zhongjiang[ix].playNum){
|
|
|
isok[ix] = true;
|
|
|
if(isok[0]&&isok[1]&&isok[2]&&isok[3]){
|
|
|
// 结束动画.
|
|
|
t.aniOff = true;
|
|
|
t.$emit('end',zhongjiang)
|
|
|
t.choujiangJieGuo = zhongjiang;
|
|
|
}
|
|
|
}else{
|
|
|
await aniOpen(ix);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
for(let i =0;i<zhongjiang.length;i++){
|
|
|
aniOpen(i);
|
|
|
}
|
|
|
|
|
|
|
|
|
});
|
|
|
},
|
|
|
// 重置 角度。
|
|
|
async resetInit() {
|
|
|
this.animationData0 = '';
|
|
|
var animation0 = uni.createAnimation({duration: 0});
|
|
|
this.animationData0 = animation0;
|
|
|
animation0.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
|
|
|
this.animationData0 = animation0.export();
|
|
|
|
|
|
this.animationData1 = '';
|
|
|
var animation1 = uni.createAnimation({duration: 0});
|
|
|
this.animationData1 = animation1;
|
|
|
animation1.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
|
|
|
this.animationData1 = animation1.export();
|
|
|
|
|
|
this.animationData2 = '';
|
|
|
var animation2 = uni.createAnimation({duration: 0});
|
|
|
this.animationData2 = animation2;
|
|
|
animation2.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
|
|
|
this.animationData2 = animation2.export();
|
|
|
|
|
|
this.animationData3 = '';
|
|
|
var animation3 = uni.createAnimation({duration: 0});
|
|
|
this.animationData3 = animation3;
|
|
|
animation3.translateY(-uni.upx2px((this.listData.length-1)*160)).step();
|
|
|
this.animationData3 = animation3.export();
|
|
|
await uni.$tm.sleep(50);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.tm-choujiangGame {
|
|
|
overflow: hidden;
|
|
|
.tm-choujiangGame-theme-1 {
|
|
|
.tm-choujiangGame-bg {
|
|
|
width: 600upx;
|
|
|
height: 600upx;
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 2;
|
|
|
.tm-choujiangGame-bg-image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
.tm-choujiangGame-point {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
.tm-choujiangGame-point-bar{
|
|
|
position: relative;
|
|
|
right: 0;
|
|
|
z-index: 0;
|
|
|
top: -50upx;
|
|
|
transform-origin: left right;
|
|
|
transition:all 0.5s;
|
|
|
}
|
|
|
}
|
|
|
.tm-choujiangGame-bg-prod {
|
|
|
position: absolute;
|
|
|
overflow: hidden;
|
|
|
width: 370upx;
|
|
|
height: 160upx;
|
|
|
top: 95upx;
|
|
|
left: 103upx;
|
|
|
display: flex;
|
|
|
z-index: 4;
|
|
|
.tm-choujiangGame-bg-cp {
|
|
|
transform-origin: center bottom;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.tm-choujiangGame-pingtai {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
margin-left: -20upx;
|
|
|
margin-top: -140upx;
|
|
|
overflow: hidden;
|
|
|
height: 190upx;
|
|
|
.tm-choujiangGame-pingtai-coll{
|
|
|
position: relative;
|
|
|
.tm-choujiangGame-pingtai-text{
|
|
|
position: absolute;
|
|
|
z-index: 3;
|
|
|
font-size: 48upx;
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
top: 10upx;
|
|
|
color: red;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|