案例展示
目前其他暂无数据，点击标题时调用接口返回所含设备。
案例代码
<view class="collapse" v-for="(item,index) in itemList" :key="index">
<view @click="changeContent(item,index)">
<view class="collHeader">
<view class="collTitle">{
{item.names}}</view>
<image :src="item.open?item.imgUrl2:item.imgUrl1" class="topBottomIcon"></image>
</view>
<!-- 展开 -->
<view class="box">
<view v-if="item.open==true" v-for="(itemMsg,indexMsg) in collList" :key="indexMsg">
<view>{
{itemMsg.names}}:{
{itemMsg.devices_sn}}</view>
</view>
</view>
</view>
</view>
data() {
return {
collList: [{
names:'设备名称',devices_sn:'设备编号'}], //设备列表
itemList: [{
names: "场地名称",
open: false,
disabled: true,
imgUrl1: '/static/images/selectIcon.png',
imgUrl2: '/static/images/topIcon.png',
}],
}
},
methods: {
// 手风琴
changeContent(item, index) {
this.itemList.forEach(i => {
if (i.open !== this.itemList[index].open) {
i.open = false;
}
})
item.open = !item.open
this.$common.request('post', '/vipcard/getFieldDeviceLists', {
field_id: item.id
}).then(res => {
if (res.code == 1) {
if(res.data.length == 0){
this.$common.msg('暂无设备')
return
}
this.collList = res.data
}
})
},
getDetail() {
this.$common.request('post', '/vipcard/getVipcardDetails', {
card_id: this.card_id
}).then(res => {
if (res.code == 1) {
//如果后台返回的数据中没有和上述自定义的数组字段对应，需要遍历赋值
res.data.field_names.forEach((item) => {
item.open = false
item.imgUrl1 = '/static/images/selectIcon.png'
item.imgUrl2 = '/static/images/topIcon.png'
})
this.itemList = res.data.field_names
}
})
}
}
// 手风琴
.collapse {
padding: 0 30rpx;
margin-bottom: 10rpx;
.collHeader {
display: flex;
align-items: center;
.collTitle {
color: #454545;
font-size: 28rpx;
}
.topBottomIcon {
width: 22rpx;
height: 12rpx;
margin-left: 20rpx;
}
}
.box {
padding: 10rpx 30rpx;
font-size: 26rpx;
color: #888888;
line-height: 45rpx;
}
}