<template>
<view class="countes" v-if="cloneShow">
<view class="countres">
<view @click="showtt()" style="width: 100%; margin-bottom: -80rpx; margin-left: 40rpx;">
<image mode="widthFix" class="Forkoaff"
:src="imageUrl+'/1/headimg/f478c7f3-4f7e-42aa-b245-6b81d1320612.png'"></image>
</view>
<view style="position: relative;">
<view class="bjtable" :class="{'posts':Circle}"
:style="'transform:rotate('+(-indext)+'deg);background:url('+imageUrl+'/1/headimg/3fb21b06-202f-4e46-af04-9e010be55284.png) no-repeat;background-size: 100% 100%;'">
<view v-for="(item,index) in arrty" :style="{transform:`rotate(${index*number-6}deg)`}"
class="painta">
<view class="paint-flex">
<view class="flex-title">{{item.configurationContent}}</view>
<view style="margin-top: 20rpx;" class="paint-img">
<image mode="widthFix" class="uni-img" :src="item.picture"></image>
</view>
</view>
</view>
</view>
<view class="bj-index">
<image class="bj-image" mode="widthFix" @click="StartLottery"
:src="imageUrl+'1/headimg/a5f19ffd-4993-4920-99eb-e3edd776bd36.png'"></image>
</view>
</view>
<view class="masking">
<view>
<image mode="widthFix" class="masking-img"
:src="imageUrl+'1/headimg/9ee74602-97b8-41d5-bbcd-a5278d30037a.png'"></image>
</view>
<view>
<image @click="StartLottery" mode="widthFix" class="fil-image"
:src="imageUrl+'/1/headimg/803c37fb-5ba6-4d30-99d6-ff565a32144c.png'"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['imageUrl'],
data() {
return {
cloneShow: false,
Circle: false,
floa: false,
indext: 0,
circle:0,
as: 0,
arrty: [],
}
},
computed: {
number() {
return 360 / this.arrty.length;
}
},
methods: {
showtt() {
if (!this.floa) {
this.cloneShow = false;
}
},
showon() {
this.cloneShow = !this.cloneShow;
},
StartLottery() {
if (this.floa) return;
this.floa = true;
this.$api.immediateLotteryDraw({
lotteryDrawType: 1,
}).then(res => {
console.log(res.data)
if (res.data==null) {
console.log(1111)
this.floa = false;
return false;
}
this.indext = this.circle;
setTimeout(() => {
this.Circle = true;
console.log(res.data);
let a = this.arrty.findIndex(item => item.id == res.data.id);
this.indext = (8 * 360 + (a * this.number));
this.circle = a * this.number;
}, 80)
setTimeout(() => {
this.$parent.into();
this.Circle = false;
this.floa = false;
uni.showModal({
content:'恭喜你获得'+res.data.configurationContent,
showCancel:false,
})
}, 10000)
}).catch(err => {
this.floa = false;
})
}
},
mounted() {
let type = {
type: 1,
}
this.$api.lotteryList(type).then(res => {
this.arrty = res.data.list;
})
}
}
</script>
<style lang="scss">
.countes {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 122;
background-color: rgba(0, 0, 0, 0.5);
}
.countres {
width: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 123;
display: flex;
flex-direction: column;
align-items: center;
}
.Forkoaff {
width: 68rpx;
height: 68rpx;
float: right;
margin-right: 90rpx;
position: relative;
z-index: 145;
}
.bjtable {
width: 586rpx;
height: 586rpx;
position: relative;
z-index: 20;
}
.posts {
width: 586rpx;
height: 586rpx;
transition: transform 10s ease;
}
@keyframes anima {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.bj-index {
position: absolute;
top: 200rpx;
left: 220rpx;
z-index: 100;
}
.bj-image {
width: 160rpx;
}
.painta {
width: 300rpx;
height: 300rpx;
position: absolute;
left: 50%;
top: 0;
transform-origin: 0% 100%;
}
.paint-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transform: rotate(30deg) translateX(-20%) translateY(15%);
}
.painta:nth-child(1) .paint-flex {
margin-left: -26rpx;
transform: rotateY(20deg) rotate(30deg) translateX(-20%) translateY(15%);
.flex-title {
margin-left: 10rpx;
}
}
.painta:nth-child(3) .paint-flex {
margin-left: -26rpx;
transform: rotateY(8deg) rotate(20deg) translateX(-20%) translateY(20%);
.flex-title {
margin-left: 10rpx;
}
.uni-img {
transform: rotateY(10deg) translateX(-19%) ;
margin-left: 20rpx;
margin-top: -5rpx;
}
}
.painta:nth-child(4) .paint-flex {
margin-top: 40rpx;
transform: rotate(30deg) rotateZ(-8deg) translateX(-30%) translateY(6%);
}
.painta:nth-child(5) .paint-flex {
transform: rotate(16deg) translateX(-22%) translateY(15%) rotateZ(8deg);
}
.painta:nth-child(6) .paint-flex {
margin-left: -26rpx;
transform: rotateY(20deg) rotate(30deg) translateX(-20%) translateY(15%);
.flex-title {
margin-left: 10rpx;
}
.uni-img {
transform: rotateY(-20deg);
margin-left: 20rpx;
}
}
.flex-title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
}
// .uni-img {
// width: 76rpx;
// }
.painta:nth-child(odd) .flex-title {
color: #95322F;
}
.painta:nth-child(even) .flex-title {
color: #EC2516;
}
.painta:nth-child(odd) .uni-img {
width: 80rpx;
}
.painta:nth-child(even) .uni-img {
width: 80rpx;
}
.masking {
position: relative;
margin-top: -20rpx;
z-index: 10;
}
.masking-img {
width: 444rpx;
}
.fil-image {
position: absolute;
bottom: 10rpx;
width: 233rpx;
left: 24%;
}
</style>