mini_rabot/pages/index/index.vue

<template>
		<view class="content">
			<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight"/>
			<view class='chat-box' :style="{ 'min-height': nowHeight}">
				
				<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">
					<view  class="talk-box" v-show="chat.talkType === 0">
						<view  class="talk-head-box">
							<image :src="chat.headUrl" mode="" class="talk-head"></image>
						</view>
						<view class="talk-content">{{chat.content}}</view>
					</view>
					<view  class="talk-box talk-box-end" v-show="chat.talkType === 1">
						<view class="talk-content">{{chat.content}}</view>
						<view  class="talk-head-box">
							<image :src="chat.headUrl" mode="" class="talk-head"></image>
						</view>
					</view>
				</view>
				
			</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"
	export default {
		data() {
			return {
				title: 'RABOT',
				nowTime:'',
				nowHeight:'622px',
				inputInfo:'',
				talkList:[
					{
						talkType:1 ,// 代表用户
						headUrl:'../../static/alienware.png',
						content:'0000152',
					},
					{
						talkType:0 ,// 代表机器人
						headUrl:'../../static/logo.png',
						content:'参与投股100人，62人建议买入，30人建议卖出，8人建议持有不操作',
					},
				],
				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右边的文字
				         },
				      scrollTop:0 ,// 当linear为true的时候需要通过onpagescroll传递参数
				      scrollMaxHeight:200 //滑动的高度限制，超过这个高度即背景全部显示
			}
		},
		components:{
			navigationCustom
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
		  this.getEquipmentHeight();
		},
		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() {
				let height = uni.getSystemInfoSync().windowHeight;
				this.nowHeight = height  + 'px';
				getApp().globalData.glbalHeight = this.nowHeight;
			},
			customConduct(){
					uni.navigateTo({
						url:'../selfInfo/selfInfo'
					})
				},
			sendInputInfo(){
					if(!this.inputInfo){
						uni.showToast({
							title: '请输入股票代码',
							icon: 'none'
						});
					}else {
						let obj = {
								talkType:1 ,// 代表用户
								headUrl:'../../static/alienware.png',
								content:this.inputInfo,
							}
						this.talkList.push(obj);
						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%;
	}
	.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>