商品分类

后端开发-许程
1 parent 13918a1f
Showing 4 changed files with 228 additions and 13 deletions
app.wxss
pages/goods/categoryList/categoryList.js
pages/goods/categoryList/categoryList.wxml
pages/goods/categoryList/categoryList.wxss
@@ -346,4 +346,7 @@ background: #ffe3e2;
 }
 .fs40 {
   font-size: 40rpx;
+}
+.flex-wrap{
+  flex-wrap:wrap;
 }
 \ No newline at end of file
@@ -28,11 +28,12 @@ Page({
       is_country:1,
       //品牌的控制属性
       is_brand:1,
-      name: [{ names: "洗护用品" }, { names: "天天护理" }, { names: "个人洗护" }, { names: "轻奢" }, { names: "路虎" }, { names: "身体护理" }, { names: "品牌" }, { names: "面部护理" }],
+      name: [{ names: "洗护用品" }, { names: "天天护理" }, { names: "共顺利" },{ names: "个人洗护" }, { names: "轻奢" }, { names: "路虎" }, { names: "身体护理" }, { names: "品牌" }, { names: "面部护理" }],
       //选择分类的控制属性
       select_classify_on:223,
       index:223,
       classify_name:"国家",//项目类型
+      brand_list:null,//品牌列表
     },
     onLoad: function(tt) { 
       const res = wx.getSystemInfoSync(),
@@ -65,7 +66,12 @@ Page({
       }
       this.setData({
         lettersPosition: temp
-      })
+      });
+      console.log(this.data.is_used_share,"是什么东西啊");
+      if (this.data.is_used_share==0){
+        console.log("有进来m");
+        this.get_nation();
+      }
     },
@@ -264,6 +270,7 @@ Page({
       },
       success: function (e) {
         var dda = e.data.data.pageData;
+      
         s.setData({ nationlist:dda})
       }
     });
