mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,318 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user