123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613 |
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>screening</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
- <meta name="apple-touch-fullscreen" content="yes">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <meta http-equiv="x-rim-auto-match" content="none"/>
- <meta name="HandheldFriendly" content="true"/>
- <link type="text/css" rel="stylesheet" href="../../css/aui.css">
- <link type="text/css" rel="stylesheet" href="../../css/html.css">
- <link type="text/css" rel="stylesheet" href="../../css/shaixuan.css">
- <link type="text/css" rel="stylesheet" href="../../css/base.css">
- <link type="text/css" rel="stylesheet" href="../../css/html.css">
- <script src="../../script/jquery.min.js"></script>
- <script src="../../script/shaixuan.js"></script>
- <style>
- .aui-list-item-right {
- /*color: #067974 !important;*/
- border: 1px solid #067974;
- padding: 1px 3px;
- border-radius: 5px;
- }
- .aui-list .aui-list-item-text {
- font-size: 0.6rem;
- }
- .aui-content {
- z-index: -1;
- /*margin-top: 2.05rem;*/
- }
- .aui-media-list .aui-list-item-inner {
- padding-top: 0.5rem;
- padding-bottom: 0.3rem;
- }
- .aui-list-item-arrow:before {
- z-index: 0;
- }
- .aui-line {
- display: flex;
- display: -webkit-flex;
- float: right;
- font-size: 0.6rem;
- color: #757575;
- margin-top: -5px;
- width: 4rem;
- }
- .aui-btn-buy {
- border: 1px solid #08acee;
- color: #08acee;
- padding: 2px 7px;
- border-radius: 5px;
- }
- .aui-btn-addCar {
- /*padding: 2px 7px;*/
- border-radius: 5px;
- /*margin-left: 10px;*/
- border: 1px solid #00787B;
- padding: 3px 5px;
- color: #00787B;
- }
- [v-cloak] {
- display: none;
- }
- .aui-background {
- background-color: #000;
- opacity: 0.2;
- z-index: 3;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- .Sort-height {
- top: 0;
- }
- .aui-sort-bg {
- position: fixed;
- width: 100%;
- height: 100%;
- overflow: hidden;
- top: 0;
- left: 0;
- background-color: #000;
- opacity: 0.2;
- }
- .zmq-card-nomal {
- margin-top: 0;
- }
- .aui-list {
- background-color: #fff;
- border-radius: 5px
- }
- .aui-content, .aui-card-list, .aui-card-list-content {
- background-color: transparent !important;
- }
- .aui-list {
- border-top: 0px !important;
- }
- @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
- .aui-list .aui-list-item {
- background-image: none;
- }
- }
- @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
- .aui-list {
- background-image: none;
- }
- }
- .slide {
- max-height: 200px;
- height: auto;
- }
- .slide li a {
- font-size: 0.6rem;
- }
- .aui-content {
- padding-bottom: 3rem;
- padding-top: 100px;
- }
- #screen {
- position: fixed;
- z-index: 105;
- top: 50px;
- left: 0;
- width: 100%
- }
- .aui-shopCar-bg {
- width: 3.2rem;
- height: 3.2rem;
- }
- .aui-shop-badge {
- margin-top: -8px
- }
- .zmq-car-text {
- margin-top: 9px;
- }
- .aui-btn-addCar {
- padding: 3px 7px;
- border-radius: 5px;
- margin-left: 10px;
- margin-top: 10px;
- }
- .zmq-total {
- position: fixed;
- width: 100%;
- height: 50px;
- box-sizing: border-box;
- background-color: #fff;
- z-index: 105;
- border: 1px solid #ddd;
- padding-left: 5%;
- line-height: 50px;
- }
- </style>
- </head>
- <body>
- <div id="app" v-cloak>
- <div class="zmq-model-bg" v-show="showModal"></div>
- <div class="zmq-total zmq-text-font-07" v-on:click="startChoose">
- 已选条件:<em v-show="doneList.brand == doneList.gg == doneList.hw == ''" class="zmq-text-msg">请选择规格花纹</em><em class="zmq-margin-level-5 zmq-text-msg">{{doneList.brand}}</em><em class="zmq-margin-level-5 zmq-text-msg">{{doneList.gg}}</em><em class="zmq-margin-level-5 zmq-text-msg">{{doneList.hw}}</em>
- </div>
- <!--<div class="zmq-model-bg" v-show="showModal" v-on:click="hideList"></div>-->
- <section class="job-module" id="screen">
- <dl class="retrie">
- <dt>
- <a class="zmq-text-done zmq-text-font-07 zmq-btn-border-done" id="choosejjsid" href="javascript:;">经销商 <i class="aui-iconfont aui-icon-down"></i></a>
- <div class="zmq-text-font-06 zmq-text-msg" style="height: 50px;line-height: 50px;background-color: #fff" v-on:click="choosejjs">
- {{chooseSupplierName}}
- </div>
- <!--<a class="zmq-text-done zmq-text-font-07" href="javascript:;">花纹</a>
- <a class="zmq-text-done zmq-text-font-07" href="javascript:;">尺寸</a>-->
- </dt>
- <dd class="area">
- <ul class="slide downlist">
- <li v-for="(i,index) in supplierList" v-on:click="doneThisSupplier(i.agentId,i.agentDto.agentName)">
- <a href="#">{{i.agentDto.agentName}}</a>
- </li>
- </ul>
- </dd>
- </dl>
- </section>
- <!-- 轮胎列表 -->
- <section class="aui-content">
- <div class="aui-card-list zmq-card-nomal">
- <div class="aui-card-list-content ">
- <ul class="aui-list aui-media-list zmq-margin-top-10" v-for="(item,index) in stockList" v-on:click.stop = "addCar(index,'car')">
- <li class="aui-list-item aui-list-item-middle" >
- <div class="aui-media-list-item-inner">
- <div class="aui-list-item-media" style="width: 4rem;">
- <img v-lazy ="item.simple_img_path" />
- </div>
- <div class="aui-list-item-inner">
- <div class="aui-list-item-text">
- <div class="aui-list-item-title zmq-text-msg aui-font-size-14" style="max-width: 75%;line-height: 0.8rem">
- {{item.specs}} {{item.pattern}}
- <!--8kkskskks-->
- </div>
- <div class="aui-list-item-right zmq-bg-noraml zmq-text-white" style="padding-top : 2px;margin-right: 10px;">
- <!-- <!--长荣-->
- {{item.brand}}
- </div>
- </div>
- <div class="aui-list-item-text zmq-margin-top-5">
- {{item.material_name}}
- <!--sasdasd-->
- </div>
- <!-- <div class="aui-list-item-text zmq-width-80 zmq-margin-top-5">
- </div>-->
- <div class="aui-line">
- <!--<div class="aui-btn-buy" v-on:click.stop = "addCar(index,'down')">
- 立即下单
- </div>-->
- <div class="aui-btn-addCar">
- 加入订单 <!--<img src="../../image/drawable-xhdpi/shopCar.png" />-->
- </div>
- </div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <!-- 没有数据显示 -->
- <img v-show="hasData == false" src="../../image/nodata.png" class="zmq-img-nodata" style="margin-top: 10vh"/>
- <div v-show="upLock == false" class="zmq-text-explain zmq-margin-top-10 zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
- 已无更多数据
- </div>
- </section>
- <!-- 添加购物车 -->
- <shopcar v-bind:badge = "badge"></shopcar>
- <!--<div class="aui-shopCar-bg" v-on:click="goToCar"><div class="aui-shop-badge">1</div><div class="zmq-car-text">订单<br />维护</div></div>-->
- </div>
- </body>
- <script src="../../script/api.js" type="text/javascript"></script>
- <script type="text/javascript" src="../../script/aui-scroll.js"></script>
- <script type="text/javascript" src="../../script/vue.js"></script>
- <script type="text/javascript" src="../../script/vue-lazyload.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() {
- var h = api.pageParam.h;
- new Vue({
- el : '#app',
- data : {
- retariler_id : '',
- // 获取经销商列表
- getSupplierUrl : 'getSupplierListUrl',
- supplierList : [],
- chooseSupplierName : '请先选择一个经销商',
- // 根据经销商获取库存
- getStockListUrl : 'checkStoreUrl',
- stockList : [],
- // 商品列表
- // stockList : [{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // },{
- // specs : '7.50R16LT',
- // pattern : 'JT456',
- // brand : '金宇',
- // materialName : '外胎:2001933202191'
- // }],
- // 是否有数据
- hasData : true,
- // 购物车数量
- badge : 0,
- // 是否显示背景
- chooseInfo : false,
- // 是否显示模板
- showModal : false,
- // ss : [{},{},{},{},{},{},{},{}]
- // 分页
- upLock : true,
- current : 1,
- total : 1,
- agentId : '',
- searchAttion : [{
- name : '规格',
- key : [],
- type : 'input',
- value : '',
- }, {
- name : '花纹',
- key : [],
- type : 'input',
- value : '',
- }, {
- name : '品牌',
- key : [],
- type : 'radio',
- value : '',
- }],
- // 获取门店信息
- getMDInfoUrl : 'getMDInfo',
- // 筛选条件
- doneList : {
- brand : '',
- gg : '',
- hw : ''
- },
- },
- methods : {
- init : function() {
- // 配置筛选
- var _this = this;
- this.retariler_id = $api.getStorage("retailerid");
- this.getSupplierList();
- this.getMD();
- this.getCarNum(this.retariler_id, function(num) {
- _this.badge = num.length;
- })
- // 刷新购物车数量
- this.addEvent("refushCar", function() {
- _this.getCarNum(_this.retariler_id, function(num) {
- _this.$set(_this, "badge", num.length)
- })
- })
- this.configHeaderRefush(function() {
- if (_this.agentId != '') {
- _this.downData = 'down';
- _this.upLock = true;
- _this.current = 1;
- _this.getSupplierStore();
- } else {
- api.refreshHeaderLoadDone();
- }
- })
- this.configBottomRefush(function(status) {
- // 开启上拉加载
- if (_this.hasData == true) {
- // 开启上拉加载
- if (_this.total > _this.current) {
- _this.downData = 'up';
- _this.current = _this.current + 1;
- _this.getSupplierStore();
- } else {
- // 上啦没有数据了
- _this.upLock = false;
- }
- }
- })
- // 注册监听,添加筛选功能
- this.addEvent("kucunjjs_body", function(extra) {
- if (extra.value.done == true) {
- _this.doneList = extra.value;
- if (_this.agentId == '') {
- api.toast({
- msg : '请先选择经销商'
- });
- } else {
- _this.current = 1;
- _this.downData = 'down';
- _this.getSupplierStore();
- }
- }
- _this.configDownChoose(_this.searchAttion, extra);
- })
- },
- // 点击选择筛选
- startChoose : function() {
- var _this = this;
- var data = {
- value : {
- f : 'kucunjjs_body',
- h : h
- }
- }
- _this.configDownChoose(_this.searchAttion, data);
- },
- // 获取个人信息,通过个人信息获取签约的轮胎品牌
- getMD : function() {
- var data = {
- id : this.retariler_id,
- url : 'json',
- type : 'body'
- }, _this = this;
- this.$post(this.getMDInfoUrl, data, function(ret) {
- if (ret.code == 0) {
- var brandList = new Array();
- ret.retailerDto.brandDtoList.map(function(b, i) {
- brandList.push(b.brandName);
- })
- _this.searchAttion[2].key = brandList;
- }
- })
- },
- // 点击选择经销商
- choosejjs : function() {
- var _this = this;
- var $t = $('.choosejjsid');
- if ($t.hasClass('up')) {
- $(".retrie dt a").removeClass('up');
- $('.downlist').hide();
- $('.mask').hide();
- _this.showModal = false;
- api.setFrameAttr({
- name : api.frameName,
- bounces : true
- });
- } else {
- _this.showModal = true;
- api.setFrameAttr({
- name : api.frameName,
- bounces : false
- });
- $(".retrie dt a").removeClass('up');
- $('.downlist').hide();
- $t.addClass('up');
- $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
- $('.mask').show();
- }
- },
- // 选择了这个经销商
- doneThisSupplier : function(id, name) {
- this.chooseSupplierName = name;
- this.agentId = id;
- this.downData = 'down';
- this.upLock = true;
- this.stockList = new Array();
- this.hideList();
- this.getSupplierStore();
- },
- // 隐藏列表i
- hideList : function() {
- $(".retrie dt a").removeClass('up');
- $('.downlist').hide();
- $('.mask').hide();
- this.showModal = false;
- api.setFrameAttr({
- name : api.frameName,
- bounces : true
- });
- },
- // 获取经销商下的库存
- getSupplierStore : function() {
- var data = {
- agentId : this.agentId,
- current : this.current,
- url : 'json',
- type : 'body',
- }, _this = this;
- if (this.doneList.brand != "") {
- this.extend(data, {
- brand : this.doneList.brand
- })
- }
- if (this.doneList.gg != "") {
- this.extend(data, {
- specs : this.doneList.gg,
- })
- }
- if (this.doneList.hw != "") {
- this.extend(data, {
- pattern : this.doneList.hw,
- })
- }
- this.$post(this.getStockListUrl, data, function(ret) {
- if (ret.code == 0) {
- _this.total = ret.page.pages;
- if (_this.downData == 'up') {
- _this.stockList = _this.stockList.concat(ret.page.records);
- } else {
- _this.stockList = ret.page.records;
- if (_this.stockList.length > 0) {
- _this.hasData = true;
- } else {
- _this.hasData = false;
- }
- }
- }
- })
- },
- // 配置筛选
- config : function() {
- var _this = this;
- $('.retrie dt a').click(function() {
- var $t = $(this);
- if ($t.hasClass('up')) {
- $(".retrie dt a").removeClass('up');
- $('.downlist').hide();
- $('.mask').hide();
- _this.showModal = false;
- api.setFrameAttr({
- name : api.frameName,
- bounces : true
- });
- } else {
- _this.showModal = true;
- api.setFrameAttr({
- name : api.frameName,
- bounces : false
- });
- $(".retrie dt a").removeClass('up');
- $('.downlist').hide();
- $t.addClass('up');
- $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
- $('.mask').show();
- }
- });
- // $(".area ul li a:contains('" + $('#area').text() + "')").addClass('selected');
- // $(".wage ul li a:contains('" + $('#wage').text() + "')").addClass('selected');
- },
- // 获取经销商列表
- getSupplierList : function() {
- var data = {
- retailer_id : this.retariler_id,
- url : 'json',
- type : 'body'
- }, _this = this;
- this.$post(this.getSupplierUrl, data, function(ret) {
- if (ret.code == 0 || ret.code == '0') {
- _this.supplierList = ret.list;
- _this.config();
- }
- })
- },
- // 获取库存
- getStock : function() {
- var data = {
- retailerId : this.retariler_id
- }, _this = this;
- this.$post(this.getStockUrl, data, function(ret) {
- if (ret.code == 0 || ret.code == '0') {
- _this.stockList = ret.page.records;
- if (_this.stockList.length == 0) {
- _this.hasData = false;
- }
- }
- })
- },
- // 筛选条件
- chooseAcction : function() {
- api.sendEvent({
- name : 'kucunjjs_win',
- extra : {
- }
- });
- },
- // 查看详情
- lookInfo : function(id) {
- var param = {
- id : id,
- }
- this.goWin('storeInfo_win', '../store/storeInfo_win.html', param);
- },
- // 添加商品到购物车 materialId materialCode retailerId amount -- 选择产品规格
- addCar : function(index, type) {
- var param = {
- shopInfo : this.stockList[index],
- type : type,
- agentId : this.agentId
- }
- this.sendEvent("showInfo", param);
- },
- demo : function(e) {
- e.preventDefault()
- }
- },
- mounted : function() {
- Vue.use(VueLazyload,{
- preLoad: 1.3,
- error: '../../image/noimg.png',
- loading: '../../image/load.gif',
- attempt: 1,
- });
- this.init();
- }
- })
- }
- </script>
- </html>
|