uniapp小程序开发
u--textarea 自定义背景色。

<template>
	<view class="flex-col page">
		<view class="flex-col group_5">
			<view class="flex-col group_6">
				<view class="flex-row group_7">
					<image src="http://images.wanjunshijie.com/product/cook/assets/102f3294ad7ff40dbf35689da8e485b7.png"
						class="image_6" />
					<text class="text_6">请描述你遇到的问题</text>
				</view>
				<view class="flex-col section_1">
					<u--textarea maxlength="200" :customStyle="{backgroundColor: '#F4F1F4'}" placeholder="请输入你的问题"
						v-model="title" count></u--textarea>
				</view>
			</view>
			<view class="flex-col section_2">
				<view class="flex-col section_3">
					<view class="flex-row group_8">
						<image
							src="http://images.wanjunshijie.com/product/cook/assets/102f3294ad7ff40dbf35689da8e485b7.png"
							class="image_6" />
						<view class="right-group">
							<text class="text_9">联系人</text>
							<input type="text" v-model="realname" placeholder="请输入联系人" />
						</view>
					</view>
					<view class="flex-row group_9">
						<image
							src="http://images.wanjunshijie.com/product/cook/assets/102f3294ad7ff40dbf35689da8e485b7.png"
							class="image_6" />
						<view class="right-group">
							<text class="text_9">联系方式</text>
							<input type="text" v-model="phone" placeholder="请输入联系方式" />
						</view>
					</view>
				</view>
				<view @click="add" class="flex-col items-center button">
					<text>提交反馈</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		doappeal
	} from '../../config/api.js'
	export default {
		data() {
			return {
				title: '',
				realname: '',
				phone: '',
			};
		},
		methods: {
			add() {
				var that = this;
				if (!that.title) {
					uni.showToast({
						title: '请输入你的问题'
					})
					return
				}
				if (!that.realname) {
					uni.showToast({
						title: '请输入真实姓名'
					})
					return
				}
				if (!that.phone) {
					uni.showToast({
						title: '请输入联系方式'
					})
					return
				}
				doappeal({
					title: that.title,
					realname: that.realname,
					phone: that.phone,
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							title: '提示',
							message: "提交成功",
							complete() {
								uni.navigateBack({})
							}
						})
					}
				}).catch(err => {

				})
			},

		}

	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #F2F2F2;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		position: absolute;

		.group_5 {
			background-color: rgb(255, 255, 255);

			.group_6 {
				padding: 0 33rpx 16rpx;

				.group_7 {
					padding: 32rpx 0 34rpx;
					color: rgb(46, 46, 46);
					font-size: 24rpx;
					line-height: 24rpx;
					white-space: nowrap;

					.text_6 {
						margin-left: 12rpx;
					}
				}

				.section_1 {
					padding: 15rpx;
					color: rgb(185, 185, 185);
					font-size: 24rpx;
					background: #F4F1F4;
					line-height: 23rpx;
					white-space: nowrap;
					// background-color: rgb(242, 242, 242);

					.text_8 {
						margin-top: 183rpx;
						align-self: flex-end;
					}
				}
			}

			.section_2 {
				padding: 16rpx 0 26rpx;
				background-color: rgb(242, 242, 242);

				.section_3 {
					padding-left: 23rpx;
					padding-right: 22rpx;
					background-color: rgb(255, 255, 255);

					.group_8 {
						border-bottom: solid 2rpx rgb(242, 242, 242);
						height: 100rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: nowrap;
						flex-direction: row;
					}

					.group_9 {
						height: 100rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: nowrap;
						flex-direction: row;
					}

					.right-group {
						margin-left: 12rpx;
						line-height: 24rpx;
						white-space: nowrap;
						height: 26rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: nowrap;
						flex-direction: row;

						.text_9 {
							color: rgb(46, 46, 46);
							font-size: 26rpx;
							width: 120rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							flex-wrap: nowrap;
							flex-direction: row;
							line-height: 24rpx;
						}

						.text_11 {
							color: rgb(46, 46, 46);
							font-size: 24rpx;
							line-height: 24rpx;
						}

						.text_12 {
							margin-left: 33rpx;
						}

						.text_14 {
							margin-left: 17rpx;
						}

						input {
							font-size: 24rpx;
						}
					}
				}

				.button {
					color: rgb(255, 255, 255);
					height: 80rpx;
					font-size: 30rpx;
					line-height: 29rpx;
					position: fixed;
					bottom: 30rpx;
					left: 30rpx;
					width: 690rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					flex-direction: row;
					white-space: nowrap;
					background-color: rgb(236, 67, 58);
					border-radius: 15rpx;
				}
			}

			.image_6 {
				width: 27rpx;
				height: 25rpx;
			}
		}

	}
</style>