318 lines
9.1 KiB
Vue
318 lines
9.1 KiB
Vue
<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> |