new-uniapp-h5/subPackages/inPersonToPay/compontents/twoGoods.vue

<template>
    <view class="list" v-if="list.length">
        <view @click="toUrl('/subPackages/goods/goods/index?id=' + e.id)" class="list-items" v-for="(e, i) of sortedItems"
            :key="i">
            <view class="list-con">
                <view class="list-img">
                    <view class="tag" v-if="e.lable" :style="{ background: e.lable.bg_color }">{{ e.lable.name }}</view>
                    <view class="img">
                        <u-image loadingIcon="bag" showLoading bgColor="#fff" :fade="true" lazyLoad width="100%"
                            height="auto" :src="e.pic_url" mode="widthFix">
                            <template #loading>
                                <view
                                    style="min-height: 200rpx;;display: flex;align-items: center;justify-content: center;">
                                    <u-icon name="bag"></u-icon>
                                </view>
                            </template>
                        </u-image>
                    </view>
                </view>
                <view class="list-txt">
                    <view class="list-name mb">{{ e.name }}</view>
                    <view v-if="e.server_project && e.server_project.length" class="list-attr">
                        <u-text color="#f0250e" size="12" :lines="1" :text="e.server_project"></u-text>
                    </view>
                    <view class="list-txt-fd">
                        <view class="list-price g-price">
                            <template v-if="e.autoCouponPrice">
                                <text style="font-size: 24rpx;margin-right: 6rpx;">卷后</text>
                                <view>¥</view>
                                <view class="fwb">{{ getPrice(e.autoCouponPrice)[0] }}</view>
                                <view>.{{ getPrice(e.autoCouponPrice)[1] }}</view>
                            </template>
                            <template v-else>
                                <view>¥</view>
                                <view class="fwb">{{ getPrice(e.price_min)[0] }}</view>
                                <view>.{{ getPrice(e.price_min)[1] }}</view>
                            </template>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // new_list: [],
        }
    },
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        classify: {
            type: [String, Number]
        }
    },
    computed: {
        getPrice() {
            return (price) => {
                return price ? price.split(".") : ["0.00"];
            };
        },
        sortedItems: function () {
            let sortedArray = [];
            let columnCount = 2; // 指定横排布局的列数
            let columnIndex = 0;

            // 根据列数将数据项分组
            let groups = this.list.reduce(function (result, item) {
                if (!result[columnIndex]) {
                    result[columnIndex] = [];
                }
                result[columnIndex].push(item);
                columnIndex = (columnIndex + 1) % columnCount;
                return result;
            }, []);

            // 按照横排布局的顺序将数据项重新排序
            for (let i = 0; i < groups.length; i++) {
                for (let j = 0; j < groups[i].length; j++) {
                    sortedArray.push(groups[i][j]);
                }
            }
            return sortedArray;
        }
    },
}
</script>

<style lang="scss" scoped>
.list {
    padding: 22rpx 12rpx;
    column-count: 2;
    gap: 20rpx;
    grid-gap: 20rpx;
    column-gap: 20rpx;

    * {
        box-sizing: border-box;
    }

    .list-items {
        margin-bottom: 20rpx;
        box-sizing: border-box;
        break-inside: avoid;
        box-shadow: 0 0.3125rem 1.25rem 0px rgba(166, 199, 251, 0.12);

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

    .list-item {
        padding: 12rpx;
        width: 100%;
        box-sizing: border-box;
    }

    .list-con {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;

        .list-img {
            width: 100%;
            padding: 20rpx 20rpx 0;
            overflow: hidden;
            box-sizing: border-box;
            min-height: 200rpx;
            display: flex;
            border-radius: 8rpx;
            position: relative;

            display: flex;


            .tag {
                position: absolute;
                top: 20rpx;
                left: 20rpx;
                padding: 6rpx 15rpx 8rpx 10rpx;
                font-size: 20rpx;
                color: #fff;
                z-index: 2;
                border-radius: 8rpx 0 10px 0;
            }

            .img {
                box-sizing: border-box;
                border-radius: 8rpx;
                overflow: hidden;
                width: 100%;
            }
        }

        .list-txt {
            padding: 20rpx;
            flex: 1;
            overflow: hidden;

            .list-name {
                display: -webkit-box;
                margin-bottom: 10rpx;
                max-height: 80rpx;
                white-space: normal;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
                overflow: hidden;
                font-size: 24rpx;
                color: #262626;
                line-height: 40rpx;
            }

            .list-txt-fd {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                .list-price {
                    padding-right: 5rpx;
                    flex: 1;
                    overflow: hidden;
                    color: #f0250e;
                }
            }
        }

        .list-attr {
            font-size: 24rpx;
            color: #8c8c8c;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-bottom: 10rpx;
            color: #f0250e;

            text {
                margin-right: 10rpx;
            }
        }
    }
}
</style>