feature：增加木鱼的下拉菜单组件

pages/piano/components/dropdownmenu/dropdownmenu.js

@@ -0,0 +1,253 @@
+Component({
+  properties: {
+    dropDownMenuTitle: {
+      type: Array,
+      value: [],
+    },
+    dropDownMenuDistrictData: {
+      type: Array,
+      value: [],
+      observer: function(newVal, oldVal) {
+        let model = newVal[0] ? newVal[0] : null
+        this.selectDefaltDistrictLeft(model)
+      }
+    },
+
+    dropDownMenuSourceData: {
+      type: Array,
+      value: []
+    },
+    dropDownMenuStyleData: {
+      type: Array,
+      value: []
+    },
+    dropDownMenuFilterData: {
+      type: Array,
+      value: []
+    },
+  },
+  data: {
+    // private properity
+    district_open: false, // 区域
+    source_open: false, // 来源
+    style_open: false, // 出租 出售
+    filteropen: false, // 筛选
+    shownavindex: '',
+    dropDownMenuDistrictDataRight: {},
+    district_left_select: '',
+    district_right_select: '',
+    district_right_select_name: '',
+    selected_style_id: 0,
+    selected_style_name: '',
+    selected_source_id: 0,
+    selected_source_name: '',
+    selected_filter_id: 0,
+    selected_filter_name: ''
+  },
+  methods: {
+
+    tapDistrictNav: function(e) {
+      if (this.data.district_open) {
+        this.setData({
+          district_open: false,
+          source_open: false,
+          style_open: false,
+          filter_open: false,
+          shownavindex: 0
+        })
+      } else {
+        this.setData({
+          district_open: true,
+          style_open: false,
+          source_open: false,
+          filter_open: false,
+          shownavindex: e.currentTarget.dataset.nav
+        })
+      }
+
+    },
+    tapSourceNav: function(e) {
+      if (this.data.source_open) {
+        this.setData({
+          source_open: false,
+          style_open: false,
+          district_open: false,
+          filter_open: false,
+          shownavindex: 0
+        })
+      } else {
+        this.setData({
+          source_open: true,
+          style_open: false,
+          district_open: false,
+          filter_open: false,
+          shownavindex: e.currentTarget.dataset.nav
+        })
+      }
+    },
+    tapStyleNav: function(e) {
+      if (this.data.style_open) {
+        this.setData({
+          source_open: false,
+          style_open: false,
+          district_open: false,
+          filter_open: false,
+          shownavindex: 0
+        })
+      } else {
+        this.setData({
+          source_open: false,
+          style_open: true,
+          filter_open: false,
+          district_open: false,
+          shownavindex: e.currentTarget.dataset.nav
+        })
+      }
+      console.log(e.target)
+    },
+    tapFilterNav: function(e) {
+      if (this.data.filter_open) {
+        this.setData({
+          source_open: false,
+          style_open: false,
+          district_open: false,
+          filter_open: false,
+          shownavindex: 0
+        })
+      } else {
+        this.setData({
+          source_open: false,
+          style_open: false,
+          district_open: false,
+          filter_open: true,
+          shownavindex: e.currentTarget.dataset.nav
+        })
+      }
+    },
+
+
+    selectDefaltDistrictLeft(model) {
+      if (!model) {
+        return
+      }
+      var model = model.childModel;
+      var selectedId = model.id
+      var selectedTitle = model.title;
+      this.setData({
+        dropDownMenuDistrictDataRight: model ? model : '',
+        district_left_select: selectedId,
+        district_right_select: '',
+      })
+    },
+
+    selectDistrictLeft: function(e) {
+      var model = e.target.dataset.model.childModel;
+      var selectedId = e.target.dataset.model.id
+      var selectedTitle = e.target.dataset.model.title;
+      this.setData({
+        dropDownMenuDistrictDataRight: model ? model : '',
+        district_left_select: selectedId,
+        district_right_select: '',
+      })
+    },
+
+    selectDistrictRight: function(e) {
+      var selectedId = e.target.dataset.model.id
+      var selectedTitle = e.target.dataset.model.title;
+      this.closeHyFilter();
+      this.setData({
+        district_right_select: selectedId,
+        district_right_select_name: selectedTitle
+      })
+      this.triggerEvent("selectedItem", {
+        index: this.data.shownavindex,
+        selectedId: selectedId,
+        selectedTitle: selectedTitle
+      })
+    },
+
+    selectSourceItem: function(e) {
+      var selectedId = e.target.dataset.model.id
+      var selectedTitle = e.target.dataset.model.title;
+      this.closeHyFilter();
+      this.setData({
+        selected_source_id: selectedId,
+        selected_source_name: selectedTitle
+      })
+      this.triggerEvent("selectedItem", {
+        index: this.data.shownavindex,
+        selectedId: selectedId,
+        selectedTitle: selectedTitle
+      })
+    },
+
+    selectFilterItem: function(e) {
+      var selectedId = e.target.dataset.model.id
+      var selectedTitle = e.target.dataset.model.title;
+      this.closeHyFilter();
+      this.setData({
+        selected_filter_id: selectedId,
+        selected_filter_name: selectedTitle
+      })
+      this.triggerEvent("selectedItem", {
+        index: this.data.shownavindex,
+        selectedId: selectedId,
+        selectedTitle: selectedTitle
+      })
+    },
+
+    selectStyleItem: function(e) {
+      var selectedId = e.target.dataset.model.id
+      var selectedTitle = e.target.dataset.model.title;
+      this.closeHyFilter();
+      this.setData({
+        selected_style_id: selectedId,
+        selected_style_name: selectedTitle
+      })
+      this.triggerEvent("selectedItem", {
+        index: this.data.shownavindex,
+        selectedId: selectedId,
+        selectedTitle: selectedTitle
+      })
+    },
+
+    /**关闭筛选 */
+    closeHyFilter: function() {
+      if (this.data.district_open) {
+        this.setData({
+          district_open: false,
+          source_open: false,
+          style_open: false,
+          filter_open: false,
+        })
+      } else if (this.data.source_open) {
+        this.setData({
+          source_open: false,
+          style_open: false,
+          district_open: false,
+          filter_open: false,
+        })
+      } else if (this.data.style_open) {
+        this.setData({
+          source_open: false,
+          style_open: false,
+          district_open: false,
+          filter_open: false,
+        })
+      } else if (this.data.filter_open) {
+        this.setData({
+          source_open: false,
+          style_open: false,
+          district_open: false,
+          filter_open: false,
+        })
+      }
+    },
+  },
+  //组件生命周期函数，在组件实例进入页面节点树时执行
+  attached: function() {
+
+
+  },
+
+})

