95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<template>
|
|
<view class="ability-list-box">
|
|
<view class="ability-list">
|
|
<view class="ability-item" v-for="item in abilityList" :key="item.identifier" @click="goDetail(item)">
|
|
<view class="item-left">
|
|
<view class="iconfont icon-appstore"></view>
|
|
<view class="item-left-content">
|
|
<view class="item-name">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="item-status">
|
|
<u-tag v-if="item.callType == 'async'" text="同步" type="success" />
|
|
<u-tag v-else-if="item.callType == 'sync'" text="异步" type="warning" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="iconfont icon-xiangyou1"></view>
|
|
</view>
|
|
<u-empty v-if="abilityList.length == 0" margin-top="250" text="设备功能为空,请添加功能" src="grid"></u-empty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return {
|
|
abilityList:[],
|
|
devId:'',
|
|
pk:'',
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
let abilityList = JSON.parse(decodeURIComponent(option.abilityList))
|
|
console.log("当前参数",abilityList);
|
|
this.abilityList = abilityList;
|
|
this.devId = option.devId;
|
|
this.pk = option.pk;
|
|
uni.setNavigationBarTitle({
|
|
title:option.deviceName + '功能列表'
|
|
})
|
|
},
|
|
methods:{
|
|
goDetail(obj){
|
|
console.log("当前点击功能",obj)
|
|
let ability = encodeURIComponent(JSON.stringify(obj))
|
|
uni.navigateTo({
|
|
url:'./device-ability-detail?ability=' + ability + '&devId=' + this.devId + '&pk=' + this.pk
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.ability-list-box{
|
|
.ability-list{
|
|
.ability-item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
.item-left{
|
|
display: flex;
|
|
align-items: center;
|
|
.iconfont{
|
|
font-size: 90rpx;
|
|
}
|
|
.item-left-content{
|
|
margin-left: 20rpx;
|
|
.item-name{
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
.item-status{
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.iconfont{
|
|
color: #818181;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |