sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
							<!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>
	<link rel="stylesheet" href="./mescroll/mescroll.min.css">
	<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
	<title></title>
</head>
<style>
	.kucunxiangqing,
	#app {
		overflow-y: scroll;
	}

	.kucunxiangqing .kucunList .srcollBox {
		overflow-y: scroll !important;
	}

	.kucunxiangqing .kucunList .title {
		position: static;
	}

	.kucunxiangqing .kucunList {
		position: static;
		padding-top: 0rem;
	}

	.kucunxiangqing {
		background-color: #fff !important;
	}

	.kucunxiangqing .typeFooter,
	.kucunxiangqing .leiji {
		background-color: #00a0ea !important;
	}

	.j-center {
		font-size: 0.3rem;
	}

	.list {
		padding: 0.2rem;
		border-bottom: 1px solid#e2e0e0;
		width: 96%;
		margin-left: 2%;
	}

	.top-center {
		margin: 0.1rem 0;
	}

	.searchSpec {
		z-index: 1111;
		width:85%;
		height: 1rem;
	}

	.search {
		top: 0rem;
	}

	.search {
		width: 100%;
		background: #00a0ea;
		height: 1rem;
		padding-left: 0.36rem;
			padding-right: 0.36rem;
	}

	.search .searchbox input {
		width: 100%;
		font-size: 0.3rem;
		display: block;
		color: #999;
		height: 100%;
		position: relative;
		padding-left: 5%;
		padding-right: 5%;
		background: none;
		border: 0;
		outline: none;
		margin-top: 0.1rem;
	}

	.searchbox {
		background-color: #fff;
		display: flex;
		padding: 0.1rem;
		width: 100%;
		border-radius: 5px;
	}

	.gouwuche .caigouBg .caigouBgPix {
		padding: 0;
	}
	.caigouBgPix {
		background: #00a0ea;
	}
	.line1 {
		width:100px;
		overflow: hidden;
		text-overflow:ellipsis;
		text-align: center;
		white-space: nowrap;
	}
	.mescroll{
		position: relative;
		height: 85%;
	}
</style>

<body>
	<div id="app" v-cloak>
		<div class="pageView kucunxiangqing col">
			<!--				<div class="header flex a-center j-center">
				<i class="iconfont icon-back" onclick="history.go(-1)"></i>
				库存查询
				<div class="toobla flex a-center">
				<div class="icon1"></div>
				<div class="icon2"></div>
				</div>
				</div>-->
			<div class="leiji flex a-center j-center">
				库存总量：
				<h4> {{ info.stock | amountToStr }} </h4>
			</div>
			<div class="caigouBgPix flex a-center" style="flex-wrap: wrap;">
				<div class="searchSpec">
					<div class="search flex a-center">
						<div class="searchbox">
							<svg t="1589079341958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5394" width="22" height="22">
								<path d="M883.626667 823.04l-145.066667-144.64A337.92 337.92 0 0 0 810.666667 469.333333a341.333333 341.333333 0 1 0-341.333334 341.333334 337.92 337.92 0 0 0 209.066667-72.106667l144.64 145.066667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667zM213.333333 469.333333a256 256 0 1 1 256 256 256 256 0 0 1-256-256z" p-id="5395" fill="#bfbfbf"></path>
							</svg>
							<input type="search" placeholder="请输入轮胎规格" v-model="keyword">
						</div>
					</div>
				</div>
				<!-- <div class="item flex a-center j-center" v-on:click="chooseAntion(0)" style="width:20%;color:#fff;">
					<p class="line1">{{ chooseAndtion[0] || '品牌' }} </p><i class="iconfont icon-xia" style="margin-left:5px"></i>
				</div> -->
				<div class="item flex a-center j-center line1" v-on:click="chooseAntion(1)" style="width:15%;color:#fff">
					{{ chooseAndtion[1] || '花纹' }} <i class="iconfont icon-xia" style="margin-left:5px"></i>
				</div>
				<!-- <div class="item flex a-center j-center">
					{{ choosePPone || '品牌' }}
				</div>
				<div class="fgx"></div> -->
				<!-- <div class="item flex a-center j-center" v-on:click="chooseAndtion(1)">
					{{ chooseGG.name || '规格' }} <i class="iconfont icon-xia"></i>
				</div>
				<div class="fgx"></div> -->
				<!-- <div class="item flex a-center j-center" v-on:click="chooseAndtion(2)">
					{{ chooseHW.name || '花纹' }} <i class="iconfont icon-xia"></i>
				</div> -->
			</div>
			<!-- <div class="typeFooter flex a-center j-center">
				<div class="item flex j-center a-center" v-on:click="chooseAntion(0)">
					{{ chooseAndtion[0] || '品牌' }}
				</div><span></span>
				<div class="item flex j-center a-center" v-on:click="chooseAntion(1)">
					{{ chooseAndtion[1] || '花纹' }}
				</div><span></span>
				<div class="item flex j-center a-center" v-on:click="chooseAntion(2)">
					{{ chooseAndtion[2] || '规格' }}
				</div>
			</div> -->
			<div class="mescroll-touch-y mescroll" id="mescroll">
				<div class="kucunList" v-show="stockList.length > 0">
					<!-- <div class="title flex a-center j-center"> -->
					<!-- <div class="item flex a-center j-center">
							物料描述
						</div>
						<div class="item flex a-center j-center">
							月入库
						</div>
						<div class="item flex a-center j-center">
							月出库
						</div>
						<div class="item flex a-center j-center">
							库存
						</div>
					</div> -->
					<!--  -->
					<div class="srcollBox">
						<div class="ite a-center j-center list" v-for="(item,index) in stockList" :key="index">
							<div class="fx1 flex a-center">
								{{ item.maktx }}
							</div>
							<!-- <div class="fx1 flex a-center top-center">
								<p style="flex:1">月入库:{{ item.innumber }}</p>
								<p style="flex:1">月出库:{{ item.outnumber }}</p>
							</div> -->
							<div class="fx1 flex a-center">
								<p>库存：{{ item.stock | amountToStr }}</p>
							</div>
						</div>
					</div>
				</div>
				<div v-show="stockList.length == 0" style="text-align:center">
					<img src="./image/noData.png" style="margin:2rem auto" />
				</div>
			</div>

		</div>
	</div>
