xfapp/pages/repair/repairDetail/repairDetail.vue

<template>
	<view>
		<form action="">
			<view style='height:30rpx'></view>
			<view class="form-item">
				<view class="title">
					报修地址：
				</view>
				<view>{{this.getData.address}}</view>
				<!-- <input type="text" v-model="this.getData.address"> -->
			</view>
			<view class="form-item margin-top">
				<view class="title">
					故障状态：
				</view>
				<view>{{this.getData.type_name}}</view>
			</view>
			<view class="form-item margin-top">
				<view class="title">
					
					处理状态：
				</view>
				<view style="color:#FDCA60" v-if="cl_type==1">未处理</view>
				<view style="color:#59D1EA" v-if="cl_type==2">未审核</view>
				<view style="color:#F77070" v-if="cl_type==3">未通过</view>
				<view style="color:#72D06A" v-if="cl_type==4" >已完成</view>
				<view style="color:#F7895E" v-if="cl_type==5">超时完成</view>
			</view>
			<view v-if="cl_type!=1&&cl_type!=2" >
				<view class="form-item margin-top flex justify-between" @click="detailClick()">
					<view style="position:relative;display:block;color:#007AFF">
						处理记录:
					</view>
					<text class="icon iconfont margin-right-xs margin-left-lg">{{showDetail?'&#xe63d;':'&#xe629;'}}</text>
				</view>
				<block v-for="(item,index) in getData2" :key="index" v-if="showDetail" >
					<view class="form-item" style="color:#aaa">
						<view class="title">图片：</view>
						<img :src="imgFront+item.picture_path" alt="" style="max-width:50%">
					</view>
					<view class="form-item" style="color:#aaa">
						<view class="title">处理时间：</view>
						<view>{{item.cl_time}}</view>
					</view>
					<view class="form-item" style="color:#aaa">
						<view class="title">处理结果：</view>
						<view>{{item.jg_remarks}}</view>
					</view>

				</block>
				
			</view>
			<view v-if="cl_type==1||cl_type==3">
				
				<view class="form-item margin-top">
					<view class="title"> 
						<text class="necessary">*</text>
						上传图片：
					</view>
					<view class="unload-box" @tap="goCamera()">
						<image v-if="this.imgUrl" mode="aspectFit" style="width:70rpx;height:70rpx" :src="this.imgUrl"
							:data-src="this.imgUrl"></image>
						<view v-else
							style="background:rgb(223 215 215 / 63%);font-size:22rpx;line-height:40rpx;margin-top:20rpx;padding:0 20px;display:inline-block;border-radius:10rpx">
							请上传 + </view>
					</view>
					
				</view>
				<view class="form-item margin-top" style="padding-bottom: 200rpx;">
					<view class="title">
						<text class="necessary">*</text>
						报修描述：
					</view>
					<textarea maxlength="-1" @input="textareaAInput" placeholder="" v-model="msg" width="250"></textarea>
				</view>
				
				<view class="btn-area submitBottomBtn padding-lr-sm">
					<button class="bg-blue round  margin-top" @click="addSubmit">提 交 </button>
				</view>
				
			</view>
			
		</form>
		
		<helang-compress ref="helangCompress"></helang-compress>
		
	</view>
</template>

<script>
	import helangCompress from '../../../components/helang-compress/helang-compress';
	export default {
		components: {
			helangCompress
		},
		data() {
			return {
				getData:{},
				getData2:[],
				imgFront:'',
				
				msg: '',
				id: '',
				reportName: '',
				radioOne: 0,
				zb_id: 0,
				cl_type:'',
				
				imgUrl: '',
				// reportName: '',
				// radioOne: 0,
				// zb_id: 0,
					
				params: {
					maxSize: 800,
					fileType: 'png',
					quality: 0.85,
					minSize: 640
				},
				
				showDetail:true,
			}
		},



		
		onLoad: function(option) {
			if(option.cl_type==1||option.cl_type==3){
				this.showDetail=false
			}
			
			this.imgFront=this.$websiteUrl
			this.id = option.id;
			this.zb_id = option.zb_id,
			this.cl_type=option.cl_type
			this.getRepairDetail({'company_code':uni.getStorageSync('selectedCode'),"id":option.id})
			this.getRepairDetail2({'company_code':uni.getStorageSync('selectedCode'),"event_processing_id":option.id})
		},

		mounted() {
	

		},
		methods: {
			
			detailClick(){
				this.showDetail=!this.showDetail
				// alert(this.showDetail)	
			},
			radioChange(e) {
				console.log('type:' + e.detail.value);
				this.radioOne = e.detail.value;
			},
			
			//回显请求
			async getRepairDetail(params = {}) {
				const res = await this.$myRequest({
					url: 'Repair/getFormData',
					data:params,
					showLoading: true
				})
				this.getData=res.data.data[0];
			
				console.log(this.getData)
			},
			//回显请求 记录回显
			async getRepairDetail2(params = {}) {
				const res = await this.$myRequest({
					url: 'Repair/getRecordDetails',
					data:params,
					showLoading: true
				})
				this.getData2=res.data.data;
			console.log('this.getData2')
				console.log(this.getData2)
			},
			
			
			goCamera() {
				const that = this;
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res);
						that.imgUrl = res.tempFilePaths[0];
						var tempFilePaths = res.tempFilePaths[0];
			
						that.$refs.helangCompress.compress({
							src: tempFilePaths,
							maxSize: that.params.maxSize,
							fileType: that.params.fileType,
							quality: that.params.quality,
							minSize: that.params.minSize
						}).then((res) => {
							uni.hideLoading();
							// uni.showToast({
							// 	title: "压缩成功",
							// 	icon: "success"
							// })							
							tempFilePaths = [res][0];
							
							uni.uploadFile({
								url: that.$BASE_URL + 'Inspection/setUpload',
								filePath: tempFilePaths,
								name: 'file',
								success: (uploadFileRes) => {
									
									uni.showToast({
										title: "上传成功",
										icon: "success"
									})	
									that.img = JSON.parse(uploadFileRes.data).img_url;
								}
							});
						}).catch((err) => {
							uni.hideLoading();
							uni.showToast({
								title: "压缩失败",
								icon: "none"
							})
						})
					}
				})
			
			},
			
			
			

			addSubmit() {
				if (!this.img) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					});
					return
				}
				if (!this.msg) {
					uni.showToast({
						title: "请输入报修描述",
						icon: "none"
					});
					return
				}
				
				this.powerSubmitRes({
					"id": this.id,
					"img": this.img,
					"remarks": this.msg,
				})
			},
			async powerSubmitRes(params = {}) {
				const res = await this.$myRequest({
					url: 'Repair/setRepair',
					data: params
				})
				if (res.data.flag) {
					uni.showToast({
						title: "提交成功",
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/repair/repair',
						});
					}, 1000);
				}
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
		}
	}
</script>
<style scoped>
	.form-item .title{
		width:180rpx!important
	}
</style>