yihuo/pages/weal/activity.vue

<template>
    <view>
        <scroll-view
            class="scroll-wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
        >
            <view class="wrapper">
                <image :src="resource.weal_activity_bg" webp class="bg" mode="widthFix" />
                <view style="height: 492rpx"></view>
                <view class="content paddingX15">
                    <view class="title-wrapper translateX flex-align-center">
                        <image
                            :src="resource.weal_activity_title_1"
                            style="width: 446rpx; height: 32rpx"
                        />
                    </view>
                    <view class="flex paddingT38">
                        <image
                            class="flex-shrink0 marginT4"
                            :src="resource.weal_activity_flag"
                            style="width: 28rpx; height: 28rpx"
                        />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">规则：</text>
                            1.活动期间注册的新用户（自12月25日0时-5日24时）可领
                            <text class="color-theme">限时8元无门槛优惠券+199源石</text>
                            ，即可
                            <text class="color-theme">0元</text>
                            享9.9元抽奖活动。
                        </view>
                    </view>
                    <view class="flex paddingT20 paddingB24">
                        <image
                            class="flex-shrink0 marginT4"
                            :src="resource.weal_activity_flag"
                            style="width: 28rpx; height: 28rpx"
                        />
                        <view class="font5 paddingL10 color-1">
                            2.所得奖品需自行支付
                            <text class="color-theme">15元邮费</text>
                            ，或满
                            <text class="color-theme">五</text>
                            件商品享
                            <text class="color-theme">包邮</text>
                            ，三个工作日内发货（目前受疫情影响暂无法发货，我们会在恢复物流的第一时间为您发货）
                        </view>
                    </view>
                </view>
                <view class="content paddingX15 marginT38">
                    <view class="title-wrapper translateX flex-align-center">
                        <image
                            :src="resource.weal_activity_title_2"
                            style="width: 364rpx; height: 32rpx"
                        />
                    </view>
                    <view class="paddingT26 flex-align-center color-1 bold font6">
                        源力积累，祈福成功！
                    </view>
                    <view class="paddingT8 paddingB17 flex-align-between">
                        <view
                            v-for="item in list1"
                            :key="item.id"
                            class="goods-wrapper flex-align-center"
                        >
                            <image :src="item.spu.cover" class="image" mode="aspectFit" />
                        </view>
                    </view>
                </view>
                <view class="content paddingX15 marginT38">
                    <view class="title-wrapper translateX flex-align-center">
                        <image
                            :src="resource.weal_activity_title_3"
                            style="width: 408rpx; height: 32rpx"
                        />
                    </view>
                    <view class="flex paddingT38 paddingB20">
                        <image
                            class="flex-shrink0 marginT4"
                            :src="resource.weal_activity_flag"
                            style="width: 28rpx; height: 28rpx"
                        />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">规则：</text>
                            1、活动期间（自25日0时-5日24时），无论新老用户，凡充值100元起，即可获得额外3%源石，大客户（消费满5w元即可成为大客户）可获得额外5%源石，充值金额不支持提现。
                        </view>
                    </view>
                    <view class="flex-align-center paddingB24">
                        <view
                            class="rank-btn font6 color-white flex-align-center"
                            @click="recharge"
                        >
                            去充值
                        </view>
                    </view>
                </view>
                <!--
                <view class="content paddingX15 marginT38">
                    <view class="title-wrapper translateX flex-align-center">
                        <image :src="resource.weal_activity_title_4" style="width: 282rpx; height: 32rpx" />
                    </view>
                    <view style="height: 52rpx"></view>
                    <view class="relative flex-align-center">
                        <image :src="resource.weal_activity_rank_1" style="width: 184rpx; height: 60rpx" />
                        <button open-type="share" class="share-btn btn-clear translateY">去号召</button>
                    </view>
                    <view class="flex-align-center paddingT8">
                        <view class="rank-btn font6 color-white flex-align-center" @click="showRank1">查看实时榜单</view>
                    </view>
                    <view class="paddingT12 flex-align-between">
                        <scroll-view scroll-x class="scroll-goods-wrapper">
                            <view v-for="item in list2" :key="item.id" class="goods-wrapper flex-align-center">
                                <image :src="item.cover" class="image" mode="aspectFit" />
                            </view>
                        </scroll-view>
                    </view>
                    <view class="flex paddingT20">
                        <image class="flex-shrink0 marginT4" :src="resource.weal_activity_flag" style="width: 28rpx; height: 28rpx" />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">规则：</text>
                            ：活动期间（自25日0时-5日24时），无论新老用户，凡【消费钱包或实际金额】即可计入榜单（源石、魔换消费等均不计入），榜单实时更新。
                        </view>
                    </view>
                    <view class="flex paddingT20">
                        <image class="flex-shrink0 marginT4" :src="resource.weal_activity_flag" style="width: 28rpx; height: 28rpx" />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">奖励领取要求：</text>
                            榜单<text class="color-theme">前十名</text>，且累计成功邀请<text class="color-theme">20人</text>
                            以上(含20人)，即可依名次获得相应奖品；榜单<text class="color-theme">前三名</text>，且累计成功邀请
                            <text class="color-theme">50人</text>以上(含50人)，即可获得相应前三奖品。奖品均于活动结束后十个工作日内发放。
                        </view>
                    </view>
                    <view class="relative flex-align-center paddingT18">
                        <image :src="resource.weal_activity_rank_2" style="width: 184rpx; height: 60rpx" />
                    </view>
                    <view class="flex-align-center paddingT8">
                        <view class="rank-btn font6 color-white flex-align-center">查看实时榜单</view>
                    </view>
                    <view class="paddingT12 flex-align-between">
                        <scroll-view scroll-x class="scroll-goods-wrapper">
                            <view v-for="item in list3" :key="item.id" class="goods-wrapper flex-align-center">
                                <image :src="item.cover" class="image" mode="aspectFit" />
                            </view>
                        </scroll-view>
                    </view>
                    <view class="flex paddingT20">
                        <image class="flex-shrink0 marginT4" :src="resource.weal_activity_flag" style="width: 28rpx; height: 28rpx" />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">规则：</text>
                            活动期间（自25日0时-5日24时），无论新老用户，凡<text class="color-theme">【实际消费】</text>
                            即可计入榜单，包含<text class="color-theme">充值源石及实际金额消费</text>
                            （消费已有源石、魔换消费等均不计入），榜单实时更新。
                        </view>
                    </view>
                    <view class="flex paddingY20">
                        <image class="flex-shrink0 marginT4" :src="resource.weal_activity_flag" style="width: 28rpx; height: 28rpx" />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">奖励领取要求：</text>
                            榜单<text class="color-theme">前二十</text>
                            名可依名次获得相应奖品，奖品均于活动结束后十个工作日内发放。
                        </view>
                    </view>
                </view>-->

                <view
                    class="paddingX15 paddingT20 paddingB30 color-white font4"
                    style="opacity: 0.8"
                >
                    <view class="text-center">微信小程序@燚火漫域SuperMarts</view>
                    <view class="text-center paddingT4">微信公众号@燚火漫域SuperMarts</view>
                    <view class="text-center paddingT4">客服@超级小可爱</view>
                    <view class="text-center paddingT4">
                        活动期间流水成就房暂时关闭使用,活动结束后恢复上线
                    </view>
                    <view class="text-center paddingT4">@本活动最终解释权归本平台所有</view>
                </view>
            </view>
        </scroll-view>
        <rank1 ref="rank1" />
    </view>
