sailun
/
sailun-shop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
							<!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>
    .chukujilu {
      background-color: #fff !important;
    }
    .chukujilu .boxs {
      padding-top: 0px
    }
    .mescroll{
      position: relative;
    }
</style>
<body>
    <div id="app" v-cloak>
        <div class="pageView chukujilu flex col filterpage">
          <div class="leiji flex a-center j-center" style="background-color : #00a0ea !important;flex-wrap: wrap;">
    				库存总量：
    				<h4> {{ totalStock }} </h4>
    			</div>
          <div class="filterpage-container flex jlr">
            <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 filter-text" v-on:click="chooseAndtion(2)" style="width:15%;padding-right: 10px;">
              {{ chooseHW.name || '花纹' }} <i class="iconfont icon-xia"></i>
            </div>
          </div>
            <div class="boxs mescroll-touch-y mescroll" style="padding-left: 0; padding-right: 0; padding-bottom:.5rem;" id="mescroll">
                <div class="rukuTongji" v-show="stockList.length > 0">
                   <!-- flex j-center -->
                    <div class="rukuTongjiHead flex j-center">
                       <!-- flex a-center j-center -->
                        <div class="item flex a-center j-center">物料</div>
                        <div class="item flex a-center j-center">库存</div>
                        <!-- 20201023微信下单功能 -->
                        <!-- <div class="item flex a-center j-center">价格(元)</div>
                        <div class="item flex a-center j-center" style="width:8rem;flex-shrink:0">是否开放<br/>微信下单</div> -->
                          <!-- 20201023 -->
                    </div>
                    <div class="rukuTongjiBody">
                        <!-- 20201023微信下单功能 -->
                         <!-- @click="goSetting(item)" -->
                        <div class="item flex a-center j-center" v-for="(item,index) in stockList">
                            <div class="fx1">{{item.maktx}}</div>
                            <div class="fx1">{{ item.stock }}</div>
                              <!-- 20201023微信下单功能 -->
                            <!-- <div class="fx1">{{item.price}}</div>
                            <div class="fx1">{{ item.isopenwechatorder | formatIsopen }}</div> -->
                              <!-- 20201023 -->
                        </div>
                    </div>
                </div>
                <div v-show="stockList.length == 0" style="text-align:center;overflow: auto;">
                  <img src="./image/noData.png" style="margin:1rem 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: {
    userId: '', // 绑定的经销商kunnr
    brand: '', // 品牌
    spec: '', // 规格
    pattern: '', // 花纹
    starttime: '', // 开始时间
    endtime: '', // 结束时间
    page: 1,
    pagesize: 10,
    totalPages : 1,
    info: {}, // 包含总库存，筛选品牌，规格，库存
    stockList: [], // 库存列表
    userId : '',
    totalStock : 0,
    // 筛选查询
    mescroll: '',
    keyword: '',

    brandList: [],
    guigeList: [],
    huawenList: [],
    choosePP: {}, // 选择品牌
    chooseGG: {}, // 选择规格
    chooseHW: {}, // 选择花纹
    UIActionSelector: '',
  },
  filters : {
    amountToStr : function(val){
      if(parseInt(val) > 10){
        return '充足'
      }else if(parseInt(val) <= 10 && parseInt(val) > 1){
        return '紧张';
      }else {
        return '缺货';
      }
    },
    formatIsopen: function(params){
      switch (params) {
        case '1':
          return "是"
          break;
        default:
            return "否"
      }
    },
  },
  watch: {
    keyword: function(nw, od) {
      this.page = 1;
      this.getStockList();
    }
  },
  methods: {
    init: function() {
      var _this = this;
      this.UIActionSelector = api.require("UIActionSelector");
      this.userId = $api.getStorage('userid');
      this.getStockList();
      this.getWuliaoAntion();
      //  配置上拉加载下拉刷新
      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);
           }
      })
    },
    //   配置一下上拉和下拉
    configs: function() {
      var _this = this;
      this.frist = 2;
      this.configDownAndPull("mescroll", function(mescroll) {
        _this.mescroll = mescroll;
        _this.page = 1;
        _this.getStoreList(mescroll);
      }, function(mescroll) {
        if (_this.page < _this.totalPages) {
          _this.page = _this.page + 1;
          _this.getStockList(mescroll, 1);
        } else {
          mescroll.endSuccess(_this.size, false);
        }
      });
    },
    //  选择筛选条件
    chooseAndtion: function(type) {
      var types = ["brandList", "guigeList", "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.getStockList();
      })
    },
    //   获取筛选条件
    getWuliaoAntion: function() {
      var url = "getWuliaoAntionU",
        _this = this;
      var data = {
        storeId: this.userId,
        url: 'json',
        type: 'body'
      }
      this.$post(url, data, function(ret) {
        if (ret.code == 0 || ret.code == '0') {
          var brands = [{
              name: '全部'
            }],
            specs = [{
              name: '全部'
            }],
            pattern = [{
              name: '全部'
            }]
          ret.data.pingpaiList = ret.data.pingpaiList == null ? [] : ret.data.pingpaiList;
          ret.data.pingpaiList.map(function(pp, index) {
            brands.push({
              name: pp
            })
          })
          _this.brandList = brands;
          ret.data.guigeList = ret.data.guigeList == null ? [] : ret.data.guigeList;
          ret.data.guigeList.map(function(gg, index) {
            specs.push({
              name: gg
            })
          })
          _this.guigeList = specs;
          ret.data.huawenList = ret.data.huawenList == null ? [] : ret.data.huawenList;
          ret.data.huawenList.map(function(hw, index) {
            pattern.push({
              name: hw
            })
          })
          _this.pattern = pattern;
          if (_this.frist == 1) {
            _this.$nextTick(function() {
              _this.configs();
            })
          }
        }
      })
    },


    //  获取库存列表
    getStockList: function(mescroll) {
      var data = {
          "storeId": this.userId,
          "brand": this.brand,
          "specs": this.spec,
          "pattern": this.chooseHW.name == '全部' ? '' : this.chooseHW.name,//花纹
          "guige": this.keyword,//规格
          "startTime": this.starttime,
          "endTime": this.endtime,
          "size": this.page,
          "pageSize": this.pagesize,
          "url": "json",
          "type": "body"
        },
        _this = this,
        url = "searchKuCunU";
      this.$post(url, data, function(ret) {
        if (ret.code == 0 || ret.code == '0') {
          if(mescroll){
            mescroll.endSuccess(_this.pagesize,true);
          }
          _this.totalStock = ret.stock;
          _this.totalPages = ret.pageCount;
          var brand = new Array(),
            pattern = new Array(),
            spec = new Array();
          _this.stockList = ret.Data == null ? [] : ( _this.page == 1 ? ret.Data : _this.stockList.concat(ret.Data));
        }
      })
    },
    //  查看详情
    lookInfo: function() {
      this.goWin('kucunxiangqing_win', 'kucunxiangqing_win.html', '');
    },
    // 进入到轮胎信息配置页
    goSetting: function(params){
      this.goWin('tireInfoSetting_win', 'tireInfoSetting_win.html', {maktx:params.maktx,brand:params.brand,specs:params.specs,pattern:params.pattern});
    }
  },
  mounted: function() {
    var _this = this;
    this.init();
    this.addEvent("refreshPage",function(){
        _this.init();
    })
  }
})
}
</script>

</html>