md-h5/pages/select/product.vue

<template>
    <My-shade />
    <view class="search-box">
        <up-search placeholder="搜索关键词" v-model="keyword" height="35" @blur="onSearch" :clearabled="false"
            :showAction="false" />
        <view v-if="content.where.condition" class="clear" @click.stop="onSearch('')">
            <up-icon name="close-circle-fill" size="20" />
        </view>
    </view>
    <view style="height: 20rpx; " />
    <My_listbox ref="listBox" :empty="!list.length" @getlist="getList">
        <view class="item" hover-class="navigator-hover" v-for="item in list" :key="item.itemid"
            @click="selected(item)">
            <up-image :show-loading="true" :src="item.cover" width="80px" height="80px" />
            <view class="content">
                <view class="row">
                    <text class="label">
                        产品名称
                    </text>
                    {{ item.itemname || ' --' }}
                </view>
                <!--     <view class="row">
                    <text class="label">
                        产品编号
                    </text>
                    {{ item.itemno || ' --' }}
                </view> -->
                <view class="row">
                    <text class="label">
                        产品型号
                    </text>
                    {{ item.model || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        产品规格
                    </text>
                    {{ item.spec || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        计量单位
                    </text>
                    {{ item.unitname || ' --' }}
                </view>
            </view>
        </view>
        <view style="height: 30px;" />
    </My_listbox>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onLoad } from '@dcloudio/uni-app';

const keyword = ref('');
const listBox = ref(null);
const content = reactive({
    loading: false,
    "pageNumber": 1,
    "pageSize": 15,
    "where": {
        "status": '审核',
        "condition": "",
        ismodule: 0
    }
});

function onSearch(e) {
    if (content.where.condition == e) return;
    content.where.condition = e;
    keyword.value = e;
    getList(true);
}
const list = ref([])

onLoad((options) => {
    if (options.topclassnum) {
        content.where.topclassnum = options.topclassnum;
    };
    getList();
});

function getList(init = false) {
    if (content.loading) return;
    content.loading = true;
    if (init) content.pageNumber = 1;
    $Http.basic({
        "id": "20220923140602",
        content
    }).then(res => {
        content.loading = false;
        console.log("获取产品列表", res)
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        if (res.code == 1) {
            res.data = res.data.map(v => {
                v.cover = v.attinfos.length ? $Http.getSpecifiedImage(v.attinfos[0]) : ''
                return v;
            })
            list.value = reactive(res.firstPage ? res.data : list.value.concat(res.data));
            content.pageTotal = res.pageTotal;
            content.pageNumber = res.pageNumber;
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

function selected(item) {
    $Http.onSelected && $Http.onSelected(item)
}
</script>

<style lang="scss" scoped>
.search-box {
    position: relative;
    padding: 20rpx;
    background: #fff;

    .clear {
        position: absolute;
        display: flex;
        align-items: center;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 80rpx;
        padding-left: 10rpx;
        height: 70rpx;
        z-index: 2;
    }
}

.item {
    position: relative;
    display: flex;
    width: 95%;
    box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    overflow: hidden;
    margin: 0 auto 20rpx;
    background: #fff;

    .tag {
        position: absolute;
        left: 50rpx;
        top: 100px;
        width: 100rpx;
        padding: 2rpx 0;
        text-align: center;
        background: red;
        font-size: 24rpx;
        color: #fff;
        border-radius: 8rpx;
    }

    .content {
        margin-left: 20rpx;

        .row {
            display: flex;
            line-height: 32rpx;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 24rpx;
            margin-top: 8rpx;

            .label {
                color: #666;
                flex-shrink: 0;
            }

            .label::after {
                content: '：';
            }
        }
    }
}
</style>