mobile_mj/pages/jiance/tousu.vue

<template>
	<view class="container">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">客户投诉</block>
		</cu-custom>

		<!-- <view class="cu-form-group margin-top">
			<view class="title">时间:</view>
			<my-date style="padding: 0rpx;" placeholder="请选择" fields="day"
				label=""></my-date>
		</view> -->
		<view class="cu-form-group">
			<view class="title"  >被调查部门:</view>
			<app-select placeholder="请选择调查部门" v-model="beiTouSuBuMen" :dict="buMenList" space ></app-select>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title" style="width: 100px;">投诉方式:</view>
			<app-select placeholder="请选择投诉方式" :dict="touSuFangShiList" space ></app-select>
		</view> -->
		 
		<uni-section title="投诉内容" type="line" padding>
			<textarea maxlength="-1" v-model="content"   placeholder="投诉内容"></textarea>
		</uni-section>
		 
		 <uni-section title="上传附件" type="line">
		 			<view class="example-body">
		 				<uni-file-picker limit="5"
							 
							 file-mediatype="all"
							@select="select" 
							@progress="progress" 
							@success="success" 
							@fail="fail" 
							@delete="deleteMe"
							:auto-upload="false"
							ref="uploadMe"
						></uni-file-picker>
		 			</view>
		</uni-section>
				 
		 
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import appSelect from '@/components/my-componets/appSelect.vue'
	import myDate from '@/components/my-componets/my-date.vue'

	export default {
		components: {
			myDate,
			appSelect,
			
		},
		data() {
			return {
				buMenList:[],
				beiTouSuBuMen:'',
				content:'',
				fuJianShangChuanArray:[],
				fuJianShangChuan:'',
				 
			}
		},
		onLoad() {
			let that = this
			this.$http.post("/ibps/business/v3/common/queryBuMenList", "466555896126767104").then(res => {
				if (res.data.state == 200 && res.data.data) {
					this.buMenList=[]
					for(let ind in res.data.data){
						this.buMenList.push({value:res.data.data[ind].id,text:res.data.data[ind].buMenMingChengs})
					}
				}
			});
		},
		methods: {
			// 获取上传状态
						select(file){
							//读取文件大小
							var fileSize=file.size;
							if(fileSize>1048576){
							    that.$message({
							        type:'error',
							        showClose:true,
							        duration:3000,
							        message:'文件大于1M!'
							    });
							    return false;
							}
							let that = this
							for(let e in file.tempFilePaths){
								console.log("000",file.tempFiles[e].file)
								var extName=file.tempFiles[e].file.name.substring(file.tempFiles[e].file.name.lastIndexOf('.'));
								const path = file.tempFilePaths[e];
								uni.uploadFile({
									url: 'https://www.szjyxt.com/ibps/platform/v3/file/upload/mobile', //仅为示例，非真实的接口地址
									filePath: path,
									name: 'file',
									formData: {
										'ext': '.jpg'
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data)
										that.fuJianShangChuanArray.push({fileid:file.tempFiles[e].file.uuid,uploadid:data.data.id})
									}
								});
							}
							return true;
							console.log('选择文件：')
						},
						// 删除
						deleteMe(file){
							for(let e in this.fuJianShangChuanArray){
								if(this.fuJianShangChuanArray[e].fileid==file.tempFile.uuid){
									this.fuJianShangChuanArray.splice(e,1)
								}
							}
							console.log('删除：',file)
							console.log('删除2：',this.fuJianShangChuanArray)
						},
						// 获取上传进度
						progress(e){
							console.log('上传进度：',e)
						},
						// 上传成功
						success(file){
							
							console.log('上传成功',file)
						},
						// 上传失败
						fail(e){
							console.log('上传失败：',e)
						},
			onSubmit(){
				let tmpArray = []
				for(let e in this.fuJianShangChuanArray){
					tmpArray.push(this.fuJianShangChuanArray[e].uploadid)
				}
				let para={
					beiTouSuBuMen:this.beiTouSuBuMen,
					content:this.content,
					fuJianShangChuan:tmpArray.join(",")
				}
				console.log(",,,",para.fuJianShangChuan)
				let that=this;
				this.$http.post("ibps/business/v3/sh/tousudengji/add",para).then(res =>{
					if (res.data.state == 200) {
						this.$tip.success("提交成功!")
						this.$Router.replace({name:'index'})
					}else if (res.data.state == 400) {
						this.$tip.success("用户未登录!")
						this.$Router.replace({name:'login'})
					}else{
						this.$tip.error("请求错误: "+res.data.message)
					}			
				}).catch((err) => {
					  let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
					  this.$tip.error(msg);
				}); 
			},
			onChange(e) {
				
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(8em + 25px);
	}
	
	.uni-file-pickerheight {
		    box-sizing: border-box;
		    overflow: hidden;
		}
		
		
		
		.uni-file-picker__container {
		    display: flex;
		    box-sizing: border-box;
		    flex-wrap: wrap;
		    margin: -5px;
		}
		
		.file-picker__box {
		    height: 0px;
		    width: 33.3%;
		}
		
		.file-picker__box {
		    position: relative;
		    width: 33.3%;
		    height: 0;
		    padding-top: 33.33%;
		    box-sizing: border-box;
		}
		
		
		.file-picker__box-content {
		    border-width: 1px;
		    border-style: solid;
		    border-color: rgb(238, 238, 238);
		    border-radius: 3px;
		}
		
		.is-add {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		
		.file-picker__box-content {
		    position: absolute;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    left: 0;
		    margin: 5px;
		    border: 1px #eee solid;
		    border-radius: 5px;
		    overflow: hidden;
		}
		
		.is-addheight {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		
		.icon-addheight {
		    width: 50px;
		    height: 5px;
		    background-color: #f1f1f1;
		    border-radius: 2px;
		}
		
		.rotateheight {
		    position: absolute;
		    -webkit-transform: rotate(90deg);
		    transform: rotate(90deg);
		}
		
		.example-body {
				padding:10px;
				padding-top: 0;
			}
			.custom-image-box {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		
			.text {
				font-size: 14px;
				color: #333;
			}
</style>