分类

分类商品

app.json

@@ -1,14 +1,15 @@
 {
   "pages": [
-    "pages/index/index",
-    "pages/all/all",
-    "pages/cart/cart",
-    "pages/my/my",
-    "pages/detail/detail",
-    "pages/login/login",
-    "pages/Mall/presaleCommodity/presaleCommodity",
-    "pages/Mall/newCommodity/newCommodity",
-    "pages/Mall/hotCommodity/hotCommodity"
+      "pages/index/index",
+      "pages/all/all",
+      "pages/cart/cart",
+      "pages/my/my",
+      "pages/detail/detail",
+      "pages/login/login",
+      "pages/Mall/sortCommodity/sortCommodity",
+      "pages/Mall/presaleCommodity/presaleCommodity",
+      "pages/Mall/newCommodity/newCommodity",
+      "pages/Mall/hotCommodity/hotCommodity"
   ],
   "window": {
     "backgroundColor": "#FFFFFF",

pages/Mall/newCommodity/newCommodity.json

@@ -4,5 +4,5 @@
       "product-list":"/components/product-list/product-list"
   },
   "navigationStyle":"custom",
-  "navigationBarTitleText":"新商品"
+  "navigationBarTitleText":"上新商品"
 }

pages/Mall/newCommodity/newCommodity.wxml

@@ -4,4 +4,4 @@
 <header position="new"></header>
 
 <!-- 商品列表 -->
-<product-list></product-list>
+<product-list position="new"></product-list>

pages/Mall/presaleCommodity/newCommodity.json → pages/Mall/presaleCommodity/presaleCommodity.json

@@ -4,5 +4,5 @@
       "product-list":"/components/product-list/product-list"
   },
   "navigationStyle":"custom",
-  "navigationBarTitleText":"新商品"
+  "navigationBarTitleText":"预售商品"
 }

pages/Mall/sortCommodity/sortCommodity.js

@@ -0,0 +1,91 @@
+// pages/Mall/sortCommodity/sortCommodity.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    filterList1:[
+        {title:'火影忍者',id:1},
+        {title:'初音',id:1},
+        {title:'原神',id:1},
+        {title:'柯南',id:1},
+        {title:'非人哉',id:1},
+        {title:'全部',id:1}
+    ],
+    filterList2:[
+        {title:'立绘',id:1},
+        {title:'吧唧',id:1},
+        {title:'官周',id:1},
+        {title:'痛包',id:1},
+        {title:'卡牌',id:1},
+        {title:'全部',id:1}
+    ],
+    filterIndex1:0,
+    filterIndex2:0
+  },
+
+  // 监听筛选
+  selectFilter(e){
+      let {index,index2,item} = e.currentTarget.dataset;
+      this.setData({
+          [index === 0?'filterIndex1':'filterIndex2']:index2,
+      })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/Mall/sortCommodity/sortCommodity.json

@@ -0,0 +1,8 @@
+{
+    "usingComponents": {
+        "header":"/components/header/header",
+        "product-list":"/components/product-list/product-list"
+    },
+    "navigationStyle":"custom",
+    "navigationBarTitleText":"分类商品"
+  }

pages/Mall/sortCommodity/sortCommodity.wxml

@@ -0,0 +1,32 @@
+<!--pages/Mall/sortCommodity/sortCommodity.wxml-->
+
+<!-- 头部 -->
+<header position="sort"></header>
+
+<!-- 分类 -->
+<view class="sortView">
+
+   <view class="filterCriteria" wx:for="{{2}}" wx:for-item="sort" wx:key="index">
+      
+      <view class="searchIcon">
+
+        <image src="/images/mall/search.png" mode=""/>
+
+        <text class="markline"></text>
+      
+      </view>
+
+      <view wx:for="{{sort === 0?filterList1:filterList2}}" wx:key="index" wx:for-index="index2" data-item="{{item}}" data-index="{{sort}}" data-index2="{{index2}}" class="filterText {{sort === 0 && filterIndex1 === index2?'selected':''}} {{sort === 1 && filterIndex2 === index2?'selected':''}}"  catchtap="selectFilter">
+         
+        <text>{{item.title}}</text>
+
+        <text class="markline"></text>
+
+      </view>
+
+   </view>
+
+</view>
+
+<!-- 商品列表 -->
+<product-list position="sort"></product-list>

pages/Mall/sortCommodity/sortCommodity.wxss

@@ -0,0 +1,35 @@
+/* pages/Mall/sortCommodity/sortCommodity.wxss */
+.sortView{
+    padding: 0 20px;
+}
+.sortView .filterCriteria{
+    height: 65rpx;
+    border-bottom: 1px solid #CFEAE5;
+    margin-top: 35rpx;
+    display: flex;
+}
+.sortView .filterCriteria .markline{
+    width: 2rpx;
+    height: 45rpx;
+    background: #CFEAE5;
+    display: block;
+    margin-top: 10rpx;
+    float: right;
+}
+.sortView .filterCriteria .searchIcon image{
+    width: 50rpx;
+    height: 50rpx;
+    align-self: center;
+    padding-right: 20rpx;
+}
+.sortView .filterCriteria .filterText{
+    font-size: 23rpx;
+    color: #7A7A7A;
+    text-align: center;
+    line-height: 65rpx;
+    flex: 1;
+}
+.sortView .filterCriteria .selected{
+
+    background: #CFEAE5;
+}