小程序页点击展开请求数据展示，再点击关闭---笔记笔记笔记

 人员筛选框 不选则的话 展示所有人，选择后后展示选择的人

后台数据格式1、下拉 2、点击展示

 1、html

<!--pages/notSigned/notSigned.wxml-->
<view class="header">
    <view>
        <picker range="{{peopleList}}" range-key="{{'name'}}"  bindchange="bindChange">
          {{name}}<image src="/images/arrow_down_w.png"></image>
        </picker>
    </view>
    <view>
        <picker mode="date" fields="month" bindchange="bindStartTime" end="{{endDate}}" start="{{yeartoday}}">
          {{startTime?startTime:'请选择时间'}}<image src="/images/arrow_down_w.png"></image>
        </picker>
    </view>
   
</view>
<view class="peopleList">
 <block wx:for="{{reasonList}}" wx:key="index">
    <view class="peopleItem">
      <view class="peopleTitle">
          <span>{{item.name}}</span>
          <span bindtap="lookInfo" data-id="{{item.id}}" data-index="{{index}}">{{item.isopen?'收起':'展开'}}</span>
      </view>
      <block wx:if="{{item.isopen}}">
        <view class="peopleInfo">
          
              <block wx:for="{{detailList}}" wx:if="{{isshow}}" wx:key="index" wx:for-item="person">
                <view class="detail">

                <view class="left">
                  <view class="top">{{person.customer_name}}</view>
                  <view class="btm">{{person.phone_number}}</view>
                </view>
                <view class="right">数量：<text class="txt">{{person.count}}个</text></view>
                
                </view>
              </block>  
              <block wx:if="{{!isshow}}"><view class="detail2">暂无数据~~</view></block>  
         </view>
      </block>      
    </view>
 </block>
</view>

<view class="zhezhao" wx:if="{{zhezhao}}"></view>

 
  

2、js

var app = getApp()
var util = require('../../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
     peopleList:[],   //下拉框用   同样的数据 
     reasonList:[],   //内容展示   同样的数据
      choosepeople:false,//选择全部人员
      value:0,
      name:'',
      personId:"",  
      detailList:[],//原因展开
      startTime:'',  //时间
      isshow:1,      //暂无数据显示
      zhezhao:0,    //防止点击遮罩层
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad (options) {
    let _this = this
    app.request('milestone/getData', {}, function (res) {
      console.log(res);
      let peolist = res.data.people
      peolist.forEach(item => {
        item.isopen = false
      });
      _this.setData({
        peopleList:peolist,
        reasonList:peolist
      })
    })
    setTimeout(() => {
      
    
    this.setData({
      isPerson:options.uid,
      name:options.userName,
    })
    var date = new Date();
    var endDate = util.getLatestYearYestdy(date,2);  //这个方法用在时间选择器，获取一个两年后限制下拉框 别拉多了
    this.setData({ 
      endDate: endDate
    })
    // this.getUnsign()
  }, 1000);
  },
  //查看个人未签约情况
  lookInfo(e){
    // console.log(this.data.reasonList);
    this.setData({
      detailList:[]
    })
    let _this = this;
    let reasonList = _this.data.reasonList;
    let index = e.currentTarget.dataset.index;
    let oid = e.currentTarget.dataset.id

    reasonList.forEach((v,k)=>{
      if(k==index){   
        v.isopen==false?v.isopen = true:v.isopen= false  
        console.log(v.isopen);   
      }else{         //需要判断全部=false  时不执行
        v.isopen = false
      }
    })
    _this.setData({ reasonList: reasonList})
    let arr = this.data.reasonList
    // console.log(arr);
    if(arr.findIndex(item=>item.isopen===true)==-1){
       console.log('无无无没有没有没有展开的=====>')
    }else {
       console.log('有展开的=====>')
       _this.getlist(oid)   //有才展开数据
    }


  },
  getlist(oid){
    wx.showLoading({
      title: '加载中',
    })
    this.setData({
      zhezhao:1
    })
    let _this = this
    // let time = this.data.startTime
    let id = oid
    let aler = 1 
    let obj = {
      date:this.data.startTime,
      people:id?id:this.data.personId
    }
    app.request('milestone/getCensus', obj, function (res) {
      console.log(res);
      wx.hideLoading()
      if (res.data.length>0) {
        aler = 1
      }else{
        aler = 0
      }
      _this.setData({
        detailList:res.data,
        isshow:aler,
        zhezhao:0
      }) 

    })
  },
  bindChange(e){
    let id = this.data.peopleList[e.detail.value].id
    this.setData({ 
      detailList:[],
      name: this.data.peopleList[e.detail.value].name,
      personId:id
    })
    let cenlist = this.data.peopleList
    cenlist.forEach(item => {item.isopen = false});
    let newArr = cenlist.filter((item) => item.id == id)

    this.setData({
      reasonList:newArr
    })
  },
 
  //  -- 筛选时间
  bindStartTime (e) {
    let cenlist = this.data.reasonList
    cenlist.forEach(item => {
      item.isopen = false
    });
    this.setData({
      reasonList:cenlist,
      startTime: e.detail.value
    })
    console.log(e.detail.value);
    this.getlist()
  },


})

