caimei-applets-store/pages/views/share-buy/share-buy-entry.vue

<template>
    <view class="share-buy-entry">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>

        <!-- 商品信息 -->
        <share-buy-product-info :goodsData="collageData"></share-buy-product-info>

        <!-- 拼单信息 && 立即拼单 -->
        <view class="group-message">
            <share-buy-group-message :countDownTime="countDownTime">
                <template v-slot:head>
                    <view class="message">
                        还差
                        <text v-text="collageData.needNum"></text>
                        人参团，距离结束还剩：
                    </view>
                </template>
                <template v-slot:foot>
                    <tui-button type="base" width="600rpx" height="90rpx" shape="circle" :size="30" @click="onSubmit">
                        <text>立即参团</text>
                    </tui-button>
                </template>
            </share-buy-group-message>
        </view>

        <!-- 商品基本信息 参团用户信息-->
        <view class="member-info">
            <share-buy-member-info
                :memberNum="collageData.memberNum"
                :existNum="collageData.existNum"
                :shopInfo="collageData"
            ></share-buy-member-info>
        </view>

        <!-- 确认弹框 -->
        <tui-modal
            :show="confirmModal"
            content="您已经参加过该拼团活动了，请前往订单详情查看订单!"
            @click="onConfirm"
        ></tui-modal>
    </view>
</template>

<script>
import { fetchCollageOrderDetail } from '@/services/api/order.js'
import { countDown } from '@/common/utils.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            isRequest: true,
            confirmModal: false,
            collageId: '',
            countDownTime: {},
            timer: null,
            collageData: {}
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onLoad(options) {
        this.collageId = options.collageId
    },
    onShow() {
        this.fetchOrderDetails()
    },
    methods: {
        // 获取拼单详情
        async fetchOrderDetails() {
            try {
                const res = await fetchCollageOrderDetail({
                    collageId: this.collageId,
                    userId: this.userId
                })
                this.collageData = res.data
                this.countDown()
                // 判断当前用户是否参与了拼团
                if (this.collageData.orderId > 0) {
                    this.confirmModal = true
                }
                // 拼团已结束
                if (this.collageData.status === 2) {
                    this.$toast('拼团已结束')
                    setTimeout(() => this.$router.switchTab('home'), 1000)
                }
                this.isRequest = false
            } catch (e) {
                console.log(e)
            }
        },
        // 倒计时
        countDown() {
            const startTime = Date.now()
            const endTime = new Date(this.collageData.endTime).getTime()

            // 拼团已结束
            if (endTime < startTime) {
                this.$toast('拼团已结束')
                setTimeout(() => this.$router.switchTab('home'), 1000)
                return
            }

            this.timer && clearTimeout(this.timer)
            countDown(endTime, startTime, {}, item => {
                this.countDownTime = item.conttainer
                this.timer = item.t
            })
        },
        // 确认弹窗
        onConfirm(e) {
            if (e.index) {
                this.$router.redirectTo('order/order-detail?orderId=' + this.collageData.orderId)
            } else {
                this.$router.redirectTo('share-buy/share-buy-detail?collageId=' + this.collageId)
            }
        },
        // 提价购买信息
        onSubmit() {
            // 用户未登录
            if (!this.userId) {
                const pages = getCurrentPages()
                const page = pages[pages.length - 1]
                uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
                uni.redirectTo({ url: '/pages/authorize/login-custom' })
                return
            }
            // 提交订单信息
            let submitInfo = {
                allCount: 1,
                skuId: this.collageData.skuId,
                productCount: 1,
                heUserId: this.userId,
                collageFlag: 1,
                collageId: this.collageId
            }
            uni.setStorageSync('COMMIT_PRODUCT_INFO', submitInfo)
            this.$router.redirectTo('order/order-create?type=shareBuy')
        }
    }
}
</script>

<style lang="scss" scoped>
.share-buy-entry {
    .group-message,
    .member-info {
        margin-top: 24rpx;
    }

    .message {
        font-size: 30rpx;
        color: #333333;
        text {
            color: #ff457b;
        }
    }
}
</style>