md-h5/pages/select/accessoriesList.vue

<template>
    <view :class="size">
        <view v-for="item in list" :key="item.itemid" hover-class="navigator-hover" class="item"
            :class="result.includes(item.itemid) ? 'radio' : ''" @click="click(item)">
            <view class="left" @click.stop="previewImge(item.imageUrl)">
                <up-image :show-loading="true" :src="item.imageUrl" width="100%" height="100%" />
            </view>
            <view class="right">
                <view class="itemname">
                    {{ item.itemname || '--' }}
                </view>
                <view class="row">
                    型号：{{ item.model || '--' }}
                </view>
                <view class="row">
                    分类：{{ item.bomfullname || '--' }}
                </view>
                <view class="row">
                    售价：<text class="price">{{ $Http.formatNumber(item.price) }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['uploadCallback'])

import { getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;

const props = defineProps({
    list: {
        type: Array
    },
    result: {
        type: Array,
        default: () => []
    },
    onClick: {
        type: Function,
        default: () => { }
    },
    size: {
        type: String,
        default: 'large' // small, large
    }
});

function click(item) {
    emit('onClick', item);
}

function previewImge(url) {
    if (!url) return;
    uni.previewImage({
        urls: [url],
        current: url
    });
}
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    width: 100%;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 16rpx;
    box-sizing: border-box;
    margin-top: 16rpx;

    .left {
        flex-shrink: 0;
        width: 148rpx;
        height: 148rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        border: 2rpx solid #707070;
        margin-right: 16rpx;
        overflow: hidden;
    }

    .right {
        right: 1;

        .itemname {
            line-height: 34rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #333333;
        }

        .row {
            line-height: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-size: 20rpx;
            color: #999999;

            .price {
                color: #FA5151;
            }
        }

    }
}

.large {
    width: 690rpx;
    margin: 0 auto;

    .item {
        padding: 20rpx;
        margin-top: 20rpx;

        .left {
            width: 180rpx;
            height: 180rpx;
            background: #FFFFFF;
            margin-right: 20rpx;
        }

        .right {

            .itemname {
                line-height: 38rpx;
                font-size: 34rpx;
            }

            .row {
                font-size: 28rpx;
                margin-top: 12rpx;
            }

        }
    }
}

.radio {
    background: #3774F6;

    .right {
        right: 1;

        .itemname {
            color: #fff;
        }

        .row {
            color: #fff;

            .price {
                color: #fff;
            }
        }
    }
}

.item:first-child {
    margin-top: 0;
}
</style>