sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							<!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>
	.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;
	}
</style>
<body>
	<div id="app" v-cloak>
		<div class="pageView kucunxiangqing col" id="mescroll">
			<!--				<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> {{ inventory | amountToStr }} </h4>
			</div>
			<div class="typeFooter flex a-center j-center">
				<div class="item flex j-center a-center" v-on:click="chooseAndtion(0)">
				 {{ choosePP.name || '品牌' }}
				</div><span></span>
				<div class="item flex j-center a-center" v-on:click="chooseAndtion(1)">
					{{ chooseGG.name || '规格' }}
				</div><span></span>
				<div class="item flex j-center a-center" v-on:click="chooseAndtion(2)">
					{{ chooseHW.name || '花纹' }}
				</div>
			</div>
			<div class="kucunList" v-show="list.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>
				<div class="srcollBox">
					<div class="ite flex a-center j-center list" v-for="(item,index) in list" :key="index">
						<div class="fx1 a-center">
							{{ item.maktx }}
						</div>
						<div class="fx1 a-center" style="text-align: center">
							{{ item.useablestock }}
						</div>
					</div>
				</div>
			</div>
			<div v-show="list.length == 0" style="text-align:center">
				<img src="./image/noData.png" style="margin:2rem auto" />
			</div>
		</div>
	</div>
</body>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<script type="text/javascript" src="./mescroll/mescroll.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">
	apiready = function() {
		new Vue({
			el: '#app',
			data: {
				UIActionSelector: '',
				token: '',
				list: [], // 查询到的库存
				brand: [], // 品牌
				specification: [], // 规格
				pattern: [], // 花纹
				// chooseAndtion: [], // 选中的条件
				inventory: 0,
				current: 1,
				size: 10,
				totalPages: 1,
				frist : 1,
				chooseGG : {},
				chooseHW : {},
				choosePP : {},
			},
			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.UIActionSelector = api.require('UIActionSelector');
					this.token = $api.getStorage('token');
					this.getStore();
				},
				configs : function(){
					var _this = this;
					this.frist = 2;
					this.configDownAndPull("mescroll", function(mescroll) {
						_this.page = 1;
						_this.getStore(mescroll);
					}, function(mescroll) {
						if (_this.page < _this.totalPages) {
							_this.page = _this.page + 1;
							_this.getStore(mescroll, 1);
						} else {
							mescroll.endSuccess(_this.pageSize, false);
						}
					})
				},
				//  获取库存列表
				getStore: function(mescroll) {
					var url = "checkFactoryStoreUrl",
						_this = this,
						data = {
							token: this.token,
							brand : this.choosePP.name,
							page: this.page,
							pagesize: this.pagesize,
							specification : this.chooseGG.name,
							pattern : this.chooseHW.name,
							type: 'body',
							url: 'json'
						};
					this.$post(url, data, function(ret) {
						if (ret.code == 0 || ret.code == '0') {
							if (mescroll) {
								mescroll.endSuccess(_this.size, true);
							}
							if (ret.data.data != null) {
								_this.list = _this.current == 1 ? ret.data.data.material : _this.list.concat(ret.data.data.material);
								_this.inventory = ret.data.inventory;
								if(_this.frist == 1){
									_this.$nextTick(function(){
										_this.configs();
									})
								}
								var brand = new Array();
								ret.data.data.brand.map(function(item, index) {
									brand.push({
										name: item.brand
									})
								});
								_this.brand = brand;
								var specification = new Array();
								ret.data.data.specification.map(function(item, index) {
									specification.push({
										name: item
									})
								})
								_this.specification = specification;
								var pattern = new Array()
								ret.data.data.pattern.map(function(item, index) {
									pattern.push({
										name: item
									})
								});
								_this.pattern = pattern;
							} else {
								_this.list = [];
								_this.pattern = [];
								_this.specification = [];
								_this.pattern = [];
							}
						}
					})
				},
				//  开始筛选
				getStoreByAnnation: function(index) {
					var list = ["brand", "specification", "", "pattern"],
						_this = this;
					var chooseAn = eval("this." + list[index]);
					this.chooseRegion(this.UIActionSelector, 1, chooseAn, function(ret) {
						if (ret.eventType == 'ok') {
							_this.$set(_this.chooseAndtion, index, ret.level1);
						}
					})
				},
				//  查看详情
				lookInfo: function() {
					this.goWin('kucunxiangqing_win', 'kucunxiangqing_win.html', '');
				},
				chooseAndtion : function(type){
					var types = ["brand","specification","pattern"],_this = this;
					var data = eval('this.' + types[type]);
					this.chooseRegion(this.UIActionSelector,1,data,function(ret){
						if(ret.eventType == 'ok'){
							if(type == 0){
								_this.choosePP = ret.selectedInfo[0]
							}else if(type == 1){
								_this.chooseGG = ret.selectedInfo[0]
							}else{
								_this.chooseHW = ret.selectedInfo[0]
							}
						}
            _this.getStore();
					})
				}
			},
			mounted: function() {
				this.init();
			}
		})
	}
</script>
</html>