uni——手风琴（折叠面板）

案例展示

目前其他暂无数据，点击标题时调用接口返回所含设备。

案例代码

<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;
	}
}