自定义多选组件

Gesmee

已于 2024-07-12 16:40:11 修改

阅读量228

点赞数 3

分类专栏：微信小程序文章标签： javascript 前端

于 2024-07-12 15:12:37 首次发布

本文链接：https://blog.csdn.net/suxiao_21/article/details/140378400

版权

微信小程序专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一.业务场景

选择用印公司时，需要选择多个公司，一个公司对应一个实际使用人

点击用印单位，弹出选择公司窗口，选择使用人，同时带上公司ID,点击确定按钮，将公司和使用人回显在用印单位上

二.上代码

wxml代码：

<view class="list">
      <view class="multiple">
        <view>
          <image slot="icon" class="icon" src="https://636c-cloud1-5gs8rk3873885f1e-1313217433.tcb.qcloud.la/InternalOffice/uyintong/home/1.2.0/useSealCompany.png?sign=f1579b5c5d469bba9543007030dde831&t=1720426665"></image>
        </view>
        <view>
          <view class="title">{{applyType==1?'用印单位':(applyType==2?'用盾单位':'用证单位')}}<text>（必填）</text></view>
          <view slot="label" class="lable">
            <view wx:if="{{item.useSealCompanyList==null}}">{{applyType==1?'请选择用印单位':(applyType==2?'请选择用盾单位':'请选择用证单位')}}</view>
            <view wx:for="{{item.useSealCompanyList}}">
              <view class="company">
                <view>{{item.useSealCompany}}-{{item.actualUser}}</view>
                <view bind:tap="deleteCompany" data-company="{{item.useSealCompanyId}}" class="delete"><van-icon name="close"/></view>
              </view>
            </view>
          </view>
        </view>
        <view bind:tap="openShowPopup0" data-index="{{index}}" class="arrow"><van-icon name="arrow" color="#999999"/></view>
      </view>
      <view class="line"></view>
    </view>

<!-- 用印单位列表弹框 -->
<van-popup custom-class="yongyindanweilistpage" show="{{ showYongyinDanwei0 }}" position="left" custom-style="height:100%;width:100%">
  <view class="searchbar">
    <view class="search">
      <van-search
        value="{{ value }}"
        placeholder="请输入搜索关键词"
        show-action
        bind:change="yongyindanweitopSearchFun"
        bind:cancel="onClickLeftYongyinDanwei0"
      />
    </view>
    <view bind:tap="confirmCompany" class="btn">确定</view>
  </view>
  <view class="Oul" wx:if="{{cities.length!=0}}">
    <van-checkbox-group value="{{ objlist[currentIndex].useSealCompany }}">
      <van-cell-group>
        <view class="cityList" wx:for="{{cities}}" wx:key="index">
          <view class="letter" wx:if="{{item.list.length!=0}}">{{item.key}}</view>
          <view wx:for="{{item.list}}" wx:key="index1">
            <view class="company">
              <view class="name">{{item.companyName}}</view>
              <view data-select="{{ item }}" bind:tap="selectCity">
                <van-icon name="arrow-up" wx:if="{{item.showUp == null ? true : item.showUp}}"/>
                <van-icon name="arrow-down" wx:if="{{item.showDown || false}}"  bind:tap="hideDown"/>
              </view>
            </view>
            <view wx:if="{{item.check}}" class="text">
              <van-radio-group value="{{ item.selectUser }}" bind:change="userChange">
                <view wx:for="{{users}}">
                  <van-radio name="{{item.realName}}" custom-class="radio1">{{item.realName}}</van-radio>
                </view>
              </van-radio-group>
            </view>
          </view>
        </view>
      </van-cell-group>
    </van-checkbox-group>
  </view>
  <view class="isnonebox" wx:else>
    <view class="custom-text">用印单位列表为空</view>
  </view>
</van-popup>

scss代码：

.list {
    position: relative;
    .line {
      width: 688rpx;
      height: 0.5rpx;
      background: #f4f5f7;
      margin-left: 32rpx;
      margin-top: 12rpx;
    }
    .multiple {
      display: flex;
      padding-left: 31rpx;
      padding-top: 20rpx;
      .arrow {
        margin-left: auto;
        padding-right: 34rpx;
      }
      .title {
        font-weight: bold;
        font-size: 30rpx;
        color: #4D4D4D;
        text {
          color: #FE2B27;
          font-size: 12px;
        }
      }
      .lable {
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        .company {
          display: flex;
          width: 100%;
          .delete {
            margin-left: auto;
            padding-left: 91rpx;
          }
        }
      }
    }
}