pages/piano/components/dropdownmenu/dropdownmenu.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

pages/piano/components/dropdownmenu/dropdownmenu.wxml

@@ -0,0 +1,60 @@
+<view class="nav">
+  <view class="nav-child {{district_open? 'active' : ''}}" bindtap="tapDistrictNav" hidden='{{dropDownMenuDistrictData.length > 0 ? false :true}}' data-nav="1">
+    <view class="nav-title">{{district_right_select_name.length > 0 ?district_right_select_name : dropDownMenuTitle[0]}}</view>
+    <view class="icon"></view>
+  </view>
+  <view class="nav-child borders {{source_open? 'active' : ''}}" bindtap="tapSourceNav" hidden='{{dropDownMenuSourceData.length > 0 ? false : true}}' data-nav="2">
+    <view class="nav-title">{{selected_source_name.length > 0 ?selected_source_name : dropDownMenuTitle[1]}}</view>
+    <view class="flexEmpty"></view>
+    <view class="icon"></view>
+  </view>
+  <view class="nav-child borders-right {{style_open? 'active' : ''}}" bindtap="tapStyleNav" hidden='{{dropDownMenuStyleData.length > 0 ? false : true}}' data-nav="3">
+    <view class="nav-title">{{selected_style_name.length > 0 ?selected_style_name : dropDownMenuTitle[2]}}</view>
+    <view class="icon"></view>
+  </view>
+  <view class="nav-child {{filter_open ? 'active' : ''}}" bindtap="tapFilterNav" hidden='{{dropDownMenuFilterData.length > 0 ? false : true}}' data-nav="4">
+    <view class="nav-title">{{selected_filter_name.length > 0 ?selected_filter_name : dropDownMenuTitle[3]}}</view>
+    <view class="icon"></view>
+  </view>
+</view>
+
+<view class="district {{district_open ? 'show' : 'disappear'}} ">
+  <view class="half half-left">
+    <view class="{{district_left_select == item.id ? 'current_left_select' : ''}}" wx:for="{{dropDownMenuDistrictData}}" bindtap="selectDistrictLeft" data-model='{{item}}' wx:key="unique">
+      {{item.title}}
+    </view>
+  </view>
+  <view class="half half-right">
+    <view class="{{district_right_select == item.id ? 'current_right_select' : ''}}" wx:for="{{dropDownMenuDistrictDataRight}}" bindtap="selectDistrictRight" data-model='{{item}}' wx:key="unique">
+      {{item.title}}
+    </view>
+  </view>
+</view>
+
+<view class="container container_hd {{source_open ? 'show' : 'disappear'}} ">
+  <view class='z-height'>
+    <view>
+      <block wx:for="{{dropDownMenuSourceData}}" wx:key="unique">
+        <view class="sortitem {{selected_source_id==item.id ? ' active ' : ' '}}" data-model='{{item}}' bindtap='selectSourceItem'> {{item.title}}</view>
+      </block>
+    </view>
+  </view>
+</view>
+<view class="container container_hd {{style_open ? 'show' : 'disappear'}} ">
+  <view class='z-height'>
+    <view>
+      <block wx:for="{{dropDownMenuStyleData}}" wx:key="unique">
+        <view class="sortitem {{selected_style_id==item.id ? ' active ' : ' '}}" data-model='{{item}}' bindtap='selectStyleItem'> {{item.title}}</view>
+      </block>
+    </view>
+  </view>
+</view>
+<view class="container container_hd {{filter_open ? 'show' : 'disappear'}} ">
+  <view class='z-height'>
+    <view>
+      <block wx:for="{{dropDownMenuFilterData}}" wx:key="unique">
+        <view class="sortitem {{selected_filter_id==item.id ? ' active ' : ' '}}" data-model='{{item}}' bindtap='selectFilterItem'> {{item.title}}</view>
+      </block>
+    </view>
+  </view>
+</view>

