caimei-applets-store/pages/views/share-buy/components/share-buy-member-info/share-buy-member-info.vue

<template>
    <view class="member-info">
        <scroll-view scroll-x="true" class="scroll-box">
            <view class="member-list">
                <!-- 拼主 -->
                <view class="avatar main"> <image :src="avatar" mode="widthFix"></image> </view>
                <!-- 参与者 -->
                <view class="avatar" v-for="i in existNum - 1" :key="i">
                    <image :src="avatar" mode="widthFix"></image>
                </view>
                <!-- 剩余 -->
                <view class="avatar empty" v-for="i in memberNum - existNum" :key="i"></view>
            </view>
        </scroll-view>
        <template v-if="hasShopInfo">
            <view class="line"> <tui-divider :height="64"></tui-divider> </view>
            <view class="shop-info">
                <image :src="shopInfo.productImage" mode="widthFix" class="cover"></image>
                <view class="name" v-text="shopInfo.productName"></view>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    name: 'share-buy-member-info',
    props: {
        hasShopInfo: {
            type: Boolean,
            default: true
        },
        // 总人数
        memberNum: {
            type: Number,
            default: 0
        },
        // 已有人数
        existNum: {
            type: Number,
            default: 0
        },
        // 商品简介信息
        shopInfo: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        avatar() {
            return this.staticUrl + 'icon-default-avatar.png'
        }
    }
}
</script>

<style lang="scss" scoped>
.member-info {
    padding: 60rpx 0 40rpx;
    background-color: #fff;
    .line {
        padding: 0 24rpx;
    }
    .scroll-box {
        width: 750rpx;
        .member-list {
            padding: 0 24rpx;
            text-align: center;
            white-space: nowrap;
            .avatar {
                position: relative;
                display: inline-block;
                width: 98rpx;
                height: 98rpx;
                margin: 0 16rpx;
                border: 1rpx solid #ff457b;
                border-radius: 50%;
                vertical-align: middle;

                &.main {
                    &::after {
                        position: absolute;
                        top: 0;
                        left: 0;
                        transform: translateX(-40%);
                        content: '拼主';
                        display: block;
                        width: 56rpx;
                        height: 28rpx;
                        line-height: 28rpx;
                        text-align: center;
                        border: 1rpx solid #fff;
                        background-color: #ff457b;
                        color: #fff;
                        font-size: 20rpx;
                        border-radius: 14rpx;
                    }
                }

                &.empty {
                    border: 1rpx dashed #cccccc;
                    text-align: center;
                    line-height: 98rpx;
                    &::after {
                        content: '?';
                        font-size: 36rpx;
                        color: #ccc;
                    }
                }

                image {
                    display: block;
                    width: 98rpx;
                    height: 98rpx;
                }
            }
        }
    }

    .shop-info {
        padding: 0 24rpx;
        @extend .cm-flex-between;

        .cover {
            width: 80rpx;
            height: 80rpx;
            border-radius: 8rpx;
        }

        .name {
            @include ellipsis(2);
            width: 600rpx;
            font-size: 26rpx;
            text-align: justify;
            line-height: 36rpx;
        }
    }
}
</style>