sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
							<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<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="../../../js/moment.js"></script>
		<style>
			.flex{
				display: flex;
			}
			#app{
				/*width: 100%;
				height: 100%*/
			}
			#aui-header{
				background: linear-gradient(to right,#1474E4,#14A7E4);
				justify-content: space-between;
				align-items: center;
			}
				.header-search{
					flex-grow: 1;
				}
				.image-icon{
					width: .66rem;
					height: .66rem;
					margin-right: 19px;
				}
				.image-icon1{
					width: .34rem;
					height: .34rem;
					margin-right: 19px;
					flex-shrink: 0;
					background: #ffffff;
					border: 3px solid rgba(255,255,255,.4);

				}
					img{
						width: 100%;
						height: auto;
					}
			.filters-container{
				background: linear-gradient(to right,#1474E4,#14A7E4);
			}
				.filters-item{
					padding: 16px 0;
					color: #ffffff;
					text-align: center;
				}
				.selected{
					background: #ffffff;
					color: #1474E4;
				}
			#scrollcontaier{
					overflow-y: auto;
				}
			.list-item{
				box-sizing: border-box;
				width: 10.1rem;
				background: #ffffff;
				margin: 0.36rem auto 0;
				border-radius: 0.08rem;
				padding: .4rem;
			}
				.list-item-row{
					justify-content: space-between;
					margin: .3rem 0;
				}
					.centerText{
						text-align: center;
					}
					.bgArrow{
						/*::after
						content: "";
						display: inline-block;
						width: 100%;
						height: 100%;*/
						color: #1474E4;
						background: url("../../../../../image/icon/zhixiang.png") no-repeat 0 bottom;
						background-size: 100% auto;
					}
					.grayColor{
						color: #888888;
						color: .36rem;
					}
					.boldText{
						font-weight: bold;
					}
					.verText{
						align-items: center;
					}
				.confirm-btn-container{
					justify-content: center;
				}
					.confirm-btn{
						background: linear-gradient(to right, #F09623, #FFCF4C);
						padding: 0 1.18rem;
						height: .96rem;
						line-height: .96rem;
						border-radius: .48rem;
						color: #ffffff;
					}
				.vbeln-container{
					justify-content: flex-start;
				}
				.vbeln-container span:nth-of-type(1){
					display: inline-block;
					flex-grow: 1;
					flex-shrink: 0;
				}
				.vbeln-container span:nth-of-type(2){
					flex-grow: 0;
				}
				.vbeln-container-hide{
						overflow: hidden;
				}
				.vbeln-container-hide span:nth-of-type(2){
					flex-grow: 0;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
		</style>
	</head>
	<style>
	</style>
	<body>
		<div id="app">
			<header class="flex flex-between" id="aui-header">
				<van-search class="header-search" v-model="searchVvalue" placeholder="请输入搜索关键词" shape="round" background="transparent" @search="handleSearch"></van-search>
				<div class="image-icon"><img src="../../../../../image/icon/zhiyinshuoming.png" alt=""></div>
			</header>
			<van-dropdown-menu class="filters-container" active-color="#1474E4" id="dropmenu" ref="dropmenu">
				<van-dropdown-item title="送货地址" v-model="addressValue" :options="addressList" @change="handleChangeAddress"></van-dropdown-item>
				<van-dropdown-item title="签收状态" v-model="statusValue" :options="statusList" @change="handleChangeStatus"></van-dropdown-item>
				<van-dropdown-item title="出厂电签日期" ref="dateDrop" @open="handleClickDrop"></van-dropdown-item>
			</van-dropdown-menu>
			<van-calendar color="#1474E4" v-model="dateShow" type="range" @confirm="onConfirm" ></van-calendar>
			<div id="scrollcontaier" ref="scrollcontaier">
				<div class="list-container">
					<div class="list-item" v-for="(item,index) in dataList" :key="item.tknum">
						<div class="list-item-row flex"><div><span>装运凭证：</span><span>{{item.tknum}}</span></div><div class="verText flex"><span>详情</span><van-icon name="arrow" /></div></div>
						<van-row class="list-item-row " gutter="20">
							<van-col class="centerText" span="8"><span class="boldText">{{item.routeStart}}</span><span class="grayColor">{{item.routeStart}}</span></van-col>
							<van-col class="centerText bgArrow" span="8"><span>{{item.statusName}}</span></van-col>
							<van-col class="centerText" span="8"><span class="boldText">{{item.routeEnd}}</span><span class="grayColor">{{item.kunnrAddr}}</span></van-col>
						</van-row>
						<div class="list-item-row flex">
							<div class="flex vbeln-container " :class="item.show?'':'vbeln-container-hide'">
								<span >交运单号：</span>
								<span :ref="'vbeln'+index">{{item.vbelnList | vbelnListFilters}}</span>
							</div>
							<div v-show="!item.show" class="image-icon1" @click="handleShowText(item)"><img src="../../../../../image/icon/more.png" alt=""></div>
						</div>
						<div class="list-item-row"><div><span>车牌号：</span><span>{{item.busNumber}}</span></div></div>
						<div class="list-item-row"><div><span>装运条数：</span><span>100条</span></div></div>
						<van-divider ></van-divider>
						<div class="list-item-row confirm-btn-container flex"><div><span class="confirm-btn" @click="handleGo">签收</span></div></div>
					</div>
				</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 src="../../../../../script/js/auto-size.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 - 34 - 48 + "px";//顶部的搜索框34   ，筛选部分48
			new Vue({
				el: '#app',
				data: {
					token: $api.getStorage('loginToken'),
					dataList: [],
					frist: 1,
					searchVvalue:'',
					tabActive: -1,
					tabPopupShow: false,
					chosenId: "1",
					addressValue: "-1",
					addressList: [{
						value: '-1',
						text: '全部'
	        }],
					statusValue: "-1",
					statusList: [{
	          value: '-1',
	          text: '全部',
	          isDefault: true
	        },{
	          value: '0',
	          text: '签收',
	        },
	        {
	          value: '1',
	          text: '未签收',
	        }],
					dateValue: "0",
					dateShow: false,
					startDate: "",
					endDate: "",
					currentPage: 1,
					pageSize: 10,
					totalPages: 0
				},
				mounted: function() {
					this.handleGetAddress();
					this.handleGetSignOrder();
				},
				methods:{
					configs : function(){
						var _this = this;
						this.frist = 2;
						this.configDownAndPull("scrollcontaier", function(mescroll) {
							_this.currentPage = 1;
							_this.handleGetSignOrder(mescroll);
						}, function(mescroll) {
							if (_this.currentPage < _this.totalPages) {
								_this.currentPage = _this.currentPage + 1;
								_this.handleGetSignOrder(mescroll, 1);
							} else {
								mescroll.endSuccess(_this.pageSize, false);
							}
						})
					},
					// 获取用户地址信息
					handleGetAddress: function(){
						var _this = this;
						api.ajax({
						    url: 'https://b2bcnapi.sailuntire.com/api/test/b2bapi/action/api/b2bapp/agent/getEmployeeAgentByUserId.xhtml',
						    method: 'post',
						    data: {
									// this.token
									values: {
						      	loginToken : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVhdGV0aW1lIjoiMjAyMC0xMS0yMyAxMTozODoxOCIsImlkIjoiYXBwXzgzIiwidGVsIjoiMTg3NjU5MjUzMzQiLCJyZWFsTmFtZSI6IuWRqOi-iSIsImxvZ2luVHlwZSI6IjkifQ.WvlIkvm_Gu00QRKBNfgR1Fd2gcbcthIyVk9wW0pQzeI'
									}
								}
						},function(ret, err){
						    if (ret) {
									if(ret.code==1){
										for(var i=0;i<ret.data.length;i++){
											ret.data[i].text = ret.data[i].address;
											ret.data[i].value = ret.data[i].delivery;
										};
										_this.addressList = ret.data;
										_this.addressList.unshift({
						          value: '-1',
						          text: '全部'
						        });

									}else{
										_this.showToast(ret.message);
									}
						    } else {
									_this.showToast(ret.message);
						    }
						});
					},
					// 获取签收单据的主表信息
					handleGetSignOrder: function(mescroll){
						var data = {
							//this.token
								"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyZWFsTmFtZSI6IuWRqOi-iSIsImNyZWF0ZXRpbWUiOiIyMDIwLTEyLTE5IDIxOjI5OjQ2IiwibG9naW5UeXBlIjoiOSIsInRlbCI6IjE4NzY1OTI1MzM0IiwiaWQiOiJhcHBfODMifQ.NZdADXneFoHNCIbcNZS_MwUPfM_NpbYS_8hXO8eDs_Q",//--app登录信息
							 "tknum": this.searchVvalue,//--装运凭证
							 "kunnrWe": this.addressValue=="-1"?"":this.addressValue,//--送达方编号
							 "status": this.statusValue,//-- 0已签收；1未签收；-1全部
							 "leaveDateStart": this.startDate,//--开始时间
							 "leaveDateEnd": this.endDate,//--结束时间
							 "page": this.currentPage,//--开始的页数
							 "pageSize": this.pageSize,//--每页显示的数量
							 url : 'json',
							 type : 'body'
						}, _this = this;
						_this.$post("signOrderOfHead", data, function(ret) {
							if(ret.code==1||ret.code=="1"){
								_this.dataList = ret.data.data;
								_this.totalPages = ret.data.pageCount%_this.pageSize==0?ret.data.pageCount%ret.data.pageCount/_this.pageSize:Math.ceil(ret.data.pageCount/_this.pageSize);
								if (mescroll) {
									mescroll.endSuccess(_this.pageSize, true);
								}
								if(_this.frist == 1){
									_this.$nextTick(function(){
										_this.configs();
									})
								}
							}
						})
					},
					handleClickTab: function(v){
						this.tabActive = v;
						this.tabPopupShow = true;
					},
					handlePopupShow: function(){
						this.tabActive = -1;
						this.tabPopupShow = false;
					},
					handleClickDrop: function(){
						this.dateShow = true;
					},
					handleChangeAddress: function(v){
						this.handleGetSignOrder();
					},
					handleChangeStatus: function(){
						this.handleGetSignOrder();
					},
					handleSearch: function(){
						this.handleGetSignOrder();
					},
					onConfirm: function(v){
						this.dateShow = false;
						var arr = v.splice(",");
						var startDate = moment(arr[0]).format('YYYY-MM-DD');
						var endDate = moment(arr[1]).format('YYYY-MM-DD');
						this.startDate = startDate;
						this.endDate = endDate;
						this.handleGetSignOrder();
					},
					// 展示文字
					handleShowText: function(item){
						this.$set(item,"show",true)
					},
					handleGo: function(){
						this.goWin("tmssign","./tmsSign.html");
					}
				},
				filters:{
					vbelnListFilters: function(v){
						var v = ["0800001227","0800001227","0800001227","0800001227","0800001227","0800001227"];
						var str = ""
						if(v.length>0){
							for(var i=0; i<v.length; i++){
								if(i<v.length-1){
									str += v[i] + "，";
								}else {
									str += v[i];
								}
							}
						};
						return str;
					}
				}
			})
		};
	</script>
</html>