init
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-index-bar": "@vant/weapp/index-bar/index",
|
||||
"van-cell": "@vant/weapp/cell/index",
|
||||
"van-index-anchor": "@vant/weapp/index-anchor/index"
|
||||
},
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "通讯录"
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/* pages/addressBook/addressBook.wxss */
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// z-index: 2;
|
||||
>.search {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E6EAF2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
// padding: 50px 0 120px;
|
||||
padding-bottom: 120px;
|
||||
min-height: calc(100vh - 170px);
|
||||
background: #EFF1F4;
|
||||
position: relative;
|
||||
.van-index-anchor--active {
|
||||
font-weight: bold;
|
||||
// top: 50px !important;
|
||||
}
|
||||
.item {
|
||||
padding: 24rpx 24rpx 0;
|
||||
background: #fff;
|
||||
.row {
|
||||
margin-bottom: 8px;
|
||||
color: #2E3A4F;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tel {
|
||||
font-size: 15px;
|
||||
}
|
||||
.label {
|
||||
color: #858CA0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.val {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: #E6EAF2;
|
||||
}
|
||||
}
|
||||
.total {
|
||||
padding: 6px 0;
|
||||
color: #858CA0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
// pages/addressBook/addressBook.ts
|
||||
import { getAction, postAction } from '../../api/base';
|
||||
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
name: '',
|
||||
indexList: [] as any,
|
||||
dataList: [] as any,
|
||||
scrollTop: 0,
|
||||
total: 0
|
||||
},
|
||||
onPageScroll(e: any) {
|
||||
this.setData({
|
||||
scrollTop: e.scrollTop
|
||||
});
|
||||
},
|
||||
searchName(e: any) {
|
||||
console.log(e);
|
||||
this.getList({
|
||||
userName: e.detail.value
|
||||
});
|
||||
},
|
||||
getList(parms: any) {
|
||||
console.log(parms);
|
||||
if (parms.userName == '') {
|
||||
parms = {};
|
||||
}
|
||||
wx.showLoading({
|
||||
title: '数据加载中'
|
||||
});
|
||||
getAction('api/externalAddressBook/list', parms).then((res: any) => {
|
||||
wx.hideLoading();
|
||||
if (res.code == 200) {
|
||||
let indexList = [] as any;
|
||||
let dataList = [] as any;
|
||||
let total = 0;
|
||||
for (let key in res.result) {
|
||||
console.log();
|
||||
indexList.push(key);
|
||||
dataList.push({
|
||||
key: key,
|
||||
list: res.result[key]
|
||||
});
|
||||
total += res.result[key].length;
|
||||
}
|
||||
// res.result.forEach((key, item) => {
|
||||
// console.log(item)
|
||||
// indexList.push(key)
|
||||
// dataList.push({
|
||||
// key: key,
|
||||
// list: res.result[key]
|
||||
// })
|
||||
// });
|
||||
this.setData({
|
||||
indexList: indexList,
|
||||
dataList: dataList,
|
||||
total: total
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: res.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 2
|
||||
});
|
||||
}
|
||||
this.getList({});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
this.setData({
|
||||
name: ''
|
||||
});
|
||||
this.getList({});
|
||||
|
||||
//停止下拉刷新
|
||||
wx.stopPullDownRefresh();
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {}
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--pages/addressBook/addressBook.wxml-->
|
||||
<view class="search-box">
|
||||
<view class="search" catchtap="toSearch">
|
||||
<view class="icon">
|
||||
<image src="../../images/icon_search.png" mode=""/>
|
||||
</view>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索名称"
|
||||
placeholder-style="color:#949CB5; font-size: 28rpx; font-weight: 400;"
|
||||
value="{{name}}"
|
||||
bindinput="searchName" />
|
||||
</view>
|
||||
</view>
|
||||
<van-index-bar highlight-color="#3679FC" scroll-top="{{scrollTop}}" sticky index-list="{{indexList}}">
|
||||
<view class="list">
|
||||
<view wx:for="{{dataList}}" wx:key="index">
|
||||
<van-index-anchor index="{{item.key}}" ></van-index-anchor>
|
||||
<view class="item" wx:for="{{item.list}}" wx:key="index" wx:for-item="sItem" wx:for-index="sIdx">
|
||||
<view class="row">
|
||||
<view class="title">{{sItem.userName}}</view>
|
||||
<view class="val">{{sItem.phone}}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="label">所属公司</view>
|
||||
<view class="val">{{sItem.company}}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="label">职位</view>
|
||||
<view class="val">{{sItem.position}}</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total">{{total}}个朋友</view>
|
||||
</view>
|
||||
</van-index-bar>
|
||||
Reference in New Issue
Block a user