danling/pages/lawForm/lawForm.vue

<template>
	<view class="main">
		<view class="u-padding-left-40 u-padding-right-40" style="background: #fff;">
			<u-form :model="form" ref="uForm" label-width="130">
				<u-form-item label="姓名" prop="name" required>
					<u-input placeholder="请输入您的姓名" v-model="form.name" />
				</u-form-item>
				<u-form-item label="联系方式" prop="phone" required>
					<u-input type="number" maxlength="11" placeholder="请输入您的联系方式" v-model="form.phone" />
					<u-button open-type="getPhoneNumber" :custom-style="customBtn" @getphonenumber="getPhone"
						slot="right" type="success" hover-class="none" size="mini">获取手机号</u-button>
				</u-form-item>
				<u-form-item label="住所" prop="area" required>
					<u-input placeholder="请输入您的住所" v-model="form.area" />
				</u-form-item>
			</u-form>
		</view>
		<view class="textArea">
			<view class="bodystyle">
				<textarea placeholder="请填写您的问题" maxlength="500" @input="input"
					style="font-size: 28rpx;color: #666666;height: 400rpx;width: 100%;padding-left: 15rpx;" />
				<view
					style="height: 68rpx;width: 100%;color:#999999;padding: 20rpx 30rpx;font-size: 28rpx;text-align: right;">
					<text>{{problem_lenght}}</text>/500
				</view>
			</view>
		</view>
		<u-button hover-class="none" @click="submitForm" :custom-style="customStyle">提交</u-button>
		<lyg-popup @popupState="popupState" :nodeContent="nodeContent" title="使用须知"></lyg-popup>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import lyg_popup from '@/components/lyg-popup/lyg-popup.vue';
	export default {
		components: {
			lyg_popup
		},
		data() {
			return {
				customStyle: {
					width: '694rpx',
					height: '88rpx',
					backgroundColor: '#1721F4',
					color: '#fff',
					marginTop: '190rpx'
				},
				customBtn: {
					backgroundColor: '#1721F4',
					color: '#fff'
				},
				submitType: '',
				form: {
					name: '',
					phone: '',
					area: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入您的姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '请输入汉字',
						trigger: ['change', 'blur'],
					}],
					phone: [{
							required: true,
							min: 11,
							message: '请输入联系方式',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					area: [{
						required: true,
						message: '请输入住所',
						trigger: 'change',
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '请输入汉字',
						trigger: ['change', 'blur'],
					}]
				},
				problem_lenght: '0',
				problem: '',
				type: null,
				nodeContent:""
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(op) {
			this.type = op.type
			uni.setNavigationBarTitle({
				title: op.title
			})
			this.submitType = op.type
			this.getServiceContent()
		},
		methods: {
			popupState(value) {
				if (!value) {
					uni.navigateBack()
					return false
				}
			},
			async getServiceContent() {
				let res = await this.$u.get('/home/xieyi', {
					id: this.submitType == 1 ? 10 : 11
				})
				this.nodeContent = res.content
			},
			getPhone(e) {
				uni.login({
					success: (res) => {
						util.getPhoneData(res.code, e.detail).then(data => {
							this.form.phone = data
						})
					}
				})
			},
			input(e) {
				this.problem = e.detail.value
				this.problem_lenght = e.detail.value.length
			},
			submitForm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.problem == '') {
							uni.showToast({
								title: "请填写您的问题",
								icon: "none"
							})
							return false
						}
						this.submitLawForm()
					}
				});
			},
			async submitLawForm() {
				let res = await this.$u.post('/form-input/consult', {
					name: this.form.name,
					contact: this.form.phone,
					content: this.problem,
					type: this.type,
					area: this.form.area
				})
				uni.showModal({
					title: "温馨提示",
					content: "您的留言我们已经收悉，将尽快安排工作人员办理",
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.textArea {
		height: auto;
		width: 100%;
		// padding: 0 30rpx;
		// background-color: #FFFFFF;
		margin-top: 25rpx;

		.bodystyle {
			width: 100%;
			height: auto;
			padding: 35rpx 20rpx;
			word-break: break-all;
			word-wrap: break-word;
			background: #FFFFFF;
			border-radius: 10rpx;
		}
	}
</style>