yihuo/pages/popularize/index.vue

<template>
    <page-meta :page-style="lock ? 'overflow: hidden' : 'overflow: auto'" />
    <page title="源力号召" light nav-color="transparent">
        <view class="bg"></view>
        <image :src="resource.popularize_bg" class="bg-2" />
        <view class="index" @click="$router.index()">首页</view>
        <view style="height: 40rpx"></view>
        <view v-if="data && data.length > 0" style="padding-bottom: 200rpx;">
            <view class="flex-wrap flex-align-center">
                <view v-for="(item, index) in data" :key="index" class="item flex-align-center" @click="showSpu(item)">
                    <image :src="item.cover" class="image" mode="aspectFit" />
                    <image v-if="rank[index + 1]" :src="rank[index + 1]" class="flag" />
                </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 paddingT28">
                    <image class="flex-shrink0 marginT4" :src="resource.weal_activity_flag" style="width: 28rpx; height: 28rpx" />
                    <view class="font5 paddingL10 color-theme bold">
                        活动时间：2月9日-2月15日
                    </view>
                </view> -->
                <view class="flex paddingT28">
                    <image class="flex-shrink0 marginT4" :src="resource.weal_activity_flag"
                        style="width: 28rpx; height: 28rpx" />
                    <view class="font5 paddingL10 color-theme bold">
                        活动期间（自4月22日0时-4月28日24时），无论新老用户，凡邀请新人【注册+消费任意金额】即可计入榜单，榜单实时更新。
                    </view>
                </view>
                <view class="flex paddingT10">
                    <image class="flex-shrink0 marginT4" :src="resource.weal_activity_flag"
                        style="width: 28rpx; height: 28rpx" />
                    <view class="font5 paddingL10 color-theme bold">
                        榜单前十名，且累计成功邀请20人以上(含20人)，即可依名次获得相应奖品；榜单前三名，且累计成功邀请50人以上（含50人），即可获得相应前三奖品。奖品均于活动结束后三个工作日内（周末及节假日除外）发放。
                    </view>
                </view>
                <view class="paddingY10 font3 color-theme">
                    tips：邀请方式包括但不限于任何形式，活动最终解释权归平台所有。
                </view>
            </view>
        </view>
        <view class="bottom paddingB25 flex-align-center">
            <view class="relative flex-align-center">
                <image :src="resource.popularize_btn_1" style="width: 336rpx; height: 108rpx" />
                <button open-type="share" class="share-btn btn-clear"></button>
            </view>
            <image :src="resource.popularize_btn_2" class="marginL10" style="width: 336rpx; height: 108rpx"
                @click="showRank" />
        </view>
        <goods-detail ref="goodsDetailRef" />
        <rank ref="rankRef" />
    </page>
</template>

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

const RANK_FLAG = {
    1: resource.rank_1,
    2: resource.rank_2,
    3: resource.rank_3,
    4: resource.rank_4,
    5: resource.rank_5,
    6: resource.rank_6,
    7: resource.rank_7,
    8: resource.rank_8,
    9: resource.rank_9,
    10: resource.rank_10
}
export default {
    components: { goodsDetail, rank },
    data () {
        return {
            resource,
            data: null,
            rank: RANK_FLAG,
            lock: false
        }
    },
    mounted () {
        this.getData()
    },
    onShareAppMessage (res) {
        if (this.$common.isLogin()) {
            const user = store.getters.user
            return {
                title: `燚火漫域，新人首抽1.9！`,
                path: '/pages/award/index?pid=' + user.username
            }
        }
        return {
            title: `燚火漫域，新人首抽1.9！`,
            path: '/pages/award/index'
        }
    },
    methods: {
        async getData () {
            const res = await this.$service.weal.popularize()
            this.data = res
        },
        showSpu (spu) {
            this.$refs.goodsDetailRef.show(spu)
        },
        showRank () {
            this.$refs.rankRef.show()
        }
    }
}
</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;
}

.image-1 {
    position: fixed;
    left: 0;
    top: 200rpx;
    width: 100%;
    height: 100rpx;
}

.index {
    position: fixed;
    top: 180rpx;
    right: 0;
    width: 96rpx;
    height: 48rpx;
    background: linear-gradient(315deg, #0bd1ce 0%, #3ba1ff 100%);
    border-radius: 200rpx 0px 0px 200rpx;
    line-height: 48rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    z-index: 100;
}

.item {
    margin: 10rpx 12rpx;
    position: relative;
    width: 152rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: inset 0px 0px 30rpx 0px rgba(125, 84, 255, 0.5);
    border-radius: 12rpx;

    .image {
        width: 132rpx;
        height: 150rpx;
    }

    .flag {
        width: 60rpx;
        height: 26rpx;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}

.content {
    position: relative;
    background: #ffffff;
    box-shadow: inset 0px 0px 10px 5px rgba(143, 75, 241, 0.15);
    border-radius: 10px;
    margin: 30rpx 30rpx;

    // margin-left: 30rpx;
    // margin-right: 30rpx;
    .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;
        }
    }
}

.bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    .share-btn {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}</style>