3、css

/* pages/notSigned/notSigned.wxss */
page{
  background: #F9FAFB;
}
.header{
  height: 90rpx;
  background: linear-gradient(180deg,#080433 0%,#3F1063 100%);
  border-radius:0px 0px 40rpx 40rpx;
  display: -webkit-box;
  color: #FFFFFF;
  font-size: 26rpx;
  line-height: 90rpx;
}
.header view{
  -webkit-box-flex: 1;
  text-align: center
}
.header view image{
  width: 20rpx;
  height: 14rpx;
  margin-left: 6rpx;
  vertical-align: 3rpx
}
/* 人员列表 */
.peopleList{
  padding: 0 24rpx
}
.peopleTitle{
  display: -webkit-box;
  color:rgba(19,28,44,0.6);
  font-size: 34rpx;
  padding: 32rpx 24rpx 24rpx 24rpx
}
.peopleTitle span{
  display: block;
  font-weight:500;
}
.peopleTitle span:nth-child(1){
 -webkit-box-flex: 1;
 font-size: 32rpx;
}
.peopleTitle span:nth-child(2){
  color: #0479EB;
  font-size: 24rpx;
  font-weight: 400;
  width: 100rpx;
  text-align: right;
  padding-top: 7rpx;
  line-height: 50rpx;
}
.peopleTitle text{
  font-size: 24rpx;
  color: #0479EB;
  margin-left: 20rpx;
  display: block;
  height: 50rpx;
  line-height: 50rpx;
}
.peopleInfo{
  background:rgba(255,255,255,1);
  box-shadow:0px 4rpx 12rpx 0px rgba(203,212,221,0.3);
  border-radius:16rpx;
  padding: 0 24rpx;
}
.info{
  padding: 32rpx 0rpx 24rpx 0rpx
}
.info span:nth-child(1){
  font-size: 28rpx;
}
.info span:nth-child(2){
  font-size: 26rpx;
  color: #131C2C;
  padding-top: 0
}

picker-view-column{
   position: static
}

.detail{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
  font-size: 26rpx;
  color: #222222;
  border-top: 1rpx solid rgb(243, 242, 242);
}
.detail:nth-child(1){
  border: none;
}
.detail .left .btm{color: #999999;}
.detail .right .txt{color: #7329C1;}
.detail image{
  padding-left: 20rpx;
}
.detail2{
  text-align: center;
  font-size: 24rpx;
  color: #96B3D7;
  padding-bottom: 30rpx;
  padding-top: 30rpx;
}

.zhezhao{
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.01);
  position: fixed;
  z-index: 99;
  top: 0rpx;
}