.yongyindanweilistpage {
  .searchbar {
    padding-right: 20rpx;
    display: flex;
    .search {
      width: 90%;
    }
    .btn {
      padding-top: 8rpx;
      width: 104rpx;
      height: 37rpx;
      border-radius: 22rpx 22rpx 22rpx 22rpx;
      background: #E9F1FF;
      border: 1rpx solid #659EFF;
      font-weight: 400;
      font-size: 27rpx;
      color: #659EFF;
      line-height: 32rpx;
      text-align: center;
      margin-top: 29rpx;
    }
  }
  .Oul {
    .cityList {
      .letter {
        padding: 0 16px;
        height: 20px;
        background: #F4F4F4;
        font-size: 12px;
        font-weight: 400;
        color: #C9C9C9;
        line-height: 20px;
      }
      .company {
        display: flex;
        padding-left:26rpx;
        .name {
          width: 91%;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          height: 73rpx;
          line-height: 66rpx;
        }
      }
      .text {
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        padding-left:26rpx;
        .radio1 {
          padding-top:10rpx;
        }
      }

    }

  }

  .isnonebox {
    margin-top: 110px;

    .custom-image {
      width: 225px;
      height: 185px;
      display: block;
      margin: 0 auto;
    }

    .custom-text {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 18px;
      color: #BABFC9;
      text-align: center;
      margin-top: -42px;
    }
  }
}

js代码：

Page({
data: {
    //用印单位
    yongyindanweiSearchValue: '',
    useSealCompanyId: 0,
    useSealCompany: "",
    useSealCompanyList:[],
    //印章实际使用人
    actualUser: 0,
    // 当前选中卡片
    currentIndex: "",
    showYongyinDanwei0: false,
    // 以字母形式排列
    cities: [], 
    showActualUser: false,
    users:[],
    objlist: [],
    showUp: true,
    showDown: false
  },
  deleteCompany(event) {
    let that = this
    let companyId = event.currentTarget.dataset.company;
    that.data.cities.forEach(function (item, index) {
      item.list.forEach(function (sub, index) {
        if(that.data.useSealCompanyId == sub.id) {
          sub.selectUser = 0
        }
      })
    })
    that.setData({
      cities: that.data.cities,
    })
    let map = new Map();
    for(let item of that.data.useSealCompanyList) {
      map.set(item.useSealCompanyId,item);
    }
    map.delete(companyId)
    that.conventMapToArray(map)
    console.log("useSealCompanyList:",that.data.useSealCompanyList)
  },
  conventMapToArray(map) {
    let that = this
    const array = Array.from(map.values());
    console.log("array:",array)
    let up = "objlist["+this.data.currentIndex+"].useSealCompanyList";
    that.setData({
      [up]: array,
      useSealCompanyList: array
    })
  },
  confirmCompany() {
    let that = this
    console.log("useSealCompanyList:",that.data.useSealCompanyList)
    let map = new Map();
    for(let item of that.data.useSealCompanyList) {
      map.set(item.useSealCompanyId,item);
    }
    that.conventMapToArray(map)
    that.setData({
      showYongyinDanwei0: false,
    });
    // console.log("useSealCompanyList:",that.data.useSealCompanyList)
    // 显示父页面后退按钮和tab栏
    that.triggerEvent('hideLeftArrow',{leftArrow:true})
  },
  userChange(event) {
    let that = this
    let selectUser = event.detail
    that.data.cities.forEach(function (item, index) {
      item.list.forEach(function (sub, index) {
        if(that.data.useSealCompanyId == sub.id) {
          sub.selectUser = selectUser
        }
      })
    })
    that.setData({
      cities: that.data.cities,
      actualUser: selectUser
    })
    if(that.data.actualUser != 0) {
      let obj = {"useSealCompanyId": that.data.useSealCompanyId,"actualUser": that.data.actualUser,"useSealCompany": that.data.useSealCompany}
      that.data.useSealCompanyList.push(obj)
      that.setData({
        useSealCompanyList: that.data.useSealCompanyList
      })
      // console.log("useSealCompanyList:",that.data.useSealCompanyList)
    }
  },
  selectCity(event) {
    const {
      select
    } = event.currentTarget.dataset;
    console.log("select:",select)
    this.data.cities.forEach(function (item, index) {
      item.list.forEach(function (sub, index) {
        if(select.id == sub.id) {
          sub.check = !sub.check
          sub.showDown = !sub.showDown
          sub.showUp = !sub.showDown
          console.log("down:",sub.showDown)
          console.log("up:",sub.showUp)
        }
      })
    })
    this.setData({
      cities: this.data.cities,
      useSealCompanyId: select.id,
      useSealCompany: select.companyName
    })
    // console.log("cities:",this.data.cities)
  },

三.思路

1.弹窗就不用说了，show为true或false的区别

2.selectCity：点击view，通过data-select="{{ item }}"把当前点击的公司传给js,js通过

const {

select

} = event.currentTarget.dataset;

来接收，然后给item.check,item.showDown,item.showUp赋值，check是用来控制使用人列表的显示和隐藏。showDown和showUp用来控制公司右边的图标变化

3.userChange：遍历公司，判断当前公司被选择，给item.selectUser赋值，selectUser用来回显页面单选框的选择效果。并且给actualUser赋值，把actualUser，useSealCompanyId，和useSealCompany组合成一个对象，塞进useSealCompanyList数组里面。useSealCompanyList数组就是要传给后端代码的参数

4.confirmCompany：点击确定时触发这个事件，一方面用来隐藏弹出框，另一方面在这个方法里对useSealCompanyList做一个去重，以useSealCompanyId为key去重

5.deleteCompany：删除选错的公司