uniapp幸运大转盘

<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>