yihuo/pages/product/index.vue

<template>
    <page nav-color="transparent" ref="pageRef">
        <top
            v-if="data"
            :depositData="data"
            :data="data.spu"
            :cover="data.spu.cover"
            :price="data.price"
            :subjectPrice="data.subjectPrice"
        />
        <!-- <activity v-if="data && data.coupon && data.coupon.length > 0" :data="data" /> -->
        <argument v-if="data" :depositData="data" :data="data.spu" />
        <moli
            v-if="data && data.recommendedLuckPool && data.recommendedLuckPool.length > 0"
            :data="data.recommendedLuckPool"
        />
        <recommend
            v-if="data && data.recommendedMallGoods && data.recommendedMallGoods.length > 0"
            :data="data.recommendedMallGoods"
        <detail v-if="data" :data="data.spu" />
        />
        <view class="fill-height marginT10"></view>
        <view class="bottom paddingX14 flex-align bgcolor-white">
            <!-- <button class="kefu flex-align-center" @click="$common.showKefu()">
                <view class="cuIcon-service"></view>
                <view class="font6 marginL10">客服</view>
            </button> -->
            <!-- <view class="btn" @click="showCheckout">{{ data.sellFlag === 0 ? `预售时间${formatD(data.sellTime)}` : data.sellType == 2 ? '支付定金' : '立即购买' }}</view> -->
            <view class="btn" @click="showCheckout" v-if="data">
                <view v-if="data.sellFlag === 0" class="flex-align-center">
                    <text class="font1 marginB5">距预售开始:</text>
                    <timer class="paddingB5" :targetTime="data.sellTime" @timeDone="timeDone" />
                </view>
                <view v-if="skipeType === '1'" class="flex-align-center">
                    <text class="font1 marginB5">距秒杀开始:</text>
                    <timer class="paddingB5" :targetTime="startTime" @timeDone="timeDone" />
                </view>
                <view v-else>
                    {{ data.sellType == 2 ? '支付定金' : '立即购买' }}
                </view>
            </view>
        </view>
        <checkout
            ref="checkoutRef"
            v-if="data"
            :data="data"
            :goodsId="goodsId"
            :subjectId="subjectId"
        />
        <image
            v-if="topVisible"
            :src="resource.top"
            webp
            class="fixed"
            style="right: 30rpx; bottom: 400rpx; width: 72rpx; height: 72rpx"
            @click="$common.scrollTop()"
        />
    </page>
</template>

<script>
    import top from './top'
    import activity from './activity'
    import argument from './argument'
    import moli from './moli'
    import recommend from './recommend'
    import detail from './detail'
    import checkout from './checkout'
    import resource from '@/utils/resource'
    import loginMixin from '@/mixin/login'
    import dayjs from 'dayjs'
    import timer from '@/components/timer'

    export default {
        mixins: [loginMixin],
        components: { top, activity, argument, moli, recommend, detail, checkout, timer },
        data() {
            return {
                dayjs,
                resource,
                goodsId: '',
                data: null,
                topVisible: false,
                subjectId: '',
                skipeType: '',
                startTime: ''
            }
        },
        onLoad(options) {
            this.goodsId = options.id
            this.subjectId = options.subjectId || ''
            this.skipeType = options.skipeType
            console.log(this.skipeType)
            this.startTime = options.startTime
        },
        mounted() {
            this.getData(true)
        },
        onPageScroll(e) {
            this.topVisible = e.scrollTop > 800
        },
        methods: {
            init() {
                this.getData()
            },
            timeDone() {
                this.skipeType = 2
            },
            async getData(loading = false) {
                let res = null
                if (this.subjectId === '') {
                    res = await this.$service.mall.detail({ goodsId: this.goodsId }, loading)
                } else {
                    res = await this.$service.mall.detail(
                        { goodsId: this.goodsId, subjectId: this.subjectId },
                        loading
                    )
                }
                this.data = res
            },
            async showCheckout() {
                if (!this.$common.isLogin()) {
                    this.$router.push('login')
                    return
                }
                if (this.data.sellFlag !== 0) {
                    const res = await this.$service.mall.previewSubmit({
                        goodsId: this.goodsId,
                        subjectId: this.subjectId,
                        quantity: 1
                    })
                    res && this.$refs.checkoutRef.show(res)
                }
            },
            formatD(value) {
                return dayjs(value).format('YYYY-MM-DD')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .fill-height {
        height: 140rpx;
    }
    .bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120rpx;
        padding-bottom: 36rpx;
        .kefu {
            margin-top: 30rpx;
            height: 88rpx;
            padding: 0 54rpx;
            background: #fff7e3;
            border-radius: 44rpx;
            color: #000000;
            .icon {
                width: 48rpx;
                height: 48rpx;
            }
            &::after {
                border: none;
            }
        }
        .btn {
            margin-top: 30rpx;
            flex: 1;
            margin-left: 30rpx;
            color: #000;
            font-size: 32rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            border-radius: 44rpx;
            background: #FEC433;
        }
    }
</style>