yihuo/pages/hidden_activity/index.vue

<template>
    <page title="隐藏任务" ref="pageRef" light nav-color="transparent">
        <view class="bg"></view>
        <image :src="resource.popularize_bg" class="bg-2" />
        <view class="container">
            <view v-if="isActivity">
                <view
                    class="task"
                    v-for="item in data"
                    :key="item.taskId"
                    :style="item.synthesis !== 2 ? 'height: 387rpx' : null"
                >
                    <view class="task_img">
                        <image
                            class="img"
                            :src="item.synthesis === 2 ? resource.taskBgc : resource.taskBgc2x"
                        />
                        <view class="title">
                            {{ item.taskName }}
                        </view>
                        <view class="task_show">
                            <view class="img_border marginR12">
                                <image
                                    class="img_1"
                                    :style="
                                        item.needSynthesisSpu[0].exists === 1 &&
                                        item.synthesis !== 2
                                            ? 'filter: brightness(0%)'
                                            : null
                                    "
                                    :src="item.needSynthesisSpu[0].spuImg"
                                    @click.stop="showGoodsDetail(item.needSynthesisSpu[0].spuVO)"
                                />
                            </view>
                            <image class="img_2" :src="resource.hidden_add" />
                            <view class="img_border marginR26">
                                <image
                                    class="img_1"
                                    :style="
                                        item.needSynthesisSpu[1].exists === 1 &&
                                        item.synthesis !== 2
                                            ? 'filter: brightness(0%)'
                                            : null
                                    "
                                    :src="item.needSynthesisSpu[1].spuImg"
                                    @click.stop="showGoodsDetail(item.needSynthesisSpu[1].spuVO)"
                                />
                            </view>
                            <image class="img_3" :src="resource.hidden_equal" />
                            <view class="img_border">
                                <image
                                    class="img_1"
                                    :src="item.spuSynthesis[0].spuImg"
                                    @click.stop="showGoodsDetail(item.spuSynthesis[0].spuVO)"
                                />
                            </view>
                        </view>
                    </view>
                    <view v-if="item.synthesis === 2" class="done">
                        <image class="done_img" :src="resource.hidden_done" />
                    </view>
                    <view class="text" :style="textStyle[item.synthesis]">
                        {{ textData[item.synthesis] }}
                    </view>
                    <view
                        v-if="item.synthesis !== 2"
                        class="taskBtn"
                        :style="
                            item.synthesis === 1
                                ? 'background: linear-gradient(107deg, #B45CFE 0%, #9141FF 100%)'
                                : null
                        "
                        @click="handleTask(item)"
                    >
                        {{ item.synthesis === 1 ? '继续去抽盒' : '合成奖品' }}
                    </view>
                </view>
            </view>
            <view class="task" v-else>
                <view class="task_img">
                    <image class="img" :src="resource.taskBgc" />
                    <view class="title">
                        隐藏任务
                        <image class="lockImg" :src="resource.hidden_lock" />
                    </view>
                    <view class="task_show">
                        <image class="img_1 marginR12" :src="resource.hidden_img1" />
                        <image class="img_2" :src="resource.hidden_add" />
                        <image class="img_1 marginR29" :src="resource.hidden_img1" />
                        <image class="img_3" :src="resource.hidden_equal" />
                        <image class="img_1" :src="resource.hidden_img2" />
                    </view>
                </view>
                <view class="text">宝箱抽中特定隐藏任务款即可开启</view>
            </view>
            <view class="content paddingX15">
                <view class="title-wrapper translateX">
                    <image :src="resource.popularize_content_bg" class="image" />
                    <view class="relative font4 color-white bold">规则</view>
                </view>
                <view class="flex paddingT2 rule">
                    <view class="font5 paddingL10 paddingB16 bold">
                        1、宝箱奖池内抽中特定隐藏任务款，即可触发完整任务于活动页面合成奖品。
                    </view>
                    <view class="font5 paddingL10 paddingB16 bold">
                        2、任务款仅可在每轮任务限时内触发掉落，于每轮任务结束时截止合成，单用户单任务限合成一次。
                    </view>
                    <view class="font5 paddingL10 paddingB16 bold">
                        3、任务款仅可通过宝箱获取，其他途径（包括但不限于福利房、魔换等）获得均无法用于合成。
                    </view>
                    <view class="font5 paddingL10 paddingB16 bold">
                        4、合成后原有任务款即消耗，此操作不可逆，一经合成无法找回，合成后的奖品可在仓库中查看。
                    </view>
                    <view class="font5 paddingL10 bold">活动解释权归平台所有</view>
                </view>
            </view>
            <view class="lifting"></view>
            <view class="btn" @click="handleSubmit">
                <image class="img" :src="resource.hidden_activity" />
            </view>
        </view>
        <taskDialog ref="taskRef" @refresh="getTask" />
        <goods-detail ref="goodsDetailRef" />
    </page>
