yihuo/pages/sell_detail/index.vue

<template>
    <page-meta :page-style="lock ? 'overflow: hidden' : 'overflow: auto'" />
    <page nav-color="transparent" ref="pageRef">
        <top v-if="data" :data="data.spu" :cover="data.spu.cover" :price="data.price" :down="data.status != 1" :finish="data.status == 99"/>
        <argument v-if="data" :data="data.spu" />
        <bid-record v-if="data" :data="data.latestTradeBid" />
        <moli v-if="data && data.recommendedLuckPool && data.recommendedLuckPool.length > 0" :data="data.recommendedLuckPool" />
        <detail v-if="data" :data="data.spu" />
        <view v-if="data && data.status === 1" class="fill-height"></view>
        <view v-if="data && data.status === 1" class="bottom paddingX14 flex-align bgcolor-white">
            <view class="btn-k" @click="showBid">出价</view>
            <view class="btn marginL25" @click="showCheckout">立即购买</view>
        </view>
        <checkout ref="checkoutRef" v-if="data" :data="data" />
        <image v-if="topVisible" :src="resource.top" webp class="fixed" style="right:30rpx; bottom: 400rpx;width: 72rpx;height: 72rpx"
            @click="$common.scrollTop()" />
        <bid ref="bidRef" :tradeGoodsId="goodsId" @success="onBidSuccess" />
    </page>
</template>

<script>
import top from './../product/top'
import argument from './argument'
import moli from './../product/moli'
import detail from './../product/detail'
import checkout from './checkout'
import resource from '@/utils/resource'
import loginMixin from '@/mixin/login'
import bid from './bid'
import bidRecord from './bid_record'

export default {
    mixins: [loginMixin],
    components: { top, argument, moli, detail, checkout, bid, bidRecord },
    data() {
        return {
            resource,
            goodsId: '',
            data: null,
            topVisible: false,
            lock: false
        }
    },
    onLoad(options) {
        this.goodsId = options.id
    },
    mounted() {
        this.getData(true)
    },
    onPageScroll(e) {
        this.topVisible = e.scrollTop > 800
    },
    onShareAppMessage(res) {
        return {
            title: this.data.spu.name,
            path: '/pages/sell_detail/index?id=' + this.goodsId
        }
    },
    onShareTimeline() {
        return {
            title: this.data.spu.name,
            query: 'id=' + this.goodsId,
            imageUrl: this.data.spu.cover
        }
    },
    methods: {
        init() {
            this.getData()
        },
        async getData(loading = false) {
            const res = await this.$service.sell.detail(this.goodsId, loading)
            this.data = res
        },
        showBid() {
            if (!this.$common.checkLogin()) return
            this.$refs.bidRef.show()
        },
        onBidSuccess() {
            this.getData()
            this.$message.success('出价成功')
        },
        async showCheckout() {
            if (!this.$common.checkLogin()) return
            const res = await this.$service.sell.previewSubmit(this.goodsId)
            res && this.$refs.checkoutRef.show(res)
        }
    }
}
</script>

<style lang="scss" scoped>
.fill-height {
    height: 164rpx;
}
.bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 148rpx;
    padding-bottom: 60rpx;
    .btn-k {
        margin-top: 30rpx;
        flex: 1;
        height: 88rpx;
        border: 2rpx solid #a76ef4;
        border-radius: 44rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 32rpx;
        color: #a76ef4;
    }
    .btn {
        margin-top: 30rpx;
        flex: 1;
        margin-left: 30rpx;
        color: #fff;
        font-size: 32rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        border-radius: 44rpx;
        background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%);
    }
}
</style>