yihuo/pages/weal/reel_result.vue

<template>
    <view class="cu-modal" :class="{'show': visible}">
        <view class="mask"></view>
        <view class="wrapper cu-dialog">
            <view class="relative">
                <image class="bg_popup" :src="resource.award_coupon_popup" />
                <view class="content paddingY21">
                    <view class="flex-align-center">
                        <image :src="resource.lottery_title" style="height: 44rpx; width: 338rpx" mode="heightFix" />
                    </view>
                    <view class="flex-align-center paddingY20">
                        <view @click="showDetail(data)" >
                            <image :src="data.cover" class="radius6" style="width: 234rpx;height:0" mode="widthFix" />
                        </view>
                    </view>
                    <view class="flex-align-center paddingT10">
                        <view class="relative" style="height: 115rpx;">
                            <image class="btn-image" :src="resource.lottery_btn_small_2" webp mode="heightFix" @click="close" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <goods-detail ref="goodsDetailRef" />
    </view>
</template>

<script>
import resource from '@/utils/resource'
import goodsDetail from './../store/goods_detail'

export default {
    components: { goodsDetail },
    props: {
        isDemo: Boolean,
        periodQuantity: Number
    },
    data() {
        return {
            resource,
            data: null,
            visible: false
        }
    },
    computed: {},
    methods: {
        show(spu) {
            this.$parent.$parent.lock = true
            this.data = spu
            this.visible = true
        },
        close() {
            this.$parent.$parent.lock = false
            this.visible = false
            this.data = null
        },
        showDetail(item) {
            if (!item) return
            this.$refs.goodsDetailRef.show(item)
        }
    }
}
</script>
<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    z-index: 1001;
    margin: 0 28rpx;
    width: calc(100vw - 56rpx);
    background-color: transparent;
    .bg_popup {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 99%;
    }

    .content {
        position: relative;
        width: 100%;
        .btn-image {
            height: 100%;
        }
        .text {
            position: absolute;
            bottom: 20rpx;
            font-size: 20rpx;
            color: #fff;
            width: 100%;
            text-align: center;
        }
    }
}
</style>