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="false" :scroll-top="scrollTop" @scrolltoupper="lower()">
			<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/rabotHead.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" :style="{ 'padding-bottom' : isShowKeyBoard + 'px'}">
			<input type="text" class="enter-box" v-model="inputInfo" :adjust-position="true"
		    @confirm='sendInputInfo' />
			<!-- <button type="primary" class="submit-message" @click="sendInputInfo()">发送</button> -->
			<image src="/static/setIcon.png"  @click.stop='openModal()' ></image>
		</view>
		 <!-- <drag-button :isDock="true" :existTabBar="true"  @btnClick="goUserSelf" /> -->
		<uni-popup ref="popup" type="bottom">
		   <view class="uni-share">
		 		<view class="uni-share-content">
		 			<view  class="uni-share-content-box" @click.stop='goUserSelf' >
		 				<view class="uni-share-content-image">
		 					<image src="/static/icon/userSetIcon.png" class="image" />
		 				</view>
		 			<view class="uni-share-content-text">个人中心</view>
		 	      </view>
		 		 </view>
				 <view class="uni-share-btn" @click="cancelModal()">取消</view>
		 	  </view>
		 </uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	var md5 = require("../../common/md5.js");
	var page = 1;
	export default {
		data() {
			return {
				isShowSetModal:false,
				title: 'RABOT',
				nowTime: '',
				nowHeight: '622px',
				inputInfo: '',
				isShowKeyBoard:0,
				rabotHeadImg: "../../static/rabotHead.png",
				userHeadUrl: getApp().globalData.user_headUrl || '../../static/userDefault.png',
				talkList: [],
				scrollTopNav: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200 ,//滑动的高度限制，超过这个高度即背景全部显示
				scrollTop:0,
				scrollRequestEnable: true, 
				pageSize:10,
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
			}
		},
		components: {
			uniPopup
		},
		onPageScroll(e) {
			this.scrollTopNav = e.scrollTop;
		},
		onLoad() {
			this.userLogin();
			this.getEquipmentHeight();
		},
		onShow() {
			this.getNowTime();
		},
		methods: {
			userLogin(){
				uni.login({
					success: (res) => {
				        this.getCodeRabot(res)
					}
				});
			},
			getCodeRabot(res){
				let that = this;
				uni.request({
					url:getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'login',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						code: res.code,
						sign: md5('login' + getApp().globalData.globalTimestamp),
						// invited:'invited'
					},
					success: res => {
						// 通过openid发起会员登录
						 getApp().globalData.user_id = res.data.msg.id;
						 getApp().globalData.open_id = res.data.msg.openid;
						 getApp().globalData.isAuth = res.data.msg.isauth === '0';
						 getApp().globalData.user_name = res.data.msg.name;
						 getApp().globalData.user_headUrl = res.data.msg.headimg;
						 getApp().globalData.times = res.data.msg.times;
						 getApp().globalData.total_times = res.data.msg.total_times;
						 that.getHistory();	
					} 
				});
			},
			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) -7; //像素   因为给出的是像素高度 然后我们用的是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,
								sign: md5('question_list' + getApp().globalData.globalTimestamp),
								page: page || 1,
								pageSize: 10,
							},
							success: res => {
								that.userHeadUrl = getApp().globalData.user_headUrl;
								if(page === 1){
									that.scrollRequestEnable = true;
									that.talkList  = ((res.data.msg).reverse());
									console.log(1,that.talkList)
									setTimeout(()=>{
										that.scrollToBottom()	
									},100)
								}else if (page > 1 && res.data.msg.length === that.pageSize) {
										that.scrollRequestEnable = true;
										that.talkList.unshift(...((res.data.msg).reverse()));
								}else if (page > 1 && (res.data.msg.length > 0) && (res.data.msg.length < that.pageSize)){
										that.scrollRequestEnable = true;
										that.talkList.unshift(...((res.data.msg).reverse()));
								}else if (page > 1 && res.data.msg.length == 0){
									    that.scrollRequestEnable = false;
								}
							}
						});
					},
			goUserSelf() {
				        this.$refs.popup.close()
						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 {
							page = 1;
							this.sendMsgRequest(this.inputInfo)
						}
					},
			// 滚动至底部触发的事件
			lower() {
				if (this.scrollRequestEnable) {
					// 允许滚动时，触底page加一，重新请求数据
					page++;
					this.getHistory();
				} else {
					// 不允许滚动时，只显示"到底了"提示
					// this.showBottem = true
					console.log('noData')
				}
			},		
			getInputFocus(e){
				//this.isShowKeyBoard = e.detail.height
			},
			getInputBlur(){
				//this.isShowKeyBoard = 0
			},
			openModal(){
			        // 需要在 popup 组件，指定 ref 为 popup
			         this.$refs.popup.open();
			      },
			cancelModal(){
				          // 需要在 popup 组件，指定 ref 为 popup
				     this.$refs.popup.close();
			  }
			},
		}
</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;
		padding: 2upx;
	}

	.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: 85%;
		height: 70rpx;
		background: #fff;
		border-radius: 1%;
		text-align: left;
		margin: 8px
	}
    .send-box image {
		width: 60rpx;
		height: 60rpx;
	}
	.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;
	}
	
	.uniFab{
		width:98px;
		height:36px;
		background:rgba(231,247,236,1);
		box-shadow:-6px 5px 74px 0px rgba(60,188,99,0.08);
		border-radius:100px 0px 0px 100px;
		right: 0upx;
		position: fixed;
		z-index: 9999;
		top: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.uniFab text{
		width:64px;
		font-size:16px;
		font-family:PingFangSC;
		font-weight:600;
		color:rgba(60,188,99,1);
		text-shadow:0px 1px 2px rgba(12,39,20,0.2);
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		/* justify-content: center */
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}
</style>