nzhbsr/pages/index/kf.vue

<template>
	<view class="content">
		<view class="flex kf-wrap">
			<image src="../../static/img/kfheader.png" mode=""></image>
			<view class="kf-info">
				<view class="kf-name">Json</view>
				<view class="">{{ $t('kf.zx') }}</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="flex lt lt-left">
			<view class="lt-time"></view>
			<view class="lt-wrap">{{ $t('kf.nh') }}</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="$t('kf.qsrxxnr')" type="text" v-model="inputValue" />
			<view class="sub" @click="sub">{{ $t('kf.fs') }}</view>
		</view>
	</view>
</template>

<script>
import { uptxt, getlineinfo } from '@/api/login.js';
export default {
	data() {
		return {
			inputValue: '',
			list: [],
			subing: false
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({ title: this.$t('kf.kf') });
		this.getlineinfo();
	},
	onShow() {},
	onReachBottom() {
		this.getlineinfo();
	},
	onReady() {},
	methods: {
		sub() {
			let obj = this;
			if (obj.subing) {
				return;
			}
			if (obj.inputValue == '') {
				return obj.$api.msg(this.$t('qsrxxnr'));
			}
			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;
}
.kf-wrap {
	// border-bottom: 1px solid;
	background-color: #fff;
	position: fixed;
	top: 44px;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	height: 180rpx;
	width: 100%;
	padding: 20rpx 40rpx;
	justify-content: flex-start;
	align-items: center;
	image {
		width: 140rpx;
		height: 140rpx;
	}
	.kf-info {
		color: #eeb80d;
		font-size: 28rpx;
		padding-left: 10rpx;
		.kf-name {
			font-size: 40rpx;
			color: #707a8a;
			margin-bottom: 10rpx;
		}
	}
}
</style>