xingmingyi_applet/pages/user/other/other.vue

<template>
	<view class="home">
		<view class="putWarp dffd">
			<view class="putin bb dfsb">
				<text class="fontmid flex1">姓名</text>
				<input type="text" v-model="name" placeholder="填写姓名" />
			</view>
			<view class="putin bb dfsb">
				<text class="fontmid flex1">学校</text>
				<input type="text" v-model="school" placeholder="填写学校" />
			</view>
			<view class="putin bb dfsb">
				<text class="fontmid flex1">电话</text>
				<input type="number" v-model="phone" placeholder="填写联系方式" />
			</view>
			<view class="putin spec ">
				<text class="fontmid flex1">留言内容</text>
				<textarea class="lyCon" maxlength="-1" v-model="content" placeholder="填写留言内容" />
			</view>
		</view>
		<u-button color="#ED742F" @click="clickHandle" throttleTime="2000" class="custom-style" text="提交"></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			phone: '',
			school: '',
			content: ''
		};
	},
	onLoad(opt) {},
	onShow() {},
	methods: {
		clickHandle() {
			let phoneReg = /^(1[3-9])\d{9}$/;
			if (!phoneReg.test(this.phone)) {
				return this.$api.toast('手机号码不合法！');
			}
			if (!this.phone) {
				return this.$api.toast('请输入手机号');
			}
			if (!this.name) {
				return this.$api.toast('请输入姓名');
			}
			if (!this.school) {
				return this.$api.toast('请输入学校');
			}
			if (!this.content) {
				return this.$api.toast('请输入留言内容');
			}
			this.$api
				.request('user/setMessage', { 
					name: this.name,
					school: this.school,
					phone: this.phone,
					content: this.content, 
				})
				.then(data => {
					if (data.code == '200') {
						this.$api.toast(data.msg);
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							});
						}, 300);
					} else {
						this.$api.toast(data.msg);
					}
				}) 
		}
	}
};
</script>

<style lang="scss">
.home {
	padding: 20rpx 0rpx 0;

	//yanzhengma
	.u-hairline-border[data-v-3bf2dba7]:after {
		border: 0;
	}
	.tips {
		padding: 0;
		color: $promain;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;
	}
	.putWarp {
		background-color: #fff;
		padding: 0rpx 32rpx;
		align-items: center;
		.putin {
			width: 100%;
			padding: 30rpx 0;
			&:nth-last-of-type(1) {
				border-bottom: 0px;
			}
			input {
				flex: 1;
				font-size: 28rpx;
			}
			.promain {
				border-left: 1px solid #dbdbdb;
				padding-left: 30rpx;
			}
			input {
				text-align: right;
			}
		}
		.spec {
			.lyCon {
				width: 100%;
				margin-top: 30rpx;
				height: 201rpx;
				padding: 24rpx;
				font-size: 22rpx;
				background: #f4f4f4;
			}
		}
	}
	.custom-style {
		background-color: #ED742E;
		color: #fff;
		width: 690rpx;
		margin-top: 200rpx;
		border-radius: 11rpx;
	}
}
</style>