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

<template>
    <div class='deviceIndex'>
        <van-sticky>
            <van-field
                v-model="searchText"
                center
                clearable
                placeholder="请输入设备名或编号">
                <template #button>
                    <van-button size="small" type="info" @click="onSearch()">搜索</van-button>
                </template>
            </van-field>
        </van-sticky>
        <div class='plr15'>
            <van-swipe-cell class="mt10" v-for='(item, index) in list' :key="index">
                <div class='c-f14 bgc-fff ptb15 c-999 plr10' @click="gotoUrl('/device/detail',{id: item.id})">
                    <div class='f_y_c flex f_x_s'>
                        <span class='c-f16 c-333'>{{item.equName}}</span>
                        <div>
                            <van-tag v-if="item.networkStatus==1" type="success" class='mr10'>{{item.networkStatusName}}</van-tag>
                            <van-tag v-else type="danger" class='mr10'>{{item.networkStatusName}}</van-tag>

                            <van-tag v-if="item.saleStatus==1" type="success">{{item.saleStatusName}}</van-tag>
                            <van-tag v-else type="danger">{{item.saleStatusName}}</van-tag>
                        </div>
                    </div>
                    <div class='mt10'>
                        <span>设备所属：</span>
                        <span>{{item.community}}</span>
                    </div>
                    <div>
                        <span>设备编号：</span>
                        <span>{{item.equNum}}</span>
                    </div>
                    <div>
                        <span>信号强度：</span>
                        <span>{{item.signalintensity}}</span>
                    </div>
                    <div>
                        <span>网<i class='mr2em'></i>络：</span>
                        <span>4G</span>
                    </div>
                </div>
                <!-- <template #right> -->
                    <!-- <van-button square text="解绑" type="danger" class="delete-button" @click='unBind(item)'/> -->
                    <!-- <van-button square text="停售" type="warning" class="delete-button" @click="stopSell(item)"/> -->
                <!-- </template> -->
            </van-swipe-cell>
        </div>
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'deviceIndex',
    data(){
        return {
            searchText: '',
            list: []
        }
    },
    created(){
        this.findList();
    },
    methods:{
        onSearch(){
            this.findList()
        },
        unBind(item){

        },
        stopSell(item){

        },

        findList(){
            this.$loading('加载中..')
            this.list = []
            let p = {
                content: this.searchText,
                userId: this.user.id,
                page: 1,
                size: 999
            }
            medicineAbinetApi.getDeviceListWithUserId(p)
                .then(res=>{
                    this.$toast.clear()
                    console.log('getDeviceListWithUserId', res)
                    if(res.status == 200){
                        this.list = res.detailModelList
                    } else {
                        this.list = []
                    }
                }).catch(err=>{
                    console.error(err)
                    this.list = []
                })
        }
    },
    
}
</script>
<style scoped lang='scss'>
.deviceIndex{
    .mr2em{
        margin-right: 2em;
    }
    .delete-button{
        height: 100%;
    }
}
</style>