Commit 5fbdaea928805c4841d438941fae11d3993158ed
1 parent
47696d43
修改切换样式
Showing
3 changed files
with
273 additions
and
110 deletions
pages/goods/categoryList/categoryList.js
| 1 | var t = getApp(), e = t.request, oo = t.globalData.setting; | 1 | var t = getApp(), e = t.request, oo = t.globalData.setting; |
| 2 | - | ||
| 3 | var i = function (i) { | 2 | var i = function (i) { |
| 4 | return i && i.__esModule ? i : { | 3 | return i && i.__esModule ? i : { |
| 5 | default: i | 4 | default: i |
| @@ -7,65 +6,87 @@ var i = function (i) { | @@ -7,65 +6,87 @@ var i = function (i) { | ||
| 7 | }(require("../../../utils/LoadMore.js")), a = new i.default(), ut = require("../../../utils/util.js"); | 6 | }(require("../../../utils/LoadMore.js")), a = new i.default(), ut = require("../../../utils/util.js"); |
| 8 | //t = i,e = t | 7 | //t = i,e = t |
| 9 | Page({ | 8 | Page({ |
| 10 | - data: { | ||
| 11 | - is_date:true, | ||
| 12 | - scrollHeight: 0, | ||
| 13 | - currentTab:-1, | ||
| 14 | - abc:0, | ||
| 15 | - windowHeight:0, | ||
| 16 | - windowWidth: 0, | ||
| 17 | - eachLetterHeight:0, | ||
| 18 | - lettersPosition:0, | ||
| 19 | - catelist:null, //分类读取 | ||
| 20 | - nationlist: null,//国家读取 | ||
| 21 | - groups: null, //品牌读取 | ||
| 22 | - iurl: oo.imghost,//图片地址 | ||
| 23 | - | ||
| 24 | - // 当前选择的导航字母 | ||
| 25 | - selected: 0, | ||
| 26 | - // 选择字母视图滚动的位置id | ||
| 27 | - scrollIntoView: 'A', | ||
| 28 | - // 导航字母 | ||
| 29 | - letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', | ||
| 30 | - 'U', 'V', 'W', 'X', 'Y', 'Z'], | ||
| 31 | - //控制新旧分类版本 | ||
| 32 | - is_used_share:0, | ||
| 33 | - //国家的控制属性 | ||
| 34 | - is_country:1, | ||
| 35 | - //品牌的控制属性 | ||
| 36 | - is_brand:1, | ||
| 37 | - //选择分类的控制属性 | ||
| 38 | - select_classify_on:223, | ||
| 39 | - index:223, | ||
| 40 | - classify_name:"国家",//项目类型 | ||
| 41 | - brand_list:null,//品牌列表 | ||
| 42 | - | ||
| 43 | - one_level_classify:[],// 新的版本左边的边分类1级 | ||
| 44 | - is_level_three:0,//判断有没有3级 | ||
| 45 | - cat_id:0, | ||
| 46 | - pl_timer: null,//只有品类的定时器 | ||
| 47 | - is_pl_time:0, | ||
| 48 | - requestData:null, //风格三的商品数据列表 分页 | ||
| 49 | - stylePage:1, //商品列表分页标识 | ||
| 50 | - | ||
| 51 | - //风格三使用 | ||
| 52 | - url: t.globalData.setting.imghost, | ||
| 53 | - currentPage: 1, | ||
| 54 | - requestData: null, | ||
| 55 | - allData: null, | ||
| 56 | - openFilterModal: !1, | ||
| 57 | - baseUrl: "api/weshop/goods/page?1=1&cat_id=1&parent_id=0&orderField=goods_id&orderType=desc&page=1&is_mainshow=1&isonsale=1&store_id="+oo.stoid+"&is_recommend=1", | ||
| 58 | - requestUrl: "", | ||
| 59 | - tabname: "goods_id", //排序的字段 | ||
| 60 | - adname: "desc", //升降的字段 | ||
| 61 | - is_new: 0, | ||
| 62 | - is_hot: 0, | ||
| 63 | - msgStatus:false, //页面显示暂无数据状态 | ||
| 64 | - countDownNum: 3, | ||
| 65 | - timer: '', //定时器 | ||
| 66 | - lastMsg:false, | ||
| 67 | - toView:"", | ||
| 68 | - }, | 9 | + data: { |
| 10 | + is_date:true, | ||
| 11 | + scrollHeight: 0, | ||
| 12 | + currentTab:-1, | ||
| 13 | + abc:0, | ||
| 14 | + windowHeight:0, | ||
| 15 | + windowWidth: 0, | ||
| 16 | + eachLetterHeight:0, | ||
| 17 | + lettersPosition:0, | ||
| 18 | + catelist:null, //分类读取 | ||
| 19 | + nationlist: null,//国家读取 | ||
| 20 | + groups: null, //品牌读取 | ||
| 21 | + iurl: oo.imghost,//图片地址 | ||
| 22 | + | ||
| 23 | + // 当前选择的导航字母 | ||
| 24 | + selected: 0, | ||
| 25 | + // 选择字母视图滚动的位置id | ||
| 26 | + scrollIntoView: 'A', | ||
| 27 | + // 导航字母 | ||
| 28 | + letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', | ||
| 29 | + 'U', 'V', 'W', 'X', 'Y', 'Z'], | ||
| 30 | + //控制新旧分类版本 | ||
| 31 | + is_used_share:0, | ||
| 32 | + //国家的控制属性 | ||
| 33 | + is_country:1, | ||
| 34 | + //品牌的控制属性 | ||
| 35 | + is_brand:1, | ||
| 36 | + //选择分类的控制属性 | ||
| 37 | + select_classify_on:223, | ||
| 38 | + index:223, | ||
| 39 | + classify_name:"国家",//项目类型 | ||
| 40 | + brand_list:null,//品牌列表 | ||
| 41 | + | ||
| 42 | + one_level_classify:[],// 新的版本左边的边分类1级 | ||
| 43 | + is_level_three:0,//判断有没有3级 | ||
| 44 | + cat_id:0, | ||
| 45 | + pl_timer: null,//只有品类的定时器 | ||
| 46 | + is_pl_time:0, | ||
| 47 | + requestData:null, //风格三的商品数据列表 分页 | ||
| 48 | + stylePage:1, //商品列表分页标识 | ||
| 49 | + | ||
| 50 | + //风格三使用 | ||
| 51 | + url: t.globalData.setting.imghost, | ||
| 52 | + currentPage: 1, | ||
| 53 | + allData: null, | ||
| 54 | + openFilterModal: !1, | ||
| 55 | + baseUrl: "api/weshop/goods/page?1=1&cat_id=1&parent_id=0&orderField=goods_id&orderType=desc&page=1&is_mainshow=1&isonsale=1&store_id="+oo.stoid+"&is_recommend=1", | ||
| 56 | + requestUrl: "", | ||
| 57 | + tabname: "goods_id", //排序的字段 | ||
| 58 | + adname: "desc", //升降的字段 | ||
| 59 | + is_new: 0, | ||
| 60 | + is_hot: 0, | ||
| 61 | + msgStatus:false, //页面显示暂无数据状态 | ||
| 62 | + countDownNum: 3, | ||
| 63 | + timer: '', //定时器 | ||
| 64 | + lastMsg:false, | ||
| 65 | + toView:"", | ||
| 66 | + is_show_class:false,//是否添加新样式 | ||
| 67 | + status_show:0, | ||
| 68 | + currentTab: 0, //预设当前项的值 | ||
| 69 | + }, | ||
| 70 | + | ||
| 71 | + | ||
| 72 | + //判断当前滚动超过一屏时，设置tab标题滚动条。 | ||
| 73 | + checkCor: function() { | ||
| 74 | + let that = this; | ||
| 75 | + //这里计算按照实际情况进行修改，动态数据要进行动态分析 | ||
| 76 | + //思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算 | ||
| 77 | + //数据很多可以多次if判断然后进行滚动距离计算即可 | ||
| 78 | + if (that.data.currentTab > 7) { | ||
| 79 | + that.setData({ | ||
| 80 | + scrollTop: 500 | ||
| 81 | + }) | ||
| 82 | + } else { | ||
| 83 | + that.setData({ | ||
| 84 | + scrollTop: 0 | ||
| 85 | + }) | ||
| 86 | + } | ||
| 87 | + }, | ||
| 88 | + | ||
| 89 | + | ||
| 69 | onLoad: function(tt) { | 90 | onLoad: function(tt) { |
| 70 | var that = this; | 91 | var that = this; |
| 71 | that.get_brand(); | 92 | that.get_brand(); |
| @@ -189,10 +210,14 @@ Page({ | @@ -189,10 +210,14 @@ Page({ | ||
| 189 | } | 210 | } |
| 190 | that.setData({ is_level_three: is_lev_thr }); | 211 | that.setData({ is_level_three: is_lev_thr }); |
| 191 | if (is_lev_thr!=1) { | 212 | if (is_lev_thr!=1) { |
| 192 | - that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name, goodslist: item.array }); | ||
| 193 | - } else { | ||
| 194 | - that.setData({ select_classify_on: 0, index: 0, goodslist: arr }); | ||
| 195 | - } | 213 | + that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name,cat_id: item.items.id,goodslist: item.array }); |
| 214 | + console.log("id:="+item.items.id) | ||
| 215 | + that.style(that.data.stylePage,that.data.cat_id); | ||
| 216 | + } else { | ||
| 217 | + that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name,cat_id: item.items.id,goodslist: arr }); | ||
| 218 | + console.log("id:="+item.items.id) | ||
| 219 | + that.style(that.data.stylePage,that.data.cat_id); | ||
| 220 | + } | ||
| 196 | } | 221 | } |
| 197 | else{ | 222 | else{ |
| 198 | that.setData({ select_classify_on: 0, index: 0, goodslist: null,classify_name:item.items.name,is_level_three: 0}); | 223 | that.setData({ select_classify_on: 0, index: 0, goodslist: null,classify_name:item.items.name,is_level_three: 0}); |
| @@ -222,6 +247,12 @@ Page({ | @@ -222,6 +247,12 @@ Page({ | ||
| 222 | } else if (that.data.is_show_pl) { | 247 | } else if (that.data.is_show_pl) { |
| 223 | that.setData({ currentTab: 0 }); | 248 | that.setData({ currentTab: 0 }); |
| 224 | } | 249 | } |
| 250 | + // 获取默认选中的第一个 | ||
| 251 | + if(that.data.is_show_gb && that.data.select_classify_on == 223){ | ||
| 252 | + that.setData({ status_show: 1 }); | ||
| 253 | + }else if(that.data.is_show_pp && that.data.select_classify_on == 220){ | ||
| 254 | + that.setData({ status_show: 2 }); | ||
| 255 | + } | ||
| 225 | }) | 256 | }) |
| 226 | 257 | ||
| 227 | }, | 258 | }, |
| @@ -291,8 +322,18 @@ Page({ | @@ -291,8 +322,18 @@ Page({ | ||
| 291 | } | 322 | } |
| 292 | } | 323 | } |
| 293 | } | 324 | } |
| 294 | - | ||
| 295 | } | 325 | } |
| 326 | + for(var i=0;i<arr.length;i++){ | ||
| 327 | + arr[i]['items']['is_show_class'] = false; | ||
| 328 | + var mobile_name = arr[i]['items']['name'] | ||
| 329 | + if(mobile_name.length > 4){ | ||
| 330 | + arr[i]['items']['name'] = mobile_name.substring(0, 4) | ||
| 331 | + } | ||
| 332 | + } | ||
| 333 | + if(t.data.is_show_pl==1 && t.data.is_show_pp != 1 && t.data.is_show_gb != 1){ | ||
| 334 | + arr[0]['items']['is_show_class'] = true; | ||
| 335 | + } | ||
| 336 | + //console.log(arr) | ||
| 296 | t.setData({one_level_classify:arr}); | 337 | t.setData({one_level_classify:arr}); |
| 297 | 338 | ||
| 298 | } | 339 | } |
| @@ -557,6 +598,37 @@ Page({ | @@ -557,6 +598,37 @@ Page({ | ||
| 557 | }, | 598 | }, |
| 558 | // 新的版本分类点击一级分类 | 599 | // 新的版本分类点击一级分类 |
| 559 | click_classify:function(e){ | 600 | click_classify:function(e){ |
| 601 | + let cur = e.currentTarget.dataset.current; | ||
| 602 | + if (this.data.currentTab == cur) { | ||
| 603 | + return false; | ||
| 604 | + } else { | ||
| 605 | + wx.pageScrollTo({ | ||
| 606 | + scrollTop: 0 | ||
| 607 | + }) | ||
| 608 | + this.setData({ | ||
| 609 | + currentTab: cur, | ||
| 610 | + select_classify_on:cur | ||
| 611 | + }) | ||
| 612 | + this.checkCor(); | ||
| 613 | + } | ||
| 614 | + // if(e.currentTarget.dataset.index == 223){ | ||
| 615 | + // this.setData({ status_show: 1}); | ||
| 616 | + // }else if(e.currentTarget.dataset.index == 220){ | ||
| 617 | + // this.setData({ status_show: 2}); | ||
| 618 | + // }else{ | ||
| 619 | + // this.setData({ status_show: 0}); | ||
| 620 | + // } | ||
| 621 | + var arr2 = this.data.one_level_classify | ||
| 622 | + for(var i=0;i<arr2.length;i++){ | ||
| 623 | + if(i == e.currentTarget.dataset.index){ | ||
| 624 | + arr2[i]['items']['is_show_class'] = true | ||
| 625 | + }else{ | ||
| 626 | + arr2[i]['items']['is_show_class'] = false | ||
| 627 | + } | ||
| 628 | + } | ||
| 629 | + this.setData({ one_level_classify: arr2}); | ||
| 630 | + //this.data.one_level_classify[e.currentTarget.dataset.index]['items']['is_show_class'] = true | ||
| 631 | + console.log(e.currentTarget.dataset.index) | ||
| 560 | clearInterval(this.data.timer); | 632 | clearInterval(this.data.timer); |
| 561 | this.setData({ countDownNum: 3, stylePage: 1, scrollTop: 0}); | 633 | this.setData({ countDownNum: 3, stylePage: 1, scrollTop: 0}); |
| 562 | this.data.ishaf_three = 0; | 634 | this.data.ishaf_three = 0; |
| @@ -565,12 +637,13 @@ Page({ | @@ -565,12 +637,13 @@ Page({ | ||
| 565 | var cid = e.currentTarget.dataset.cid; | 637 | var cid = e.currentTarget.dataset.cid; |
| 566 | var pid = e.currentTarget.dataset.pid; | 638 | var pid = e.currentTarget.dataset.pid; |
| 567 | var arr = e.currentTarget.dataset.arr; | 639 | var arr = e.currentTarget.dataset.arr; |
| 568 | - console.log("cid:=" + cid) | 640 | + console.log("cid:=" + name) |
| 569 | if (indexs == 220) { this.get_brand(); } | 641 | if (indexs == 220) { this.get_brand(); } |
| 570 | //==2的时候 请求数据为商品，不为分类 | 642 | //==2的时候 请求数据为商品，不为分类 |
| 571 | if (this.data.is_used_share == 2) { | 643 | if (this.data.is_used_share == 2) { |
| 572 | - this.style(this.data.stylePage, cid) | ||
| 573 | - this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, cat_id: cid,lastMsg: false, }); | 644 | + this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, cat_id: cid,lastMsg: false, }); |
| 645 | + console.log("edqdqw:="+this.data.select_classify_on) | ||
| 646 | + this.style(this.data.stylePage, cid) | ||
| 574 | }else{ | 647 | }else{ |
| 575 | if (arr != "undefined" && arr != undefined) { | 648 | if (arr != "undefined" && arr != undefined) { |
| 576 | if (arr.length == 0) { | 649 | if (arr.length == 0) { |
| @@ -588,10 +661,10 @@ Page({ | @@ -588,10 +661,10 @@ Page({ | ||
| 588 | this.setData({ is_level_three: is_lev_thr }); | 661 | this.setData({ is_level_three: is_lev_thr }); |
| 589 | 662 | ||
| 590 | if (this.data.is_level_three != 1) { | 663 | if (this.data.is_level_three != 1) { |
| 591 | - this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, goodslist: arr }); | ||
| 592 | - } else { | ||
| 593 | - this.setData({ select_classify_on: indexs, index: indexs, goodslist: arr }); | ||
| 594 | - } | 664 | + this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, goodslist: arr }); |
| 665 | + } else { | ||
| 666 | + this.setData({ select_classify_on: indexs, index: indexs, goodslist: arr }); | ||
| 667 | + } | ||
| 595 | } | 668 | } |
| 596 | } | 669 | } |
| 597 | this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, cat_id: cid, stylePage: 1,lastMsg: false,}); | 670 | this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, cat_id: cid, stylePage: 1,lastMsg: false,}); |
| @@ -756,6 +829,8 @@ Page({ | @@ -756,6 +829,8 @@ Page({ | ||
| 756 | if (page != 1) { | 829 | if (page != 1) { |
| 757 | var dataArray = s.data.one_level_classify | 830 | var dataArray = s.data.one_level_classify |
| 758 | var index = s.data.index | 831 | var index = s.data.index |
| 832 | + dataArray[index]['items']['is_show_class'] = false | ||
| 833 | + dataArray[index+1]['items']['is_show_class'] = true | ||
| 759 | console.log(dataArray[index + 1]['items']) | 834 | console.log(dataArray[index + 1]['items']) |
| 760 | s.setData({ | 835 | s.setData({ |
| 761 | msgStatus: true, | 836 | msgStatus: true, |
| @@ -763,7 +838,8 @@ Page({ | @@ -763,7 +838,8 @@ Page({ | ||
| 763 | index: index + 1, | 838 | index: index + 1, |
| 764 | select_classify_on: index + 1, | 839 | select_classify_on: index + 1, |
| 765 | cat_id: dataArray[index + 1]['items']['id'], | 840 | cat_id: dataArray[index + 1]['items']['id'], |
| 766 | - classify_name: dataArray[index + 1]['items']['name'] | 841 | + classify_name: dataArray[index + 1]['items']['name'], |
| 842 | + one_level_classify: dataArray | ||
| 767 | }); | 843 | }); |
| 768 | s.style(s.data.stylePage, dataArray[index + 1]['items']['id']) | 844 | s.style(s.data.stylePage, dataArray[index + 1]['items']['id']) |
| 769 | }else{ | 845 | }else{ |
| @@ -798,12 +874,15 @@ Page({ | @@ -798,12 +874,15 @@ Page({ | ||
| 798 | lastMsg: true | 874 | lastMsg: true |
| 799 | }); | 875 | }); |
| 800 | }else{ | 876 | }else{ |
| 877 | + dataArray[index]['items']['is_show_class'] = false | ||
| 878 | + dataArray[index+1]['items']['is_show_class'] = true | ||
| 801 | s.setData({ | 879 | s.setData({ |
| 802 | stylePage: 1, | 880 | stylePage: 1, |
| 803 | index: index + 1, | 881 | index: index + 1, |
| 804 | select_classify_on: index + 1, | 882 | select_classify_on: index + 1, |
| 805 | cat_id: dataArray[index + 1]['items']['id'], | 883 | cat_id: dataArray[index + 1]['items']['id'], |
| 806 | - classify_name: dataArray[index + 1]['items']['name'] | 884 | + classify_name: dataArray[index + 1]['items']['name'], |
| 885 | + one_level_classify:dataArray | ||
| 807 | }); | 886 | }); |
| 808 | s.style(s.data.stylePage, dataArray[index + 1]['items']['id']); | 887 | s.style(s.data.stylePage, dataArray[index + 1]['items']['id']); |
| 809 | } | 888 | } |
| @@ -813,6 +892,15 @@ Page({ | @@ -813,6 +892,15 @@ Page({ | ||
| 813 | s.setData({ | 892 | s.setData({ |
| 814 | countDownNum: countDownNum | 893 | countDownNum: countDownNum |
| 815 | }) | 894 | }) |
| 895 | + var arr2 = s.data.one_level_classify | ||
| 896 | + for(var i=0;i<arr2.length;i++){ | ||
| 897 | + if(i == s.data.index){ | ||
| 898 | + arr2[i]['items']['is_show_class'] = true | ||
| 899 | + }else{ | ||
| 900 | + arr2[i]['items']['is_show_class'] = false | ||
| 901 | + } | ||
| 902 | + } | ||
| 903 | + s.setData({ one_level_classify: arr2}); | ||
| 816 | }, 1000) | 904 | }, 1000) |
| 817 | } | 905 | } |
| 818 | 906 |
pages/goods/categoryList/categoryList.wxml
| 1 | -<!-- 风格1 --> | 1 | +<!-- 风格1 --> |
| 2 | <block wx:if="{{is_used_share==0}}"> | 2 | <block wx:if="{{is_used_share==0}}"> |
| 3 | <view class='top_view' wx:if="{{is_show_pl || is_show_gb || is_show_pp }}"> | 3 | <view class='top_view' wx:if="{{is_show_pl || is_show_gb || is_show_pp }}"> |
| 4 | <view class="swiper-tab" > | 4 | <view class="swiper-tab" > |
| @@ -118,21 +118,26 @@ | @@ -118,21 +118,26 @@ | ||
| 118 | <!-- 分类项目的类型 --> | 118 | <!-- 分类项目的类型 --> |
| 119 | <view class="project_type" style="background-color:#eee"> | 119 | <view class="project_type" style="background-color:#eee"> |
| 120 | <view class="project_type-frame" style="margin-bottom:120rpx"> | 120 | <view class="project_type-frame" style="margin-bottom:120rpx"> |
| 121 | - <view wx:if="{{is_show_gb}}"> | ||
| 122 | - <view bindtap="click_classify" class="share_type fs30 flex-space-between xc-letter-spacing {{select_classify_on==223?'select_classify':''}}"data-index="223"data-name="国家" wx:if="{{is_country}}"> | 121 | + <view wx:if="{{is_show_gb}}" class="{{status_show == 1?'is_show_class':''}}"> |
| 122 | + <view style="{{status_show == 1?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view> | ||
| 123 | + <view bindtap="click_classify" style="{{status_show == 1?'margin-top:0':'margin-top:40rpx'}}" class="share_type fs30 flex-space-between xc-letter-spacing {{select_classify_on==223?'select_classify':''}}"data-index="223"data-name="国家" wx:if="{{is_country}}"> | ||
| 123 | <text>国</text><text>家</text> | 124 | <text>国</text><text>家</text> |
| 124 | 125 | ||
| 125 | </view> | 126 | </view> |
| 126 | </view> | 127 | </view> |
| 127 | - <view wx:if="{{is_show_pp}}"> | ||
| 128 | - <view bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} share_type fs30 flex-space-between xc-letter-spacing" wx:if="{{is_brand}}"data-index="220"data-name="品牌"> | 128 | + <view wx:if="{{is_show_pp}}" class="{{status_show == 2?'is_show_class':''}}"> |
| 129 | + <view style="{{status_show == 2?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view> | ||
| 130 | + <view bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} share_type fs30 flex-space-between xc-letter-spacing" wx:if="{{is_brand}}"data-index="220"data-name="品牌"> | ||
| 129 | <text>品</text><text>牌</text> | 131 | <text>品</text><text>牌</text> |
| 130 | </view> | 132 | </view> |
| 131 | </view> | 133 | </view> |
| 132 | <view wx:if="{{is_show_pl}}"> | 134 | <view wx:if="{{is_show_pl}}"> |
| 133 | 135 | ||
| 134 | <view wx:for="{{one_level_classify}}" wx:for-item="ittms" > | 136 | <view wx:for="{{one_level_classify}}" wx:for-item="ittms" > |
| 135 | - <view bindtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.name}}"> | 137 | + <view class="{{ittms.items.is_show_class == true?'is_show_class':''}}"> |
| 138 | + <!-- 添加左边红色条 --> | ||
| 139 | + <view style="{{ittms.items.is_show_class == true?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view> | ||
| 140 | + <view bindtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.mobile_name}}"> | ||
| 136 | <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}"> | 141 | <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}"> |
| 137 | <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index"> | 142 | <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index"> |
| 138 | <view> | 143 | <view> |
| @@ -141,12 +146,11 @@ | @@ -141,12 +146,11 @@ | ||
| 141 | </view> | 146 | </view> |
| 142 | 147 | ||
| 143 | </view> | 148 | </view> |
| 144 | - <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}} | ||
| 145 | - </view> | 149 | + <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</view> |
| 146 | </view> | 150 | </view> |
| 147 | 151 | ||
| 148 | </view> | 152 | </view> |
| 149 | - | 153 | + </view> |
| 150 | </view> | 154 | </view> |
| 151 | </view> | 155 | </view> |
| 152 | 156 | ||
| @@ -288,21 +292,25 @@ | @@ -288,21 +292,25 @@ | ||
| 288 | <!-- 分类项目内容 --> | 292 | <!-- 分类项目内容 --> |
| 289 | <view class="flex project_height" style="margin-left:-10rpx;"> | 293 | <view class="flex project_height" style="margin-left:-10rpx;"> |
| 290 | <!-- 分类项目的类型 --> | 294 | <!-- 分类项目的类型 --> |
| 291 | - <view class="project_type" style="background-color:#eee;height:88%;overflow-y:auto;position:fixed;left:0;z-index:999999;top:120rpx;"> | 295 | + <view class="project_type" style="background-color:#eee;height:88%;overflow-y:auto;position:fixed;left:0;z-index:999999;top:126rpx;"> |
| 292 | <view class="project_type-frame" style="margin-bottom:120rpx;"> | 296 | <view class="project_type-frame" style="margin-bottom:120rpx;"> |
| 293 | <view wx:if="{{is_show_gb}}"> | 297 | <view wx:if="{{is_show_gb}}"> |
| 294 | - <view bindtap="click_classify" class="share_type fs30 flex-space-between xc-letter-spacing {{select_classify_on==223?'select_classify':''}}"data-index="223"data-name="国家" wx:if="{{is_country}}"> | 298 | + <view bindtap="click_classify" class="tab-bar-item {{select_classify_on==223 ? 'active' : ''}}" data-current="223" data-index="223" data-name="国家" wx:if="{{is_country}}"> |
| 295 | <text>国</text><text>家</text> | 299 | <text>国</text><text>家</text> |
| 296 | </view> | 300 | </view> |
| 297 | </view> | 301 | </view> |
| 298 | <view wx:if="{{is_show_pp}}"> | 302 | <view wx:if="{{is_show_pp}}"> |
| 299 | - <view bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} share_type fs30 flex-space-between xc-letter-spacing" wx:if="{{is_brand}}"data-index="220"data-name="品牌"> | 303 | + |
| 304 | + <view bindtap="click_classify" class="tab-bar-item {{select_classify_on==220 ? 'active' : ''}}" wx:if="{{is_brand}}" data-current="220" data-index="220" data-name="品牌"> | ||
| 300 | <text>品</text><text>牌</text> | 305 | <text>品</text><text>牌</text> |
| 301 | </view> | 306 | </view> |
| 302 | </view> | 307 | </view> |
| 303 | <view wx:if="{{is_show_pl}}"> | 308 | <view wx:if="{{is_show_pl}}"> |
| 304 | - <view wx:for="{{one_level_classify}}" wx:for-item="ittms" > | ||
| 305 | - <view bindtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.name}}"> | 309 | + <!-- <view wx:for="{{one_level_classify}}" wx:for-item="ittms" class="class_set_height"> --> |
| 310 | + <!-- <view class="{{ittms.items.is_show_class == true?'is_show_class':''}}"> --> | ||
| 311 | + <!-- 添加左边红色条 --> | ||
| 312 | + <!-- <view style="{{ittms.items.is_show_class == true?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view> --> | ||
| 313 | + <!-- <view bindtap="click_classify" style="{{status_show == 0 && ittms == 0 ?'margin-top:0':'margin-top:0rpx'}}" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.mobile_name}}"> | ||
| 306 | <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}"> | 314 | <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}"> |
| 307 | <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index"> | 315 | <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index"> |
| 308 | <view> | 316 | <view> |
| @@ -311,11 +319,26 @@ | @@ -311,11 +319,26 @@ | ||
| 311 | </view> | 319 | </view> |
| 312 | </view> | 320 | </view> |
| 313 | <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</view> | 321 | <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</view> |
| 322 | + </view> --> | ||
| 323 | + <!-- </view> --> | ||
| 324 | + <scroll-view scroll-y scroll-with-animation class="tab-view" scroll-top="{{scrollTop}}" style="height:88%"> | ||
| 325 | + <view wx:for="{{one_level_classify}}" wx:for-item="ittms" wx:key="{{index}}" class="tab-bar-item {{select_classify_on==index ? 'active' : ''}}" data-current="{{index}}" catchtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" data-index="{{index}}"data-name="{{ittms.items.mobile_name}}"> | ||
| 326 | + <text>{{ittms.items.name}}</text> | ||
| 327 | + <!-- <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}"> | ||
| 328 | + <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index"> | ||
| 329 | + <text> | ||
| 330 | + {{name}} | ||
| 331 | + </text> | ||
| 332 | + </view> | ||
| 333 | + </view> | ||
| 334 | + <text wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</text> --> | ||
| 314 | </view> | 335 | </view> |
| 315 | - </view> | ||
| 316 | - </view> | 336 | + </scroll-view> |
| 337 | + | ||
| 338 | + <!-- </view> --> | ||
| 317 | </view> | 339 | </view> |
| 318 | </view> | 340 | </view> |
| 341 | + </view> | ||
| 319 | <!-- 分类项目的内容 --> | 342 | <!-- 分类项目的内容 --> |
| 320 | <view class="classify_content" style="margin-left:27%;margin-top:130rpx"> | 343 | <view class="classify_content" style="margin-left:27%;margin-top:130rpx"> |
| 321 | <!-- 国家的样式 --> | 344 | <!-- 国家的样式 --> |
| @@ -364,7 +387,7 @@ | @@ -364,7 +387,7 @@ | ||
| 364 | </block> | 387 | </block> |
| 365 | <!-- 品类--> | 388 | <!-- 品类--> |
| 366 | <block wx:if="{{is_show_pl}}"> | 389 | <block wx:if="{{is_show_pl}}"> |
| 367 | - <block wx:if="{{select_classify_on!=220&&select_classify_on!=223&&is_level_three!=1}}"> | 390 | + <block wx:if="{{select_classify_on!=220&&select_classify_on!=223}}"> |
| 368 | <view style="width:100%;height:100%;"> | 391 | <view style="width:100%;height:100%;"> |
| 369 | <view class="classify_name fs28 flex-space-between" id="header" data-pid="0" data-cid="{{cat_id}}" bindtap='select_more' style="position:fixed;z-index:999999;top:130rpx;width:70%;background-color:#ffffff;left:27%;padding:0 10rpx;"> | 392 | <view class="classify_name fs28 flex-space-between" id="header" data-pid="0" data-cid="{{cat_id}}" bindtap='select_more' style="position:fixed;z-index:999999;top:130rpx;width:70%;background-color:#ffffff;left:27%;padding:0 10rpx;"> |
| 370 | <view class="classify_title ellipsis-1">{{classify_name}}</view> | 393 | <view class="classify_title ellipsis-1">{{classify_name}}</view> |
| @@ -377,7 +400,7 @@ | @@ -377,7 +400,7 @@ | ||
| 377 | <!-- <view class="classify_content-frame flex-wrap" style="width:100%;overflow:hidden;heigth:100%;"> --> | 400 | <!-- <view class="classify_content-frame flex-wrap" style="width:100%;overflow:hidden;heigth:100%;"> --> |
| 378 | 401 | ||
| 379 | <!-- <view class="null" style="width:100%;margin-top:70rpx;"></view> --> | 402 | <!-- <view class="null" style="width:100%;margin-top:70rpx;"></view> --> |
| 380 | - <scroll-view scroll-y scroll-top="{{scrollTop}}" bindscrolltolower='scrollLower' style="height:{{windowHeight}};position:absolute;margin-top:70rpx;top:120rpx;bottom:0;rigth:0;left:26%;width:73%;margin-bottom:50px;"> | 403 | + <scroll-view scroll-y scroll-top="{{scrollTop}}" bindscrolltolower='scrollLower' style="height:{{windowHeight}};position:absolute;margin-top:70rpx;top:120rpx;bottom:0;rigth:0;left:26%;width:73%;margin-bottom:100rpx;"> |
| 381 | <view class="null" style="width:100%;height:1px;"></view> | 404 | <view class="null" style="width:100%;height:1px;"></view> |
| 382 | <!-- goodslist --> | 405 | <!-- goodslist --> |
| 383 | <view class="choice_list" style="height:{{msgStatus != true?'100%':''}}"> | 406 | <view class="choice_list" style="height:{{msgStatus != true?'100%':''}}"> |
pages/goods/categoryList/categoryList.wxss
| @@ -20,7 +20,7 @@ page{height: 100%; background: #fff;} | @@ -20,7 +20,7 @@ page{height: 100%; background: #fff;} | ||
| 20 | } | 20 | } |
| 21 | .active{ | 21 | .active{ |
| 22 | color:#F65959; | 22 | color:#F65959; |
| 23 | - border-bottom: 4rpx solid #F65959; | 23 | + /* border-bottom: 4rpx solid #F65959; */ |
| 24 | } | 24 | } |
| 25 | swiper{ | 25 | swiper{ |
| 26 | text-align: center; | 26 | text-align: center; |
| @@ -223,7 +223,7 @@ overflow-y: scroll; | @@ -223,7 +223,7 @@ overflow-y: scroll; | ||
| 223 | .share_type{ | 223 | .share_type{ |
| 224 | margin: auto; | 224 | margin: auto; |
| 225 | width: 58%; | 225 | width: 58%; |
| 226 | - margin-top: 40rpx; | 226 | + /* margin-top: 40rpx; */ |
| 227 | } | 227 | } |
| 228 | .xc-letter-spacing{ | 228 | .xc-letter-spacing{ |
| 229 | padding-left: 20rpx; | 229 | padding-left: 20rpx; |
| @@ -231,10 +231,19 @@ padding-right: 29rpx; | @@ -231,10 +231,19 @@ padding-right: 29rpx; | ||
| 231 | width: 58%; | 231 | width: 58%; |
| 232 | margin: auto; | 232 | margin: auto; |
| 233 | margin-top: 40rpx; | 233 | margin-top: 40rpx; |
| 234 | -margin-left:28rpx; | ||
| 235 | - | 234 | +margin-left:28rpx; |
| 235 | +} | ||
| 236 | 236 | ||
| 237 | +/* 左边菜单点击样式 20200601 luca */ | ||
| 238 | +.is_show_class{ | ||
| 239 | +width: 100%; | ||
| 240 | +background-color: white; | ||
| 241 | +height: 50rpx; | ||
| 242 | +line-height: 50rpx; | ||
| 243 | +color:black; | ||
| 244 | +font-weight: 700; | ||
| 237 | } | 245 | } |
| 246 | + | ||
| 238 | .world_sn{ | 247 | .world_sn{ |
| 239 | white-space: nowrap; | 248 | white-space: nowrap; |
| 240 | overflow: hidden; | 249 | overflow: hidden; |
| @@ -243,25 +252,28 @@ width: 58%; | @@ -243,25 +252,28 @@ width: 58%; | ||
| 243 | margin: auto; | 252 | margin: auto; |
| 244 | margin-top: 35rpx; | 253 | margin-top: 35rpx; |
| 245 | } | 254 | } |
| 246 | -.select_classify{ | ||
| 247 | - /* 20200530 update */ | ||
| 248 | -/* background: #d60021; */ | ||
| 249 | -background:white; | ||
| 250 | -/* border-radius: 30rpx; */ | ||
| 251 | -/* color: #fff; */ | ||
| 252 | -color:black; | 255 | +/* .select_classify{ */ |
| 256 | + /* 20200530 update 转用.is_show_class*/ | ||
| 257 | +/* background: #d60021; | ||
| 258 | +border-radius: 30rpx; | ||
| 259 | +color: #fff; | ||
| 253 | height: 48rpx; | 260 | height: 48rpx; |
| 254 | -line-height: 45rpx; | ||
| 255 | -font-weight:700; | 261 | +line-height: 45rpx; */ |
| 262 | +/* font-weight:700; */ | ||
| 256 | 263 | ||
| 257 | -} | ||
| 258 | -.select_classify.width80{ | 264 | +/* } */ |
| 265 | +/* .select_classify.width80{ */ | ||
| 259 | /* 20200530updata */ | 266 | /* 20200530updata */ |
| 260 | /* width: 74.5%; */ | 267 | /* width: 74.5%; */ |
| 261 | - width: 100%; | ||
| 262 | - height: 100rpx; | ||
| 263 | - line-height: 100rpx; | 268 | + /* height: 100rpx; |
| 269 | + line-height: 100rpx; */ | ||
| 270 | +/* } */ | ||
| 271 | +.class_set_height{ | ||
| 272 | + height: 50rpx; | ||
| 273 | + line-height: 50rpx; | ||
| 274 | + padding: 20rpx 0; | ||
| 264 | } | 275 | } |
| 276 | + | ||
| 265 | .select_classify.width80.text-indent{ | 277 | .select_classify.width80.text-indent{ |
| 266 | text-indent: 38rpx; | 278 | text-indent: 38rpx; |
| 267 | padding-right: 20px; | 279 | padding-right: 20px; |
| @@ -412,5 +424,45 @@ margin: auto; | @@ -412,5 +424,45 @@ margin: auto; | ||
| 412 | 424 | ||
| 413 | .brand_img_name {color: #666;} | 425 | .brand_img_name {color: #666;} |
| 414 | 426 | ||
| 427 | + | ||
| 428 | +.tab-view { | ||
| 429 | + /* height: 100%; */ | ||
| 430 | + width: 200rpx; | ||
| 431 | + /* position: fixed; | ||
| 432 | + left: 0; | ||
| 433 | + top: 92rpx; | ||
| 434 | + z-index: 10; */ | ||
| 435 | +} | ||
| 436 | + | ||
| 437 | +.tab-bar-item { | ||
| 438 | + width: 200rpx; | ||
| 439 | + height: 110rpx; | ||
| 440 | + /* background: #f6f6f6; */ | ||
| 441 | + box-sizing: border-box; | ||
| 442 | + display: flex; | ||
| 443 | + align-items: center; | ||
| 444 | + justify-content: center; | ||
| 445 | + font-size: 26rpx; | ||
| 446 | + color: #444; | ||
| 447 | + font-weight: 400; | ||
| 448 | +} | ||
| 449 | + | ||
| 450 | +.active { | ||
| 451 | + position: relative; | ||
| 452 | + color: #000; | ||
| 453 | + font-size: 30rpx; | ||
| 454 | + font-weight: 600; | ||
| 455 | + background: #fcfcfc; | ||
| 456 | +} | ||
| 457 | + | ||
| 458 | +.active::before { | ||
| 459 | + content: ""; | ||
| 460 | + position: absolute; | ||
| 461 | + border-left: 8rpx solid #E41F19; | ||
| 462 | + height: 50rpx; | ||
| 463 | + left: 0; | ||
| 464 | +} | ||
| 465 | + | ||
| 466 | + | ||
| 415 | /* 风格三商品列表样式引入 */ | 467 | /* 风格三商品列表样式引入 */ |
| 416 | @import "../goodsList/goodsList.wxss"; | 468 | @import "../goodsList/goodsList.wxss"; |
| 417 | \ No newline at end of file | 469 | \ No newline at end of file |