yihuo/pages/award_detail/index.vue

<template>
    <page-meta :page-style="lock ? 'overflow: hidden' : 'overflow: auto'" />
    <page :nav="false" ref="pageRef">
        <view
            class="detailWrapper"
            :style="{ backgroundImage: 'url(' + ossurl.box.headDetailbj + ')' }"
        >
            <view
                class="pagae-nav"
                :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
            >
                <view class="flex-align-center relative" style="height: 80rpx">
                    <text class="cuIcon-back back" @click.stop="back"></text>
                    <view v-if="data" class="title line-ellipsis">
                        {{ data && data.name }}
                    </view>
                </view>
            </view>
            <view :style="{ height: 72 + statusBarHeight * 2 + 'rpx' }"></view>

            <top
                v-if="data"
                :data="data"
                :horse="horse"
                @onShowRecord="showRecord"
                @onShowUpdate="showUpdate"
                :type="1"
            />
            <view class="SwiperBox">
                <swiper
                    class="productSwiper"
                    :indicator-dots="false"
                    circular="true"
                    :autoplay="false"
                    interval="5000"
                    duration="500"
                    :current="current"
                    @change="handleChange"
                >
                    <swiper-item
                        v-for="(item, index) in products"
                        :key="index"
                        @click="showSwipe(index)"
                    >
                        <view class="imageBox">
                            <image class="image" :src="item.cover" mode="aspectFit" />
                        </view>
                        <view
                            class="level"
                            :style="{ backgroundImage: 'url(' + ossurl.mine.butbj + ')' }"
                        >
                            {{ getLevel(item.level) }}({{ item.probability }}%)
                        </view>
                    </swiper-item>
                </swiper>
                <view class="prev" @click="handlePrev" v-if="current !== 0">
                    <image :src="ossurl.box.detail.left" mode="aspectFit" />
                </view>
                <view class="next" @click="handleNext" v-if="products&&current !== products.length - 1">
                    <image :src="ossurl.box.detail.right" mode="aspectFit" />
                </view>
            </view>
			<view class="swiperBottom">
				<image :src="ossurl.box.detail.bottom" style="width: 100%;" mode="widthFix" />
			</view>
        </view>
        <product-a
            v-if="products"
            :products="products"
            :levelist="data.luckGoodsLevelProbabilityList"
            :poolId="poolId"
        />
        <!-- <product-b v-if="products" :products="products" /> -->
        <explain v-if="products" />
        <view class="fill-height"></view>
        <view class="bottom paddingX10" v-if="data">
            <view class="bottom-btns flex-align-around">
                <view
                    class="relative btnItem"
                    @click="pay(1)"
                    :style="{ backgroundImage: 'url(' + ossurl.box.detail.yfBtn + '); color: #000;' }"
                >
                    一发入魂
                    <view v-if="$valid.isNumber2(data.specialPrice)" class="text">
                        (¥{{ data.specialPrice }})
                    </view>
                    <view v-else class="text">(¥{{ data.price }})</view>
                </view>
                <view
                    class="relative btnItem"
                    @click="pay(5)"
                    :style="{ backgroundImage: 'url(' + ossurl.box.detail.wlBtn + ')' }"
                >
                    <view>
                        五连绝世
                        <view v-if="data.specialPriceFive" class="text">
                            (¥{{ data.specialPriceFive }})
                        </view>
                        <view v-else class="text">(¥{{ data.price * 5 }})</view>
                    </view>
                </view>
                <view
                    class="relative btnItem"
                    @click="showFreedom"
                    :style="{ backgroundImage: 'url(' + ossurl.box.detail.csBtn + ')' }"
                >
                    自由超神
                </view>
            </view>
        </view>
        <image class="ck" :src="ossurl.box.detail.warehouse" webp @click="showCK" mode="widthFix" />
        <image class="mj" :src="ossurl.box.detail.stone" webp @click="$router.push('magic')" v-if="user" mode="widthFix"/>
        <image class="record" :src="ossurl.box.detail.record" webp @click="showRecord" mode="widthFix" />
        <image class="rule" :src="ossurl.box.detail.rule" webp @click="showRule" mode="widthFix" />
        <image
            v-if="data && data.demoFlag === 1"
            class="sw"
            :src="ossurl.box.detail.demoBtn"
            webp
            @click="tryDemo"
			mode="widthFix"
        />
        <record ref="recordRef" @close="onClose" :poolId="poolId" />
        <checkout
            ref="checkoutRef"
            v-if="data"
            :data="data"
            @close="onClose"
            :poolId="poolId"
            @success="onSuccess"
        />
        <pay-freedom
            ref="freeRef"
            v-if="data"
            :data="data"
            @close="onClose"
            :poolId="poolId"
            @pay="pay"
        />
        <!-- <update-record ref="updateRef" :poolId="poolId" /> -->
        <image
            v-if="topVisible"
            :src="ossurl.common.topBtn"
            webp
            class="fixed"
            style="right: 30rpx; bottom: 300rpx; width: 68rpx; height: 98rpx"
            @click="$common.scrollTop()"
        />
        <ruleDialog ref="ruleDialog"></ruleDialog>
    </page>