</template>

<script>
import resource from '@/utils/resource'
import service from '../../service'
import taskDialog from './activity_dialog.vue'
import goodsDetail from '../store/goods_detail'
export default {
    components: { taskDialog, goodsDetail },
    data() {
        return {
            resource,
            isActivity: true, // 活动是否开启
            data: [],
            textData: ['隐藏任务款已集齐，可发起合成', '隐藏任务已开启', '任务已完成，奖品已合成'],
            textStyle: [
                'background: linear-gradient(180deg, #34A7F9 0%, #10CBD4 100%);',
                'background: linear-gradient(180deg, #A466FF 0%, #904CF2 100%);',
                'background: #4A5DFF'
            ]
        }
    },
    onShow() {
        this.getTask()
    },
    mounted() {},
    computed: {
        dynamicStyles() {
            return {
                color: this.textColor
            }
        }
    },
    methods: {
        async getTask() {
            const res = await this.$service.award.hideTaskUserList()
            this.data = res.data.filter((item) => item.activation === 0)
            this.isActivity = this.data.length > 0
        },
        handleTask(item) {
            if (item.synthesis === 0) {
                this.$refs.taskRef.show(item.spuSynthesis[0].spuImg, item.taskId)
            } else {
                this.handleSubmit()
            }
        },
        handleSubmit() {
            this.$router.index()
        },
        showGoodsDetail(item) {
            this.$refs.goodsDetailRef.show(item)
        }
    }
}
</script>
<style lang="scss" scoped>
.bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #8332f5 0%, #2f4abd 100%);
    z-index: -1;
}
.bg-2 {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 1624rpx;
    z-index: 0;
}
.content {
    position: relative;
    background: #ffffff;
    box-shadow: inset 0px 0px 10px 5px rgba(143, 75, 241, 0.15);
    border: 4rpx solid #0f11b2;
    border-radius: 16px;
    margin: 30rpx 32rpx;
    .title-wrapper {
        position: absolute;
        top: -8rpx;
        width: 250rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 250rpx;
            height: 50rpx;
            z-index: 0;
        }
    }
    .rule {
        flex-direction: column;
        padding: 79rpx 0 36rpx 0;
        color: #6e39e7;
    }
}
.lifting {
    height: 150rpx;
}
.btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 59rpx;
    height: 102rpx;
    z-index: 9;
    .img {
        height: 100%;
    }
}
.task {
    position: relative;
    height: 291rpx;
    margin: 43rpx 32rpx 0;
    .task_img {
        height: 100%;
        .img {
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .title {
            position: absolute;
            top: 19rpx;
            left: 37rpx;
            font-size: 32rpx;
            font-weight: 600;
            color: #5c3ddb;
            width: 190rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            z-index: 2;
            .lockImg {
                width: 32rpx;
                height: 32rpx;
                vertical-align: text-top;
                margin-left: 8rpx;
            }
        }
        .task_show {
            display: flex;
            position: absolute;
            left: 32rpx;
            top: 120rpx;
            z-index: 3;
            .img_border {
                width: 180rpx;
                height: 139rpx;
                border: 2rpx solid #9b68e8;
                background-color: #f4ebff;
                border-radius: 10rpx;
                overflow: hidden;
            }
            .img_1 {
                width: 180rpx;
                height: 139rpx;
            }
            .img_2 {
                position: absolute;
                left: 163rpx;
                bottom: 42rpx;
                width: 56rpx;
                height: 56rpx;
                z-index: 5;
            }
            .img_3 {
                position: absolute;
                left: 399rpx;
                bottom: 56rpx;
                width: 28rpx;
                height: 28rpx;
                z-index: 5;
            }
        }
    }
    .done {
        position: absolute;
        top: 24rpx;
        right: 24rpx;
        width: 96rpx;
        height: 84rpx;
        z-index: 999;
        .done_img {
            width: 100%;
            height: 100%;
        }
    }

    .text {
        position: absolute;
        top: 8rpx;
        right: 8rpx;
        width: 450rpx;
        height: 76rpx;
        font-style: 24rpx;
        font-weight: 500;
        color: #fff;
        line-height: 76rpx;
        text-align: left;
        padding-left: 45rpx;
        border-radius: 0rpx 16rpx 0rpx 0rpx;
    }
    .taskBtn {
        position: absolute;
        bottom: 32rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 362rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(90deg, #eb9466 0%, #eb3c65 100%);
        border-radius: 44rpx;
        border: 1rpx solid rgba(255, 255, 255, 0.51);
        z-index: 2;
    }
}
</style>