caimei-applets-hehe/pages/fight-order/fight-detail.vue

<template>
    <view class="fight-detail">
        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
        <view class="row">
            <view class="fight-tip">
                <view class="success" v-if="success">恭喜您，拼团成功!</view>
                <view v-else
                    >还差<text>{{ collageData.needNum }}</text
                    >人，赶快邀请好友来拼单吧!</view
                >
            </view>

            <!-- 成功 -->
            <template v-if="success">
                <user-list :status="success"></user-list>
            </template>
            <!-- 等待完成 -->
            <template v-else>
                <!-- 倒计时 -->
                <countdown-box :countDownTime="countDownTime"></countdown-box>
            </template>

            <!-- 操作 -->
            <view class="fight-control success" v-if="success">
                <view class="btn type1" @click="handleClick(1)">去首页逛逛</view>
                <view class="link" @click="handleClick(3)">查看订单详情 ></view>
            </view>
            <view class="fight-control" v-else>
                <button class="btn type1" @click="handleClick(2)" open-type="share">邀请好友拼单</button>
                <view class="btn type2" @click="handleClick(1)">去首页逛逛</view>
            </view>

            <!-- 商品 + 用户信息 -->
            <template v-if="!success">
                <view class="grid"></view>
                <!-- 拼单用户列表 -->
                <user-list :status="success"></user-list>
                <view class="line"></view>
                <view class="goods-info">
                    <image :src="collageData.productImage" class="cover"></image>
                    <view class="title" v-text="collageData.productName"></view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
import UserList from './components/user-list.vue'
import CountdownBox from './components/countdown-box.vue'
import orderShare from '@/pages/order/mixins/orderShare.js'
import { mapGetters } from 'vuex'

export default {
    components: {
        UserList,
        CountdownBox
    },
    computed: {
        ...mapGetters(['userId', 'hasLogin']),
        success() {
            return this.collageData.memberNum === this.collageData.existNum
        }
    },
    data() {
        return {
            isRequest: true,
            collageId: '',
            initiatorId: '',
            collageData: {},
            // 自定义标签
            tagsList: ['2人拼团价'],
            // 倒计时
            countDownTime: {},
            timer: null,
            // 商品数量
            count: 1,
            countVisible: false
        }
    },
    onLoad(options) {
        this.collageId = options.collageId
        this.fetchOrderDetails()
    },
    onShow() {
      !isRequest && this.countDown()  
    },
    onShareAppMessage(e) {
        const shareData = {
            type: 4,
            collageId: this.collageData.collageId,
            initiatorId: this.userId
        }

        const state_str = encodeURIComponent(this.$crypto.encrypt(shareData))
        return {
            title: '哈喽，赶快来参团吧！这件商品拼团买更便宜~',
            path: `/pages/tabBar/index/index?state_str=${state_str}`,
            imageUrl: this.collageData.productImage
        }
    },
    methods: {
        handleClick(type) {
            const clickFunc = {
                1: this.toHome,
                2: this.toShare,
                3: this.toOrder
            }
            clickFunc[type].apply(this)
        },
        // 跳转首页
        toHome() {
            console.log('首页')
            uni.switchTab({ url: '/pages/tabBar/index/index' })
        },
        // 分享
        toShare() {
            console.log('分享')
        },
        // 跳转订单
        toOrder() {
            console.log('订单')
            this.$api.navigateTo(`/pages/order/order-detail?orderId=${this.collageData.orderId}`)
        },
        // 获取拼单详情
        fetchOrderDetails() {
            console.log('获取拼单详情')
            this.FightService.OrderCollageDetails({
                collageId: this.collageId,
                userId: this.userId
            }).then(res => {
                console.log(res)
                this.collageData = res.data
                this.countDown()
                this.isRequest = false
            })
        },
        // 倒计时
        countDown() {
            const diffTime = new Date(this.collageData.endTime).getTime()
            const loadTime = new Date().getTime()
            
            this.timer && clearTimeout(this.timer)
            
            this.$util.countDown(diffTime, loadTime, {}, item => {
                this.countDownTime = item.conttainer
                this.timer = item.t
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/* scss中可以用mixin来扩展 */
@mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

.flex-center-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fight-detail {
    background: #f7f7f7;
    min-height: 100vh;

    .row {
        background: #fff;
        overflow: hidden;
    }

    .fight-tip {
        @extend .flex-center-box;
        margin-top: 70rpx;
        margin-bottom: 48rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
        text {
            color: #ff457b;
        }
        .success {
            font-size: 34rpx;
            color: #333333;
            font-weight: bold;
        }
    }

    .fight-control {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 48rpx;
        margin-bottom: 48rpx;

        .success {
            margin-bottom: 66rpx;
        }

        .link {
            margin-top: 24rpx;
            font-size: 26rpx;
            line-height: 38rpx;
            color: #999999;
        }
        .btn {
            @extend .flex-center-box;
            width: 600rpx;
            height: 90rpx;
            border-radius: 45rpx;
            box-sizing: border-box;
            font-size: 30rpx;

            &.type1 {
                color: #ffffff;
                background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
            }
            &.type2 {
                margin-top: 24rpx;
                color: #ff457b;
                border: 1px solid #ff457b;
            }
        }
    }

    .grid {
        margin: 48rpx 0 48rpx;
        width: 750rpx;
        height: 20rpx;
        background: #f7f7f7;
    }

    .line {
        width: 702rpx;
        height: 1px;
        margin: 48rpx auto 48rpx auto;
        background: #e1e1e1;
    }

    .goods-info {
        @extend .flex-center-box;
        padding: 0 24rpx 48rpx;
        .cover {
            width: 80rpx;
            height: 80rpx;
            background: eee;
            border: 1rpx solid #e1e1e1;
            border-radius: 8rpx;
            border: 50%;
        }
        .title {
            flex: 1;
            margin-left: 24rpx;
            word-break: break-word;
            font-size: 26rpx;
            line-height: 1.6;
            color: #333333;
            text-align: justify;
            @include ellipsis(2);
        }
    }
}
</style>