zhxf-app/pages/xunJian/planDetail/planDetail.vue

<template>
	<view>
		<form action="">
			<view style='height:30rpx'></view>
			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					上报名称：
				</view>
				<input type="text" v-model="reportName">
			</view>
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					巡检状态：
				</view>
				<radio-group name="gender" @change="radioChange">
					<label class="">
						<radio value="0" checked /><text>正常</text>
					</label>
					<label class="">
						<radio value="1" /><text>异常</text>
					</label>
					<label class="">
						<radio value="2" /><text>故障</text>
					</label>
					<label>
						<radio value="3" /><text>其他</text>
					</label>
				</radio-group>
			</view>
			<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">
				<view class="title">
					<text class="necessary">*</text>
					巡检描述：
				</view>
				<textarea maxlength="-1" @input="textareaAInput" placeholder="" v-model="msg"></textarea>
			</view>

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(addSubmit)">提 交 </button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				imgList: [],
				msg: '',
				id: '',
				img: '',
				imgUrl: '',
				reportName: '',
				radioOne: 0,
				zb_id: 0
			}
		},

		onLoad: function(option) {
			this.id = option.id;
			this.zb_id = option.zb_id
		},

		mounted() {
			// 创建附件上传
			// var _self = this;
			// var input = document.createElement('input'); //创建元素
			// input.type = 'file' //添加file类型
			// input.onchange = (event) => {
			// 	_self.upFile(input, event)
			// }
			// this.$refs.input.$el.appendChild(input)

		},
		methods: {
			radioChange(e) {
				console.log('type:' + e.detail.value);
				this.radioOne = e.detail.value;
			},

			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];
						
						const { tempFilePaths, tempFiles } = res
						
						
						// var tempFilePaths = res.tempFilePaths[0];
						
						alert(tempFilePaths)
						alert(tempFiles)
						
						// setTimeout(function(){
							
						// 	uni.uploadFile({
						// 		url: that.$BASE_URL + 'Inspection/setUpload',
						// 		filePath: tempFilePaths,
						// 		name: 'file',
						// 		// formData: {
						// 		// 	'user': 'test'
						// 		// },
						// 		success: (uploadFileRes) => {
						// 			console.log('uploadFileRes')
						// 			that.img = JSON.parse(uploadFileRes.data).img_url;
						// 			alert(1)
						// 			alert(uploadFileRes.data)
						// 			alert(that.img)
						// 		}
						// 	});
							
							
						// },2000)

						
					}
				})

			},

			// upFile(input, event) {
			// 	var _self = this;
			// 	uni.uploadFile({
			// 		url:this.$BASE_URL+'Inspection/setUpload',
			// 		files: [{
			// 			file: input.files[0],
			// 			uri: event.srcElement.value
			// 		}],
			// 		success: (uploadFileRes) => {
			// 			var data = JSON.parse(uploadFileRes.data)
			// 			this.img = data.img_url;
			// 			alert(this.img)
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 		}
			// 	});
			// },

			addSubmit() {



				if (!this.reportName.replace(/^\s*/g, '')) {
					uni.showToast({
						title: "请输入上报名称",
						icon: "none"
					});
					return
				}
				if (!this.img) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					});
					return
				}

				if (!this.msg.replace(/^\s*/g, '')) {
					uni.showToast({
						title: "请输入巡检描述",
						icon: "none"
					});
					return
				}

				this.powerSubmitRes({
					"zb_id": this.zb_id,
					"spot_id": this.id,
					"report_name": this.reportName,
					"spot_abnormal": this.radioOne,
					"img": this.img,
					"dwsb_remarks": this.msg,
				})
			},
			async powerSubmitRes(params = {}) {
				const res = await this.$myRequest({
					url: 'Inspection/setInspection',
					data: params
				})
				if (res.data.flag) {
					uni.showToast({
						title: "提交成功",
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/xunJian/planInnerList/planInnerList?id=' + this.zb_id,
						});
					}, 1000);
				}
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	.unload-box {
		width: calc(100% - 200rpx)
	}

	.textarea {
		width: calc(100% - 200rpx)
	}
</style>