xinelu-applet-ui/pagesB/performancedetails/performancedetails.vue
2023-10-12 14:31:36 +08:00

113 lines
2.0 KiB
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: [],
};
},
watch: {},
methods: {
tapcollapse(item) {
item.check = !item.check
},
info() {
// getPerformance(uni.getStorageSync('userinfo').cardNo, '1').then(res => {
getPerformance('372424194703207523', '1').then(res => {
res.data.forEach(e => {
e.check = false
})
this.itemlist = res.data
})
},
},
onLoad() {
this.info();
},
}
</script>
<style lang="scss">
page {
background-color: #F4F5F7;
}
.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%;
height: 100rpx;
padding-left: 10rpx;
line-height: 100rpx;
border-bottom: 2rpx solid #E6E6E6;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.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>