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

<template>
    <view class="fight-detail">
        <view class="row">
            <view class="fight-tip">
                <view class="success" v-if="success">恭喜您，拼团成功!</view>
                <view v-else>还差<text>1</text>人，赶快邀请好友来拼单吧!</view>
            </view>
            
            <!-- 成功 -->
            <template v-if="success">
                <user-list></user-list>
            </template>
            <!-- 等待完成 -->
            <template v-else>
               <!-- 倒计时 -->
               <countdown-box></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)">邀请好友拼单</button>
                <view class="btn type2" @click="handleClick(1)">去首页逛逛</view>
            </view>
            
            <!-- 商品 + 用户信息 -->
            <template v-if="!success">
                <view class="grid"></view>
                <!-- 拼单用户列表 -->
                <user-list></user-list>
                <view class="line"></view>
                <view class="goods-info">
                    <image src="https://picsum.photos/100/100?random=3" class="cover"></image>
                    <view class="title">肌本演绎360愉悦修护套组 PLUS 尊享版防晒修复 补水保湿</view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
import UserList from './components/user-list.vue'
import CountdownBox from './components/countdown-box.vue'
export default {
    components: {
        UserList,
        CountdownBox
    },
    computed:{
        success(){
            return true
        }
    },
    data(){
        return{}
    },
    onShareTimeline(e) {
        // 加密参数
        const shareData = {
            type: 4,
            inviteUserId: this.userId
        }
        // 加密
        const state_str = encodeURIComponent(this.$crypto.encrypt(shareData))
        return {
            title: '哈喽，赶快来参团吧！这件商品拼团买更便宜~~',
            path: `pages/tabBar/index/index?state_str=${state_str}`,
            imageUrl: 'https://picsum.photos/400/400?random=3'
        }
    },
    onShareAppMessage(e) {
        // 加密参数
        const shareData = {
            type: 4,
            inviteUserId: this.userId
        }
        // 加密
        const state_str = encodeURIComponent(this.$crypto.encrypt(shareData))
        return {
            title: '哈喽，赶快来参团吧！这件商品拼团买更便宜~~',
            path: `pages/tabBar/index/index?state_str=${state_str}`,
            imageUrl: 'https://picsum.photos/400/400?random=3'
        }
    },
    methods:{
        handleClick(type){
            const clickFunc = {
                1: this.toHome,
                2: this.toShare,
                3: this.toOrder
            }
            clickFunc[type].apply(this)
        },
        // 跳转首页
        toHome(){
            console.log('首页')
        },
        // 分享
        toShare(){
            console.log('分享')
        },
        // 跳转订单
        toOrder(){
            console.log('订单')
        }
    }
}
</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>