weapp-online/pages/message/message.vue

<template>
	<view class="msg">
		<view class="text">
			<textarea placeholder="你想留下来点什么呢~" v-model="content" maxlength="200" placeholder-style="color:#999;font-size:28rpx;" @input="textInp" />
			<text>{{ remnant }}/200</text>
		</view>
		<view class="msg_btn" @click="addMsg">发表留言</view>
	</view>
</template>

<script>
import { putMsg } from '../../api/msg.js';
export default {
	data() {
		return {
			remnant: 1, //字数初始值
			content: '', //留言内容
			timer: null //toast定时器
		};
	},
	beforeDestroy() {
		clearInterval(this.timer);
		this.timer = null;
	},
	methods: {
		/*
		 * 字数递减
		 */
		textInp() {
			var txtVal = this.content.length;
			if (txtVal <= 200) {
				this.remnant = 0 + txtVal;
			}
			if (txtVal == 200) {
				uni.showToast({
					title: '文字超出限制',
					icon: 'none'
				});
			}
		},
		/*
		 * 发表留言
		 * @params:content  留言的内容
		 */
		addMsg() {
			if (!this.content) {
				uni.showModal({
					content: '留言内容不能为空',
					showCancel: false
				});
				return false;
			}
			putMsg({
				content: this.content
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '发表留言成功',
						icon: 'success',
						duration: 2000,
						mask: true,
						success: res => {
							this.timer = setTimeout(res => {
								uni.hideToast();
								uni.redirectTo({
									url: '../msg_board/msg_board?tabType=' + 1
								});
							}, 2000);
						}
					});
				} else {
					uni.showModal({
						content: res.message || '发表留言失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>
<style>
page {
	width: 100%;
	height: 100%;
	background-color: #fff;
}
</style>
<style lang="scss">
.msg {
	width: 690rpx;
	margin: 0 auto;
	.text {
		position: relative;
		margin: 20rpx 0 180rpx;
		margin-top: 20rpx;
		margin-bottom: 27vh;
		textarea {
			width: 690rpx;
			padding: 30rpx;
			height: 520rpx;
			line-height: 1.5;
			box-sizing: border-box;
			background-color: #f8f8f8;
			border-radius: 24rpx;
		}
		text {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			font-size: 28rpx;
			color: #999;
		}
		textarea {
			font-size: 28rpx;
		}
	}
	.msg_btn {
		width: 460rpx;
		margin: 0 auto;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(93deg, #f97c55 0%, #f44545 100%);
		opacity: 1;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #fff;
	}
}
</style>