yihuo/pages/product/top.vue

<template>
    <view class="bgcolor-white">
        <swiper
            class="screen-swiper bgcolor-white"
            :indicator-dots="false"
            circular="true"
            duration="400"
        >
            <swiper-item v-for="(item, index) in [cover]" :key="index">
                <view class="image-wrapper flex-column-align-center">
                    <image :src="item" class="image" mode="aspectFit" />
                    <!-- <view class="index flex-align">{{activeIndex + 1}}/{{pics.length}}</view> -->
                </view>
            </swiper-item>
        </swiper>
        <view :style="{ height: fill + 'px' }" class="bgcolor-wite"></view>
        <view
            v-if="depositData.sellType === 2"
            class="marginX16 marginT12 bgcolor-white radius12 pre-sale"
        >
            <view class="pre-sale_price">
                <view class="price_money">
                    <view class="deposit paddingL16 paddingT5">
                        <text class="font4">定金</text>
                        <text class="font4 paddingL14">¥</text>
                        <text class="font8 bold">{{ depositData.deposit }}</text>
                    </view>
                    <view class="full_payment paddingL16">
                        <text class="font1">全款</text>
                        <text class="font1 paddingL14">¥{{ depositData.price }}</text>
                    </view>
                </view>
                <view class="price_time paddingL18">
                    <text class="font1 marginB5">距预售结束:</text>
                    <timer :targetTime="depositData.depositEndTime" />
                </view>
            </view>
            <view class="pre-sale_title marginL18 marginT20 marginB16">
                <view class="title_top marginB10">
                    <view class="name">
                        {{ depositData.name }}
                    </view>
                <!--    <button class="share" open-type="share">
                        <image class="img" :src="resource.share" />
                        <text class="">分享</text>
                    </button> -->
                </view>
                <!-- <view class="new marginR8">新品</view>
                <view class="purchase_limit">限购个</view> -->
            </view>
            <view class="pre-sale_process">
                <view class="left">预售流程</view>
                <view class="right">
                    <view class="item">
                        <text class="">预售时间</text>
                        <text class="">
                            {{ depositData.sellTime ? formatD(depositData.sellTime) : '待定' }}
                        </text>
                    </view>
                    <view class="item">
                        <text class="">定金截止时间</text>
                        <text class="">
                            {{
                                depositData.depositEndTime
                                    ? formatD(depositData.depositEndTime)
                                    : '待定'
                            }}
                        </text>
                    </view>
                    <view class="item">
                        <text class="">尾款开始时间</text>
                        <text class="">
                            {{
                                depositData.restStartTime
                                    ? formatM(depositData.restStartTime)
                                    : '待定'
                            }}
                        </text>
                    </view>
                    <view class="item">
                        <text class="">尾款截止时间</text>
                        <text class="">
                            {{
                                depositData.restEndTime ? formatM(depositData.restEndTime) : '待定'
                            }}
                        </text>
                    </view>
                    <view class="item">
                        <text class="">预计发货时间</text>
                        <text class="">
                            {{ depositData.chuheTime ? formatM(depositData.chuheTime) : '待定' }}
                        </text>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="content-wrapper">
            <view class="flex-align-between">
                <view class="color-money">
                    <text class="font4">¥</text>
                    <text class="font8 bold">{{ subjectPrice ? subjectPrice : price }}</text>
                </view>
                <view v-if="finish" class="status finish flex-align-center">已成交</view>
                <view v-else-if="down" class="status off flex-align-center">已下架</view>
            </view>
            <view class="flex-align-between">
                <view>
                    <view class="paddingT10 bold font6 color-1">{{ data.name }}</view>
                </view>
                <!-- <button class="share" open-type="share">
                    <image class="img" :src="resource.share" />
                    <text class="">分享</text>
                </button> -->
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
import timer from '@/components/timer'
import dayjs from 'dayjs'
export default {
    components: { timer },
    props: {
        price: [String,Number],
        data: Object,
        cover: String,
        down: Boolean,
        finish: Boolean,
        depositData: Object,
        subjectPrice: String
    },
    data() {
        return {
            dayjs,
            resource,
            activeIndex: 0,
            pics: []
        }
    },
    computed: {
        fill() {
            let allHeight = uni.upx2px(750)
            let statusBarHeight = this.$store.state.systemInfo.statusBarHeight
            return allHeight - statusBarHeight - 35
        }
    },
    methods: {
        formatM(value) {
            return dayjs(value).format('YYYY-MM')
        },
        formatD(value) {
            return dayjs(value).format('YYYY-MM-DD')
        }
    },
    mounted() {
        this.pics = this.data.pic.split(',')
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        })
    }
}
</script>

<style lang="scss" scoped>
.screen-swiper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 750rpx;
    .image-wrapper {
        height: 100%;
        position: relative;
        .image {
            width: 100%;
            height: 750rpx;
        }
        .index {
            position: absolute;
            right: 28rpx;
            bottom: 28rpx;
            padding: 0 20rpx;
            height: 40rpx;
            border-radius: 20rpx;
            background: rgba($color: #000000, $alpha: 0.5);
            color: #fff;
            font-size: 24rpx;
        }
    }
}
.pre-sale {
    .pre-sale_price {
        display: flex;
        background-color: #fff1ec;
        .price_money {
            width: 419rpx;
            height: 106rpx;
            color: #fff;
            background: linear-gradient(270deg, #2affff 10%, #4d70f2 100%);
            border-radius: 24rpx 24rpx 24rpx 0rpx;
            .full_payment {
                color: #fdd9d6;
            }
        }
        .price_time {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: $color-theme;
        }
    }
    .pre-sale_title {
        .title_top {
            display: flex;
            align-items: center;
            .name {
                width: 524rpx;
                height: 32rpx;
                font-size: 32rpx;
                font-weight: 600;
                color: #000000;
                line-height: 32rpx;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .new {
            display: inline-block;
            color: #35d872;
            width: 76rpx;
            height: 41rpx;
            text-align: center;
            line-height: 42rpx;
            font-size: 22rpx;
            background: #e1f9ea;
            border-radius: 21rpx;
        }
        .purchase_limit {
            display: inline-block;
            color: #f4524d;
            min-width: 76rpx;
            height: 41rpx;
            font-size: 22rpx;
            text-align: center;
            line-height: 42rpx;
            background: #fdeded;
            border-radius: 21rpx;
        }
    }
    .pre-sale_process {
        display: flex;
        align-items: center;
        margin-left: 32rpx;
        border-top: 2rpx solid #eee;
        .left {
            width: 56rpx;
            height: 80rpx;
            font-size: 28rpx;
            color: #000000;
            font-weight: 400;
            margin-right: 32rpx;
        }
        .right {
            display: flex;
            width: 534rpx;
            overflow: scroll;
            .item {
                width: 800rpx;
                height: 140rpx;
                font-size: 22rpx;
                color: #999999;
                white-space: nowrap;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                margin-right: 50rpx;
            }
        }
        .right::-webkit-scrollbar {
            display: none;
        }
    }
}
.share {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22rpx;
    background-color: #fff;
    margin: 0;
    .img {
        width: 32rpx;
        height: 32rpx;
    }
}
.share::after {
    border: none;
}
.content-wrapper {
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    background: #fff;
    padding: 20rpx 28rpx 30rpx;
    .status {
        padding: 10rpx 30rpx;
        border-radius: 8rpx;
        color: #262626;
        &.off {
            background: #b4b4b4;
        }
        &.finish {
            background: #55fffe;
        }
    }
}
</style>