小程序中的商品分类

一、左右布局分类效果图

二、实现逻辑

• 页面布局

<!--pages/member/brand/brand.wxml-->
<view class="box">
  <view class="b_top">
    <view class="b_Search">
      <text class="iconfont iconsousuo" bindtap="search"></text>
      <input class="b_Search_input dib" bindinput="searchVal"></input>
    </view>
  </view>
  <view class="b_baner">
    <view wx:if="{{show}}" class="mask" bindtap="Notype"></view>
    <view wx:if="{{show}}" class="modalDlg">
      <view class="b_right_top" bindtap="Notype">
        <text class="b_right_top_fen fr">{{mold}}</text>
        <text class="iconfont iconshaixuan1"></text>
      </view>
      <view class="modalDlg_c">
        <!-- <view class="modalDlg_c_t Selection">全部</view> -->
        <block wx:for="{{types}}" wx:key="index">
          <view class="modalDlg_c_t {{typeId == index ? 'Selection' : ''}}" bindtap="typtTap" data-t="{{index}}">{{item.Name}}</view>
        </block>
        <!-- <view class="modalDlg_c_t">化妆品</view>
        <view class="modalDlg_c_t">精品</view>
        <view class="modalDlg_c_t">服饰</view>
        <view class="modalDlg_c_t">运动</view> -->
        <view class="modalDlg_none"></view>
        <view class="modalDlg_none"></view>
      </view>
    </view>
    <view class="b_left">
      <!-- <view class="b_left_text b_left_bf">全部</view> -->
      <block wx:for="{{foots}}" wx:key="index">
        <!-- <scroll-view class="b_left_text {{footId == index ? 'b_left_bf' : ''}}" bindtap="footTap" data-F="{{index}}" scroll-x="true" style='width:100%;'>
          {{item.FloorName}}
        </scroll-view> -->
        <view class="b_left_text {{footId == index ? 'b_left_bf' : ''}}" bindtap="footTap" data-F="{{index}}">{{item.FloorName}}</view>
      </block>
      <!-- <view class="b_left_text">一楼</view>
      <view class="b_left_text">二楼</view>
      <view class="b_left_text">三楼</view>
      <view class="b_left_text">四楼</view>
      <view class="b_left_text">五楼</view>
      <view class="b_left_text">负一</view>
      <view class="b_left_text">负二</view> -->
    </view>
    <view class="b_right">
      <view class="b_right_top" bindtap="type">
        <text class="b_right_top_fen fr">{{mold}}</text>
        <text class="iconfont iconshaixuan1"></text>
      </view>
      <block wx:for="{{brands}}" wx:key="index">
        <view class="b_right_content">
          <view class="b_right_content_left">
            <image src="{{item.Logo}}" class="b_r_c_l_i"></image>
          </view>
          <view class="b_right_content_right">
            <view class="b_right_content_right_top">
              <text class="b_name">{{item.Name}}</text>
              <text class="b_type fr">{{item.CatalogName}}</text>
            </view>
            <view class="b_right_content_right_bottom">
              <view class="dib">
                <text class="iconfont iconweizhi"></text>
                <text class="b_f">{{item.FloorName}}</text>
              </view>
              <text class="iconfont icondianhua1 fr {{skinStyle}}-item" bindtap="tel" data-tel="{{item.Phone}}"></text>
            </view>
          </view>
        </view>
      </block>
      <!-- <view class="b_right_content">
        <view class="b_right_content_left">
          <image src="/res/image/ysld.png" class="b_r_c_l_i"></image>
        </view>
        <view class="b_right_content_right">
          <view class="b_right_content_right_top">
            <text class="b_name">雅诗兰黛</text>
            <text class="b_type fr">化妆品</text>
          </view>
          <view class="b_right_content_right_bottom">
            <view class="dib">
              <text class="iconfont iconweizhi"></text>
              <text class="b_f">F1 103</text>
            </view>
            <text class="iconfont icondianhua1 fr"></text>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</view>

• 样式

/* pages/member/brand/brand.wxss */

.box {
  width: 100%;
  height: 100%;
  background: #fff;
}

