微信小程序之分类页面功能

catalog.wxml

<view class="containers">
  <input class="search" type="text" value="{{keywrod}}" placeholder="输入搜索关键字" confirm-type="search" bindinput="inputChange" bindfocus="inputFocus" bindconfirm="onKeywordConfirm"></input>
  <view class="catalog" wx:if="{{catalog}}">
    <scroll-view scroll-y="true" class="nav">
      <view>
        <view class="item {{ index===str ? 'active' : ''}}" wx:for="{{navlist}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap="switchCate" data-floor="b{{index}}">{{item.name}}
        </view>
      </view>
    </scroll-view>
    <view class="tops">
      <scroll-view scroll-y="true" class="right" scroll-into-view="{{floorNum}}" scroll-with-animation="true" scroll-top="{{scrolltop}}" bindscrolltolower="lower" data-index="{{index}}">
        <view class="cate" data-id="{{item.id}}">
          <view class="hd">
            <image src="../../static/images/left.png"></image>
            <text id="b{{index}}" class="txt">{{currentCategory.name}}系列</text>
            <image src="../../static/images/right.png"></image>
          </view>
          <view class="bd" wx:for="{{currentCategory.subCategoryList}}" wx:key="{item.id}}">
            <image src="{{item.wap_banner_url}}"></image>
            <view class="bd-pro">
              <text class="bd-pro-name">{{item.name}}</text>
              <text class="bd-pro-weight">{{item.num}}</text>
              <view class="bd-product">
                <text class="bd-pro-price">{{item.price}}</text>
                <text class="bd-product-text" bindtap="cartTap">+</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>

catalog.wxss

page{
  overflow: hidden;
}
.containers {
  height: 100%;
  width: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.search {
  width: 666rpx;
  height: 70rpx;
  background: rgba(244, 246, 248, 1);
  border-radius: 17px;
  margin: 20rpx 42rpx 34rpx 42rpx;
  font-size: 26rpx;
  color: #000;
  line-height: 70rpx;
  text-align: center;
}

/* .input {
  font-size: 26rpx;
  color: #bbb;
  line-height: 70rpx;
  text-align: center;
} */

.catalog {
  flex: 1;
  width: 100%;
  background: #fff;
  display: flex;
  border-top: 1px solid #fafafa;
}

.nav {
  width: 194rpx;
  height: 980rpx;
  border-radius: 16rpx;
  background-color: #f8f8f8;
  margin-right: 30rpx;
}
.kong{
  height: 20rpx;
  width: 100%;
}
.nav .item {
  text-align: center;
  line-height: 90rpx;
  width: 194rpx;
  height: 90rpx;
  color: #333;
  font-size: 28rpx;
  margin-top: 32rpx;
}

.nav .item.active {
  text-align: center;
  line-height: 122rpx;
  width: 208rpx;
  height: 122rpx;
  border-left: 10rpx solid #fd7564;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 10px 0px rgba(253, 117, 100, 0.16);
  border-radius: 16rpx;
}
.tops{
padding-top: 10rpx;
}
.right{
  height: 970rpx;
}
.cate {
  padding-left:10rpx;
  padding-right: 40rpx;
}

.hd {
  margin: 20rpx 0 16rpx 0;
  text-align: center;
}

.hd image {
  width: 32rpx;
  height: 20rpx;
}

.hd text {
  margin: 0 16rpx;
  font-size: 34rpx;
  color: #333;
  font-weight: normal;
}

.bd {
  width: 472rpx;
  height: 232rpx;
  border-radius: 28rpx;
  background: rgba(248, 248, 248, 1);
  display: flex;
  margin-top: 28rpx;
}

.bd image {
  width: 228rpx;
  height: 232rpx;
  border-radius: 28rpx;
}

.bd-product {
  display: flex;
  justify-content: space-between;
}

.bd-pro {
  width: 214rpx;
  height: 232rpx;
  margin: 30rpx;
  display: flex;
  flex-direction: column;
}

.bd-pro-name {
  color: #333;
  font-size: 34rpx;
}

.bd-pro-weight {
  font-size: 28rpx;
  color: #999;
  margin: 24rpx 0 20rpx 0;
}

.bd-pro-price {
  font-size: 24rpx;
  color: #a70900;
}

.bd-product-text {
  bottom: 0;
  float: right;
  width: 48rpx;
  height: 48rpx;
  color: white;
  background-color: #fd7564;
  border-radius: 50%;
  line-height: 48rpx;
  text-align: center;
}
.fixeds {
  height: 98rpx;
  border-radius: 28rpx 28rpx 0 0;
}

.fixed-cart {
  width: 666rpx;
  height: 98rpx;
  background-color: #fd7564;
  left: 42rpx;
  position: absolute;
  border-radius: 28rpx;
  top: -15rpx;
  color: white;
  font-size: 28rpx;
  text-align: center;
  line-height: 98rpx;
  font-weight: 100;
  font-family: SourceHanSansCN-Regular;
}

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

.commodity_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 916rpx;
  background: #f8f8f8;
  border-radius: 28rpx 28rpx 0 0;
}