</body>
<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">
	apiready = function() {
		new Vue({
			el: '#app',
			data: {
				kunnr: '', // 绑定的经销商kunnr
				brand: '', // 品牌
				spec: '', // 规格
				pattern: '', // 花纹
				starttime: '', // 开始时间
				endtime: '', // 结束时间
				page: 1,
				pagesize: 10,
				totalPages: 1,
				info: {}, // 包含总库存，筛选品牌，规格，库存
				stockList: [], // 库存列表
				userid: '',
				chooseAndtion: [],
				UIActionSelector: '',
				keyword : '',
			},
			watch : {
				keyword : function(nw,ow){
					this.page = 1;
					this.chooseAndtion[2] = nw;
          this.getStockList();
				}
			},
			filters: {
				amountToStr: function(val) {
					if (parseInt(val) > 10) {
						return '充足'
					} else if (parseInt(val) <= 10 && parseInt(val) > 1) {
						return '紧张';
					} else {
						return '缺货';
					}
				}
			},
			methods: {
				init: function() {
					var _this = this;
					this.kunnr = $api.getStorage('kunnr');
					this.userid = $api.getStorage('userid');
					this.UIActionSelector = api.require("UIActionSelector");
					this.getStockList();
					//  配置上拉加载下拉刷新
					this.configDownAndPull("mescroll", function(mescroll) {
						_this.page = 1;
						_this.getStockList(mescroll);
					}, function(mescroll) {
						if (_this.page < _this.totalPages) {
							_this.page = _this.page + 1;
							_this.getStockList(mescroll, 1);
						} else {
							mescroll.endSuccess(_this.pagesize, false);
						}
					})
				},
				//  获取库存列表
				getStockList: function(mescroll) {
					var data = {
							"storeId": this.userid,
							"brand": this.chooseAndtion[0] == '全部' ? '' : this.chooseAndtion[0],
							"spec": this.chooseAndtion[2] == '全部' ? '' : this.chooseAndtion[2],
							"pattern": this.chooseAndtion[1] == '全部' ? '' : this.chooseAndtion[1],
							"page": this.page,
							"pagesize": this.pagesize,
							"url": "json",
							"type": "body"
						},
						_this = this,
						url = "getStockListU";
					this.$post(url, data, function(ret) {
						if (ret.code == 0 || ret.code == '0') {
							if (mescroll) {
								mescroll.endSuccess(_this.pagesize, true);
							}
							_this.totalPages = ret.data.data.totalPage;
							var brand = [{
									name: '全部'
								}],
								pattern = [{
									name: '全部'
								}],
								spec = [{
									name: '全部'
								}];
							ret.data.data.brandList.map(function(b, index) {
								if (b != null) {
									brand.push({
										name: b
									})
								}
							})
							ret.data.data.patternList.map(function(p, index) {
								if (p != null) {
									pattern.push({
										name: p
									})
								}
							})
							ret.data.data.specList.map(function(s, index) {
								if (s != null) {
									spec.push({
										name: s
									})
								}
							})
							_this.info = {
								stock: ret.data.data.stock,
								brand: brand,
								pattern: pattern,
								spec: spec
							}
							_this.stockList = _this.page == 1 ? ret.data.data.list : _this.stockList.concat(ret.data.data.list);
						}
					})
				},
				//  查看详情
				lookInfo: function() {
					this.goWin('kucunxiangqing_win', 'kucunxiangqing_win.html', '');
				},
				//  点击选择
				chooseAntion: function(index) {
					var list = ["brand", "pattern", "spec"],
						_this = this;
					this.page = 1;
					var chooseAn = eval("this.info." + list[index]);
					this.chooseRegion(this.UIActionSelector, 1, chooseAn, function(ret) {
						if (ret.eventType == 'ok') {
							_this.$set(_this.chooseAndtion, index, ret.level1);
							_this.getStockList();
						}
					})
				}
			},
			mounted: function() {
				this.init();
			}
		})
	}
</script>

</html>