yihuo/pages/weal_detail/luck_num_dialog.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog" style="background-color: transparent; width: 100%">
            <view
                v-if="type === 1"
                class="relative wrapper"
                :style="'background-image:url(' + ossurl.welfare.luckNumBg + ')'"
            >
                <view class="luck_num">
                    <view class="num_list">
                        <view
                            class="num_item"
                            v-for="(item, index) in numList"
                            :key="index"
                            :style="'background-image:url(' + ossurl.welfare.luckNum + ')'"
                        >
                            <view class="text">{{ item.sign }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else class="relative share_wrapper">
                <!-- <image class="width100 height100" :src="ossurl.welfare.inviteRule" mode="widthFix" />
                <view class="share_btn">
                    <button open-type="share" class="share-btn btn-clear"></button>
                </view> -->
            </view>
        </view>
        <view class="cancel">
            <view class="close" @click="close">
                <text class="cuIcon-close"></text>
            </view>
        </view>
    </view>
</template>

<script>
    import resource from '@/utils/resource'
    import store from '@/store'
    import ossurl from '@/utils/ossurl'
    export default {
        data() {
            return {
                ossurl,
                resource,
                visible: false,
                type: 2,
                roomId: null,
                numList: []
            }
        },
        onShareAppMessage(res) {
            const user = store.getters.user
            return {
                title: `参与房间 和我一起免费抢手办吧！`,
                path: `/pages/weal_detail/index?id=${this.roomId}&userId=${this.user.username}`,
                imageUrl: ossurl.welfare.roomShare
            }
        },
        methods: {
            show(type, roomId) {
                this.type = type
                this.roomId = roomId
                if (type === 1) this.getLuckNum()
                this.visible = true
            },
            close() {
                this.visible = false
            },
            submit() {
                this.visible = false
                this.$emit('success')
            },
            async getLuckNum() {
                const res = await this.$service.weal.lucknumList(this.roomId)
                this.numList = res.data
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        width: 554rpx;
        height: 794rpx;
        margin: 0 auto;
        background-size: 100% 100%;
        padding-top: 380rpx;
    }
    .share_wrapper {
        width: 686rpx;
        margin: 0 auto;
        .share_btn {
            position: relative;
            width: 380rpx;
            height: 80rpx;
            position: absolute;
            bottom: 120rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .share_x {
            position: absolute;
            top: 6rpx;
            right: 6rpx;
        }
    }
    .luck_num {
        padding: 20rpx;
        height: 330rpx;
        overflow: scroll;
        z-index: 99;
        .num_list {
            width: 100%;
            height: 100%;
            text-align: center;
            .num_item {
                display: inline-block;
                width: 344rpx;
                height: 92rpx;
                margin-bottom: 20rpx;
                background-size: 100% 100%;
                position: relative;
                .text {
                    width: 100%;
                    height: 100%;
                    font-size: 44rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 500;
                    color: #352600;
                    letter-spacing: 4px;
                    line-height: 92rpx;
                    text-align: center;
                }
                .img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }
            }
        }
    }

    .confirm {
        position: absolute;
        bottom: 30rpx;
        right: 42rpx;
    }
    .x {
        width: 48rpx;
        height: 48rpx;
    }
    .share-btn {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .cancel {
        position: fixed;
        bottom: 360rpx;
        right: 50%;
        margin-right: -32rpx;
        z-index: 100;
        .close {
            position: absolute;
            right: 0;
            width: 64rpx;
            height: 64rpx;

            background: #d8d8d8;
            border-radius: 64rpx;
            color: #444444;
            top: 30rpx;
            line-height: 64rpx;
            font-size: 32rpx;
            text-align: center;
        }
    }
</style>