danling/pages/lawForm/uniteForm.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="type!=5?'idCard':''" required v-if="type!=5">
					<u-input placeholder="请输入您的身份证号" type="number" maxlength="18" v-model="form.idCard" />
				</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="aera" required>
					<u-input placeholder="请输入您的联系地址" v-model="form.aera" />
				</u-form-item>
			</u-form>
		</view>
		<view class="u-padding-left-40 u-padding-right-40 u-margin-top-20" style="background: #fff;">
			<u-form label-width="130">
				<u-form-item label="附件" prop="name" label-position="top">
					<u-upload ref="uUpload" :form-data="formData" :before-upload="beforeUpload"
						:max-size="5 * 1024 * 1024" max-count="6" :action="action"></u-upload>
				</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: 250rpx;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 {
				problem_lenght: '0',
				problem: '',
				customStyle: {
					width: '694rpx',
					height: '88rpx',
					backgroundColor: '#1721F4',
					color: '#fff',
					marginTop: '88rpx',
					marginBottom: '30rpx'
				},
				form: {
					name: '',
					aera: '',
					idCard: '',
					phone: ''
				},
				formData: {},
				customBtn: {
					backgroundColor: '#1721F4',
					color: '#fff'
				},
				rules: {
					name: [{
						required: true,
						message: '请输入您的姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '请输入汉字',
						trigger: ['change', 'blur'],
					}],
					idCard: [{
						required: true,
						min: 18,
						message: '请输入身份证号',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(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'],
						}
					],
					aera: [{
						required: true,
						message: '请输入住所',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '请输入汉字',
						trigger: ['change', 'blur'],
					}]
				},
				type: null,
				action: 'https://zhengda.oss-cn-chengdu.aliyuncs.com',
				imgList: [],
				nodeContent: ''
			}
		},
		onReady() {
			if (this.type == 5) {
				console.log("hahha")
				delete this.rules['idCard']
			}
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(op) {
			this.type = op.type
			if (op.title !== undefined) {
				uni.setNavigationBarTitle({
					title: op.title
				})
			}
			this.getServiceContent(op.type)
		},
		methods: {
			popupState(value) {
				if (!value) {
					uni.navigateBack()
					return false
				}
			},
			async getServiceContent(type) {
				let res = await this.$u.get('/home/xieyi', {
					id: type
				})
				this.nodeContent = res.content
			},
			getPhone(e) {
				uni.login({
					success: (res) => {
						util.getPhoneData(res.code, e.detail).then(data => {
							this.form.phone = data
						})
					}
				})
			},
			async beforeUpload(index, list) {
				let data = await this.$u.get('/upload-config/config')
				this.formData = {
					'key': 'danling/' + list[index].url.split('/')[3],
					'policy': data.policy,
					'OSSAccessKeyId': data.OSSAccessKeyId,
					'signature': data.signature,
					'success_action_status': '200',
					'domain': data.domain
				}
			},
			input(e) {
				this.problem = e.detail.value
				this.problem_lenght = e.detail.value.length
			},
			submitForm() {
				this.imgList = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				}).map(item => {
					return item.urlImg
				})
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// if (this.imgList.length == 0) {
						// 	uni.showToast({
						// 		title: "请先上传附件",
						// 		icon: "none"
						// 	})
						// 	return false
						// }
						if (this.problem == '') {
							uni.showToast({
								title: "请填写您的问题",
								icon: "none"
							})
							return false
						}
						this.getFormUnite()
					}
				});
			},
			async getFormUnite() {
				let res = await this.$u.post("/form-input/apply", {
					name: this.form.name,
					idcard: this.form.idCard,
					contact: this.form.phone,
					address: this.form.aera,
					type: this.type,
					files: JSON.stringify(this.imgList),
					info: this.problem
				})
				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>