pages/sub_index/chatDetails.vue

<template>
	<view class="chatDetails" @touchmove.stop.prevent="moveHandle">
		<view class="chatDetails-header">
			<view class="chatDetails-header-title">
				今天有去苍山的吗？一起拼个车呗！仅限女生哦，小姐姐快来联系我吧~
			</view>
			<view class="chatDetails-header-avatar">
				<u-avatar :src="avatar" size="110"></u-avatar>
				<view class="chatDetails-header-avatar-desc">
					<text class="chatDetails-header-avatar-desc-name">李萌萌</text>
					<text class="chatDetails-header-avatar-desc-date">3小时前</text>
				</view>
			</view>
			<view class="chatDetails-header-con">
				今天下午1点到4点，有没有小伙伴想去苍山的啊？有的话我们就一起呗，路上有个陪伴，还能多认识一些小伙伴对不对呀，限女生哦~有一起拼车的小姐姐们记得找我哦！
			</view>
		</view>
		<view class="chatDetails-line"></view>
		<scroll-view :scroll-y="true" :style="{height:height+'px'}" class="scrollView">
			<view class="chatDetails-items">
				<view class="chatDetails-items-desc">
					<view class="chatDetails-items-desc-left">
						<u-avatar :src="avatar" size="112"></u-avatar>
					</view>
					<view class="chatDetails-items-desc-right">
						<view class="chatDetails-items-desc-right-author">
							<text class="chatDetails-items-desc-right-author-name">刘壮壮</text>
							<view class="chatDetails-items-desc-right-author-sup">
								<text>166</text>
								<u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon>
							</view>
						</view>
						<view class="chatDetails-items-desc-right-date">1小时前</view>
						<view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view>
					</view>
				</view>
			</view>
			<view class="chatDetails-items">
				<view class="chatDetails-items-desc">
					<view class="chatDetails-items-desc-left">
						<u-avatar :src="avatar" size="112"></u-avatar>
					</view>
					<view class="chatDetails-items-desc-right">
						<view class="chatDetails-items-desc-right-author">
							<text class="chatDetails-items-desc-right-author-name">刘壮壮</text>
							<view class="chatDetails-items-desc-right-author-sup">
								<text>166</text>
								<u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon>
							</view>
						</view>
						<view class="chatDetails-items-desc-right-date">1小时前</view>
						<view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view>
					</view>
				</view>
			</view>
			<view class="chatDetails-items">
				<view class="chatDetails-items-desc">
					<view class="chatDetails-items-desc-left">
						<u-avatar :src="avatar" size="112"></u-avatar>
					</view>
					<view class="chatDetails-items-desc-right">
						<view class="chatDetails-items-desc-right-author">
							<text class="chatDetails-items-desc-right-author-name">刘壮壮</text>
							<view class="chatDetails-items-desc-right-author-sup">
								<text>166</text>
								<u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon>
							</view>
						</view>
						<view class="chatDetails-items-desc-right-date">1小时前</view>
						<view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view>
					</view>
				</view>
			</view>
			<view class="chatDetails-items">
				<view class="chatDetails-items-desc">
					<view class="chatDetails-items-desc-left">
						<u-avatar :src="avatar" size="112"></u-avatar>
					</view>
					<view class="chatDetails-items-desc-right">
						<view class="chatDetails-items-desc-right-author">
							<text class="chatDetails-items-desc-right-author-name">刘壮壮</text>
							<view class="chatDetails-items-desc-right-author-sup">
								<text>166</text>
								<u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon>
							</view>
						</view>
						<view class="chatDetails-items-desc-right-date">1小时前</view>
						<view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="chatDetails-bottom">
			<u-icon name="chat" color="#999999" size="44"></u-icon>
			<text class="chatDetails-bottom-num">12</text>
			<view class="chatDetails-bottom-ipt">
				<u-search placeholder="说点什么吧" v-model="val" :show-action="false"></u-search>
			</view>
			<u-icon name="thumb-up" color="#999999" size="44"></u-icon>
			<u-button size="mini" :custom-style="chatDetailsBottomBtn">发送</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: "",
				val: "",
				height: "",
				chatDetailsBottomBtn:{
					color: '#ffffff',
					backgroundColor: '#30A8E1',
					borderRadius: '50rpx',
					padding: '30rpx 40rpx',
					marginLeft: '10rpx',
				}
			}
		},
		methods: {
			moveHandle() {
				return
			},
			getSrcollViewHeight(){
				let winHeight
				let that =this
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				const query = uni.createSelectorQuery().in(that);
				let top,height
				query.select('.scrollView').boundingClientRect(data => {
					console.log(data)
					top = Number(data.top)
				}).exec();
				query.select('.chatDetails-bottom').boundingClientRect(data => {
					height = Number(data.height)
					that.height = winHeight - top - height
				}).exec();
			}
		},
		onLoad() {

		},
		onReady() {
			this.getSrcollViewHeight()
		}
	}
</script>

<style lang="scss" scoped>
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
		background-color: transparent;
	}

	.scrollView {
		// height: calc(100vh - 560rpx);
		// padding-bottom: 150rpx;
	}

	.chatDetails {
		width: 100vw;
		background-color: #FFFFFF;
		font-family: "PingFang-SC-Medium";

		&-header {
			padding: 30rpx;

			&-title {
				color: #343434;
				font-size: 31rpx;
			}

			&-avatar {
				display: flex;
				margin: 30rpx 0 20rpx;

				&-desc {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 20rpx;

					&-name {
						color: #343434;
						font-size: 28rpx;
					}

					&-date {
						color: #9A9A9A;
						font-size: 24rpx;
					}
				}
			}

			&-con {
				color: #666666;
				font-size: 28rpx;
			}
		}

		&-line {
			width: 100%;
			height: 2rpx;
			background-color: rgba(204, 204, 204, 1);
			margin: 10rpx 0 0;
		}

		&-items {
			padding: 30rpx;

			&-desc {
				display: flex;

				&-right {
					width: 80%;
					margin-left: 20rpx;
					margin-top: 15rpx;

					&-author {
						display: flex;
						align-items: center;
						justify-content: space-between;

						&-name {
							color: #343434;
							font-size: 28rpx;
						}

						&-sup {
							color: #9A9A9A;
							font-size: 24rpx;
							display: flex;
							align-items: center;

							text {
								margin-right: 10rpx;
							}
						}
					}

					&-date {
						color: #9A9A9A;
						font-size: 24rpx;
						margin: 10rpx 0;
					}

					&-desc {
						color: #666666;
						font-size: 28rpx;
						display: inline-block;
						text-align: justify;
					}
				}

			}
		}

		&-bottom {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 120rpx;
			padding: 30rpx;
			display: flex;
			background-color: #FFFFFF;
			align-items: center;
			border-top: 2rpx rgba(100, 100, 100, 0.09) solid;

			&-num {
				color: #9A9A9A;
				font-size: 24rpx;
				font-family: "PingFang-SC-Regular";
				margin: 0 20rpx 0 5rpx;
			}

			&-ipt {
				width: 65%;
				margin-right: 20rpx;
			}

			&-btn {
				color: #ffffff;
				background-color: #30A8E1;
				border-radius: 50rpx;
				padding: 30rpx 40rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>