md-h5/pages/select/myProduct.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)">
            <view class="image-box">
                <up-image :show-loading="true" :src="item.cover" width="80px" height="80px" />
                <view class="tag" :style="{
                    background: item.isUnderWarranty ? '#27D8B4' : '#E14154',
                }">
                    {{ item.isUnderWarranty ? '在' : '过' }}保
                </view>
            </view>
            <view class="content">
                <view class="row">
                    <text class="label">
                        产品名称
                    </text>
                    {{ item.itemname || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        产品型号
                    </text>
                    {{ item.model || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        序列号
                    </text>
                    {{ item.sku || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        保修卡号
                    </text>
                    {{ item.cardno || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        保修期限
                    </text>
                    {{ item.begdate ? item.begdate + '至' + item.enddate : ' --' }}
                </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": 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) {
    let sa_customersid = uni.getStorageSync('WuserRecord').sa_customersid || 0
    if (!sa_customersid) {
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        return
    };
    if (content.loading) {
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        return
    };
    content.loading = true;
    if (init) content.pageNumber = 1;
    content.sa_customersid = sa_customersid
    $Http.basic({
        "id": "2025082115363003",
        content
    }).then(res => {
        content.loading = false;
        console.log("获取产品列表", res)
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        res.data = res.data.map(v => {
            v.isUnderWarranty = new Date() >= new Date(v.begdate) && new Date() <= new Date(v.enddate);
            v.cover = v.attinfos.length ? $Http.getSpecifiedImage(v.attinfos[0]) : ''
            return v
        })
        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 {
    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;

    .image-box {
        position: relative;

        .tag {
            position: absolute;
            left: 0;
            top: 0;
            padding: 4rpx 14rpx;
            padding-right: 20rpx;
            text-align: center;
            background: red;
            font-size: 22rpx;
            color: #fff;
            border-radius: 0 0 8rpx 0;
        }
    }

    .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>