底部弹出多选组件

pages/teams/modules/Pop-upMulti-select.js

@@ -0,0 +1,72 @@
+// pages/teams/modules/Pop-upMulti-select.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        showText: {
+            type: String,
+            value: ""
+        },
+        title: {
+            type: String,
+            value: "标题"
+        },
+        list: {
+            type: Array,
+            value: []
+        },
+        result: {
+            type: Array,
+            value: []
+        },
+        getResult: {
+            type: Function
+        }
+    },
+    options: {
+        addGlobalClass: true
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        show: false
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        openSelete() {
+            this.setData({
+                show: true
+            })
+        },
+        closeSelete() {
+            this.setData({
+                show: false
+            })
+        },
+        onChange(event) {
+            this.setData({
+                result: event.detail,
+            });
+        },
+        confirm() {
+            let obj = {
+                roleids: this.data.result,
+                rolenames: []
+            };
+            this.data.list.forEach(v => (this.data.result.some(value => value == v.roleid)) ? obj.rolenames.push(v.rolename) : '');
+            this.closeSelete();
+            this.triggerEvent("getResult", obj)
+        },
+        toggle(event) {
+            const {
+                index
+            } = event.currentTarget.dataset;
+            const checkbox = this.selectComponent(`.checkboxes-${index}`);
+            checkbox.toggle();
+        },
+    }
+})

pages/teams/modules/Pop-upMulti-select.json

@@ -0,0 +1,10 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-divider": "@vant/weapp/divider/index",
+        "van-checkbox": "@vant/weapp/checkbox/index",
+        "van-checkbox-group": "@vant/weapp/checkbox-group/index",
+        "van-cell": "@vant/weapp/cell/index",
+        "van-cell-group": "@vant/weapp/cell-group/index"
+    }
+}

pages/teams/modules/Pop-upMulti-select.scss

@@ -0,0 +1,43 @@
+.box {
+    width: 488rpx;
+    height: 100%;
+    view {
+        width: 100%;
+    }
+    text {
+        color: #cbcbcc;
+    }
+}
+
+.value-class {
+    flex: none !important;
+}
+
+.title-class {
+    text-align: left;
+}
+
+.scroll-view {
+    height: 588rpx;
+    width: 750rpx;
+    overflow: hidden;
+
+
+}
+
+.but-box {
+    width: 750rpx;
+    padding: 16rpx 0;
+    text-align: center;
+
+    .but {
+        width: 500rpx !important;
+        height: 90rpx !important;
+        background: #3874F6 !important;
+        border-radius: 45rpx !important;
+        font-size: 28rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+    }
+}

pages/teams/modules/Pop-upMulti-select.wxml

@@ -0,0 +1,20 @@
+<view class="box" bindtap="openSelete">
+    <view class="line-1" wx:if="{{showText}}">{{showText}}</view>
+    <text wx:else>请选择</text>
+</view>
+<van-action-sheet show="{{ show }}" title="{{title}}" safe-area-inset-bottom='{{false}}' bind:close='closeSelete'>
+    <van-divider customStyle="margin-top:-5rpx; margin-bottom:-0rpx;" />
+    <scroll-view class="scroll-view" scroll-y>
+        <My_empty sonMarTop='70' marTop="220rpx" wx:if="{{list.length==0}}" text='暂无角色' />
+        <van-checkbox-group value="{{ result }}" bind:change="onChange">
+            <van-cell-group border='{{false}}'>
+                <van-cell border='{{false}}' wx:for="{{ list }}" title-class='title-class line-1' wx:key="index" title="{{ item.rolename }}" clickable data-index="{{ index }}" value-class='value-class' bind:click="toggle">
+                    <van-checkbox custom-class='checkbox' catch:tap="noop" class="checkboxes-{{ index }}" name="{{ item.roleid }}" />
+                </van-cell>
+            </van-cell-group>
+        </van-checkbox-group>
+    </scroll-view>
+    <view class='but-box'>
+        <van-button custom-class='but' bindtap="confirm">确定</van-button>
+    </view>
+</van-action-sheet>