sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
	<meta name="referrer" content="always" />
	<meta charset='utf-8' />
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<meta name="description" content="">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/vue.js"></script>
	<script src="js/vant-ui.js"></script>
	<script src="js/main.js"></script>
	<title></title>
</head>
<style>
	.uploadImg {
		width: 1.5rem !important;
		height: 1.5rem !important;
		margin: 1rem auto;
	}
</style>

<body>
	<div id="app" v-cloak>
		<div class="pageView peifuxiangqing">
			<div class="">
				<div class="userInfos card">
					<div class="title"></div>
					<div class="Forms">
						<div class="item flex a-center">
							<div class="label flex a-center">
								<div class="icon i1"></div>
								门店名称:
							</div>
							<div class="value">
								<input type="text" placeholder="" v-model="tlementInfo.storeName" readonly="readonly">
							</div>
							<van-icon name="checked" size="0.3rem" color="#00a0ea" />
						</div>
						<div class="item flex a-center">
							<div class="label flex a-center">
								<div class="icon i2"></div>
								联系人:
							</div>
							<div class="value">
								<input type="text" placeholder="" readonly="readonly" v-model="tlementInfo.telName">
							</div>
							<van-icon name="checked" size="0.3rem" color="#00a0ea" />
						</div>
						<div class="item flex a-center">
							<div class="label flex a-center">
								<div class="icon i3"></div>
								联系电话:
							</div>
							<div class="value">
								<input type="number" placeholder="" readonly="readonly" v-model="tlementInfo.telephone">
							</div>
							<van-icon name="checked" size="0.3rem" color="#00a0ea" />
						</div>
						<div class="item flex a-center">
							<div class="label flex a-center">
								<div class="icon i4"></div>
								车牌号:
							</div>
							<div class="value">
								<input type="text" placeholder="" readonly="readonly" v-model="tlementInfo.plateNumber">
							</div>
							<van-icon name="checked" size="0.3rem" color="#00a0ea" />
						</div>
					</div>
				</div>
				<div class="card court" style="margin-top: 0.2rem;">
					<div class="title">
						轮胎信息
					</div>
					<div class="Forms">
						<div class="item flex a-center">
							<div class="label flex a-center">
								轮胎胎号:
							</div>
							<div class="value">
								{{ tlementInfo.tireDtoList ? tlementInfo.tireDtoList[0].tireNum : '' }}
							</div>
						</div>
						<div class="item flex a-center">
							<div class="label flex a-center">
								轮胎规格:
							</div>
							<div class="value">
								{{ tlementInfo.tireDtoList ? tlementInfo.tireDtoList[0].spec : '' }}
							</div>
						</div>
						<div class="item flex a-center">
							<div class="label flex a-center">
								轮胎DOT：
							</div>
							<div class="value">
								{{ tlementInfo.tireDtoList ? tlementInfo.tireDtoList[0].dot : '' }}
							</div>
						</div>
						<div class="item flex a-center">
							<div class="label flex a-center">
							  余花深：
							</div>
							<div class="value" style="display:flex">
								<input type="number" placeholder="请输入余花深" style="width:80%" v-model="leftDept" v-on:input="onInput" />
								<p style="width:20%">毫米</p>
							</div>
						</div>
					</div>
				</div>
				<!-- <div class="card court" style="margin-top: 0.2rem;" v-for="(img,index) in tlementInfo.carFileDtoList" v-show="img.type == 2 || img.type == 3">
					<div class="title">
						{{ ['','','行驶证照片','车辆照片'][img.type] }}
					</div>
					<div class="fileImage" v-show="img.type == 2" >
						<img v-if="img.url == '' || !img.url" src="./image/usercar.jpg" />
						<img v-else :src="img.url" />
					</div>
					<div class="fileImage" v-show="img.type == 3" v-on:click="chooseCarNetoImg">
						<img v-if="img.url == '' || !img.url" src="./image/car.png" />
						<img v-else :src="img.url" />
					</div>
				</div> -->
				<div class="card court" style="margin-top: 0.2rem;" v-for="(img,index) in imgTypes">
					<div class="title">
						<div>
								{{ img.name }}
						</div>
					</div>
					<div class="fileImage" v-on:click="chooseImg(img.type,index)" v-show="parseInt(img.type) < 2">
						<img v-if="!img.url || img.url == ''" :src="getImg(img.type)" />
						<img v-else :src="img.url" />
					</div>
					<div class="fileImage" v-on:click="chooseUserCarPho" v-show="parseInt(img.type) == 2">
						<img v-if="!img.url || img.url == ''" src="./image/usercar.jpg" />
						<img v-else :src="img.url" />
					</div>
					<div class="fileImage" v-on:click="chooseCarNetoImg" v-show="parseInt(img.type) == 3">
						<img v-if="!img.url || img.url == ''" src="./image/car.png" />
						<img v-else :src="img.url" />
					</div>
					<div class="fileImage" v-on:click="chooseCarNetoDot" v-show="parseInt(img.type) == 4">
						<img v-if="!img.url || img.url == ''" src="./image/dot.png" />
						<img v-else :src="img.url" />
				</div>
				</div>
				<div class="nextFoot flex a-center" style="border-radius: 5px !important;">
					<div class="nextBtns2 flex a-center j-center" v-on:click="cancelLipei">
						取消提交
					</div>
					<div class="nextBtns1 flex a-center j-center" v-on:click="sumbiltLipei">
						确认提交
					</div>
				</div>
				<input accept="image/x-png,image/gif,image/jpeg,image/bmp" class="change" id="files2" type="file" multiple="multiple" style="width: 0px;height : 0px;opacity: 1" onchange="changePhoto(event)" />
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../script/aui_compress.min.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
	var cm = "";
	apiready = function() {
			var code = api.pageParam.code;
			cm = new Vue({
				el: '#app',
				data: {
					list: [],
					code: code,
					tlementInfo: {}, // 理赔单详情
					userid: '',
					chooseImgIndex: 0, // 选择图片的index
					chooseImgCode: 0, // 选择图片的code
					userPhotos: [], // 车辆照片和行驶证照片
					imgTypes: [{
						name: "轮胎整体照片",
						type: "0"
					}, {
						name: "鼓包或爆胎位置照片",
						type: "1"
					},{
						name: "行驶证照片",
						type: "2"
					},{
						name: "车辆照片",
						type: "3"
					},{
						name: "DOT周期号照片",
						type: "4"
					}],
					trans: '', // 转换格式插件
					leftDept: '', // 余华深
				},
				computed: {
					getImg: function() {
						return function(type) {
							return 'image/upload' + type + '.png';
						}
					},
					getImgCar: function() {
						return function(type) {
							return 'image/upload' + type + '.png';
						}
					}
				},
				methods: {
					// 通过码号获取理赔单详情
					init: function() {
						this.userid = $api.getStorage('userid');
						this.trans = api.require('trans');
						this.getInfoByCode();
					},
					// 通过code获取理赔单详情
					getInfoByCode: function() {
						var url = "getLipeiInfoU",
							_this = this;
						var data = {
							"storeId": this.userid,
							"orderno": this.code,
							"url": "json",
							"type": "body"
						}
						this.$post(url, data, function(ret) {
							console.log(JSON.stringify(ret));
							if (ret.code == 0 || ret.code == '0') {
								_this.tlementInfo = ret.data;
								// if (ret.data.carFileDtoList.length == 1) {
								// 	ret.data.carFileDtoList.push({
								// 		"realName": "照片1",
								// 		"fileName": "行驶证照片",
								// 		"type": "2",
								// 		"url": ""
								// 	})
								// 	ret.data.carFileDtoList.push({
								// 		"realName": "照片2",
								// 		"fileName": "车辆照片",
								// 		"type": "3",
								// 		"url": ""
								// 	})
								// }
								_this.extend(_this.tlementInfo, {
									"storeId": $api.getStorage('userid'),
									"storeName": $api.getStorage('storeName'),
									"kunnr": $api.getStorage('kunnr'),
								})
							} else {
								api.alert({
										title: '温馨提示',
										msg: ret.msg,
								}, function(ret, err){
										if( ret ){
											  api.closeWin({});
										}
								});
							}
						})
					},
					onInput:function(){
						if(this.leftDept<0){
							this.leftDept=0;
							api.toast({
								msg: '请输入非负数'
							})
						}
					},
					cancelLipei: function() {
						api.closeWin({});
					},
					//   选择行驶证照片
					chooseUserCarPho: function() {
						var _this = this;
						this.ifHasPrme('storage', function(ret) {
							if (ret == true) {
								_this.ifHasPrme('camera', function(res) {
									if (res == true) {
										_this.chooseImage_onlycamer(function(ret) {
											changePhoto2(ret);
										})
									}
								})
							}
						})
					},
					//   选择车辆照片
					chooseCarNetoImg: function() {
						var _this = this;
						this.ifHasPrme('storage', function(ret) {
							if (ret == true) {
								_this.ifHasPrme('camera', function(res) {
									if (res == true) {
										_this.chooseImage_onlycamer(function(ret) {
											changePhoto3(ret);
										})
									}
								})
							}
						})
					},
					//选择DOT照片
					chooseCarNetoDot: function() {
						var _this = this;
						this.ifHasPrme('storage', function(ret) {
							if (ret == true) {
								_this.ifHasPrme('camera', function(res) {
									if (res == true) {
										_this.chooseImage_onlycamer(function(ret) {
											changePhoto4(ret);
										})
									}
								})
							}
						})
					},
					//  选择图片
					chooseImg: function(type, index) {
						var _this = this;
						this.chooseImgCode = type;
						this.chooseImgIndex = index;
						this.ifHasPrme('storage', function(ret) {
								if (ret == true) {
									_this.ifHasPrme('camera', function(res) {
										if (res == true) {
											_this.chooseImage_onlycamer(function(ret) {
												changePhoto(ret);
											})
										}
									})
								}
							})
							// $('#files2').click();
					},
					//上传DOT照片
					uploadFile4 : function(ret){
						var _this = this;
						ret.data.url = ret.data.url
						_this.imgTypes.map(function(img, index) {
							if (img.type == 4 || img.type == '4') {
								_this.$set(_this.imgTypes[index], 'carImg', ret.data);
								_this.$set(_this.imgTypes[index], 'url', ret.data.url);
							}
						})
					},
					//  上传车辆照片
					uploadFile3 : function(ret){
						var _this = this;
						ret.data.url = ret.data.url
						_this.imgTypes.map(function(img, index) {
							if (img.type == 3 || img.type == '3') {
								_this.$set(_this.imgTypes[index], 'carImg', ret.data);
								_this.$set(_this.imgTypes[index], 'url', ret.data.url);
							}
						})
					},
					//  上传行驶证图片
					uploadFile2: function(ret) {
						var _this = this;
						ret.data.url = ret.data.url
						_this.imgTypes.map(function(img, index) {
							if (img.type == 2 || img.type == '2') {
								_this.$set(_this.imgTypes[index], 'carImg', ret.data);
								_this.$set(_this.imgTypes[index], 'url', ret.data.url);
							}
						})
					},
					//  开始上传照片
					uploadFile1: function(ret) {
						var _this = this;
						ret.data.url = ret.data.url
						_this.imgTypes.map(function(img, index) {
							if (img.type == 0 || img.type == '0') {
								_this.$set(_this.imgTypes[index], 'carImg', ret.data);
								_this.$set(_this.imgTypes[index], 'url', ret.data.url);
							}
						})
					},
					//  开始上传照片
					uploadFile: function(ret) {
						var _this = this;
						this.$set(_this.imgTypes[_this.chooseImgIndex], "carImg", ret.data);
						this.$set(_this.imgTypes[_this.chooseImgIndex], "url", ret.data.url);
					},
					//  提交轮胎包理赔记录
					sumbiltLipei: function() {
		          for(var i = 0;i<this.imgTypes.length;i++){
								if(!this.imgTypes[i].url || this.imgTypes[i].url == ''){
									 api.toast({
										 msg : '请上传' + this.imgTypes[i].name
									 })
									 return;
								}
							}
						if (this.leftDept == '') {
							api.toast({
								msg: '请输入余花深信息'
							})
							return;
						}
						var url = "sumbiltLipeiU",
							_this = this;
						var data = {
							"storeId": this.tlementInfo.storeId,
							"storeName": this.tlementInfo.storeName,
							"kunnr": this.tlementInfo.kunnr,
							"telName": this.tlementInfo.telName,
							"telephone": this.tlementInfo.telephone,
							"operatingType": this.tlementInfo.operatingType,
							"plateNumber": this.tlementInfo.plateNumber,
							"orderno": this.tlementInfo.orderno,
							"tireNum": this.tlementInfo.tireDtoList[0].tireNum,
							"brand": this.tlementInfo.tireDtoList[0].brand,
							"spec": this.tlementInfo.tireDtoList[0].spec,
							"pattern": this.tlementInfo.tireDtoList[0].pattern,
							"dot": this.tlementInfo.tireDtoList[0].dot,
							"plyRating": this.tlementInfo.tireDtoList[0].plyRating,
							"matnr": this.tlementInfo.tireDtoList[0].matnr,
							"leftDepth": this.leftDept,
							"maktx": this.tlementInfo.tireDtoList[0].maktx,
							"carFileDtoList": this.tlementInfo.carFileDtoList,
							"policyStart":this.tlementInfo.startDate,
							"policyEnd":this.tlementInfo.endDate,
							"taihaoUrl":this.tlementInfo.tireDtoList[0].taihaoUrl,
						}
						var policyFileDtoList = new Array();
						this.imgTypes.map(function(img, index) {
							if (img.carImg != null) {
								policyFileDtoList.push(img.carImg);
							}
						})
						var other = {
							policyFileDtoList: policyFileDtoList,
							url: 'json',
							type: 'body'
						}
						data = this.extend(data, other);
						console.log(JSON.stringify(data));
						this.$post(url, data, function(ret) {
							if (ret.code == 0 || ret.code == '0') {
								api.toast({
									msg: '理赔单审核成功'
								});
								setTimeout(function() {
									_this.closeWin({});
								}, 500);
							}
						})
					}
				},
				mounted: function() {
					this.init();
				}
			})
		}
		/**
		 * 这是门店图片更改触发时间.target.files[0]
		 */
	function changePhoto(event) {
		var url = "uploadLipeU";
		var data = {
			type: cm.chooseImgCode,
			file: event,
		}
		cm.$uploadfile(url, data, function(ret) {
			if (ret.code == 0 || ret.code == '0') {
				cm.uploadFile(ret)
			}
		})
	}
	//上传DOT
	function changePhoto4(event) {
		var url = "uploadLipeU";
		var data = {
			type: 4,
			file: event,
		}
		cm.$uploadfile(url, data, function(ret) {
			if (ret.code == 0 || ret.code == '0') {
				cm.uploadFile4(ret)
			}
		})
	}
	//   上传行驶证照片
	function changePhoto3(event) {
		var url = "uploadLipeU";
		var data = {
			type: 3,
			file: event,
		}
		cm.$uploadfile(url, data, function(ret) {
			if (ret.code == 0 || ret.code == '0') {
				cm.uploadFile3(ret)
			}
		})
		// var url = "uploadUserCarU";
		// var data = {
		// 		type: 1,
		// 		file: event,
		// 	},
		// 	_this = this;
		// cm.$uploadfile(url, data, function(ret) {
		// 	if (ret.code == 0 || ret.code == '0') {
		// 		cm.uploadFile2(ret)
		// 	}
		// })
	}

	//   上传行驶证照片
	function changePhoto2(event) {
		var url = "uploadLipeU";
		var data = {
			type: 2,
			file: event,
		}
		cm.$uploadfile(url, data, function(ret) {
			if (ret.code == 0 || ret.code == '0') {
				cm.uploadFile2(ret)
			}
		})
		// var url = "uploadUserCarU";
		// var data = {
		// 		type: 1,
		// 		file: event,
		// 	},
		// 	_this = this;
		// cm.$uploadfile(url, data, function(ret) {
		// 	if (ret.code == 0 || ret.code == '0') {
		// 		cm.uploadFile2(ret)
		// 	}
		// })
	}
	//  上传车辆照片
	function changePhoto1(event) {
		var url = "uploadCarPhotoU";
		var data = {
			type: 1,
			file: event,
		}
		cm.$uploadfile(url, data, function(ret) {
			if (ret.code == 0 || ret.code == '0') {
				cm.uploadFile1(ret)
			}
		})
	}

	//  上传文件
	function uploadFile(src) {
		api.ajax({
			url: "http://b2bcnapi.sailuntire.com/api/test/wx/sailun/insurance/tireImageUpload",
			method: 'post',
			data: {
				body: {
					type: 0
				},
				files: {
					file: src
				}
			},
			headers: {
				"Content-type": "multipart/form-data"
			},
		}, function(ret, err) {
			api.hideProgress();
			api.refreshHeaderLoadDone();
			if (ret) {
				callback(ret);
			} else {
				api.toast({
					msg: JSON.stringify(err)
				});
			}
		});
	}
</script>

</html>