caimei-applets-hehe/pages/fight-order/fight-share-entry.vue

<template>
    <view class="fight-share-entry">
        <view class="row">
            <!-- 商品信息 -->
            <cm-order-prodcut :countVisible="false"></cm-order-prodcut>
            
            <view class="service">
                <view class="iconfont icon-wuyoushouhou"><text>无忧退货</text></view>
                <view class="iconfont icon-wuyoushouhou"><text>快速退款</text></view>
                <view class="iconfont icon-wuyoushouhou"><text>正品保证</text></view>
            </view>
            
            
            <view class="grid t0b48"></view>
            
            <view class="fight-tip">还差<text>1</text>人，赶快邀请好友来拼单吧！</view>
            <!-- 倒计时 -->
            <countdown-box></countdown-box>

            <!-- 操作 -->
            <view class="fight-control">
                <button class="btn type1" @click="handleClick">立即参团</button>
            </view>

            <view class="grid t48b48"></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>
        </view>
    </view>
</template>

<script>
import UserList from './components/user-list.vue'
import CountdownBox from './components/countdown-box.vue'
import CmOrderProdcut from '@/components/cm-module/cm-order-prodcut/cm-order-prodcut.vue'
export default {
    components: {
        UserList,
        CountdownBox,
        CmOrderProdcut
    },
    computed: {
        
    },
    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) {
            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-share-entry {
    background: #f7f7f7;
    min-height: 100vh;

    .row {
        padding-top: 48rpx;
        background: #fff;
        overflow: hidden;
    }
   
    .service {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #ff457b;
        width: 750rpx;
        height: 72rpx;
        padding: 0 24rpx;
        margin-top: 64rpx;
        background: #FFF8FD;
        opacity: 1;
        box-sizing: border-box;
        
        .iconfont {
            font-size: 24rpx;
            line-height: 24rpx;
            text {
                color: #FF457B;
                margin-left: 4rpx;
            }
        }
    }
    
    

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

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

        .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 {
        width: 750rpx;
        height: 20rpx;
        background: #f7f7f7;
        &.t48b48{
            margin-top: 48rpx;
            margin-bottom: 48rpx;
        }
        
        &.t0b48{
            margin-top: 0;
            margin-bottom: 48rpx;
        }
    }

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

    .goods-info {
        @extend .flex-center-box;
        padding: 0 24rpx 40rpx;
        .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>