cbz/page_index/pages/purchase/chat.vue

<template>
	<view class="content">
		<view class="list" id="list">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="hflex acenter jend item" v-if="item.user.id == userId">
					<view class="message">{{item.content}}</view>
					<image :src="item.user.headimg" class="headimg"></image>
				</view>
				<view class="hflex acenter item" v-else>
					<image :src="item.user.headimg" class="headimg"></image>
					<view class="message message_left">{{item.content}}</view>
				</view>
			</block>
		</view>
		<view class="bottom hflex jbetween">
			<view class="bottom_left">
				<u-input v-model="message" shape="circle" placeholder="请输入信息..." border="none"></u-input>
			</view>
			<view class="bottom_btn hflex acenter jcenter" @click="send">立即回复</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				offer: {},
				message: '',
				pageList: [],
				type: '',
				id: '',
				tab: '',
				offer_id: '',
				userId: ''
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.tab = options.tab
			that.userId = uni.getStorageSync('id')
			that.getList()
		},
		methods: {
			getList() {
				$api.req({
					url: '/data/api.auth.Purchase/msg_get',
					data: {
						id: that.id,
						tab: that.tab
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageList = res.data
						setTimeout(() => {
							that.scrollToBottom()
						},300)
					}
				})
			},
			send() {
				if(that.message == "") {
					$api.info('不能发送空的内容')
				} else {
					$api.req({
						url: '/data/api.auth.Purchase/msg_send',
						method: 'POST',
						data: {
							id: that.id,
							tab: that.tab,
							content: that.message
						}
					}, function(res) {
						if(res.code == 1) {
							that.message = ""
							that.getList()
						} 
					})
				}
			},
			scrollToBottom() {
				uni.createSelectorQuery().select('#list').boundingClientRect(function(rect){
				  // 使页面滚动到底部
				  console.log("页面的高度",rect)
				  uni.pageScrollTo({
					scrollTop: rect.bottom
				  })
				}).exec()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		.top {
			width: 100%;
			// height: 300px;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 32rpx 0px rgba(0,0,0,0.04);
			border-radius: 0px 0px 28rpx 28rpx;
			box-sizing: border-box;
			padding: 24rpx 30rpx 0;
			.top_title {
				font-size: 28rpx;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				padding-bottom: 24rpx;
			}
			.top_item {
				width: 100%;
				height: 76rpx;
				background: #F4F4F4;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				.item_label {
					font-size: 24rpx;
					font-weight: 500;
					color: #777777;
					line-height: 34rpx;
					padding-right: 28rpx;
				}
				.text_red {
					font-size: 28rpx;
					font-weight: 400;
					color: #FF3636;
					line-height: 34rpx;
				}
			}
			.img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 16rpx;
				margin: 0 16rpx 24rpx 0;
			}
			.img:nth-child(3n+3) {
				margin: 0 0 24rpx;
			}
		}
		.list {
			width: 100%;
			margin-bottom: 186rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			.item {
				margin-top: 32rpx;
				.message {
					max-width: 480rpx;
					background: #FFFFFF;
					border-radius: 24rpx 4rpx 24rpx 24rpx;
					box-sizing: border-box;
					padding: 18rpx 20rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #444444;
					line-height: 36rpx;
					margin: 0 20rpx 0 0;
				}
				.message_left {
					margin: 0 0 0 20rpx;
					border-radius: 4rpx 24rpx 24rpx 24rpx;
				}
				.headimg {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
				}
			}
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			position: fixed;
			bottom: 0;
			z-index: 999;
			box-sizing: border-box;
			padding: 16rpx 30rpx 0;
			background: #FFFFFF;
			.bottom_left {
				width: 490rpx;
				height: 72rpx;
				.u-input {
					height: 100%;
					background: #F4F4F4;
					padding: 0 32rpx !important;
				}
			}
			.bottom_btn {
				width: 180rpx;
				height: 72rpx;
				background: #506DFF;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>