danling/pages/lawForm/public_welfare.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="举报类型" required label-position="top">
					<dataCheckbox mode="tag" selectedColor="#1721F4" v-model="value" :localdata="range"
						@change="changeRadio"></dataCheckbox>
				</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>
		<view class="u-padding-left-40 u-padding-right-40 u-margin-top-25" style="background: #fff;">
			<u-form :model="formLocation" label-width="130">
				<u-form-item label="现场位置" required>
					<u-input @click="selectLocation" :disabled="true" placeholder="请选择现场位置"
						v-model="formLocation.location" />
					<u-icon slot="right" name="map-fill" color="#1721F4" size="40"></u-icon>
				</u-form-item>
				<u-form-item label="照片" required label-position="top">
					<u-upload :form-data="formData" :before-upload="beforeUpload" ref="uUpload"
						:max-size="5 * 1024 * 1024" max-count="6" :action="action"></u-upload>
				</u-form-item>
			</u-form>
		</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 dataCheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue'
	import lyg_popup from '@/components/lyg-popup/lyg-popup.vue';
	export default {
		components: {
			dataCheckbox,
			lyg_popup
		},
		data() {
			return {
				formData: {},
				imgList: [],
				action: 'https://zhengda.oss-cn-chengdu.aliyuncs.com',
				problem_lenght: '0',
				problem: '',
				value: 0,
				range: [{
						"value": 0,
						"text": "生态环境资源保护"
					}, {
						"value": 1,
						"text": "食品药品安全"
					}, {
						"value": 2,
						"text": "国有土地使用权"
					},
					{
						"value": 3,
						"text": "国有财产保护"
					},
					{
						"value": 4,
						"text": "英烈保护"
					},
					{
						"value": 5,
						"text": "其他公益举报"
					}
				],
				customBtn: {
					backgroundColor: '#1721F4',
					color: '#fff'
				},
				customStyle: {
					width: '694rpx',
					height: '88rpx',
					backgroundColor: '#1721F4',
					color: '#fff',
					marginTop: '88rpx',
					marginBottom: '30rpx'
				},
				form: {
					name: '',
					phone: ''
				},
				formLocation: {
					location: ''
				},
				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'],
						}
					],
				},
				latitude: null,
				longitude: null,
				kind: '生态环境资源保护',
				nodeContent: ''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
				}
			})
			this.getServiceContent()
		},
		methods: {
			popupState(value) {
				if (!value) {
					uni.navigateBack()
					return false
				}
			},
			async getServiceContent() {
				let res = await this.$u.get('/home/xieyi', {
					id: 7
				})
				this.nodeContent = res.content
			},
			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
				}
			},
			getPhone(e) {
				uni.login({
					success: (res) => {
						util.getPhoneData(res.code, e.detail).then(data => {
							this.form.phone = data
						})
					}
				})
			},
			changeRadio(e) {
				this.kind = e.detail.data.text
			},
			input(e) {
				this.problem = e.detail.value
				this.problem_lenght = e.detail.value.length
			},
			selectLocation() {
				uni.chooseLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: (res) => {
						this.formLocation.location = res.address
					},
					fail: (err) => {
						uni.getSetting({
							success: (res) => {
								if (!res.authSetting['scope.userLocation']) {
									//打开提示框，提示前往设置页面
									uni.showModal({
										title: "温馨提示",
										content: "获取定位失败，请前往设置打开定位权限",
										showCancel: false,
										success: (data) => {
											if (data.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
					}
				})
			},
			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.problem == '') {
							uni.showToast({
								title: "请填写您的问题",
								icon: "none"
							})
							return false
						}
						if (this.formLocation.location == '') {
							uni.showToast({
								title: "请选择现场位置",
								icon: "none"
							})
							return false
						}
						if (this.imgList.length == 0) {
							uni.showToast({
								title: "请上传照片",
								icon: "none"
							})
							return false
						}
						this.submitLawForm()
					}
				});
			},
			async submitLawForm() {
				let res = await this.$u.post("/form-input/pai", {
					name: this.form.name,
					contact: this.form.phone,
					content: this.problem,
					kind: this.kind,
					address: this.formLocation.location,
					files: JSON.stringify(this.imgList)
				})
				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>