.b_top {
  width: 100%;
  height: 90rpx;
  border-bottom: 1rpx solid rgba(226, 226, 226, 1);
}

.b_Search {
  width: 676rpx;
  height: 68rpx;
  margin: 0 auto;
  background: rgba(245, 246, 247, 1);
  border-radius: 34rpx;
  /* line-height: 68rpx; */
  display: flex;
  align-items: center;
}

.iconsousuo {
  margin-left: 32rpx;
  font-size: 26rpx;
  color: rgba(205, 205, 205, 1);
}

.b_Search_input {
  width: 500rpx;
  margin-left: 10rpx;
}

.b_baner {
  display: flex;
  justify-content: space-around;
  position: relative;
}

.b_left {
  width: 186rpx;
  height: 100vh;
  border-right: 1rpx solid rgba(226, 226, 226, 1);
}

.b_left_text {
  white-space: nowrap;
  width: 100%;
  height: 102rpx;
  text-align: center;
  line-height: 102rpx;
  font-size: 28rpx;
  font-family: Microsoft YaHei Regular;
  color: rgba(51, 51, 51, 1);
}

.b_left_bf {
  position: relative;
}

.b_left_bf::before {
  content: '';
  width: 59rpx;
  height: 6rpx;
  background: rgba(91, 161, 231, 1);
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  bottom: 20rpx;
}
.b_right {
  width: 100%;
  height: 100%;
}

.b_right_top {
  width: 100%;
  height: 102rpx;
  border-bottom: 1rpx solid rgba(226, 226, 226, 1);
  line-height: 102rpx;
  position: relative;
}

.b_right_top_fen {
  font-size: 30rpx;
  font-family: Microsoft YaHei Regular;
  color: rgba(51, 51, 51, 1);
  margin-right: 78rpx;
}

.iconshaixuan1 {
  font-size: 32rpx;
  color: #cdcdcd;
  position: absolute;
  right: 33rpx;
}

.b_right_content {
  width: 100%;
  height: 192rpx;
  display: flex;
  align-items: center;
}

.b_right_content_left {
  width: 117rpx;
  height: 117rpx;
  border: 1rpx solid #e2e2e2;
  border-radius: 50%;
  margin-left: 15rpx;
  margin-right: 23rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b_r_c_l_i {
  border-radius: 50%;
}

.b_right_content_right {
  width: 430rpx;
  height: 192rpx;
  border-bottom: 1rpx solid rgba(226, 226, 226, 1);
}

.b_right_content_right_top {
  margin-top: 37rpx;
}

.b_name {
  font-size: 28rpx;
  font-family: Microsoft YaHei Regular;
  color: rgba(51, 51, 51, 1);
}

.b_type {
  font-size: 24rpx;
  font-family: Microsoft YaHei Light;
  color: rgba(153, 153, 153, 1);
  margin-right: 34rpx;
}

.b_right_content_right_bottom {
  margin-top: 54rpx;
}

.iconweizhi {
  font-size: 22rpx;
  color: rgba(205, 205, 205, 1);
  margin-right: 10rpx;
}

.b_f {
  font-size: 26rpx;
  font-family: Microsoft YaHei Light;
  font-weight: initial;
  color: rgba(102, 102, 102, 1);
}

.icondianhua1 {
  font-size: 46rpx;
  color: rgba(91, 161, 231, 1);
  margin-right: 34rpx;
}

/* 弹窗 */

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  /* top: 90rpx; */
  top: 0;
  left: 0;
  background: #000;
  z-index: 900;
  opacity: 0.3;
}

.modalDlg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999;
}