.top {
  height: 166rpx;
  background: white;
  display: flex;
  padding: 42rpx;
}

.top image {
  width: 166rpx;
  height: 166rpx;
  border-radius: 16rpx;
}

.yixuan {
  margin: 26rpx 0 26rpx 34rpx;
}

.top-yi {
  color: #a70900;
  font-size: 34rpx;
}

.text {
  font-size: 46rpx;
}

.top-xuan {
  margin-top: 14rpx;
  font-size: 28rpx;
  color: #999;
  display: flex;
}
.top-xuan text{
  margin-right: 10rpx;
}
.bottom {
  margin: 48rpx 42rpx 30rpx 42rpx;
  display: flex;
  flex-direction: column;
}

.kong {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 34rpx;
}

.specification {
  display: flex;
  flex-direction: column;
}

.specification text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 34rpx;
}

.kong1 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.flavors {
  margin-right: 28rpx;
  margin-bottom: 28rpx;
  width: 194rpx;
  height: 84rpx;
  background: white;
  text-align: center;
  color: #333333;
  font-size: 28rpx;
  line-height: 84rpx;
}
.flavors.active{
   background: #fd7564;
   color: white;
}

.specifications {
  width: 178rpx;
  height: 88rpx;
  background: white;
  color: #333333;
  font-size: 28rpx;
  text-align: center;
  line-height: 88rpx;
  margin-right: 28rpx;
  margin-bottom: 28rpx;
}
.specifications.active{
   background: #fd7564;
   color: white;
}

catalog.js

var util = require('../../utils/util.js');
var api = require('../../config/api.js');
var app = getApp()