pages/piano/components/dropdownmenu/dropdownmenu.wxss

@@ -0,0 +1,238 @@
+.page {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  overflow: hidden;
+}
+
+.position {
+  position: absolute;
+}
+
+.flexEmpty {
+  flex: 1;
+}
+
+.nav {
+  position: relative;
+  z-index: 99;
+  display: flex;
+  border-bottom: 1px solid #f7f7f7;
+  background: #fff;
+}
+
+.nav-child {
+  display: flex;
+  flex: 1;
+  text-align: center;
+  height: 48rpx;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  margin: 20rpx 0;
+}
+
+.borders-right {
+  border-right: 1px solid #e6e6e6;
+}
+
+.borders-left {
+  border-left: 1px solid #e6e6e6;
+}
+
+.borders {
+  border-left: 1px solid #e6e6e6;
+  border-right: 1px solid #e6e6e6;
+}
+
+.nav-title {
+  display: inline-block;
+}
+
+.icon {
+  display: inline-block;
+  border: 4px solid transparent;
+  border-top: 4px solid #9b9b9b;
+  margin-left: 5px;
+  margin-top: 10rpx;
+}
+
+.container {
+  position: relative;
+  z-index: 4;
+  font-size: 14px;
+}
+
+
+.slidedown {
+  transform: translateY(0%);
+}
+
+.district {
+  position: absolute;
+  display: none;
+  z-index: 5;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.district .half {
+  overflow-y: scroll;
+  float: left;
+  width: 50%;
+  height: 600rpx;
+  line-height: 80rpx;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.half view {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 15rpx;
+}
+
+.half-left {
+  background: #f7f7f7;
+}
+
+.half-center {
+  background: #fff;
+}
+
+.half-right {
+  background: #fff;
+}
+
+.half-right view {
+  border-bottom: 1px solid #f7f7f7;
+}
+
+.current_left_select {
+  background: #fff;
+}
+
+.current_right_select {
+  background: #fff;
+  color: #fc6060;
+}
+
+.nav-child.active .nav-title {
+  color: #fc6060;
+}
+
+.nav-child.active .icon {
+  border-bottom: 4px solid #fc6060;
+  border-top: 0;
+}
+
+@keyframes slidown {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0%);
+  }
+}
+
+.slidown {
+  display: block;
+  animation: slidown 0.2s ease-in both;
+}
+
+@keyframes slidup {
+  from {
+    transform: translateY(0%);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+.z-height {
+  overflow-y: scroll;
+  background: #fff;
+}
+
+.slidup {
+  display: block;
+  animation: slidup 0.2s ease-in both;
+}
+
+.disappear {
+  display: none;
+}
+
+.show {
+  display: inline;
+  flex: 1;
+}
+
+.slidowntop {
+  display: flex;
+  flex-direction: row;
+  padding: 20rpx 24rpx 10rpx 24rpx;
+}
+
+.emptyall {
+  margin-left: 475rpx;
+  color: #fc6060;
+}
+
+.emptyallright {
+  width: 80rpx;
+  text-align: center;
+}
+
+.endselect {
+  width: 350rpx;
+  text-align: left;
+}
+
+.return {
+  margin-left: 200rpx;
+  color: #fc6060;
+}
+
+.slidowncenter {
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  padding-left: 24rpx;
+  display: flex;
+  flex-direction: row;
+  align-content: space-between;
+  border-top: solid #d1d3d4 1rpx;
+}
+
+.slidownbottom {
+  margin-top: 10rpx;
+  padding: 10rpx;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.sortitem {
+  border-bottom: solid #f7f7f7 1rpx;
+  justify-content: space-between;
+  padding: 20rpx 30rpx;
+}
+
+.sortitem.active {
+  color: #fc6060;
+}
+
+.container_hd {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  margin-right: 0;
+  position: absolute;
+  overflow-y: scroll;
+  background-color: rgba(0, 0, 0, 0.5);
+}

pages/piano/woodenfish/woodenfish.js

@@ -14,25 +14,93 @@ Page({
       title: '木鱼', //导航栏 中间的标题
     },
     selTypeList: [{"url":"","name":"木鱼1"},{"url":"","name":"木鱼2"},{"url":"","name":"木鱼3"}],
-    option1: [
-      { text: '全部商品', value: 0 },
-      { text: '新款商品', value: 1 },
-      { text: '活动商品', value: 2 },
+    dropDownMenuTitle: ['区域', '来源', '租售', '排序'],
+    data1: [{
+        id: 0,
+        title: '不限',
+        childModel: [{
+            id: '0-1',
+            title: '不限'
+          }
+        ]
+      },
+
+      {
+        id: 1,
+        title: '道里区',
+        childModel: [{
+            id: '1-1',
+            title: '中央大街'
+          },
+          {
+            id: '1-2',
+            title: '埃德蒙顿路'
+          }
+        ]
+      },
+      {
+        id: 2,
+        title: '南岗区',
+        childModel: [{
+            id: '2-1',
+            title: '果戈里'
+          },
+          {
+            id: '2-2',
+            title: '通达街'
+          }
+        ]
+      },
+      {
+        id: 3,
+        title: '松北区',
+        childModel: [{
+            id: '3-1',
+            title: '世茂大道'
+          },
+          {
+            id: '3-2',
+            title: '市政府'
+          }
+        ]
+      }
     ],
-    option2: [
-      { text: '默认排序', value: 'a' },
-      { text: '好评排序', value: 'b' },
-      { text: '销量排序', value: 'c' },
+    data2: [{
+        id: 1,
+        title: '个人房源'
+      },
+      {
+        id: 2,
+        title: '经纪人房源'
+      }
     ],
-    value1: 0,
-    value2: 'a',
-    calender_marks:{
-      "vibrate": false,
-      "customNavBar":false
-    }
-
-  },handleLoad(){
+    data3: [{
+        id: 1,
+        title: '出租'
+      },
+      {
+        id: 2,
+        title: '出售'
+      }
+    ],
+    data4: [{
+      id: 1,
+      title: '智能排序'
+    }, {
+      id: 2,
+      title: '发布时间'
+    }, {
+      id: 3,
+      title: '距离优先'
+    }],
+
+  } , selectedItem: function(e) {
+    console.log('id --' + e.detail.selectedId + "cityname = " + e.detail.selectedTitle);
+  },
+  showDialog: function(e) {
 
+  },handleLoad:function(e) {
+    // this.selectComponent(e)
   },
 
   /**

pages/piano/woodenfish/woodenfish.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "nav-bar": "../../components/navbar/navbar"
+    "nav-bar": "../../components/navbar/navbar",
+    "dropdownmenu": "../components/dropdownmenu/dropdownmenu"
   }
 }

pages/piano/woodenfish/woodenfish.wxml

@@ -14,7 +14,7 @@
       </view>
 
 <view class="calender_c"></view>
-      <!-- <calendar class="calender_c" id="calendar" bindload="handleLoad" CalendarProp="{{calender_marks}}"  /> -->
+      <!-- <calendar class="calender_c" id="calendar" bindload="handleLoad"  /> -->
 
       <view class="detail_c">
         <text class="detail_time">2024-04-23</text>
@@ -36,12 +36,9 @@
         <text class="title_c">设置</text>
         <view class="audio_c">
           <text class="select_audio_title">音效选择</text>
-          <view class="select_audio"></view>
-          <!-- <van-dropdown-menu class="select_audio">
-            <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-            <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-
-          </van-dropdown-menu> -->
+          <!-- <view class="select_audio"></view> -->
+          <dropdownmenu class="select_audio" dropDownMenuTitle='{{dropDownMenuTitle}}'  dropDownMenuSourceData='{{data2}}' 
+  bind:selectedItem='selectedItem' />
         </view>
         <view class="time_c">
           <text class="select_duration_title">敲击间隔</text>

pages/piano/woodenfish/woodenfish.wxss

@@ -41,11 +41,11 @@
 width: 16rpx;
 }
 
-/* .container .scroll_c  .calender_c { 
+.container .scroll_c  .calender_c { 
   margin-top: 16rpx;
   height: 360rpx;
   width: 100%;
-} */
+}
 
 .container .scroll_c .detail_c {
   margin-top: 16rpx;
@@ -73,7 +73,6 @@ width: 16rpx;
 
 .container .scroll_c .sel_type_c {
   margin-top: 16rpx;
-  height: 200rpx;
   width: 100%;
   flex-direction: column;
 }
@@ -121,6 +120,7 @@ width: 16rpx;
 .container .scroll_c  .set_c {
   margin-top: 16rpx;
   width: 100%;
+  height: 400rpx;
   flex-direction: column;
   background-color: darkseagreen;
 }