yihuo/pages/hidden_activity/activity_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.exchangeBgc" webp class="poster" mode="widthFix" />
            </view>
            <view class="content">
                <view class="text">兑换后您将获得：</view>
                <view class="img">
                    <image class="img_con" :src="spuImg"></image>
                </view>
                <view>兑换后原有任务款即消耗，一经兑换无法找回，兑换后的奖品可在「仓库」中查看</view>
                <view class="btn">
                    <view class="sub1"  @click="close">我再想想</view>
                    <view class="sub2" @click="submit">确定兑换</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,
            spuImg: '',
            hideTaskUserId: ''
        }
    },
    methods: {
        show(spuImg, taskId) {
            this.spuImg = spuImg
            this.visible = true
            this.hideTaskUserId = taskId
        },
        close() {
            this.visible = false
        },
        async submit() {
            await this.$service.award.hidetaskSynthesis(this.hideTaskUserId)
            .then(res => {
                this.$message.success('兑换成功！')
                this.visible = false
                this.$emit('refresh')
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.show {
    z-index: 9999;
}
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}
.task_dialog {
    position: relative;
    height: 739rpx;
    width: 640rpx;
    margin: 0 55rpx;
    opacity: .9;
    background-color: #ffffff00;
    z-index: 10000;
    .wrapper {
        width: 100%;
        margin: 0 auto;
        position: relative;
        .poster {
            width: 100%;
        }

    }
    .content {
        position: absolute;
        bottom: 0;
        height: 572rpx;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        font-size: 28rpx;
        color: #fff;
        margin: 0 32rpx;
        text-align: center;
        z-index: 10002;
        .text {
            font-size: 32rpx;
            font-weight: 500;
        }
        .img {
            width: 320rpx;
            height: 247rpx;
            border: 2rpx soild #7f34f3;
            background-color: #f4ebff;
            border-radius: 15rpx;
            overflow: hidden;
            .img_con {
                width: 100%;
                height: 100%;
            }
        }
        .btn {
            display: flex;
            justify-content: space-between;
            width: 440rpx;
            .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: 10002;
        .x {
            width: 60rpx;
            height: 60rpx;
            }
    }
}


</style>