物料推广

pages/promotional/index.js

@@ -1,25 +1,71 @@
-// pages/promotional/index.js
+const getHeight = require("../../utils/getRheRemainingHeight");
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
+        scrollHeight: 0, //滚动区域高度
         searchContent: "", //搜索内容
+        mainActiveIndex: 0, //分类选择器打开分类的下标
+        activeId: null, //分类选择器选择id
+        items: [{
+            text: '所有城市',
+            children: [{
+                    text: '温州',
+                    id: '温州',
+                },
+                {
+                    text: '杭州',
+                    id: '杭州',
+                },
+            ],
+        }, {
+            text: '可选城市',
+            children: [{
+                    text: '嘉兴',
+                    id: '嘉兴',
+                },
+                {
+                    text: '台州',
+                    id: '台州',
+                },
+            ],
+        }, ]
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
-    onLoad(options) {
+    onLoad(options) {},
+    onClickNav({
+        detail = {}
+    }) {
+        this.setData({
+            mainActiveIndex: detail.index || 0,
+        });
+    },
 
+    onClickItem({
+        detail = {}
+    }) {
+        const activeId = this.data.activeId === detail.id ? null : detail.id;
+        console.log(activeId)
+        this.setData({
+            activeId
+        });
     },
 
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady() {
-
+        //滚动区域高度
+        getHeight.getHeight('.menu', this).then(res => {
+            this.setData({
+                scrollHeight: res
+            })
+        })
     },
 
     /**

pages/promotional/index.json

@@ -1,7 +1,7 @@
 {
     "navigationBarTitleText": "推广素材",
     "usingComponents": {
-        "van-search": "@vant/weapp/search/index",
-        "ProductList": "./modules/productList"
+        "ProductList": "./modules/productList",
+        "van-search": "@vant/weapp/search/index"
     }
 }

pages/promotional/index.scss

@@ -1,4 +1,5 @@
 @import '/static/unread.wxss';
+@import '/static/dropdown-switch.wxss';
 
 /* 搜索和上传按钮 */
 .search-and-upload {
@@ -20,6 +21,7 @@
     position: relative;
     width: 190rpx;
     height: 100%;
+
     .upload {
         position: absolute;
         height: 64rpx;
@@ -36,6 +38,7 @@
         font-weight: bold;
         color: #FFFFFF;
         top: -30rpx;
+
         text {
             margin-right: 15rpx;
         }

pages/promotional/index.wxml

@@ -1,3 +1,4 @@
+<!-- 搜索 -->
 <van-search value="{{ searchContent }}" use-action-slot shape="round" background="var(--primary)" placeholder="请输入搜索关键词">
     <view class="upload-box" slot='action'>
         <navigator url="/pages/promotional/upload" class="upload">
@@ -6,13 +7,22 @@
         </navigator>
     </view>
 </van-search>
-
-<van-tabs swipeable sticky color='var(--assist)' title-active-color='var(--assist)' title-inactive-color='#999999'>
-    <van-tab title="列表">
-        <ProductList></ProductList>
-    </van-tab>
-    <van-tab title="我的素材">
-        <ProductList></ProductList>
-    </van-tab>
-    <van-tab title="拉新清单">内容 3</van-tab>
-</van-tabs>
+<!-- tabs -->
+<van-tabs sticky color='var(--assist)' title-active-color='var(--assist)' title-inactive-color='#999' z-index='9'>
+    <van-tab title="列表" />
+    <van-tab title="我的素材" />
+    <van-tab title="拉新清单" />
+</van-tabs>
+<!-- 下拉菜单 -->
+<van-dropdown-menu class="menu" activeColor='var(--assist)'>
+    <van-dropdown-item id="item" title="{{activeId||'默认'}}">
+        <van-tree-select items="{{ items }}"  main-active-class='main-active' content-active-class='content-active' main-active-index="{{ mainActiveIndex }}" active-id="{{activeId}}" bind:click-nav="onClickNav" bind:click-item="onClickItem" />
+    </van-dropdown-item>
+    <view class="switch">
+        <My_switch></My_switch>
+    </view>
+</van-dropdown-menu>
+<!-- 列表 -->
+<My_listBox height='{{scrollHeight}}'>
+    <ProductList />
+</My_listBox>

pages/promotional/modules/productList.js

@@ -1,4 +1,5 @@
 // pages/promotional/modules/productList.js
+
 Component({
     /**
      * 组件的属性列表
@@ -14,9 +15,7 @@ Component({
     /**
      * 组件的初始数据
      */
-    data: {
-
-    },
+    data: {},
 
     /**
      * 组件的方法列表

pages/promotional/modules/productList.wxml

@@ -1,6 +1,6 @@
 <view class="unread">总共20个，有1个更新</view>
 <My_card custom-class='product-list'>
-    <view url="/pages/promotional/details" class="item" wx:for="{{5}}">
+    <view url="/pages/promotional/details" class="item" wx:for="{{20}}">
         <navigator url="/pages/promotional/details">
             <van-image width="336rpx" height="247rpx" fit='cover' src="https://img.yzcdn.cn/vant/cat.jpeg" lazy-load />
             <view class="details">