yihuo/pages/hidden_activity/hidden_task_dialog.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog task_dialog">
            <view class="relative wrapper">
                <image :src="resource.hidden_backImg" webp class="poster" mode="widthFix" />
            </view>
            <view class="content">
                <view class="text">{{ text }}</view>
                <view class="btn">
                    <view class="sub1" @click="close">我知道了</view>
                    <view class="sub2" @click="submit">{{ btnText }}</view>
                </view>
            </view>
            <view class="close">
                <image :src="resource.icon_close" class="x" @click="close" />
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            visible: false,
            text: '',
            btnText: '进入活动'
        }
    },
    methods: {
        show(hideTask) {
            this.visible = true
            this.text =
                hideTask === 1
                    ? '宝箱奖池内抽中特定隐藏任务款，可触发隐藏任务，于活动页面可合成奖品'
                    : '您的任务所需隐藏任务款已全部抽到，可前往任务页面合成奖品'
            this.btnText = hideTask === 1 ? '进入活动' : '立即合成'
        },
        close() {
            this.visible = false
        },
        async submit() {
            this.close()
            this.$router.push('hidden_activity')
            // await this.$service.award.hidetaskSynthesis(this.hideTaskUserId)
            // .then(res => {
            //     this.$message.success('合成成功！')
            //     this.visible = false
            //     this.$emit('refresh')
            //     console.log(res);
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.task_dialog {
    position: relative;
    height: 538rpx;
    width: 640rpx;
    margin: 0 55rpx;
    opacity: 0.9;
    background-color: #ffffff00;
    .wrapper {
        z-index: 1;
        width: 100%;
        margin: 0 auto;
        position: relative;
        .poster {
            width: 100%;
        }
    }
    .content {
        position: absolute;
        bottom: 0;
        width: 640rpx;
        height: 320rpx;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        font-size: 28rpx;
        color: #fff;
        line-height: 40rpx;
        z-index: 2;
        .text {
            width: 576rpx;
            height: 144rpx;
            margin: 0 32rpx;
            padding: 32rpx 24rpx;
            color: #6e39e7;
            border: 2rpx soild #7f34f3;
            background-color: #f4ebff;
            border-radius: 15rpx;
        }
        .btn {
            display: flex;
            justify-content: space-between;
            width: 440rpx;
            text-align: center;
            .sub1 {
                width: 204rpx;
                height: 64rpx;
                line-height: 64rpx;
                background: linear-gradient(270deg, #34a7f9 0%, #10cbd4 100%);
                border-radius: 44rpx;
            }
            .sub2 {
                width: 204rpx;
                height: 64rpx;
                line-height: 64rpx;
                background: linear-gradient(90deg, #eb9466 0%, #eb3c65 100%);
                border-radius: 44rpx;
            }
        }
    }
    .close {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        z-index: 2;
        .x {
            width: 60rpx;
            height: 60rpx;
        }
    }
}
</style>