yihuo/pages/exchange/red_packet.vue

<template>
    <view>
        <view class="change-container">
            <view class="relative width100 height100">
                <image class="width100 height100" :src="resource.ex_red_bg" />
                <view class="contain">
                    <view class="text" style="font-size: 64rpx">恭喜您合成蛋糕</view>
                    <view class="text marginT20" style="font-size: 36rpx">
                        - 当前已有{{ cakeTotal }}人合成蛋糕 -
                    </view>
                </view>
                <image
                    class="open_red"
                    :src="isEnd === 0 ? resource.ex_redBag : resource.ex_open_redBag"
                    @click.stop="open"
                />
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'

export default {
    props: {
        cakeTotal: Number,
        isEnd: Number
    },
    data() {
        return {
            resource,
            materialList: []
        }
    },
    mounted() {},
    methods: {
        open() {
            if (this.isEnd === 0) return
            this.$service.weal.carveUpMoney().then((res) => {
                if (res.code === '0') {
                    this.$emit('open')
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.change-container {
    position: fixed;
    bottom: 48rpx;
    left: 30rpx;
    width: 694rpx;
    height: 732rpx;

    .contain {
        position: absolute;
        top: 68rpx;
        width: 100%;
        height: 225rpx;
        text-align: center;
        .text {
            color: #fdcd53;
            width: 100%;
        }
    }
    .open_red {
        position: absolute;
        left: 211rpx;
        bottom: 117rpx;
        width: 272rpx;
        height: 272rpx;
    }
}
</style>