@@ -294,6 +301,8 @@ Page({
       success: function (e) {
           var arr=new Array();
           var dda = e.data.data.pageData;
+        console.log("商品数据",dda);
+       s.setData({brand_list:dda});
           for (var i = 0; i < dda.length; i++) {
               dda[i].logo = oo.imghost+dda[i].logo;
@@ -353,8 +362,23 @@ Page({
   // 新的版本分类
  click_classify:function(e){
   var indexs=e.currentTarget.dataset.index;
+   var name = e.currentTarget.dataset.name;
    console.log("获取当前下标",indexs);
-   this.setData({ select_classify_on: indexs, index: indexs});
- }
+   this.setData({ select_classify_on: indexs, index: indexs, classify_name:name});
+   if (indexs==220){
+     this.get_brand();
+   }
+  
+ },
+//  图片失败
+  bind_bnerr_xc: function (e) {
+    var _errImg = e.target.dataset.errorimg;
+    var _errurl = e.target.dataset.url;
+
+    var _errObj = {};
+    _errObj[_errImg] = "/miniapp/images/default_g_img.gif";
+    this.setData(_errObj) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉 ;
+
+  },
 });
 \ No newline at end of file
@@ -128,19 +128,117 @@
      <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}}"data-name="{{ittm.names}}">
-           {{ittm.names}}
+         <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':''}} {{select_classify_on==index&&ittm.names.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittm.names}}">
+         <view class="{{ittm.names.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittm.names.length<4}}">    
+         <view wx:for="{{ittm.names}}" wx:for-item="names"wx:for-index="index">
+         <view>
+         {{names}}
+         </view>
+         </view>
+        
+         </view>
+         <view wx:else>
+         {{ittm.names}}
+         </view>
          </view>
       </block>
    </view>
 </view>
+
+
+
+
 <!-- 分类项目的内容 -->
 <view class="classify_content">
-<view class="classify_name fs32">{{classify_name}}</view>
-<view class="flex classify_content-frame">
+<view class="classify_name fs32 flex-space-between">
+<view>{{classify_name}}</view>
+<view class="flex select_more"> 
+  <view class="red-co fs32">选择更多</view>
+  <view class="bg_right width_height"></view>
+</view>
+
 </view>
+<!-- 国家的样式 -->
+<block wx:if="{{select_classify_on==223}}">
+  <view class="flex classify_content-frame" >
+     <view bindtap="go_nation" class="country_img-frame rel outer_location"wx:for="{{nationlist}}" wx:for-item="bitem" wx:for-index="pidx" data-nid="{{bitem.id}}" >
+                <image class="country_img" src="{{iurl}}{{bitem.logo}}"></image>
+                <view class='nation_box abs box'>
+                    <view class='nt_1 t-c line-height'>
+                       <text class="nt_1_t height fs24">{{bitem.name}}</text>
+                     </view>
+                    <view class='nt_2 t-c line-height fs24'>enname</view>
+                </view>
+       </view>
+</view>
+</block>
+<!-- 品牌 -->
+<block wx:if="{{select_classify_on==220}}">
+<view class="classify_content-frame flex flex-wrap">
+
+ <block wx:for="{{groups}}" wx:for-item="brand_list" wx:for-index="pidx">
+ <view class="brand_img_frame "wx:for="{{brand_list.array}}"wx:for-item="user" wx:for-index="idx" bindtap="go_brand" data-bid="{{user.id}}" >
+ 
+    <view class="brand_img t-c">
+       <image class="brand_img"src="{{user.logo}}"data-errorimg="brand_list[{{pidx}}].array[{{idx}}].logo" binderror="bind_bnerr"></image>
+        <view class="brand_img_name fs24">{{user.name}}</view>
+   </view>
+ </view>
+</block>
+</view>
+</block>
+<!-- 商品 -->
+<block wx:if="{{select_classify_on!=220&&select_classify_on!=223}}">
+<view class="classify_content-frame flex flex-wrap">
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/1.png"></image>
+   <view class="brand_img_name fs24">你好呃呃</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/2.png"></image>
+   <view class="brand_img_name fs24">你好</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/3.png"></image>
+   <view class="brand_img_name fs24">你好</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/4.png"></image>
+   <view class="brand_img_name fs24">你好</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/5.png"></image>
+   <view class="brand_img_name fs24">你好</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/6.png"></image>
+   <view class="brand_img_name fs24">你好品牌</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/7.png"></image>
+   <view class="brand_img_name fs24">你好慢慢</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/8.png"></image>
+   <view class="brand_img_name fs24">你好</view>
+  </view>
+
+  <view class="brand_img_frame t-c">
+     <image class="brand_img"src="../../../images/9.png"></image>
+   <view class="brand_img_name fs24">你好匿名</view>
+  </view>
+
+</view>
+</block>
 </view>
@@ -10,6 +10,7 @@ page{height: 100%; background: #fff;}
     flex-flow: row;
     justify-content: center;
     margin-left: 15%;
+   
 }
 .swiper-tab-item{
     width: 30%;
@@ -172,11 +173,14 @@ swiper{
 .share-height{
   line-height: 20rpx;
 margin-right: 15rpx;
+margin-top: 8rpx;
 }
 .scanning_black-img{
   width:50rpx;
   height: 45rpx;
+  margin-bottom: 5rpx;
+
 }
 .search-img.left{
   margin-left: 35rpx;
@@ -219,12 +223,12 @@ margin-top: 35rpx;
 white-space: nowrap;
 overflow: hidden;
 width: 50%;
-letter-spacing: 60rpx;
+/* letter-spacing: 60rpx; */
 margin: auto;
 margin-top: 35rpx;
 }
 .select_classify{
-  background: #ffe3e2;
+  background: #d60021;
 border-radius: 30rpx;
 color: #fff;
 height: 48rpx;
@@ -234,8 +238,11 @@ line-height: 45rpx;
 .select_classify.width80{
   width: 74.5%;
 }
- .text-indent{
- text-indent: 31rpx;
+ .select_classify.width80.text-indent{
+ text-indent: 38rpx;
+ padding-right: 20px;
+width: 60%;
+
  } 
  .classify_name{
    width: 90%;
@@ -244,6 +251,7 @@ line-height: 45rpx;
    border-bottom: 1rpx solid #eee;
    line-height: 85rpx;
     font-weight: 600;
+   
  }
  .classify_content{
@@ -252,8 +260,90 @@ line-height: 45rpx;
  }
  .classify_content-frame{
  width: 90%;
- height: 90%;
  margin: auto;
  flex-wrap:wrap;
  justify-content:space-between;
+ height: 90%;
+ overflow-y:scroll;
+ overflow: hidden scroll;
+
+ }
+ .country_img-frame{
+   width: 48%;
+   height: 140rpx;
+   
+ }
+ .country_img{
+   width: 100%;
+   height: 100%;
+ }
+ .outer_location{
+   top:0rpx;
+   left: 0rpx;
+   margin-top: 20rpx;
+
+ }
+ .nation_box.box{
+   top: 16%;
+width:80%;
+height:70%;
+left: 70.5%;
+
+ }
+ .nt_1.line-height{
+   line-height: 65rpx;
+   height: 72rpx;
+margin-top: -5rpx;
+
+ }
+ .nt_1_t.height{
+   height: 54rpx;
+ }
+ .nt_1.height{
+   height: 56rpx;
+line-height: 65rpx;
+ }
+ .nt_2.line-height{
+   height: 0rpx;
+   line-height: 0rpx;
+
+ }
+ .nt_1_t.fs24{
+   font-size: 24rpx;
+ }
+ .nt_2.fs24{
+   font-size: 24rpx;
+ }
+ .brand_img_frame{
+   width: 30%;
+   height: 220rpx;
+   margin-top: 18rpx;
+
+ }
+ 
+ .brand_img{
+   width:100%;
+   height: 70%;
+   margin-bottom: 10rpx
+ }
+  .brand_img-name{
+  width: 100%;
+  height: 20%;
+ }
+ .select_classify.width80.text3{
+padding-right: 20rpx;
+padding-left: 20rpx;
+width: 62%;
+
+ }
+ .width_height{
+   width: 18rpx;
+   height: 18rpx;
+ }
+ .select_more{
+line-height: 38rpx;
+height: 35rpx;
+margin-top: 23rpx;
+
+
  }
 \ No newline at end of file