zhgdyunapp_vue3/pages/contractors/detailList.vue

<template>
	<view>
		<view class="barBox" :style="{'height': barBoxHeight + 'px'}">
			<view class="fixedheader">
				<headers  :themeType="'white'" :showBack="true">
				<view class="headerName">
					企业详情
				</view>
			</headers>
		</view>
			
		</view>
		<view class="detailListBox" :style="{height: scrollHeight + 'px'}">
			<view class="detailItem" @click="goBasic">
				<view class="item-left">
					<image src="/static/contractors/icon-basic.png" class="icon-image"></image>
					<text>基本信息</text>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="detailItem" @click="goQualification">
				<view class="item-left">
					<image src="/static/contractors/icon-qualification.png" class="icon-image"></image>
					<text>资质文件</text>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="detailItem" @click="goBadRecords">
				<view class="item-left">
					<image src="/static/contractors/icon-badRecords.png" class="icon-image"></image>
					<text>不良记录</text>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				projectId: '',
				barBoxHeight: '',
				scrollHeight: '',
			}
		},
		onReady() {
			this.getHeight()
		},
		onLoad(option) {
			this.id = option.id
			this.projectId = option.projectId
		},
		methods: {
			async getHeight() {
				const query = uni.createSelectorQuery().in(this);
				
				    let fixedheaderHeight = 0
				    const fixedHeaderPromise = new Promise((resolve) => {
				        query.select('.fixedheader').boundingClientRect(data => {
				            fixedheaderHeight = data.height
				            console.log('fixedheaderHeight：', data.height);
				            resolve();
				        }).exec();
				    });
				
				    let mobileTopHeight = 0
				    const systemInfoPromise = new Promise((resolve) => {
				        uni.getSystemInfo({
				            success(res) {
				                mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
				                resolve();
				            }
				        });
				    });
				
				    await fixedHeaderPromise;
				    await systemInfoPromise;
				
				    this.barBoxHeight = fixedheaderHeight + mobileTopHeight;
				    console.log('this.barBoxHeight', this.barBoxHeight);
				
				    let screenHeight = uni.getSystemInfoSync().screenHeight;
				    console.log('screenHeight', screenHeight);
				
				    this.scrollHeight = screenHeight - this.barBoxHeight;
				    console.log('this.scrollHeight', this.scrollHeight);
			},
			goBasic(){
				uni.navigateTo({
					url: './basicInfo?id=' + this.id + '&projectId=' + this.projectId,
				})
			},
			goQualification(){
				uni.navigateTo({
					url: './qualification?id=' + this.id + '&projectId=' + this.projectId,
				})
			},
			goBadRecords(){
				uni.navigateTo({
					url: './badRecords?id=' + this.id + '&projectId=' + this.projectId,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.barBox {
		// background-color: #5181F6;
		background-color: #f6f6f6;
		min-height: 100%;
		height: 44px;
		.fixedheader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			.headerName {
				z-index: 1;
			}
		}
	}
	.detailListBox{
		background-color: #f4f5fd;
		.detailItem{
			line-height: 120rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-shadow: 0px 8rpx 15rpx 0px rgba(219,229,255,0.6);
			.item-left{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.icon-image{
					margin-right: 20rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

</style>