| <template> | |
| 	<view> | |
| 		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80"> | |
| 		<view class="se-px-20 se-py-20 se-c-black se-fs-32 se-fw-6"> | |
| 			帮助与反馈 | |
| 		</view> | |
| 		<view class="se-pb-20 se-pl-20 se-m-20 se-bgc-white se-br-20"> | |
| 			<u-form-item prop="feedback" labelWidth="2"> | |
| 				<u--textarea :border="false" v-model="form.feedback" placeholder="请把您需要的帮助或者您发现的问题提交给我们,感谢您的参与(必填)" ></u--textarea> | |
| 			</u-form-item> | |
| 		</view> | |
| 		<view class="se-px-40 se-py-20 se-c-black se-fs-30 se-fw-6"> | |
| 			问题截图 | |
| 		</view> | |
| 		<view class="se-pb-20 se-pl-20 se-m-20 se-bgc-white se-br-20"> | |
| 			<u-form-item prop="proofFile" labelWidth="2"> | |
| 				<view class="se-flex se-flex-v-sa  se-mt-10"> | |
| 					<view class="se-w-p-100"> | |
| 						<u-upload :fileList="form.proofFile" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="10"></u-upload> | |
| 					</view> | |
| 				</view> | |
| 			</u-form-item> | |
| 		</view> | |
| 		<view class="se-px-40 se-py-20 se-c-black se-fs-30 se-fw-6"> | |
| 			联系方式 | |
| 		</view> | |
| 		<view class="se-p-20 se-m-20 se-bgc-white se-br-20"> | |
| 			<u-form-item label="联系姓名" prop="name" borderBottom> | |
| 				<u--input v-model="form.name" border="none" placeholder="请输入联系姓名"></u--input> | |
| 			</u-form-item> | |
| 			<u-form-item label="联系电话" prop="mobile"> | |
| 				<u--input v-model="form.mobile" type="number" border="none" placeholder="请输入联系电话"></u--input> | |
| 			</u-form-item> | |
| 		</view> | |
| 		<view class="se-px-20 se-pt-50"> | |
| 			<view class="se-px-20 se-pb-80 se-fs-20 se-flex"> | |
| 				<view @click="submit" | |
| 					class="se-mx-10 se-flex-1 se-br-40 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-28 se-c-white se-bgc-orange"> | |
| 					<text>确认</text> | |
| 				</view> | |
| 			</view> | |
| 		</view> | |
| 		</u--form> | |
| 	</view> | |
| </template> | |
| 
 | |
| <script> | |
| 	import { | |
| 		addSuggest | |
| 	} from "@/common/api.js" | |
| 	export default { | |
| 		data(){ | |
| 			return{ | |
| 				form:{ | |
| 					feedback:"", | |
| 					name:"", | |
| 					mobile:"", | |
| 					proofFile: [] | |
| 				}, | |
| 				rules:{ | |
| 					feedback: [ | |
| 						{ | |
| 							required: true, | |
| 							message: '请输入反馈详细信息', | |
| 							trigger: ['blur', 'change'] | |
| 						} | |
| 					], | |
| 					name: [ | |
| 						{ | |
| 							required: true, | |
| 							message: '请输入联系姓名', | |
| 							trigger: ['blur', 'change'] | |
| 						} | |
| 					], | |
| 					mobile:[ | |
| 						{ | |
| 							required: true, | |
| 							message: '请输入联系电话', | |
| 							trigger: ['blur', 'change'] | |
| 						} | |
| 					], | |
| 					proofFile: [ | |
| 						{ | |
| 							type:"array", | |
| 							validator: (rule, value, callback) => { | |
| 								console.info(value) | |
| 							  if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) { | |
| 								callback(new Error('照片不能为空')); | |
| 							  } else { | |
| 								callback(); | |
| 							  } | |
| 							},  | |
| 							trigger: 'blur'  | |
| 						} | |
| 					] | |
| 				} | |
| 			} | |
| 		}, | |
| 		methods:{ | |
| 			submit() { | |
| 				this.$refs.uForm.validate().then(res => { | |
| 					this.onaddSuggest() | |
| 				}).catch(errors => { | |
| 					console.info(errors) | |
| 				}) | |
| 			}, | |
| 			onaddSuggest(){ | |
| 				let that = this | |
| 				let params={ | |
| 					content: that.form.feedback, | |
| 					proofImg: that.form.proofFile.map(item => item.url).join(','), | |
| 					userName: that.form.name, | |
| 					userPhone: that.form.mobile | |
| 				} | |
| 				addSuggest(params).then(response=>{ | |
| 					uni.$u.toast("提交成功!") | |
| 					setTimeout(()=>{ | |
| 						uni.navigateBack(-1) | |
| 					},800) | |
| 				}).catch(error=>{ | |
| 					 | |
| 				}) | |
| 			}, | |
| 			deletePic(e) { | |
| 				this.form.proofFile.splice(e.index, 1) | |
| 			}, | |
| 			async afterRead(e) { | |
| 				let self = this | |
| 				e.file.forEach(file => { | |
| 					self.$Oss.ossUpload(file.url).then(url => { | |
| 						self.form.proofFile.push({ | |
| 							url | |
| 						}) | |
| 					}) | |
| 				}) | |
| 			} | |
| 		} | |
| 	} | |
| </script> | |
| 
 | |
| <style> | |
| 	page{ | |
| 		background-color: #f5f5f5; | |
| 	} | |
| </style> |