选择联系人

select/contacts/index.js

@@ -0,0 +1,111 @@
+const _Http = getApp().globalData.http;
+
+Page({
+    data: {
+        loading: true,
+        params: {}, //请求体
+        result: [], //返回结果
+        radio: false, //是否为单选
+        idname: "userid", //idkey
+        showName: "name"
+    },
+    onLoad(options) {
+        if (options.params) {
+            let params = JSON.parse(options.params);
+            if (!params.content.pageNumber || !params.content.pageTotal) {
+                params.content.pageNumber = 1;
+                params.content.pageTotal = 1;
+            }
+            this.setData({
+                params
+            });
+        }
+        this.setData({
+            radio: options.radio ? true : false,
+            idname: options.idname || this.data.idname,
+            showName: options.showName || this.data.showName,
+        });
+        this.getList()
+    },
+    getList(init = false) {
+        //init 用于初始化分页
+        if (init.detail != undefined) init = init.detail;
+        let params = this.data.params;
+        if (init) params.content.pageNumber = 1;
+        if (params.content.pageNumber > params.content.pageTotal) return;
+        _Http.basic(params).then(res => {
+            console.log("联系人列表", res)
+            this.selectComponent('#ListBox').RefreshToComplete();
+            if (res.msg != '成功') return wx.showToast({
+                title: res.msg,
+                icon: "none"
+            })
+            this.setData({
+                'params.content.pageNumber': res.pageNumber + 1,
+                'params.content.pageTotal': res.pageTotal,
+                'params.content.total': res.total,
+                list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data),
+                loading: false
+            })
+        })
+    },
+    /* 选中 */
+    changeResult(e) {
+        let {
+            id
+        } = e.currentTarget.dataset, result = this.data.result;
+        if (this.data.radio) {
+            result = [id];
+        } else {
+            result.some(v => v == id) ? result = result.filter(v => v != id) : result.push(id)
+        }
+        this.setData({
+            result
+        });
+        if (this.data.radio) this.submit();
+    },
+    /* 提交 */
+    submit() {
+        let result = this.data.result,
+            obj = this.data.radio ? {
+                id: result,
+                item: this.data.list.find(value => value[this.data.idname] == result),
+                value: [this.data.list.find(value => value[this.data.idname] == result)[this.data.showName], result]
+            } : {
+                result,
+                list: result.map(v => this.data.list.find(value => value[this.data.idname] == v)),
+                value: [result.map(v => {
+                    let data = this.data.list.find(value => value[this.data.idname] == v);
+                    return data ? data[this.data.showName] : ""
+                }), result]
+            }
+        getApp().globalData.handleSelect && getApp().globalData.handleSelect(obj)
+    },
+    /* 开始搜索 */
+    startSearch({
+        detail
+    }) {
+        let condition = this.data.content ? this.data.content.where.condition : this.data.params.content.where.condition;
+        if (detail == condition) return;
+        this.setData({
+            'content.where.condition': detail,
+            'params.content.where.condition': detail
+        });
+        this.getList(true);
+    },
+    /* 取消搜索 */
+    onClear() {
+        this.setData({
+            'content.where.condition': "",
+            'params.content.where.condition': ""
+        });
+        this.getList(true);
+    },
+    onReady() {
+        this.selectComponent("#ListBox").setHeight(".total", this);
+    },
+    onUnload() {
+        //回收数据
+        getApp().globalData.handleSelect = null;
+    }
+})

select/contacts/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+        "van-tag": "@vant/weapp/tag/index"
+    }
+}

select/contacts/index.scss

@@ -0,0 +1,93 @@
+page {
+    height: 100vh;
+    overflow: hidden;
+}
+
+.total {
+    height: 60rpx;
+    line-height: 60rpx;
+    font-size: 24rpx;
+    font-family: PingFang SC-Regular, PingFang SC;
+    color: #666666;
+    padding-left: 30rpx;
+}
+
+.user-box {
+    width: 100vw;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 20rpx 0 0 30rpx;
+
+    .user {
+        display: flex;
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 20rpx;
+
+        .profile {
+            height: 84rpx;
+            width: 84rpx;
+            text-align: center;
+            overflow: hidden;
+            border-radius: 50%;
+            flex-shrink: 0;
+            margin-right: 20rpx;
+
+            .text {
+                line-height: 84rpx;
+                text-align: center;
+                background-color: #3874F6;
+                color: #fff;
+            }
+        }
+
+        .content {
+            flex: 1;
+            height: 84rpx;
+            width: 0;
+
+            .name {
+                font-size: 28rpx;
+                margin-bottom: 4rpx;
+            }
+        }
+
+        .set {
+            display: flex;
+            align-items: center;
+            flex-shrink: 0;
+            height: 84rpxrpx;
+            margin-right: 30rpx;
+        }
+    }
+}
+
+.footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 30rpx;
+    position: fixed;
+    width: 100vw;
+    height: 130rpx;
+    background: #FFFFFF;
+    box-shadow: 0px -4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
+    bottom: 0;
+    box-sizing: border-box;
+
+    .count {
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #333333;
+    }
+
+    .but {
+        width: 156rpx;
+        height: 90rpx;
+        background: #3874F6;
+        border-radius: 8rpx;
+        font-size: 28rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+    }
+}

select/contacts/index.wxml

@@ -0,0 +1,50 @@
+<import src="index.skeleton.wxml" />
+<template is="skeleton" wx:if="{{loading}}" />
+
+<van-search class="search" value="{{ params.content.where.condition }}" shape="round" placeholder="请输入搜索关键词" bind:search='startSearch' bind:clear='onClear' />
+<view class="total">共{{params.content.total}}个</view>
+
+<Yl_ListBox id='ListBox' bind:getlist='getList'>
+    <view hover-class="navigator-hover" class="user-box" wx:for="{{list}}" wx:key="index" data-id="{{item[idname]}}" bindtap="changeResult">
+        <view class="user">
+            <view class="profile">
+                <van-image wx:if="{{item.headpic}}" width="42" height="42" round src="{{item.headpic}}" lazy-load />
+                <view wx:else class="text">
+                    {{item[showName][0]}}
+                </view>
+            </view>
+            <view class="content">
+                <view class="name line-1">
+                    {{item[showName]}}
+                </view>
+                <view class="tags">
+                    <van-tag wx:if="{{item.position}}" style="margin-right: 8rpx;" type="primary">{{item.position}}</van-tag>
+                    <van-tag type="primary">{{item.depname}}</van-tag>
+                </view>
+            </view>
+            <view class="set" wx:if="{{!radio}}">
+                <van-checkbox custom-class='checkbox' icon-size='18' value='{{handle.isCheck(item[idname],result)}}' name="{{item[idname]}}" />
+            </view>
+        </view>
+    </view>
+    <view wx:if="{{!radio}}" style="height: 130rpx;" />
+    <Yl_Empty wx:if="{{list.length==0}}" />
+</Yl_ListBox>
+
+<block wx:if="{{!radio}}">
+    <view class="footer">
+        <view class="count">
+            已选：{{result.length}}
+        </view>
+        <van-button custom-class='but' disabled='{{result.length==0}}' bind:click="submit">确定</van-button>
+    </view>
+    <wxs module="handle">
+        module.exports = {
+            isCheck: function (id, list) {
+                return list.some(function (v) {
+                    return v == id
+                });
+            },
+        }
+    </wxs>
+</block>