intelligent-medicine-cabinet/mini-pro-web/src/views/replenishment/device/list.vue

<template>
    <div class='replenishment-device-list'>
        <CustomList 
			ref="customList"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <div @click="gotoUrl('/replenishment/device/detail', {deviceId: item.id})" v-for="(item, i) in list" :key="i" class="item bgc-fff plr15 c-333 fs-14">
                    <div class=" ptb10 kitbox">
                        <div class="box-flex-1 fs-14">{{item.equName}}</div>
                        <div class="">
                            <van-tag :type="item.networkStatus==1? 'success' : 'danger'">{{item.networkStatusName}}</van-tag>
                            <van-tag :type="item.saleStatus==1? 'success' : 'danger'" class="ml5">{{item.saleStatusName}}</van-tag>
                        </div>
                    </div>
                    <div class="lh20 ptb10 kitbox">
                        <div class="box-flex-1">
                            <div>药柜容量：{{item.capacity}}</div>
                            <div>商品库存：{{item.shangPinKuCun}}</div>
                            <div>设备所属：{{item.community}}</div>
                            <div>设备编号：{{item.equNum}}</div>
                        </div>
                        <div class="fs-20 c-pr">
                            <van-icon name="arrow" />
                        </div>
                    </div>
                </div>
            </div>
		</CustomList>
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'replenishmentDeviceList',
    data(){
        return {
            list: [],
        }
    },
    created() {
        
    },
    methods:{
        onLoad({page, pageSize, searchText}){
            var p = {
                content: searchText,
                userId: this.user.id,
                page: 1,
                size: pageSize
            }
            console.log('params', p)
            medicineAbinetApi.getDeviceListWithUserId(p)
                .then(res=>{
                    console.log('getDeviceListWithUserId', res)
                    if(res.status == 200){
                        var list = res.detailModelList
                        this.list = page==1? list : this.list.concat(list)
                        debugger
                        this.$refs.customList.endLoad(res.totalPage<=page, this.list.length)
                    } else {
                        this.list = []
                        this.$refs.customList.endLoad(false, true)
                    }
                }).catch(err=>{
                    console.error(err)
                    this.list = []
                    this.$refs.customList.endLoad(false, true)
                })
        },
    },
}
</script>
<style lang='scss' scoped>
.replenishment-device-list{
    .list{
        .item{
            margin-bottom: 10px;
            border-radius: 5px;
            &:last-child{
                margin-bottom: 0;
            }
            .van-icon{
                position: absolute;
                top: 50%;
                transform: translateY(calc(-50% - 15px));
                right: 0;
                color: #ccc;
            }
        }
    }   
}
</style>