saas_member_mobile/pages/worktable/index.vue

<template>
	<view class="worktable">
		<u-navbar placeholder :safeAreaInsetTop="true" bgColor="#363C4F">
			<view class="u-nav-left" slot="left" style="height:100%;display: flex;
    align-items: center;">
				工作台
			</view>
			<view class="u-nav-center" slot="center" style="padding-right: 20rpx;">
				<u-transition :show="topSearch" mode="fade-up">
					<view class="searchBox_top">
						<input placeholder-style="color:#ffffff32;font-size: 20rpx;" type="text"
							placeholder="输入手机号码/会员卡号">
						<u-icon name="scan" size="22px" color="#D9D9D9"></u-icon>
						<i>|</i>
						<span>取消</span>
					</view>
				</u-transition>
			</view>
		</u-navbar>
		<view class="vipInfo">
			<view class="searchBox">
				<input placeholder-style="color:#ffffff32;font-size: 30rpx;" type="text" placeholder="输入手机号码/会员卡号">
				<u-icon name="scan" size="22px" color="#D9D9D9"></u-icon>
				<i>|</i>
				<span>取消</span>
			</view>
			<u-row customStyle="margin-bottom:20px;flex-wrap: wrap;">
				<u-col span="6" customStyle="margin-bottom:16px;">
					<view>会员姓名：xxx</view>
				</u-col>
				<u-col span="6" customStyle="margin-bottom:16px;">
					<view>会员卡号：123456789</view>
				</u-col>
				<u-col span="6" customStyle="margin-bottom:16px;">
					<view>手机号码：15900000000</view>
				</u-col>
				<u-col span="6" customStyle="margin-bottom:16px;">
					<view>剩余积分：1234</view>
				</u-col>
			</u-row>
		</view>
		<goods />
		<statistics ref="statistics" />
	</view>
</template>

<script>
	import goods from "./goods.vue"
	import statistics from "./statistics.vue"
	export default {
		components: {
			goods,
			statistics
		},
		data() {
			return {
				bottom: 0,
				topSearch: false,
			}
		},
		onPageScroll(e) {
			const query1 = uni.createSelectorQuery().in(this);
			query1.select('.searchBox').boundingClientRect((pos) => {
				if (pos.bottom <= this.bottom) {
					this.topSearch = true
				} else {
					this.topSearch = false
				}
			}).exec()
		},
		onLoad() {
			Promise.all([this.getHeightA(), this.getHeightB()]).then(res => {
				console.log(res)
				this.$store.commit("setGoodsHeight", res[1] - res[0])
			})

		},
		onReady() {},
		methods: {
			//计算顶部nav高度
			getHeightA() {
				return new Promise((resolve) => {
					const query1 = uni.createSelectorQuery().in(this);
					query1.select('.u-nav-left').boundingClientRect((pos) => {
						this.bottom = pos.bottom
						resolve(pos.bottom)
					}).exec()
				})
			},
			//计算底部shoppingCar高度
			getHeightB() {
				return new Promise((resolve) => {
					const query2 = uni.createSelectorQuery().in(this.$refs.statistics);
					query2.select('.statistics').boundingClientRect((pos) => {
						resolve(pos.top)
					}).exec()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-nav-left,
	.u-nav-center {
		color: #fff;
	}

	.vipInfo {
		background-color: #363C4F;
		padding: 32rpx;
		color: #D9D9D9;
		font-size: 28rpx;

		&>.searchBox {
			padding: 28rpx;
			width: 100%;
			background: rgba(255, 255, 255, 0.37);
			border-radius: 300rpx;
			color: #D9D9D9;
			display: flex;
			align-items: center;
			margin-bottom: 48rpx;

			&>input {
				color: #fff;
				flex: 1;
				font-size: 30rpx;
				padding-right: 10rpx;
			}

			&>i {
				color: #DBDBDB;
				font-style: normal;
				margin: 0rpx 32rpx;
			}

			&>span {
				color: #fff;
			}
		}
	}

	.searchBox_top {
		padding: 8rpx 16rpx;
		width: 100%;
		background: rgba(255, 255, 255, 0.37);
		border-radius: 300rpx;
		color: #D9D9D9;
		display: flex;
		align-items: center;
		font-size: 20rpx;

		&>input {
			color: #fff;
			flex: 1;
			font-size: 20rpx;
			padding-right: 5rpx;
		}

		&>i {
			color: #DBDBDB;
			font-style: normal;
			margin: 0rpx 16rpx;
		}

		&>span {
			color: #fff;
		}
	}
</style>