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

<template>
    <div class='deviceIndex'>
        <van-field
            v-model="id"
            center
            clearable
            placeholder="请输入设备名或编号">
            <template #button>
                <van-button size="small" type="info" @click="onSearch()">搜索</van-button>
            </template>
        </van-field>
        <div class='p15'>
            <van-swipe-cell v-for='(item, index) in list'>
                <div class='c-f14 bgc-fff ptb15 c-999 plr10' @click="gotoUrl('/device/detail',{deviceInfo: item})">
                    <div class='f_y_c flex f_x_s'>
                        <span class='c-f16 c-333'>{{item.name||'众健信联1号'}}</span>
                        <div>
                            <van-tag :type="true?'success':'danger'" class='mr10'>在线</van-tag>
                            <van-tag :type="true?'success':'danger'">在售</van-tag>
                        </div>
                    </div>
                    <div class='mt10'>
                        <span>设备所属：</span>
                        <span>{{item.belong}}</span>
                    </div>
                    <div>
                        <span>设备编号：</span>
                        <span>{{item.id}}</span>
                    </div>
                    <div>
                        <span>信号强度：</span>
                        <span>{{item.signalStrength}}</span>
                    </div>
                    <div>
                        <span>网<i class='mr2em'></i>络：</span>
                        <span>{{item.network}}</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>
export default{
    name: 'deviceIndex',
    data(){
        return {
            id: '',
            list: [{name:'众健信联1号'}]
        }
    },
    methods:{
        onSearch(){

        },
        unBind(item){

        },
        stopSell(item){

        },
        initMain(){

        }
    },
    created(){
        this.initMain();
    }
}
</script>
<style scoped lang='scss'>
.deviceIndex{
    .mr2em{
        margin-right: 2em;
    }
    .delete-button{
        height: 100%;
    }
}
</style>