mini_rabot/pages/index/index.vue

<template>
	<view class="content">
		<navigation-custom :config="config" :scrollTop="scrollTopNav" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<scroll-view id="scrollview" class='chat-box' :style="{height: style.contentViewHeight + 'px'}" scroll-y="true"
		 :scroll-with-animation="true" :scroll-top="scrollTop">
			<view class="tips-box">
				{{nowTime}}
			</view>
			<view class="tips-box tips-title">
				您好，智能投顾很高兴为您服务！
			</view>

			<view class="talk-box">
				<view class="talk-head-box">
					<image src="../../static/logo.png" mode="" class="talk-head"></image>
				</view>
				<view class="talk-content">您好，智能顾投很高兴为您服务！</view>
			</view>

			<view v-for="chat in talkList" :key="chat.talkType"  class="m-item">
				<view class="talk-box talk-box-end" v-show="chat.content">
					<view class="talk-content">{{chat.content}}</view>
					<view class="talk-head-box">
						<image :src='userHeadUrl' mode="" class="talk-head"></image>
					</view>
				</view>
				<view class="talk-box">
					<view class="talk-head-box">
						<image :src='rabotHeadImg' mode="" class="talk-head"></image>
					</view>
					<view class="talk-content">{{chat.reply}}</view>
				</view>

			</view>

		</scroll-view>

		<view class="send-box">
			<input type="number" class="enter-box" v-model="inputInfo">
			<button type="primary" class="submit-message" @click="sendInputInfo()">发送</button>
		</view>
	</view>
</template>

<script>
	import navigationCustom from "../../components/struggler-navigationCustom/navigation-custom";
	var md5 = require("../../common/md5.js");
	export default {
		data() {
			return {
				title: 'RABOT',
				nowTime: '',
				nowHeight: '622px',
				inputInfo: '',
				rabotHeadImg: "../../static/logo.png",
				userHeadUrl: getApp().globalData.user_headUrl || '../../static/alienware.png',
				talkList: [],
				config: {
					title: "阿拉丁神灯", //title
					bgcolor: "#fff", //背景颜色
					fontcolor: "black", //文字颜色，默认白色
					type: 3, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: true, //是为开启下滑渐变
					share: true, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/iconfont-user.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字
				},
				scrollTopNav: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200 ,//滑动的高度限制，超过这个高度即背景全部显示
				scrollTop:0,
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
			}
		},
		components: {
			navigationCustom
		},
		onPageScroll(e) {
			this.scrollTopNav = e.scrollTop;
		},
		onLoad() {
			this.getEquipmentHeight();
			setTimeout(()=>{
		     this.getHistory();	
		    },100)
		},
		onShow() {
			this.getNowTime();
		},
		methods: {
			getNowTime() {
				let time = new Date();
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let i = time.getMinutes();
				i = i > 10 ? i : '0' + i;
				this.nowTime = y + "年" + m + "月" + d + "日" + "   " + h + ":" + i
			},
			getEquipmentHeight() {
				const height = uni.getSystemInfoSync().windowHeight;
				this.nowHeight = height + 'px';
				getApp().globalData.glbalHeight = this.nowHeight;
				this.style.pageHeight = height;
				this.style.contentViewHeight = height - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
			   
			},
			scrollToBottom() {
				let that = this;
				let query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
							that.style.mitemHeight = 0;
							res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度
							// 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout    主要就是添加了这红字
							that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight
							// setTimeout(() => {
							// 	if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度
							// 		that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
							// 	}
							// }, 100)
						})
					},
			getHistory() {
						let that = this;
						uni.request({
							url: getApp().globalData.shareUrl, //需要设置为全局
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								method: 'question_list',
								timestamp: getApp().globalData.globalTimestamp, //Date.now()
								uid: getApp().globalData.user_id || '1',
								sign: md5('question_list' + getApp().globalData.globalTimestamp),
								page: 1,
								pageSize: 10,
							},
							success: res => {
								that.talkList = (res.data.msg).reverse();
								that.userHeadUrl = getApp().globalData.user_headUrl;
								setTimeout(()=>{
									that.scrollToBottom()	
								},100)
								
							}
						});
					},
			customConduct() {
						uni.navigateTo({
							url: '../selfInfo/selfInfo'
						})
					},
					sendMsgRequest(msg) {
						let that = this;
						uni.request({
							url: getApp().globalData.shareUrl, //需要设置为全局
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								method: 'question',
								timestamp: getApp().globalData.globalTimestamp, //Date.now()
								uid: getApp().globalData.user_id,
								sign: md5('question' + getApp().globalData.globalTimestamp),
								content: msg
							},
							success: res => {
								this.inputInfo = '';
								that.getHistory()
							}
						});
					},
			sendInputInfo() {
						if (!this.inputInfo) {
							uni.showToast({
								title: '请输入股票代码',
								icon: 'none'
							});
						} else {
							this.sendMsgRequest(this.inputInfo)
						}
					}
			},
		}
</script>

<style>
	.content {
		text-align: center;
	}

	.chat-box {
		background: #f4f5f7;
		padding-top: 3%;
		padding-bottom: 100upx;
	}

	.tips-box {
		background: #D5D5DA;
		font-size: 28upx;
		color: #fff;
		border-radius: 30upx;
		width: 50%;
		margin: 0 auto;
		height: 50rpx;
		line-height: 50rpx
	}

	.tips-title {
		width: 70%;
		margin-top: 5%;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx
	}

	.send-box {
		width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 0;
		background: #F4F0ED;
		display: flex;
		align-items: center;
	}

	.talk-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 3%;
	}

	.talk-box-end {
		justify-content: flex-end;
	}

	.talk-head-box {
		width: 80rpx;
		height: 80rpx;
		border-radius: 30rpx;
		margin-left: 2%;
		margin-right: 2%;
	}

	.talk-head {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.talk-content {
		padding: 2%;
		background: #fff;
		/* 	height:50rpx;
		line-height: 50rpx; */
		font-size: 28rpx;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		text-align: left;
		max-width: 70%;
	}

	.enter-box {
		width: 78%;
		height: 70rpx;
		margin-left: 5px;
		background: #fff;
		border-radius: 1%;
		text-align: left;
	}

	.submit-message {
		width: 18%;
		height: 70rpx;
		font-size: 28rpx;
		line-height: 70rpx;
		color: #fff;
		background-color: #0A98D5 !important;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>