|
|
<template>
|
|
|
<view class="tm-choujiangGrid">
|
|
|
<view class="tm-choujiangGrid-bg"
|
|
|
:style="{
|
|
|
backgroundImage: `url(${them_data.bg})`
|
|
|
}"
|
|
|
>
|
|
|
<view v-if="listData.length==8" class="tm-choujiangGrid-con">
|
|
|
<view v-for="(item,index) in 3" :key="index" class="tm-choujiangGrid-grid">
|
|
|
<block v-if="index==0">
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :width="100" :src="listData[0].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==0)||(choujiangJieGuo&&aniOff&&active==0)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :width="100" :src="listData[1].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==1)||(choujiangJieGuo&&aniOff&&active==1)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :width="100" :src="listData[2].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==2)||(choujiangJieGuo&&aniOff&&active==2)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
</block>
|
|
|
<block v-if="index==1">
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :width="100" :src="listData[7].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==7)||(choujiangJieGuo&&aniOff&&active==7)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
<view @click="clickImgPlay" class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center tm-choujiangGrid-item-point">
|
|
|
<tm-images :width="140" :src="them_data.point"></tm-images>
|
|
|
</view>
|
|
|
<view class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :width="100" :src="listData[3].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==3)||(choujiangJieGuo&&aniOff&&active==3)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
</block>
|
|
|
<block v-if="index==2">
|
|
|
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :width="100" :src="listData[6].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==6)||(choujiangJieGuo&&aniOff&&active==6)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :width="100" :src="listData[5].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==5)||(choujiangJieGuo&&aniOff&&active==5)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
<view class="tm-choujiangGrid-item">
|
|
|
<view class="tm-choujiangGrid-item-img flex-center">
|
|
|
<tm-images :previmage="false" :width="100" :src="listData[4].img"></tm-images>
|
|
|
</view>
|
|
|
<view :class="{on:(aniOff==false&&active==4)||(choujiangJieGuo&&aniOff&&active==4)}" class="tm-choujiangGrid-item-hover"></view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 转盘抽奖
|
|
|
* @property {Number} theme-index = [] 默认0，主题索引，我已内置两套皮肤。
|
|
|
* @property {Array} theme-list = [] 默认[已内置两套]，主题列表数据，已有两套。
|
|
|
* @property {Boolean} disabled = [] 默认 false，是否禁用
|
|
|
* @property {Number} duration = [] 默认 3000，动画时长
|
|
|
* @property {Boolean} disabledCenter = [] 默认 false，是否禁用点中间图片开始。
|
|
|
* @property {Number} turns = [] 默认 2，转的圈数
|
|
|
* @property {Number} specify = [] 默认 null，为整数时，即可指定奖品，始终中奖保持在这个位置。
|
|
|
* @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-choujiangGrid',
|
|
|
props: {
|
|
|
themeIndex: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
themeList: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [
|
|
|
{
|
|
|
bg: 'https://jx2d.cn/yuwuimages/choujiangGrid_1.png?k=9',
|
|
|
point: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_0.png'
|
|
|
},
|
|
|
{
|
|
|
bg: 'https://jx2d.cn/yuwuimages/choujiangGrid_2.png?k=9',
|
|
|
point: 'https://jx2d.cn/yuwuimages/choujiangGrid_2_0.png'
|
|
|
}
|
|
|
];
|
|
|
}
|
|
|
},
|
|
|
disabled: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
//是否禁用点中间图片开始。
|
|
|
disabledCenter:{
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
// 动画时长
|
|
|
duration: {
|
|
|
type: Number,
|
|
|
default: 100
|
|
|
},
|
|
|
list: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [
|
|
|
{ name: '1', gailv: 30, id: 1, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
|
|
|
{ name: '2', gailv: 10, id: 2, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' },
|
|
|
{ name: '3', gailv: 10, id: 3, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
|
|
|
{ name: '4', gailv: 10, id: 4, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' },
|
|
|
{ name: '5', gailv: 10, id: 5, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' },
|
|
|
{ name: '6', gailv: 10, id: 7, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
|
|
|
{ name: '7', gailv: 10, id: 8, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_1.png' },
|
|
|
{ name: '8', gailv: 10, id: 9, img: 'https://jx2d.cn/yuwuimages/choujiangGrid_1_2.png' }
|
|
|
];
|
|
|
}
|
|
|
},
|
|
|
// 转的圈数。
|
|
|
turns:{
|
|
|
type:Number,
|
|
|
default:2
|
|
|
},
|
|
|
//指定中奖的奖品数组索引，从0开始
|
|
|
specify:{
|
|
|
type:Number,
|
|
|
default:null
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
|
|
|
aniOff: true,
|
|
|
active:0,
|
|
|
choujiangJieGuo:null,
|
|
|
listData: [],
|
|
|
timeid:8564
|
|
|
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.listData = this.list;
|
|
|
},
|
|
|
destroyed() {
|
|
|
clearTimeout(this.timeid)
|
|
|
},
|
|
|
computed: {
|
|
|
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();
|
|
|
let index = 0
|
|
|
for(let j=0;j<this.listData.length;j++){
|
|
|
if(this.listData[j].id === xh.id){
|
|
|
index = j;
|
|
|
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
let cisu = (this.listData.length-1)*this.turns+this.turns*2 + (this.specify!==null?this.specify:index);
|
|
|
zhongle = {
|
|
|
index:index,
|
|
|
data:xh,
|
|
|
playNum:cisu
|
|
|
}
|
|
|
return zhongle;
|
|
|
},
|
|
|
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(function() {
|
|
|
this.aniOff = false;
|
|
|
let duration = this.duration;
|
|
|
let playcCisu = 0; //总次数的序列。
|
|
|
// 循环的内部索引.
|
|
|
let nbIndex = 0;
|
|
|
function aniOpen(){
|
|
|
if(nbIndex>t.listData.length-1){
|
|
|
nbIndex = 0;
|
|
|
t.active = nbIndex;
|
|
|
}else{
|
|
|
t.active = nbIndex;
|
|
|
nbIndex += 1;
|
|
|
}
|
|
|
clearTimeout(t.timeid);
|
|
|
t.timeid = setTimeout(function() {
|
|
|
playcCisu +=1;
|
|
|
if(playcCisu > zhongjiang.playNum){
|
|
|
t.$emit('end',{index:zhongjiang.index,data:zhongjiang.data})
|
|
|
t.choujiangJieGuo = zhongjiang;
|
|
|
t.aniOff = true;
|
|
|
}else{
|
|
|
aniOpen();
|
|
|
}
|
|
|
}, duration);
|
|
|
}
|
|
|
aniOpen();
|
|
|
});
|
|
|
},
|
|
|
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.tm-choujiangGrid {
|
|
|
overflow: hidden;
|
|
|
.tm-choujiangGrid-bg{
|
|
|
width:600upx;
|
|
|
height: 600upx;
|
|
|
position: relative;
|
|
|
margin: auto;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
.tm-choujiangGrid-con{
|
|
|
position: absolute;
|
|
|
|
|
|
width: 450upx;
|
|
|
height: 450upx;
|
|
|
top: 75upx;
|
|
|
left: 75upx;
|
|
|
.tm-choujiangGrid-grid{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.tm-choujiangGrid-item{
|
|
|
width: 137upx;
|
|
|
height: 130upx;
|
|
|
border-radius: 20upx;
|
|
|
overflow: hidden;
|
|
|
margin-left: 10upx;
|
|
|
position: relative;
|
|
|
margin-bottom: 28upx;
|
|
|
.tm-choujiangGrid-item-img{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
color: black;
|
|
|
&.tm-choujiangGrid-item-point{
|
|
|
animation: scalanit 1s linear infinite;
|
|
|
}
|
|
|
}
|
|
|
.tm-choujiangGrid-item-hover{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background-color: #ffaa17;
|
|
|
opacity: 0;
|
|
|
&.on{
|
|
|
opacity: 0.6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@keyframes scalanit {
|
|
|
0%{
|
|
|
transform: scale(0.9);
|
|
|
}
|
|
|
50%{
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
100%{
|
|
|
transform: scale(0.9);
|
|
|
}
|
|
|
}
|
|
|
</style> |