.modalDlg_c {
  width: 100%;
  height: 100%;
  padding-top: 47rpx;
  padding-left:40rpx;
  padding-right: 30rpx; 
  padding-bottom: 60rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.modalDlg_c_t {
  width: 151rpx;
  height: 52rpx;
  font-size: 24rpx;
  line-height: 52rpx;
  border-radius: 26rpx 26rpx 26rpx 26rpx;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border: 1rpx solid #cdcdcd;
}
.modalDlg_none{
  width: 151rpx;
  height: 0rpx;
}
.Selection {
  background: rgba(205, 223, 240, 1);
  border: 1rpx solid #0579cb;
}

• 逻辑代码

// pages/member/brand/brand.js
const http = require('../../../server/request.js');
//调用公共js对象以便调用其方法
var app = require('../../../utils/uselogn.js'); //获取应用实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    show: false,
    brands: [],
    foots: [{
      FloorName: '全部'
    }],
    types: [{
      Name: '全部'
    }],
    footId: '',
    typeId: '',
    mold: '分类',
    CodeOrName: '',
    FloorCode:'',
    ClassCode:'',
    searchValue: '',
    skinStyle: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    app.userLogin(this.authCallback);
    let skin = wx.getStorageSync("skin");
    this.setData({
      skinStyle: skin
    })
  },
  authCallback: function () {
    this.getBrandGuideInfo();
    this.getFloorListInfo();
    this.getClassInfo();
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
    this.setData({
      foots: [{
        FloorName: '全部'
      }],
      types: [{
        Name: '全部'
      }],
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  // 分类
  type() {
    this.setData({
      show: true
    })
  },
  // 关闭分类
  Notype() {
    this.setData({
      show: false
    })
  },
  // 搜索信息
  searchVal(e) {
    console.log(e.detail.value)
    this.setData({
      searchValue: e.detail.value
    })
  },
  // 搜索品牌
  search() {
    this.setData({
      CodeOrName: this.data.searchValue
    })
    // 根据输入请求品牌
    this.getBrandGuideInfo();
  },
  // 切换楼层
  footTap(e) {
    console.log(e.target.dataset.f)
    if (e.target.dataset.f > 0) {
      let index = e.target.dataset.f;
      let value = this.data.foots[index].FloorId;
      this.setData({
        FloorCode: value
      })
    } else {
      this.setData({
        FloorCode: ''
      })
    }
    // 根据楼层请求数据
    this.getBrandGuideInfo();
    this.setData({
      footId: e.target.dataset.f
    })
  },
  // 切换分类
  typtTap(e) {
    if (e.target.dataset.t > 0) {
      let index = e.target.dataset.t;
      let value = this.data.types[index].Id;
      let name = this.data.types[index].Name;
      this.setData({
        mold: name,
        ClassCode: value
      })
    } else {
      this.setData({
        mold: "分类",
        ClassCode: ''
      })
    }
    // 根据类别请求数据
    this.getBrandGuideInfo();
    this.setData({
      typeId: e.target.dataset.t
    })
  },
  // 拨打电话
  tel(e) {
    console.log(e.currentTarget.dataset.tel)
    if (e.currentTarget.dataset.tel == null) {
      wx.showToast({
        title: '该商家还没有电话',
        icon: 'none'
      })
    }
    wx.makePhoneCall({
      phoneNumber: e.currentTarget.dataset.tel
    })
  },
  // 获取品牌导视信息
  getBrandGuideInfo() {
    http.requestLoading('api/services/app/MemberIndexService/GetBrandGuideInfo', {
      CodeOrName: this.data.CodeOrName,
      FloorCode: this.data.FloorCode,
      ClassCode: this.data.ClassCode
    }, '', 'GET').then(res => {
      if (res.data.Result.Code == 0) {
        console.log(res)
        this.setData({
          brands: res.data.Result.Data
        })
      }
    })
  },
  // 获取楼层列表
  getFloorListInfo() {
    http.requestLoading('api/services/app/MemberIndexService/GetFloorListInfo', '', '', 'GET').then(res => {
      if (res.data.Result.Code == 0) {
        console.log(res)
        this.setData({
          foots: this.data.foots.concat(res.data.Result.Data)
        })
      }
    })
  },
  // 获取分类信息
  getClassInfo() {
    http.requestLoading('api/services/app/MemberIndexService/GetClassInfo', '', '', 'GET').then(res => {
      if (res.data.Result.Code == 0) {
        console.log(res)
        this.setData({
          types: this.data.types.concat(res.data.Result.Data)
        })
      }
    })
  }
})