JP-ChargeTeam51/pages/user/message.vue

<template>
  <view>
		<u-navbar title="意见反馈"></u-navbar>	  
		<view class="message">
			<view class="message-form">
				<u-form :model="subForm" ref="uForm" label-width ="100">
					<u-form-item label-width="0">
							<u-input v-model="subForm.content" type="textarea"  placeholder="请描述您的意见" height="200"/>
					</u-form-item>
					<u-form-item label-width="0">
						<view class="upload">
							<u-upload  max-count="3" name="photoFile"
							ref="uUpload"
							 :form-data="formData" :header="header" :action="action"
							  :file-list="listPic" ></u-upload>
						</view>
					</u-form-item>
					<u-form-item >
						<u-input v-model="subForm.telephone" placeholder="请留下联系方式，方便我们与您取得联系（必填）" />
					</u-form-item>
				</u-form>
			</view>
		</view>
		<u-button class="login-btn" type="success" shape="circle" @click="submit">提交</u-button>
  </view>
</template>

<script>
	import * as API from '@/apis/user.js'
	import * as WxJsApi from '@/utils/wxJsApi'
	
	export default {
		data() {
			return {
				isReady:false,
				imgBase64: '',
				listPic: [],
				action:"",
				formData:{},
				header:{
					
				},
				subForm: {
					content: '',
					imgUrl: '',
					telephone: ''
				}
			}
		},onLoad() {
			this.action=process.car.BASE_URL+"uploadPicture"
			
			this.formData.subFolder="/team51/message"
			//接口应该免登陆
			var token=this.carhelp.getToken()
			
			this.header={
		
				'Authorization':token
			}
			//获取微信配置
			WxJsApi.getWxConfig(['getLocation','addEventListener']).then((res)=>{
			
				this.isReady=true;
				console.log(res)
			 
			}).catch(error => {
					console.log(res)
			})
		},
		methods: {
			 
			//微信选择图片
			chooseImage() {
				WxJsApi.chooseImage().then(res => {
					var localData = res.localData;
			
					if (localData.indexOf('data:image') != 0) {
						//判断是否有这样的头部
						localData = 'data:image/jpeg;base64,' + localData
					}
					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
					this.imgBase64 = localData;
					this.uploadpic();
				}).catch(error => {
					mui.toast(error);
				})
			},
			//上传图片
			uploadpic() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				WxJsApi.uploadPic(this.imgBase64).then(response => {
					this.isLoading = false;
			
					this.listPic.push(response);
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//表单检测
			checkFrom() {
				if (!this.subForm.content) {
				
					uni.showToast({
						title: "请输入内容"
					})
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit() {
				let files = [];
								// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
								files = this.$refs.uUpload.lists.filter(val => {
									return val.progress == 100;
								})
								// 如果您不需要进行太多的处理，直接如下即可
								// files = this.$refs.uUpload.lists;
				
				console.log(files);
					
				var imgUrl=files.map(item=>{
					return item.response.data;
				})
				console.log(imgUrl);
				this.subForm.imgUrl = imgUrl.join(',');
				
			
				if (this.checkFrom()) {
					this.subForm.picUrl = this.listPic.join(',');
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					
					API.feedback(this.subForm).then(response => {
						
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: '提交成功',
							showCancel:false,
							success: res=>{
								if (res.confirm) {
									uni.navigateBack({
										
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
			
					}).catch(error => {
					
						uni.showToast({
							title: error
						})
					})
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.upload{
		width: 100%;
	}

	.message-form{
		padding:0 10px;
		margin-bottom: 10px;
		background-color: #fff;
	}

	.login-btn {
		margin: 28px ;
		background-color:#00B962!important;
		border-color: #00B962!important;
		color:#fff!important;
	}
</style>