odd_job_applet/pages/my/feedback.vue

<template>
	<view>
		<view class="broKerForm">
			<view class="broKerForm-item">
				<view class="item-title">姓名</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请输入姓名" data-field="name" @input="bindInput"
						placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="broKerForm-item">
				<view class="item-title">联系方式</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请输入联系方式" data-field="mobile" @input="bindInput"
						placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="broKerForm-item-bg">
				<textarea maxlength="-1" @input="bindInput" data-field="content" placeholder="请输入您的意见和建议"></textarea>
			</view>
		</view>
		
		<view class="bottomEmpty"></view>
		
		<view class="bottomArea">
			<view class="bottomButton" @tap="subModal">确定</view>
		</view>
		
		<form v-if="false">
			<view class="cu-form-group margin-top">
				<view class="title">姓名</view>
				<input placeholder="请输入姓名" data-field="name" @input="bindInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">联系方式</view>
				<input placeholder="请输入联系方式" data-field="mobile" @input="bindInput"></input>
			</view>
			<view class="cu-form-group">
				<textarea maxlength="-1" @input="bindInput" data-field="content" placeholder="请输入您的意见和建议"></textarea>
			</view>
			<view class="cu-bar bg-white justify-end margin-top">
				<view class="action">
					<button class="cu-btn bg-green margin-left" @tap="subModal">确定</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	var _this;
	
	export default {
		data() {
			return {
				userinfo: {},
				info: {
					name: '',
					mobile: '',
					content: '',
					userid: 0,
				},
			}
		},
		onLoad: function(option) {
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/myinfo");
			_this.info.userid = _this.userinfo.id;
		},
		methods: {
			textareaAInput(e) {
				_this.info.content = e.detail.value;
			},
			bindInput: function(e) {
				_this.info[e.currentTarget.dataset.field] = e.detail.value;
			},
			subModal() {
				if (_this.info.name == '') {
					uni.showModal({
						title: '信息提示',
						content: '姓名不能为空',
						showCancel: false
					});
					return false;
				}
				if (_this.info.mobile == '') {
					uni.showModal({
						title: '信息提示',
						content: '联系方式不能为空',
						showCancel: false
					});
					return false;
				}
				if (_this.info.content == '') {
					uni.showModal({
						title: '信息提示',
						content: '反馈内容不能为空',
						showCancel: false
					});
					return false;
				}
				_this.$req.ajax({
					path: "my/feedback",
					data: _this.info,
				}).then((data) => {
					uni.navigateBack();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.cu-form-group .title {
		min-width: calc(4em + 30rpx);
	}
	
	.broKerForm {
		padding: 40rpx 70rpx;
		background-color: #FFFFFF;
		
		.broKerForm-item-bg {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F7F7F7;
		}
	
		.broKerForm-item {
			margin-bottom: 35rpx;
	
			.item-area {
				margin-top: 15rpx;
				padding: 0 36rpx;
				width: 100%;
				height: 100rpx;
				background: #F7F7F7;
				font-size: 28rpx;
				color: #979797;
	
				.item-area-input {
					height: 100rpx;
				}
			}
		}
	}
	
	.bottomEmpty {
		margin-top: 80rpx;
		height: 130rpx;
	}
	
	.bottomArea {
		position: fixed;
		bottom: 0;
		z-index: 100;
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		box-shadow: -10rpx -12rpx 12rpx 2rpx rgba(52, 85, 73, 0.16);
	
		.bottomButton {
			margin: 0 28rpx;
			width: 696rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #CA151C;
			font-size: 33rpx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 10rpx;
		}
	}
</style>