xinelu-applet-ui/pagesB/performancedetails/performancedetails.vue

<template>
	<view class="app">
		<u-collapse :accordion='false'>
			<u-collapse-item :title="item.packageName" v-for="item in itemlist" :key="item.packageNo"
				:class="item.check?'headcollapse':''" @change='tapcollapse(item)'>
				<view class="itemtext" v-for="uitem in item.formList">
					<view class="left">
						{{uitem.formName}}
					</view>
					<view class="right">
						{{uitem.performanceCount}}/{{uitem.serviceFreq}}
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import {
		getPerformance
	} from "@/api/pagesB/performancedetails/index.js"
	export default {
		data() {
			return {
				itemlist: [],
				userinfo: {},
			};
		},
		watch: {},
		methods: {
			tapcollapse(item) {
				item.check = !item.check
			},
			info() {
				this.cityCode = uni.getStorageSync('region');
				this.userinfo = uni.getStorageSync('userinfo')
				var identity = this.userinfo.cardNo
				getPerformance(identity).then(res => {
					res.data.forEach(e => {
						e.check = false
					})
					this.itemlist = res.data
				})
			},
		},
		onLoad() {
			this.info();
		},
	}
</script>

<style lang="scss">
	.app {
		width: 96%;
		margin: 20rpx auto;

		::v-deep .u-collapse-title {
			font-size: 30rpx;
			font-weight: 600;
			padding-left: 10rpx;
		}

		::v-deep .u-collapse-head {
			width: 96%;
			margin: 0 auto;
		}


		::v-deep .u-arrow-down-icon {
			transform: rotate(270deg);
		}

		.itemtext {
			font-size: 28rpx;
			font-weight: 500;
			color: #868585;
			width: 94%;
			padding-left: 10rpx;
			line-height: 40rpx;
			border-bottom: 2rpx solid #E6E6E6;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			align-items: center;
		}

		.headcollapse {
			::v-deep .u-collapse-head {
				border-bottom: 2rpx solid #E6E6E6;
			}

			::v-deep .u-arrow-down-icon {
				transform: rotate(360deg) !important;
			}

			::v-deep .u-collapse-item {
				padding-bottom: 40rpx;
			}

			::v-deep .u-collapse-title {
				color: #26A888;
			}
		}

		::v-deep .u-collapse-item {
			background-color: #fff;
			margin-bottom: 20rpx;
		}
	}
</style>