sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
							<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../../../../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../../../../css/aui-win.css" />
		<link rel="stylesheet" type="text/css" href="../../../../../css/css/vant-ui.css" />
		<link rel="stylesheet" type="text/css" href="../../../../../css/css/iconfont.css">

		<script src="../../../../../script/js/vue.js"></script>
		<script src="../../../../../script/js/vant-ui.js"></script>
		<script src="../../../../../script/js/auto-size.js"></script>
		<script src="../../../../../script/js/pdfjs-2.5.207-es5-dist/build/pdf.js"></script>
		<script src="../../../../../script/js/pdf_plugins.js"></script>

		<style>
			.flex{
				display: flex;
			}
			#app{}
			#aui-header{
				background: linear-gradient(to right,#1474E4,#14A7E4);
				justify-content: space-between;
				align-items: center;
			}
			#scrollcontaier{
				overflow-y: auto;
			}
			.aui-btn-info{
				border: 0
			}
				.title{
					padding: 10px 12px;
					color: #ffffff;
				}
				.image-icon{
					width: .66rem;
					height: .66rem;
					margin-right: 19px;
				}
					img{
						width: 100%;
						height: 100%;
					}
					.nav{
						width: 10.1rem;
						height: 1.44rem;
						margin: .28rem auto 0;
						justify-content: space-between;
						align-items: center;
						background: url("../../../../../image/icon/hedui.png") no-repeat 0 0;
						background-size: 100% auto;
					}
						.details-btn{
							height: .96rem;
							line-height: .96rem;
							padding: 0 .38rem;
							border-radius: 0.08rem;
							background: #1474E4;
							color: #ffffff;
							margin-right: .24rem;
						}
				.details-wrap{
					background: #ffffff;
					box-sizing: border-box;
					width: 10.1rem;
					margin: 0.36rem auto 0;
					border-radius: 0.08rem;
					padding: .4rem;
				}
					.canvas-container{
						position: relative;
					}
						#canvas{
							width: 9.45rem;
							height: 2.39rem;
							background: url("../../../../../image/icon/noimage.png") #e1e5e2 no-repeat 0 0;
							background-size: 100% auto;
						}
					.scale-btn{
						position: absolute;
						top: 0;
						right: -.13rem;
						width: 0;
						height: 0;
						border-bottom: .8rem solid transparent;
				    border-right: .8rem solid #1474E4;
				    border-left: .8rem solid transparent;
					}
					.scale-btn span{
						display: inline-block;
						width: .32rem;
						height: .32rem;
						position: absolute;
						top: 0;
						right: -.7rem;
					}
					.scale-btn span img{
						width: 100%;
						height: 100%;
					}
				.text-msg{
					color: #595959;

				}
			.field-container{
				background: #F5F5F5;
			}
			.signature{
				/*height: 3.2rem;*/
				width: 100%;
			}
			.signature p{
				color: #595959;
			}
			.esign-box{
					background: rgba(236,236,236,.5) url(../../../../../image/icon/qianming.png) no-repeat 50%;
					width: 9.42rem;
					height: 4.54rem;
			}
			.esigh-btns{
				margin-top: 10px;
			}
			.confirm-btn-container{
				justify-content: center;
			}
				.confirm-btn{
					background: linear-gradient(to right, #F09623, #FFCF4C);
					/*padding: 0 1.18rem;*/
					height: .96rem;
					width: 10.1rem;
					line-height: .96rem;
					border-radius: .48rem;
					color: #ffffff;
					font-size: .42rem;
					text-align: center;
					margin: .42rem auto;

				}
		</style>
	</head>
	<style>
	</style>
	<body>
		<div id="app">
			<header class="flex flex-between" id="aui-header">
				<a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a>
				<div class="title">签收信息查看</div>
				<div class="image-icon" @click="handleGoInstructions"><img src="../../../../../image/icon/zhiyinshuoming.png" alt=""></div>
			</header>
			<div id="scrollcontaier" ref="scrollcontaier">
				<div class="nav flex"><span></span><span class="details-btn" @click="handleGo">核对明细<van-icon name="arrow" /></span></div>
				<div class="details-wrap">
					<div class="canvas-container">
						<div id="canvas" ref="canvas"></div>
						<div class="scale-btn"><span @click='handleScale'><img src="../../../../../image/icon/fangda.png" alt="放大"></span></div>
					</div>
					<van-divider ></van-divider>
					<template v-if="dataDetails.signFileList&&dataDetails.signFileList.length>0">
						<p class="text-msg">若您收到的货物与订单存在差异，可上传相关图片及描述，我们会及时处理。</p>
						<van-row class="image-container" gutter="20">
							  <van-col span="8" v-for="(item,index) in dataDetails.signFileList" class="image-item" :key="index">
									<van-image :src="item" fit="contain" width="2.82rem" height="2.82rem" />
								</van-col>
						</van-row>
					</template>
					<van-field
						class="field-container"
						v-model="dataDetails.remark"
						rows="2"
						type="textarea"
						placeholder="备注~"
						ref="remark"
						readonly
					></van-field>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../../../../script/api.js"></script>
	<link rel="stylesheet" href="../../../../../script/mescroll/mescroll.min.css">
	<script type="text/javascript" src="../../../../../script/mescroll/mescroll.min.js"></script>
	<script type="text/javascript" src="../../../js/httpRequest_sub.js"></script>
	<script type="text/javascript" src="../../../js/vue_plugins_sub.js"></script>

	<script type="text/javascript">
		function closeWin() {
			api.closeWin({
			});
		}
		apiready = function() {
			api.parseTapmode();
			var header = $api.byId('aui-header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var body_h = $api.offset($api.dom('body')).h;
			document.getElementById("scrollcontaier").style.height = $api.offset($api.dom('body')).h -  headerPos.h + "px";
			var signId = api.pageParam.signId;
			var tknum = api.pageParam.tknum;
			var vbelnList = api.pageParam.vbelnList;
			var kunnrWeName = api.pageParam.kunnrWeName;
			var grossWeight = api.pageParam.grossWeight;
			var lifmg = api.pageParam.lifmg;
			new Vue({
				el: '#app',
				data: {
					token: $api.getStorage('loginToken'),
					signId: signId,
					tknum: tknum,
					vbelnList: vbelnList,
					kunnrWeName: kunnrWeName,
					grossWeight: grossWeight,
					lifmg: lifmg,
					dataDetails: {},
					pdfReader: "",
					imageList: [],
					message: "",

				},
			 filters:{

			 },
			 mounted: function() {
				 //月度pdf文件
					 this.pdfReader = api.require('pdfReader');

					this.handleGetData();
				},
				methods:{
					handleScale: function(){
						var _this = this;
						this.pdfReader.open({
							path: _this.dataDetails.signUrl,//"https://srmapi.sailuntire.com/Files/20201221/20200000000186-3000100-8379-Out.pdf",
							hidden: {
								print: true,
								export: true,
								bookmark: true,
								email: true
							},
							backBtn: {
								size: { //JSON对象；左上角按钮的大小配置
									w: 20, //数字类型；左上角按钮的宽；默认：60
									h: 20 //数字类型；左上角按钮的高；默认：40
								},
								title: { //JSON对象；按钮标题配置
									text: "返回", //字符串类型；标题文本；默认：‘’
								},
								corner: 5 //数字类型；左上角按钮圆角大小；默认值：5.0
							}
						});
					},
					handleGetData: function(){
						var data = {
							//"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyZWFsTmFtZSI6IuWRqOi-iSIsImNyZWF0ZXRpbWUiOiIyMDIwLTEyLTE5IDIxOjI5OjQ2IiwibG9naW5UeXBlIjoiOSIsInRlbCI6IjE4NzY1OTI1MzM0IiwiaWQiOiJhcHBfODMifQ.NZdADXneFoHNCIbcNZS_MwUPfM_NpbYS_8hXO8eDs_Q",//--app登录信息
							 	"signId": this.signId,//"1",//,//
								"token": this.token,
								 url : 'json',
								 type : 'body'
						}, _this = this;
						_this.$post("getSignMsg", data, function(ret) {
							if(ret.code==1||ret.code=="1"){
								_this.dataDetails = ret.data;
								//  pdf展示成图片
								 var canvasWidth=_this.$refs.canvas.offsetWidth,canvasHeight=_this.$refs.canvas.offsetHeight;
									// $canvasPdf.loadPDF("https://srmapi.sailuntire.com/Files/20201221/20200000000186-3000100-8379-Out.pdf",canvasWidth,canvasHeight);
									if (_this.dataDetails.signUrl) {
										$canvasPdf.loadPDF(_this.dataDetails.signUrl,canvasWidth,canvasHeight);
									}
							}
						})
					},
					handleGo: function(){
						var params = {
							tknum: this.tknum,
							vbelnList: this.vbelnList,
							kunnrWeName: this.kunnrWeName,
							grossWeight: this.grossWeight,
							lifmg: this.lifmg
						};
						this.goWin("tmsdetails","./tmsDetails.html",params);
					},
					handleGoInstructions: function(){
						var _this = this;
						// this.goWin("tmsinstructions","./tmsInstructions.html");//操作视频
						this.pdfReader.open({
							path: "https://b2bcnfile.sailuntire.com/upload/TMS/operationManual/TMS销售出库单签收的操作手册.pdf",//"https://srmapi.sailuntire.com/Files/20201221/20200000000186-3000100-8379-Out.pdf",
							hidden: {
								print: true,
								export: true,
								bookmark: true,
								email: true
							},
							backBtn: {
								size: { //JSON对象；左上角按钮的大小配置
									w: 20, //数字类型；左上角按钮的宽；默认：60
									h: 20 //数字类型；左上角按钮的高；默认：40
								},
								title: { //JSON对象；按钮标题配置
									text: "返回", //字符串类型；标题文本；默认：‘’
								},
								corner: 5 //数字类型；左上角按钮圆角大小；默认值：5.0
							}
						});
					},
				}
			})
		};
	</script>
</html>