shell/pages/index/correction.vue

<template>
	<view class="content">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'纠错'"></homenav>
		<view class="box">
			<view class="line">
				<view class="lineTitle">纠错类型</view>
				<view class="lineCont" v-if="optdata.type==1">VIN解析纠错</view>
				<view class="lineCont" v-if="optdata.type==2">匹配关系纠错</view>
			</view>
			<view class="line" v-if="optdata.type==1">
				<view class="lineTitle">VIN</view>
				<view class="lineCont">{{jcData.vin}}</view>
			</view>
			<view class="line">
				<view class="lineTitle">车型</view>
				<view class="lineCont">{{jcData.value}}</view>
			</view>
			<view class="line">
				<view class="lineTitle">错误说明</view>
				<view class="lineCont">
					<textarea v-model="comment" class="lineConttextarea" placeholder="请输入" name="" id=""></textarea>
				</view>
			</view>
			<view class="line" style="border: none;">
				<view class="lineTitle">上传图片</view>
				<view class="lineCont lineImgBox">
					<view class="imgLine" v-for="(item,index) in imgArr" >
						<image class="lineImg" :src="item.path" mode="widthFix"></image>
					    <image src="../../static/img/icon_close.png" mode="" class="delImg" @click="delimg(imgindex)">
					    </image>
					</view>
					
					<image @click="uploadImg" class="lineImg" src="/static/img/scimg.png" mode=""></image>
				</view>
			</view>
			

        <view class="btnBox">
			<view class="btn"  v-if="optdata.type==1" @click="saveVIN">提交</view>
			<view class="btn"  v-if="optdata.type==2" @click="SaveMatching">提交</view>
		</view>
		</view>

	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
            nodata,homenav
		},
		data() {
			return {
              iStatusBarHeight:'',
			  optdata:'',
			  jcData:'',
			  comment:'',
			  imgs:'',
			  imgArr:[],
			}
		},
		onLoad(opt) {
			 this.jcData= uni.getStorageSync("jcData")
			  console.log(opt)
			   this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
              this.optdata=opt;
			 
		},
		methods: {
			delimg(index) {
				this.imgArr.splice(index, 1)
			},
			saveVIN(){
				if(this.imgArr.length){
					var imgs=[]
					this.imgArr.forEach(item=>{
						imgs.push(item.path)
					})
					this.imgs=imgs.splice(',')
				}
				if(!this.comment){
					uni.showToast({
					  title: '请填写错误说明',
					  icon: 'none',
					  duration: 3000
					});
					return false
				}
				uni.showLoading({ title: '加载中'});
				this.$http3('errcheckapi/saveVIN', {
				 carId:this.jcData.id,
				 carmodel:this.jcData.value,
				 comment:this.comment,
				 imgs:this.imgs,
				 vin:this.jcData.vin
				},'POST').then(res => {
					uni.hideLoading();
					if(res.code==0){
						/* uni.showToast({
						  title: '操作成功',
						  icon: 'none',
						  duration: 3000
						}); */
						uni.showModal({
							title: '提示',
							content: '操作成功',
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack(-1)
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
			SaveMatching(){
				if(this.imgArr.length){
					var imgs=[]
					this.imgArr.forEach(item=>{
						imgs.push(item.path)
					})
					this.imgs=imgs.splice(',')
				}
				if(!this.comment){
					uni.showToast({
					  title: '请填写错误说明',
					  icon: 'none',
					  duration: 3000
					});
					return false
				}
				uni.showLoading({ title: '加载中'});
				this.$http('errcheckapi/SaveMatching', {
				 goods:this.jcData.goods,
				 carmodel:this.jcData.value,
				 comment:this.comment,
				 imgs:this.imgs,
				 vin:this.jcData.vin,
				 carGroupId:this.jcData.carGroupId,
				 partId:this.jcData.partId
				},'POST').then(res => {
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: '操作成功',
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								uni.navigateBack(-1)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
			},
		
		uploadImg() {
		
			var that = this;
			var length = this.imgArr.length;
			var num = 9;
			if (length > 8) {
				uni.showToast({
					title: '最多上传9张',
					icon: 'none',
					duration: 2000,
				});
				return false;
			}
			uni.chooseImage({
				sourceType: ['album', 'camera'],
				count: num - length,
				sizeType:['compressed'],
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					console.log(tempFilePaths)
					tempFilePaths.forEach(v => {
						//console.log(that.$baseURL + '/search?action=uploadapi/uploadImgBatch');
						uni.uploadFile({
							//url: that.$baseURL + '/search?action=uploadapi/uploadImgBatch',
							url:'https://openapi.db.66km.cn/uploadapi/uploadImgBatch?timestamp='+Date.now()+'&type=errorcorrection',
							//url:'http://192.168.1.8:20134/uploadapi/uploadImgBatch?timestamp='+Date.now()+'&type=errorcorrection',
							header:{
								timestamp:Date.now(),
								appId:'0d3f11e4-3344-4d59-a11e-06a8acc4b1bf'
							},
							//url:'http://api.dms.66km.com.cn/tuhuUploadFile',
							filePath: v,
							name: 'file',
							formData: {
								'type': 'errorcorrection'
							},
							success: (uploadFileRes) => {
								var res=JSON.parse(uploadFileRes.data)
		                        if(res.code==0){
									console.log(JSON.parse(uploadFileRes.data).data);
									that.imgArr = that.imgArr.concat(JSON.parse(
										uploadFileRes.data).data);
									console.log('imgArr--',that.imgArr);
								}else{
									console.log(res)
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 3000,
									});
								}
								
							},
							fail(err) {
								uni.showToast({
									title: err.msg,
									icon: 'none',
									duration: 3000,
								});
							}
						});
					})
					
				}
			});
		},
		},
	}
</script>

<style scoped>
.jtImg{
	width: 26rpx;height: 26rpx;
}
.line{
	padding: 20rpx 24rpx;
	border-bottom: 1px solid #eaeaea;
	display: flex;font-size: 28rpx;
	color: #333;
}
.lineTitle{
	width: 150rpx;
}
.lineCont{
	color: #666;
	width: 550rpx;
}
.lineConttextarea{
	height: 180rpx;width: 520rpx;
	border: 1px solid #eaeaea;
	padding: 16rpx;
}
.lineImg{
	width: 160rpx;
	height: 160rpx;
	margin-right: 20rpx;
}
.btnBox{
	padding-top: 200rpx;
	display: flex;justify-content: center;
}
.btn{
	width: 600rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	color: #fff;
	font-size: 32rpx;
    background: #E60006;
	border-radius: 16rpx;

}
.delImg {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 20rpx;
		top: 0rpx;
	}
.imgLine {
		position: relative;
		/* display: inline-block; */
		display: flex;
		    /* justify-items: center ; */
		align-items: center;
	}
.lineImgBox{
	display: flex;flex-wrap: wrap;
}
</style>