</template>
<script>
    import top from './top'
    import levelRatio from './level_ratio'
    import productA from './product_a'
    import productB from './product_b'
    import explain from './explain'
    import record from './record'
    import official from './official'
    import checkout from './checkout'
    import updateRecord from './update_record'
    import loginMixin from '@/mixin/login'
    import prince from './prince'
    import payFreedom from './pay_freedom'
    import { throttle } from '@/utils'
    import ossurl from '@/utils/ossurl'
    import { LEVEL_MAP } from '@/utils/config'
    import ruleDialog from './ruleDialog'
    export default {
        mixins: [loginMixin],
        components: {
            ruleDialog,
            top,
            levelRatio,
            productA,
            productB,
            explain,
            record,
            official,
            checkout,
            updateRecord,
            prince,
            payFreedom
        },
        data() {
            return {
                current: 0,
                ossurl,
                poolId: null,
                data: null,
                products: null,
                horse: null,
                show: false,
                lock: false,
                topVisible: false,
                smartPayFlag: true,
                scrollTop: 0
            }
        },
        computed: {
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            },
            user() {
                return this.$store.state.userInfo
            },
        },

        onPageScroll(e) {
            this.scrollTop = e.scrollTop
            this.topVisible = e.scrollTop > 800
        },
        onLoad(options) {
            console.log(options)
            this.poolId = options.poolId
            this.poolIn()
            if(this.$store.state.hide){
              this.showRule()
            }
        },
        onShow() {},
        mounted() {
            setTimeout(() => {
                this.init(true)
            }, 100)
        },
        onUnload() {
            this.poolOut()
        },
        onShareAppMessage(res) {
            return {
                title: this.data.name,
                path: '/pages/award/index',
                imageUrl: this.data.cover
            }
        },
        onShareTimeline() {
            return {
                title: '燚火漫域 次元聚集地，潮玩新势力',
                query: 'poolId=' + this.poolId,
                imageUrl: this.data.cover
            }
        },
        methods: {
            showSwipe(index) {
                this.$router.push('award_detail_swipe', { poolId: this.poolId, index })
            },
            getLevel(level) {
                let item = LEVEL_MAP[level]
                if (item) {
                    return item.title
                } else {
                    return ''
                }
            },
            poolIn() {
                if (this.$common.isLogin()) {
                    this.$service.award.poolIn(this.poolId)
                }
            },
            poolOut() {
                if (this.$common.isLogin()) {
                    this.$service.award.poolOut(this.poolId)
                }
            },
            async init(loading = false) {
                this.getData(loading)
                this.getHorse()
            },
            async getData(loading = false) {
                const res = await this.$service.award.detail(this.poolId, loading)
                this.data = res
                res && (this.products = res.luckGoodsList)
                this.$refs.princeRef && this.$refs.princeRef.refresh()
            },
            async getHorse() {
                const res = await this.$service.award.detailHorse(this.poolId)
                this.horse = res
            },
            showRecord() {
                this.$refs.recordRef.show()
                this.lock = true
            },
            onClose() {
                this.lock = false
            },
            showUpdate() {
                // this.$refs.updateRef.show()
            },
            async pay(num) {
                throttle.call(() => {
                    this.previewPay(num)
                })
            },
            async previewPay(num) {
                if (!this.$common.isLogin()) {
                    this.$router.push('login')
                    return
                }
                const res = await this.$service.award.preview(this.poolId, num)
                if (res) {
                    this.$refs.checkoutRef.show(num, res)
                    this.lock = true
                }
            },
            showFreedom() {
                if (!this.$common.isLogin()) {
                    this.$router.push('login')
                    return
                }
                this.$refs.freeRef.show()
                this.lock = true
            },
            back() {
                this.$router.back()
            },
            onSuccess(param) {
                const closeAnimal = this.$store.getters.closeAnimal
                if (param.num >= 10 || closeAnimal) {
                    this.$router.push('lottery_more', param)
                } else {
                    this.$cache.set(this.$cache.key.AWARD_GOODS, this.products)
                    this.$router.push('lottery', param)
                }
                setTimeout(() => {
                    this.init(false)
                }, 500)
                if (this.$store.state.hide == 1) {
                    this.$service.user.getHide()
                    this.pageConfig('magic_luck')
                }
            },
            async pageConfig(key) {
                const res = await this.$service.base.pageConfig(key)
                let pageConfig = this.$store.state.pageConfig || {}
                pageConfig[key] = res
                this.$store.commit(SET_PAGE_CONFIG, { ...pageConfig })
            },
            async tryDemo() {
                const res = await this.$service.award.tryDemo(this.poolId, 1)
                if (res) {
                    this.$cache.set(this.$cache.key.AWARD_GOODS, this.products)
                    this.$cache.set(this.$cache.key.AWARD_DEMO, res)
                    this.$router.push('lottery', { num: 1 })
                    this.getData()
                    this.$event.emit(this.$event.key.AWARD_REFRESH)
                }
            },
            showCK() {
                this.$router.push('store')
            },
            closeSmartTitle() {
                this.smartPayFlag = false
            },

            showRule() {
                // this.$router.push('playing_method', { type: 1 })
                this.$refs.ruleDialog.visible = true
            },
            handleChange(e) {
                this.current = e.detail.current
            },
            handlePrev() {
                this.current -= 1
            },
            handleNext() {
                this.current += 1
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .award-detail {
        padding-bottom: calc(136rpx + env(safe-area-inset-bottom));
    }
    .detailWrapper {
        background-size: 100% auto;
        background-repeat: no-repeat;
        height: 1240rpx;
        .SwiperBox {
            position: relative;
            .prev,
            .next {
                position: absolute;
                top: 20%;
                z-index: 90;
                image {
                    width: 108rpx;
                    height: 108rpx;
                }
            }
            .prev {
                left: 0;
            }
            .next {
                right: 0;
            }
        }
        .productSwiper {
            height: 750rpx;

            .imageBox {
                text-align: center;
                height: 40.5vh;
                font-size: 0;
                line-height: 0;
                .image {
                    width: 520rpx;
                    height: 40.5vh;
                    animation: animateImage 3s;
                    animation-play-state: running;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                }
            }
            .level {
                text-align: center;
                font-size: 24rpx;
                font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
                font-weight: 700;
                color: #333;
                background-size: 272rpx 62rpx;
                background-position: center;
                background-repeat: no-repeat;
                line-height: 62rpx;
            }
            @keyframes animateImage {
                from,
                to {
                    transform: translate3d(0, 0, 0);
                }

                25% {
                    transform: translate3d(0, 10px, 0);
                }
                50% {
                    transform: translate3d(0, 0, 0);
                }

                75% {
                    transform: translate3d(0, -10px, 0);
                }
                100% {
                    transform: translate3d(0, 0, 0);
                }
            }
        }
    }
    .pagae-nav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 100;
        align-items: center;
        .title {
            font-size: 30rpx;
            font-weight: bold;
            text-align: center;
            line-height: 72rpx;
            width: 500rpx;
        }
        .back {
            z-index: 1800;
            font-size: 32rpx;
            line-height: 32rpx;
            position: absolute;
            left: 20rpx;
            top: 24rpx;
        }
    }
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .smart_pay {
        height: 50rpx;
        background: linear-gradient(90deg, #3800b3 0%, #655b82 100%);
        margin: 20rpx 28rpx;
        border-radius: 20rpx;
        padding: 0 20rpx;
        color: #fff;
        line-height: 50rpx;
        .smart_rule {
            display: inline-block;
            width: 36rpx;
            height: 36rpx;
            line-height: 30rpx;
            margin: 0 0 0 10rpx;
            vertical-align: text-top;
        }
        .smart_X {
            position: absolute;
            right: 20rpx;
            top: 5rpx;
            width: 32rpx;
            height: 32rpx;
        }
    }
    .fill-height {
        height: 168rpx;
    }
    .bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #373737;
        height: 168rpx;
        padding-bottom: 40rpx;
        .bottom-btns {
            height: 128rpx;
            .btnItem {
                font-size: 28rpx;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 700;
                color: #ffffff;
                background-size: 100% 100%;
                padding: 20rpx 12rpx;
                text-align: center;
                flex: 1;
                margin: 0 13rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                .text {
                    display: inline-block;
                    font-size: 18rpx;
                    line-height: 18rpx;
                }
                &:first-child {
                    margin-left: 0;
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        .image {
            height: 108rpx;
            width: 0;
        }
    }
    .sw,
    .mj,
    .ck {
        position: fixed;
        right: 0rpx;
        width: 84rpx;
    }
    .mj {
        bottom: 800rpx;
    }
    .sw {
        bottom: 540rpx;
        width: 108rpx;
    }
    .ck {
        bottom: 690rpx;
    }
    .record {
        position: fixed;
        left: 0rpx;
        width: 96rpx;
        bottom: 670rpx;
    }
    .rule {
        position: fixed;
        left: 0rpx;
        bottom: 800rpx;
        width: 84rpx;
    }
</style>