caimei-applets-mcare/pages/search/components/material-list.vue

<template>
    <view class="material-wrapper">
        <view class="material-list">
            <view class="material-item" v-for="item in list" :key="item.archiveId" @click="onToDetail(item)">
                <view class="cover"><image :src="item.productImage"></image></view>
                <view class="content">
                    <view class="title" v-text="item.productName"></view>
                    <view class="shop-name">
                        <text class="label">供应商：</text>
                        <text class="value" v-text="item.shopName"></text>
                    </view>
                    <view class="property">
                        <text class="label">商品属性：</text>
                        <text class="value">{{ item.productType === 1 ? '仪器' : '产品' }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { debounce } from '@/common/config/common'
const myDebounce = fn => debounce(fn, 200, false)
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    created() {
        console.log('material-list')
    },
    methods: {
        onToDetail: myDebounce(function(item) {
            this.$api.navigateTo(`/pages/goods/goods-doc-detail?id=${item.archiveId}`)
        })
    }
}
</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;
}

.material-wrapper {
    .material-item {
        display: flex;
        padding: 32rpx;
        border-top: 1rpx solid #e1e1e1;
        &:first-child {
            border-top: 0;
        }

        .cover {
            width: 220rpx;
            height: 220rpx;
            flex-shrink: 0;
            image {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .content {
            flex: 1;
            margin-left: 24rpx;
            .title {
                @include ellipsis(2);
                font-size: 28rpx;
                color: #22272e;
                line-height: 40rpx;
                height: 80rpx;
            }
            .shop-name {
                margin-top: 24rpx;
            }
            .property {
                margin-top: 16rpx;
            }
            .shop-name,
            .property {
                font-size: 24rpx;
                @include ellipsis(1);
                .label {
                    color: #999999;
                }
                .value {
                    color: #333333;
                }
            }
        }
    }
}
</style>