Page({
  data: {
    navlist: [],
    id: 0,
    str: 0,
    skuNames: [],
    disableList: [], // 标记规格中的不可选元素
    skuInfo: {},
    selected: [],
    catalog: true,
    categoryList: [],
    currentCategory: [],
    // scrollLeft: 0,
    list: 0,
    // scrollTop: 0,
    goodsCount: 0,
    strlist: [],
    pslist: {},
    scrolltop: 0,
    flavor: '',
    heightArray: '900'
  },
  onLoad: function(options) {
    // var id = this.data.id
    this.getCatalog();
    // id.forEach((item, index) => {
    //   console.log(item)
    // })
  },
  getCatalog: function() {
    let that = this;
    var navlist = this.data.navlist
    var currentCategory = this.data.currentCategory
    wx.showLoading({
      title: '加载中...',
    });
    util.request(api.CatalogList).then(function(res) {
      navlist = res.data.categoryList,
        currentCategory = res.data.currentCategory
      that.setData({
        navlist: navlist,
        currentCategory: currentCategory
      });
      console.log(res.data)
      wx.hideLoading();
      util.request(api.GoodsCount).then(function(res) {
        that.setData({
          goodsCount: res.data.goodsCount
        });
      })
    })
    util.request(api.GoodsDetail, {
      id: that.data.id
    }).then(function (res) {
      if (res.errno === 0) {
        //
        var priceArry = new Array;
        //把sku名称收集
        res.data.info.skuList.forEach(function (item) {
          that.data.skuNames.push(item.title);
          priceArry.push(item.skuInfo.price);
        });
        var max = Math.max.apply(Math, priceArry);
        var min = Math.min.apply(Math, priceArry);

        that.setData({
          skuNames: that.data.skuNames,
          priceRange: min + "-" + max
        })

        if (res.data.userHasCollect == 1) {
          that.setData({
            'collectBackImage': that.data.hasCollectImage
          });
        } else {
          that.setData({
            'collectBackImage': that.data.noCollectImage
          });
        }
        WxParse.wxParse('goodsDetail', 'html', res.data.info.goods_desc, that);
        that.getGoodsRelated();
      }
    });
  },
  checkedTap(e) {
    var disable = e.currentTarget.dataset.disable; // 是否可选
    if (disable != null && !disable) return;
    var that = this;

    var goods = that.data.goods;
    var titleIdx = e.currentTarget.dataset.titleidx; // 规格组名称下标
    var detialIdx = e.currentTarget.dataset.detailidx; // 规格明细下标
    goods.specList[titleIdx].chooseSku = detialIdx; // 设置选中的规格明细下标到字段chooseSku

    var detailName = e.currentTarget.dataset.detailname; // 选中的规格名称
    that.data.selected[titleIdx] = detailName;
    // 
    var spec0 = goods.specList[0];
    var spec1 = goods.specList[1];

    // 封装 sku的可选控制 数组
    var obj0 = [];
    var obj1 = [];
    that.data.disableList.length = 0; // 清空不可选元素disableList的集合

    // 判断是否是两个规格以上的
    if (that.data.goods.specList.length < 2) {
      spec0.detail.forEach(function (item) {
        var isInclude = that.data.skuNames.some(function (_item) {
          return item == _item;
        });
        obj1.push(isInclude);
        // 清空已选
        if (!isInclude) {
          if (that.data.selected[0] == item) {
            that.data.selected[0] = "";
            that.data.goods.specList[0].chooseSku = null;
          }
        }
      })
    } else {
      switch (titleIdx) {
        case 0: // 选中的是第一个规格
          // 计算规格元素的可选
          spec1.detail.forEach(function (item) {
            var titleStr = detailName + "_" + item;
            // 判断当前组合是否存在skuNames中
            var isInclude = that.data.skuNames.some(function (item) {
              return item == titleStr;
            });
            obj1.push(isInclude);
            // 清空已选
            if (!isInclude) {
              if (that.data.selected[1] == item) {
                that.data.selected[1] = "";
                that.data.goods.specList[1].chooseSku = null;
              }
            }
          });
          break;
        case 1:
          // 选中的是第二个规格
          spec0.detail.forEach(function (item) {
            var titleStr = item + "_" + detailName;
            // 判断当前组合是否存在skuNames中
            var isInclude = that.data.skuNames.some(function (item) {
              return item == titleStr;
            })
            // 清空已选
            if (!isInclude) {
              if (that.data.selected[0] == item) {
                that.data.selected[0] = "";
                that.data.goods.specList[0].chooseSku = null;
              }
            }
            obj0.push(isInclude);
          });
          break;
      }
    }
    that.data.disableList.push(obj0);
    that.data.disableList.push(obj1);

    that.setData({
      goods: goods,
      disableList: that.data.disableList,
      selected: that.data.selected
    });
    that.renderSkuInfo();
  },
  // 渲染页面上sku的价格信息
  renderSkuInfo: function () {
    var skuName = this.data.selected.join("_");
    var skuInfo = {};
    this.data.goods.skuList.forEach(function (item) {
      if (item.title == skuName) {
        skuInfo = item.skuInfo;
      }
    })
    this.setData({
      skuInfo: skuInfo
    });
  },
  getCurrentCategory: function(index) {
    let that = this;
    var currentCategory = this.data.currentCategory
    var id = 0
    wx.getStorage({
      key: 'dj',
      success: function(res) {
        id = res.data
        util.request(api.CatalogCurrent, {
            id: id
          })
          .then(function(res) {
            currentCategory = res.data.currentCategory
            that.setData({
              currentCategory: currentCategory
            });
          });
      },
    })
  },
  cartTap(e) {
    var that = this;
    if (this.data.showModalStatus === false) {
      this.data.showModalStatus = true
    } else {
      this.data.showModalStatus = false
    }
    that.setData({
      showModalStatus: this.data.showModalStatus
    })
  },
  cartsTap() {
    var that = this;
    var price = this.data.skuInfo.price
    var skuName = this.data.selected.join("_");
    if (price !== undefined) {
      util.request(api.CartAdd, { goodsId: this.data.goods.id, number: this.data.number, skuName: skuName }, 'POST', 'application/json')
        .then((res) => {
          let _res = res
          if (_res.errno == 0) {
            wx.showToast({
              title: '添加成功',
            })
          }
          console.log(_res)
        })
      this.data.showModalStatus = false
      that.setData({
        showModalStatus: this.data.showModalStatus
      })
    }
    else {
      wx.showToast({
        title: '请选择好规格',
      })
    }
  },
  lower(e) {
    var that = this;
    var id = this.data.id
    var str = this.data.str
    var scrolltop = this.data.scrolltop
    var navlist = this.data.navlist
    var currentCategory = this.data.currentCategory
    if (currentCategory.id = navlist[str].id) {
      id = navlist[str + 1].id
      util.request(api.CatalogCurrent, {
          id: id
        })
        .then(function(res) {
          currentCategory = res.data.currentCategory
          that.setData({
            currentCategory: currentCategory
          });
        });
    } else if (str > navlist.length) {
      id = navlist[0].id
      util.request(api.CatalogCurrent, {
        id: id
      })
        .then(function (res) {
          currentCategory = res.data.currentCategory
          that.setData({
            currentCategory: currentCategory
          });
        });
    }
    wx.showLoading({
      title: '加载中....',
    })
    scrolltop = 0
    that.setData({
      scrolltop: scrolltop,
      id: id + 1,
      str: str + 1
    })
  },
  hideModal: function() {
    this.hideView();
  },
  hideView() {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function() {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
    
  },
  switchCate: function(e) {
    var that = this;
    var scrolltop = this.data.scrolltop
    var floorNum = e.currentTarget.dataset.floor;
    var index = e.currentTarget.dataset.index;
    // var currentTarget = e.currentTarget
    scrolltop = 2
    that.setData({
      floorNum: floorNum,
      str: index,
      scrolltop: scrolltop
    })
    console.log(index)
    wx.setStorage({
      key: 'dj',
      data: this.data.navlist[index].id,
    })
    this.getCurrentCategory(e.currentTarget.dataset.index);
    // console.log(index)
  },
  onReady: function() {
    // 页面渲染完成
  },
  onShow: function() {
    // 页面显示
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  },
  // getList: function () {
  //   var that = this;
  //   util.request(api.ApiRootUrl + 'api/catalog/' + that.data.currentCategory.cat_id)
  //     .then(function (res) {
  //       that.setData({
  //         categoryList: res.data,
  //       });
  //     });
  // },
  // switchCate: function (event) {
  //   var that = this;
  //   var currentTarget = event.currentTarget;
  //   if (this.data.currentCategory.id == event.currentTarget.dataset.id) {
  //     return false;
  //   }

  //   this.getCurrentCategory(event.currentTarget.dataset.id);
  // }
})