nzhbsr/pages/index/kf.vue

<template>
	<view class="content">
		<view class="">
			<image src="../../static/img/kfheader.png" mode=""></image>
			<view class="kf-info">
				<view class="">
					Json
				</view>
				<view class="">
					在綫
				</view>
			</view>
		</view>
		<view class="" style="height: 40rpx;">
			
		</view>
		<view class="flex lt lt-left">
			<view class="lt-time">
				
			</view>
			<view class="lt-wrap">
				您好，請問有什麽可以幫您？
			</view>
		</view>
		<view class="flex lt" v-for="item in list" :class="{'lt-right': item.type== 2}">
			<view class="lt-time">
				{{item.time}}
			</view>
			<view class="lt-wrap">
				{{item.content}}
			</view>
		</view>
		<view class="" style="height:120rpx;">
			
		</view>
		<view class="foot">
			<input class="input-text" placeholder="請輸入信息内容" type="text" v-model="inputValue" focus />
			<view class="sub" @click="sub">发送</view>
		</view>
	</view>
</template>

<script>
	import { uptxt,getlineinfo } from '@/api/login.js'
	export default {
		data() {
			return {
				inputValue: '',
				list: [],
				subing: false
			}
		},
		onLoad() {
			this.getlineinfo()
		},
		onShow() {

		},
		onReachBottom() {
			this.getlineinfo()
		},
		onReady() {

		},
		methods: {
			sub() {
				let obj = this
				if(obj.subing) {
					return
				}
				if(obj.inputValue == '') {
					return obj.$api.msg('請輸入信息内容')
				}
				obj.subing = true
				uptxt({
					txt: obj.inputValue
				}).then(res => {
					console.log(res)
					obj.getlineinfo()
					obj.inputValue = ''
					obj.subing = false
				}).catch(err => {
					obj.subing = false
				})
			},
			getlineinfo() {
				getlineinfo().then(res => {
					console.log(res)
					this.list = res.data
					
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #fff;
	}

	.foot {
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		position: fixed;
		width: 100%;
		height: 100rpx;
		left: 0upx;
		bottom: 0;
		overflow: hidden;
		// background-color: red;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		.input-text {
			line-height: 80rpx;
			height: 80rpx;
			width: 500rpx;
			// width: ;
			padding-left: 20rpx;
			border-radius: 20rpx;
			border: 1px solid #f5f5f5;
			margin-right: 40rpx;
		}

		.sub {
			width: 160rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(to left, #eeb80d, #ffe35b);
			text-align: center;
			border-radius: 20rpx;
		}
	}
	.lt-wrap {
		width: 514rpx;
		font-size: 28rpx;
		color: #707A8A;
		background-color: #f5f5f5;
		border-radius: 15rpx;
		padding: 10rpx 20rpx;
		
	}
	.lt {
		margin-bottom: 20rpx;
		padding: 0 40rpx;
		flex-direction: column;
		.lt-time {
			font-size: 28rpx;
			color: #FCD535;
			margin-bottom: 10rpx;
		}
	}
	.lt-right {
		// align-content: flex-end;
		align-items: flex-end;
	}
	.lt-left {
		align-items: flex-start;
	}
</style>