</template>

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

export default {
    components: { rank1 },
    props: {
        statusBarHeight: Number,
        activityId: Number
    },
    data() {
        return {
            resource,
            refreshing: false,
            requesting: false,
            list1: [],
            list2: [],
            list3: []
        }
    },
    computed: {
        top() {
            return this.statusBarHeight + uni.upx2px(72) + 45
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        pullRefresh() {
            getData()
        },
        async getData() {
            if (this.requesting) return
            this.requesting = true
            const res = await this.$service.weal.activityTabDetail()
            if (res) {
                this.list1 = res.substituteGoodsList.slice(0, 4)
                this.list2 = res.callGoodsList
                this.list3 = res.niuGoodsList
            }
            setTimeout(() => {
                this.refreshing = false
                this.requesting = false
            }, 1000)
        },
        recharge() {
            if (!this.$common.checkLogin()) return
            const user = store.getters.user
            this.$common.showKefu(`我要充值 (${user.username})`)
        },
        showRank1() {
            this.$refs.rank1.show()
        }
    }
}
</script>
<style lang="scss" scoped>
.scroll-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
.wrapper {
    background: linear-gradient(180deg, #922dff 0%, #2f4abd 100%);
}
.bg {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}
.content {
    position: relative;
    background: #ffffff;
    box-shadow: inset 0px 0px 10px 5px rgba(143, 75, 241, 0.15);
    border-radius: 10px;
    margin-left: 30rpx;
    margin-right: 30rpx;
    .title-wrapper {
        position: absolute;
        top: -36rpx;
        width: 560rpx;
        height: 72rpx;
        background: linear-gradient(360deg, #6832dd 0%, #ab5dff 100%);
        border-radius: 36rpx;
    }
    .scroll-goods-wrapper {
        overflow: hidden;
        height: 180rpx;
        white-space: nowrap;
        width: 100%;
        .goods-wrapper {
            display: inline-block;
            margin-right: 16rpx;
        }
    }
    .goods-wrapper {
        width: 152rpx;
        height: 180rpx;
        background: #ffffff;
        border-radius: 12rpx;
        border: 4rpx solid #8f4bf1;
        .image {
            width: 142rpx;
            height: 165rpx;
        }
    }
    .rank-btn {
        width: 286rpx;
        height: 64rpx;
        background: linear-gradient(360deg, #5da6ff 0%, #1ed3c5 100%);
        border-radius: 32rpx;
    }
    .share-btn {
        position: absolute;
        right: 40rpx;
        margin: 0;
        width: 140rpx;
        height: 52rpx;
        line-height: 52rpx;
        background: linear-gradient(180deg, #ff9e30 0%, #ff5d5d 100%);
        border-radius: 26rpx;
        color: #fff;
        font-size: 28rpx;
    }
}
</style>