caimei-applets-store/pages/views/goods/components/goods-coupon-section/goods-coupon-section.vue

<template>
    <view class="goods-coupon-section" v-if="couponList">
        <view class="section" @click="$emit('click')">
            <view class="label">优惠券：</view>
            <view class="coupon-tags">
                <template v-for="(item, index) in couponList">
                    <view class="tag" :key="item.couponId" v-if="index < 2">
                        <view class="coupon-label" v-text="item.couponTitle"></view>
                    </view>
                </template>
                <!-- <text class="ellipsis" v-if="couponList.length > 2">...</text> -->
            </view>
            <view class="iconfont icon-chakangengduo more"></view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'goods-coupon-section',
    props: {
        couponList: {
            type: [Object, Array],
            default: null
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-coupon-section {
    padding: 24rpx;
    background-color: #fff;
    .section {
        @extend .cm-flex-between;
        font-size: 24rpx;

        .label {
            color: #666;
        }

        .coupon-tags {
            flex: 1;
            text-align: right;
            margin-right: 24rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
            .tag {
                display: inline-block;
                height: 30rpx;
                padding: 0 8rpx;
                margin-right: 8rpx;
                background: #fff3f7;
                border: 1rpx solid #ff457b;
                border-radius: 4rpx;
                vertical-align: middle;

                .coupon-label {
                    font-size: 22rpx;
                    max-width: 236rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #ff457b;

                    &::before {
                        content: '券 |';
                        margin: 0 6rpx;
                        margin-left: 0;
                    }
                }

                &:first-child {
                    margin-left: 0;
                }
            }

            .ellipsis {
                font-size: 24rpx;
                color: #ff457b;
            }
        }
        .more {
            font-size: 24rpx;
            color: #ff457b;
        }
    }
}
</style>