dangfei-weapp/pages/feedback/feedback.vue

<template>
	<view class="content">
		<form action="">
			<view class="textBox">
				<textarea v-model="content" class="textarea" placeholder-class="textareaHolder" placeholder="写下您的意见反馈，我们会用心聆听，做的更好！" maxlength="200" />
				<text class="numBox">{{changeLen}}/200</text>
			</view>
			<button type="primary" class="submitBtn" @click="toSubmit">提交反馈</button>
		</form>
	</view>
</template>

<script>
	
	import { feedBack } from "../../api/index.js"
	
	export default{
		data(){
			return{
				content:""
			}
		},
		methods:{
			toSubmit(){
				const that=this
				
				if(!this.content){
					uni.showToast({
						title:'未填写意见反馈',
						icon:'none'
					})
					return false;
				}
				
				feedBack({
					contents: that.content
				}).then(res=>{
					const {error_code,msg} = res
					uni.showToast({
						title:msg,
						icon: error_code ===200 ? 'success':'none',
						duration:2500
					})
					if(error_code===200){
						that.content=""
					}
				})
			}
		},
		computed:{
			changeLen:function(){
				return this.content.length;
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: $uni-bg-color-normal;
	}
	.textarea{
		display: block;
		width: calc(100% - 74rpx);
		height: 410rpx;
		border: 1px solid #DBDBDB;
		background: $uni-bg-color;
		font-size: 28rpx;
		padding: 20rpx 37rpx;
		margin-top: 20rpx;
		margin-bottom: 100rpx;
	}
	.textareaHolder{
		color: #B2B2B2;
	}
	.submitBtn{
		background: #2E8BFC !important;
		width: 650rpx;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 28rpx;
	}
	.textBox{
		position: relative;
	}
	.numBox{
		color: #999999;
		font-size: 26rpx;
		position: absolute;
		right: 27rpx;
		bottom: 31rpx;
	}
</style>