MD_worker/pages/select/product.vue

<template>
    <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)">
            <view class="itemname">{{ item.itemname }}</view>
            <view class="row">
                <view class="label">
                    产品编号：
                </view>
                <view class="value">
                    {{ item.itemno || '--' }}
                </view>
            </view>
            <view class="row">
                <view class="label">
                    型号/规格：
                </view>
                <view class="value">
                    {{ item.model }}/{{ item.spec || '--' }}
                </view>
            </view>
            <view class="row">
                <view class="label">
                    计量单位：
                </view>
                <view class="value">
                    {{ item.unitname || '--' }}
                </view>
            </view>
        </view>
    </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": 20,
    "where": {
        "status": '',
        "condition": ""
    }
});

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

onLoad(() => {
    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) {
            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 {
    width: 690rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
    border-radius: 10rpx;
    padding: 40rpx;
    box-sizing: border-box;
    margin: 0 auto 20rpx;

    .itemname {
        line-height: 38rpx;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-size: 32rpx;
        color: #333333;
    }

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

        .label {
            color: #999999;
        }

        .value {
            color: #333333;
        }
    }
}
</style>