商品分类

后端开发-许程
1 parent 096e4995
Showing 3 changed files with 145 additions and 15 deletions
pages/goods/categoryList/categoryList.js
pages/goods/categoryList/categoryList.wxml
pages/goods/categoryList/categoryList.wxss
@@ -22,7 +22,16 @@ Page({
       // 导航字母
       letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
         'U', 'V', 'W', 'X', 'Y', 'Z'],
-     
+     //控制新旧分类版本
+      is_used_share:0,
+      //国家的控制属性
+      is_country:1,
+      //品牌的控制属性
+      is_brand:1,
+      name: [{ names: "洗护用品" }, { names: "天天护理" }, { names: "个人洗护" }, { names: "轻奢" }, { names: "路虎" }, { names: "身体护理" }, { names: "品牌" }, { names: "面部护理" }],
+      //选择分类的控制属性
+      select_classify_on:223,
+      index:223,
     },
     onLoad: function(tt) { 
       const res = wx.getSystemInfoSync(),
@@ -339,7 +348,12 @@ Page({
        _errObj[_errImg] = "/public/images/category.png";
       this.setData(_errObj) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉 ; 
  
-  }
-
+  },
+  // 新的版本分类
+ click_classify:function(e){
+  var indexs=e.currentTarget.dataset.index;
+   console.log("获取当前下标",indexs);
+   this.setData({ select_classify_on: indexs, index: indexs});
+ }
  
 });
 \ No newline at end of file
-
+<block wx:if="{{is_used_share}}">
 <view class='top_view' wx:if="{{is_show_pl || is_show_gb || is_show_pp }}">
   <view class="swiper-tab" >
       <view wx:if="{{is_show_pl}}" class="swiper-tab-item {{currentTab==0?'active':''}}" 
@@ -10,11 +10,8 @@
   </view>
 </view>
  
-<view class="search-box flex-center"  bindtap="goseach">
- <view class="share-height t-c">
-        <image class="share-black-img"src="../../../images/share_black.png"></image>
-        <view class="fs24">分享</view>
-        </view>
+<view class="search-box "  bindtap="goseach">
+
         <view class="search-inner">
             <view class="search-img">
                 <image class="wh100" src="{{iurl}}/miniapp/images/search.png"></image>
@@ -101,3 +98,47 @@
       <navigator class="lookat" openType="switchTab" url="/pages/index/index/index"> 去逛逛 </navigator>
    </view>
 </block>
+</block>
+<block wx:else>
+<!-- 新版分类头部 -->
+<view class="xc-search-box flex-center white_b"  bindtap="goseach">
+        <view class="share-height t-c">
+        <image class="scanning_black-img"src="../../../images/scanning_black.png"></image>
+        <view class="fs24">
+         扫一扫
+        </view>
+        </view>
+        <view class="xc-search-inner ">
+            <view class="search-img left">
+                <image class="wh100" src="{{iurl}}/miniapp/images/search.png"></image>
+            </view>
+            <input bindfocus="goseach" class="search-cont" placeholder="搜索你想要的生活" type="text"></input>
+        </view>
+</view>
+
+<!-- 分类项目内容 -->
+<view class="flex project_height">
+<!-- 分类项目的类型 -->
+<view class="project_type">
+   <view class="project_type-frame">
+      <view  bindtap="click_classify" class="share_type fs32 flex-space-between xc-letter-spacing {{select_classify_on==223?'select_classify':''}}"data-index="223" wx:if="{{is_country}}">
+      <text>国</text><text>家</text>
+      </view>
+          <view bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} share_type fs32 flex-space-between xc-letter-spacing" wx:if="{{is_brand}}"data-index="220">
+     <text>品</text><text>牌</text>
+      </view>
+      <block wx:for="{{name}}" wx:for-item="ittm"wx:for-index="index">
+         <view bindtap="click_classify" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs32 t-c {{ittm.names.length==2? 'world_sn':''}} {{select_classify_on==index&&ittm.names.length==2?'text-indent':''}}"data-index="{{index}}">
+           {{ittm.names}}
+         </view>
+      </block>
+
+   </view>
+
+</view>
+<!-- 分类项目的内容 -->
+<view class=""></view>
+
+</view>
+
+</block>
 \ No newline at end of file
@@ -46,12 +46,12 @@ swiper{
     display: flex;
     align-items: center;
     margin: 0rpx 30rpx;
-    width: 600rpx;
+    width: 675rpx;
     height: 58rpx;
     border-radius: 29rpx;
     background-color: #fff;
 		position: relative;
-
+    top: 15rpx;
 }
  
 .search-img {
@@ -153,12 +153,87 @@ swiper{
 }
 .fenlei-list{z-index: -1;}
  
+
+
+
+
+/* 商品分类新的版本 */
 /* 分享样式*/
+.xc-search-box {
+    width: 100%;
+    height: 120rpx;
+    z-index: 10;
+		background: #fff;
+    border-top: 4rpx solid #eee;
+    border-bottom: 1rpx solid #eee;
+
+}
+
 .share-height{
-  line-height: 30rpx;
+  line-height: 20rpx;
+margin-right: 15rpx;
  
 }
-.share-black-img{
+.scanning_black-img{
   width:50rpx;
-  height: 40rpx;
-}
 \ No newline at end of file
+  height: 45rpx;
+}
+.search-img.left{
+  margin-left: 35rpx;
+}
+
+.xc-search-inner {
+    display: flex;
+    align-items: center;
+
+    width: 600rpx;
+    height: 58rpx;
+    border-radius: 29rpx;
+    background-color: #f2f2f2;
+}
+.project_height{
+  height: 90%;
+
+}
+.project_type{
+  width: 33%;
+  height: 100%;
+  border-right: 1rpx solid #eee;
+}
+.share_type{
+  margin: auto;
+  width: 60%;
+  margin-top: 35rpx;
+
+}
+.xc-letter-spacing{
+padding-left: 29rpx;
+padding-right: 29rpx;
+width: 52%;
+margin: auto;
+margin-top: 35rpx;
+
+
+}
+.world_sn{
+white-space: nowrap;
+overflow: hidden;
+width: 50%;
+letter-spacing: 60rpx;
+margin: auto;
+margin-top: 35rpx;
+}
+.select_classify{
+  background: #ffe3e2;
+border-radius: 30rpx;
+color: #fff;
+height: 48rpx;
+line-height: 45rpx;
+
+}
+.select_classify.width80{
+  width: 74.5%;
+}
+ .text-indent{
+ text-indent: 31rpx;
+ } 
 \ No newline at end of file