yihuo/pages/award_detail_swipe/index.vue

<template>
    <page :title="title" :light="false" navColor="#fff" ref="pageRef">
        <!-- <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="background-color: #fff">
            <view class="overflow-hidden paddingT10">
                <swiper
                    @change="bannerChange"
                    :current="active"
                    class="screen-swiper"
                    :indicator-dots="false"
                    circular="true"
                    duration="400"
                >
                    <swiper-item v-for="(item, index) in products" :key="index">
                        <view class="image-wrapper">
                            <image :src="item.spu.cover" class="image" mode="aspectFit" />
                            <image
                                class="super-text translateX"
                                :src="LEVEL_MAP[item.level].titleImg"
                            />
                            <view class="swiperIndex font6">
                                <span class="current">{{ index + 1 }}</span>
                                /{{ products.length }}
                            </view>
                        </view>
                        <view class="content-wrapper font2">
                            <view class="flex-align">
                                <view style="color: #666666; width: 120rpx" class="flex-shrink0">
                                    名称：
                                </view>
                                <text style="color: #000000" class="marginL10">{{ title }}</text>
                            </view>
                            <view class="flex-align paddingT8">
                                <view style="color: #666666; width: 150rpx">参考价格：</view>

                                <text style="color: #000000" class="marginL10">
                                    {{ item.spu.marketPrice }}元
                                </text>
                            </view>
							<view class="flex-align paddingT8">
							    <view style="color: #666666; width: 150rpx">投放数量：</view>
							
							    <text style="color: #000000" class="marginL10">
							        {{ data.mode == 'YFS_PRO'? item.quantity : '无限' }}
							    </text>
							</view>
                            <view class="flex-align paddingT8">
                                <view style="color: #666666; width: 120rpx">参数：</view>
                                <scroll-view
                                    scroll-x
                                    class="flex1 scroll-wrapper"
                                    v-if="item.spu && item.spu.parameter"
                                >
                                    <view
                                        v-for="param in JSON.parse(item.spu.parameter)"
                                        :key="param.label"
                                        class="item"
                                    >
                                        <view style="color: #000000">{{ param.label }}</view>
                                        <view style="color: #666666">{{ param.value }}</view>
                                    </view>
                                </scroll-view>
                            </view>
                            <view class="paddingT8 flex-align" v-if="item.spu.brandName">
                                <view style="color: #666666; width: 120rpx">品牌：</view>
                                <text style="color: #000000" class="marginL10">
                                    {{ item.spu.brandName }}
                                </text>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <view class="content-wrapper font2" style="margin-top: 0">
                <view class="flex">
                    <view style="color: #666666; width: 120rpx" class="flex-shrink0">
                        发货规则：
                    </view>
                    <text style="color: #000000" class="marginL10">
                        宝箱商品购买后会自动放在仓库中。您可以在仓库中进行提货，申请提货后，我们在5个工作日内进行发货
                        (如遇特殊情况可能会有延迟)。
                    </text>
                </view>
                <view class="paddingT8 flex">
                    <view style="color: #666666; width: 120rpx" class="flex-shrink0">
                        运费说明：
                    </view>
                    <text style="color: #000000" class="marginL10">
                        宝箱购买商品满5件包邮，不满足包邮条件的，全国范围统一15元运费。可配送区域为中国大陆地区
                        (除特殊偏远地区)，收件地址在此之外的区域请勿下单。
                    </text>
                </view>
            </view>
            <view class="rell_product">
                <image class="width100 height100" :src="resource.real100" mode="widthFix" />
            </view>
            <detail v-if="productDetail" :data="productDetail" />
        </view>
    </page>
</template>

<script>
    import { LEVEL_MAP } from '@/utils/config'
    import checkout from './../award_detail/checkout'
    import resource from '@/utils/resource'
    import detail from './detail'
    export default {
        components: { checkout, detail },
        data() {
            return {
                resource,
                LEVEL_MAP,
                poolId: null,
                active: 0,
                data: null,
                products: [],
                productDetail: null,
                title: '',
                scrollTop: 0
            }
        },
        onLoad(options) {
            this.poolId = options.poolId
            this.active = options.index
        },
        mounted() {
            setTimeout(() => {
                this.getData(true)
            }, 100)
        },
        computed: {
            hide() {
                return !this.$store.state.hide
            },
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        methods: {
            async getData(loading = false) {
                const res = await this.$service.award.detail(this.poolId, loading)
                this.data = res
                if (res) {
                    this.products = res.luckGoodsList
                    this.productDetail = this.products[this.active].spu
                    this.title = this.products[this.active].name
                }
            },
            async pay(num) {
                const res = await this.$service.award.preview(this.poolId, num)
                if (res) {
                    this.$refs.checkoutRef.show(num, res)
                    this.lock = true
                }
            },
            onSuccess(param) {
                this.$cache.set(this.$cache.key.AWARD_GOODS, this.products)
                if (param.num >= 10) {
                    this.$router.push('lottery_more', param)
                } else {
                    this.$router.push('lottery', param)
                }
                setTimeout(() => {
                    this.getData(false)
                }, 500)
            },
            bannerChange(e) {
                this.active = e.detail.current
                this.productDetail = { ...this.products[this.active].spu }
                this.title = this.products[this.active].name
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .fill-height {
        height: 168rpx;
    }
    .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;
        }
    }
    .bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #171b1e;
        height: 168rpx;
        padding-bottom: 40rpx;

        .bottom-btns {
            height: 128rpx;

            .text {
                width: 100px;
                text-align: center;
                position: absolute;
                bottom: 26rpx;
                font-size: 24rpx;
                color: #fff;
            }
        }

        .image {
            height: 108rpx;
            width: 100%;
        }
    }

    .content-wrapper {
        padding: 32rpx;
        margin: 28rpx;
        background: #fffcf4;
        border-radius: 12rpx;
    }

    .screen-swiper {
        min-height: 1200rpx;

        swiper-item {
            position: relative;
        }

        .image-wrapper {
            height: 780rpx;
            position: relative;

            .image {
                height: 660rpx;
                width: 100%;
            }

            .super-text {
                position: absolute;
                bottom: 20rpx;
                width: 180rpx;
                height: 64rpx;
            }

            .swiperIndex {
                position: absolute;
                right: 40rpx;
                bottom: 20rpx;
                font-size: 20rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 500;
                color: #fec433;
                width: 84rpx;
                height: 32rpx;
                background: #000000;
                border-radius: 708rpx 708rpx 708rpx 708rpx;
                text-align: center;
                line-height: 32rpx;
                .current {
                    font-size: 28rpx;
                    font-weight: bold;
                }
            }
        }

        .content-wrapper {
            .scroll-wrapper {
                padding-left: 20rpx;
                overflow: hidden;
                white-space: nowrap;
                width: 100%;

                .item {
                    display: inline-block;
                    padding: 0 20rpx;
                    border-right: 2rpx solid #565758;

                    &:first-child {
                        padding-left: 0;
                    }
                }
            }
        }
    }

    .rell_product {
        height: 306rpx;
        margin: 28rpx;
    }
</style>